Add login and register

app/composables/useValidation.ts

@@ -0,0 +1,74 @@
+export type DateInputDate = Date | string | number;
+export type DateInputRange<T> = {
+  start?: T | null;
+  end?: T | null;
+};
+export type DateInputModelValue =
+  | DateInputDate
+  | DateInputDate[]
+  | DateInputRange<DateInputDate>
+  | undefined
+  | null
+  | string;
+
+export default function () {
+  const { t } = useI18n();
+  return {
+    required(name: string) {
+      return (value: string) =>
+        (value && value.length > 0) || t('validation.required', { name });
+    },
+    max(name: string, max = 64) {
+      return (value: string) =>
+        (value && value.length <= max) ||
+        t('validation.max_length', { name, max });
+    },
+    min(name: string, min = 8) {
+      return (value: string) =>
+        (value && value.length >= min) ||
+        t('validation.min_length', { name, min });
+    },
+    dateRangeIsPast() {
+      return (model: DateInputModelValue) =>
+        (model && isRangeModel(model) && model.start && model.end
+          ? new Date(model.start).getTime() < Date.now() &&
+            new Date(model.end).getTime() < Date.now()
+          : true) || t('validation.date_range_past');
+    },
+    dateIsPast() {
+      return (model: DateInputModelValue) =>
+        (model &&
+          isDateModel(model) &&
+          new Date(model).getTime() < Date.now()) ||
+        t('validation.date_range_past');
+    },
+    numeric(name: string) {
+      return (value: string) =>
+        (value &&
+          !isNaN(parseFloat(value)) &&
+          value?.split(' ').length === 1) ||
+        t('validation.numeric', { name });
+    },
+    numericOptional(name: string) {
+      return (value: string | undefined) =>
+        !value ||
+        (!isNaN(parseFloat(value)) && value?.split(' ').length === 1) ||
+        t('validation.numeric', { name });
+    }
+  } as const;
+}
+
+function isRangeModel(
+  model: DateInputModelValue
+): model is DateInputRange<DateInputDate> {
+  return (
+    !!model &&
+    typeof model === 'object' &&
+    (model as DateInputRange<any>)?.end !== undefined &&
+    (model as DateInputRange<any>)?.start !== undefined
+  );
+}
+
+function isDateModel(model: DateInputModelValue): model is DateInputDate {
+  return !!model && !isNaN(new Date(model as any).getTime());
+}

app/lang/de.json

@@ -6,7 +6,19 @@
   },
   "auth": {
     "login": "Anmelden",
-    "logout": "Abmelden"
+    "login_instead": "Stattdessen anmelden",
+    "register": "Registrieren",
+    "register_instead": "Stattdessen registrieren",
+    "logout": "Abmelden",
+    "email": "E-Mail",
+    "password": "Passwort",
+    "name": "Name",
+    "accept": "Akzeptieren",
+    "showPassword": "Passwort einblenden",
+    "hidePassword": "Passwort ausblenden",
+    "reset": "Zurücksetzen",
+    "conflict": "Diese Email wird bereits verwendet, bitte verwende eine andere!",
+    "invalid": "Email oder Passwort sind falsch, bitte versuche es erneut!"
   },
   "layouts": {
     "title": "{title} {'|'} PicHunt",
@@ -20,6 +32,18 @@
     "default": "Unbekannter Fehler",
     "team_not_found": "Team nicht gefunden oder Passwort inkorrekt!"
   },
+  "validation": {
+    "max_length": "{name} darf maximal {max} Zeichen lang sein",
+    "min_length": "{name} muss mindestens {min} Zeichen lang sein",
+    "numeric": "{name} muss numerisch sein",
+    "min_array": "Du brauchst mindestens {min} {name}",
+    "required": "{name} ist erforderlich",
+    "invalid": "Ungültiges Format",
+    "taken": "Bereits vergeben",
+    "date_range_past": "Zeitraum darf nicht in der Zukunft liegen",
+    "date_past": "Zeit darf nicht in der Zukunft liegen",
+    "confirm": "Sind Sie sich sicher?"
+  },
   "vuestic": {
     "search": "Search",
     "noOptions": "Items not found",

app/lang/en.json

@@ -6,7 +6,19 @@
   },
   "auth": {
     "login": "Login",
-    "logout": "Logout"
+    "login_instead": "Login instead",
+    "register": "Register",
+    "register_instead": "Register instead",
+    "logout": "Logout",
+    "email": "Email",
+    "password": "Password",
+    "name": "Name",
+    "accept": "Accept",
+    "showPassword": "Show password",
+    "hidePassword": "Hide password",
+    "reset": "Reset",
+    "conflict": "This e-mail is already in use, please use a different one!",
+    "invalid": "E-mail or password is invalid, please try again!"
   },
   "layouts": {
     "title": "{title} {'|'} PicHunt",
@@ -20,6 +32,18 @@
     "default": "Unkown error",
     "team_not_found": "Team not found or password incorrect!"
   },
+  "validation": {
+    "max_length": "{name} has to be max {max} chars long",
+    "min_length": "{name} has to at least {min} chars long",
+    "numeric": "{name} need to be numeric",
+    "min_array": "You need at least {min} {name}",
+    "required": "{name} is required",
+    "invalid": "Invalid format",
+    "taken": "Already taken",
+    "date_range_past": "Date range cannot be in the future",
+    "date_past": "Date cannot be in the future",
+    "confirm": "Are you sure?"
+  },
   "vuestic": {
     "search": "Search",
     "noOptions": "Items not found",

app/pages/login.vue

@@ -1,37 +1,130 @@
 <script setup lang="ts">
-import { useRouter } from '#app';
+import { useForm } from 'vuestic-ui';
 
 definePageMeta({
   middleware: ['guest']
 });
-
 const { fetch } = useUserSession();
 const router = useRouter();
-const route = useRoute();
-// TODO: remove this lol
-const { data } = await useFetch('/api/auth/test-list');
+const localePath = useLocalePath();
+const { isValid, resetValidation, validate } = useForm('formRef');
+const validation = useValidation();
 
-async function login(id: number) {
-  await $fetch(`/api/auth/test?id=${id}`);
+const form = reactive({
+  email: '',
+  password: ''
+});
 
-  await fetch();
+const error = ref('');
 
-  await router.push(
-    (route.query.to
-      ? typeof route.query.to === 'string'
-        ? route.query.to
-        : route.query.to[0]
-      : '/') || '/'
-  );
+async function submit() {
+  if (!validate()) {
+    return;
+  }
+  error.value = '';
+  try {
+    await $fetch('/api/auth/login', {
+      method: 'POST',
+      body: form
+    });
+    await fetch();
+    await router.push(localePath('/'));
+    return;
+  } catch (e) {
+    if (e instanceof Error && 'statusCode' in e && e.statusCode === 404) {
+      error.value = 'auth.invalid';
+    } else {
+      error.value = parseError(e);
+    }
+  }
+  form.password = '';
+  resetValidation();
 }
 </script>
 
 <template>
-  <h1>login</h1>
-  <div class="flex flex-col gap-2" v-if="data">
-    <VaButton v-for="user in data" :key="user.id" @click="login(user.id)"
-      >Login as "{{ user.name }}" {{ user.email }}</VaButton
+  <h1 class="mb-4 text-center text-3xl">{{ $t('auth.login') }}</h1>
+  <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5">
+    <VaForm
+      ref="formRef"
+      tag="form"
+      class="flex flex-col items-baseline gap-6 sm:col-start-2 lg:col-start-3"
+      @submit.prevent="submit"
     >
+      <VaInput
+        v-model="form.email"
+        class="w-full"
+        type="email"
+        :label="$t('auth.email')"
+        autocomplete="email"
+        :rules="[validation.required($t('auth.email'))]"
+        :placeholder="$t('auth.email')"
+        required
+      >
+        <template #prependInner>
+          <VaIcon name="mail_outline" color="secondary" />
+        </template>
+      </VaInput>
+      <VaValue v-slot="isPasswordVisible" :default-value="false">
+        <VaInput
+          v-model="form.password"
+          class="w-full"
+          :type="isPasswordVisible.value ? 'text' : 'password'"
+          :label="$t('auth.password')"
+          :placeholder="$t('auth.password')"
+          :rules="[
+            validation.required($t('auth.password')),
+            validation.min($t('auth.password'), 8)
+          ]"
+          autocomplete="current-password"
+          :minlength="8"
+          required
+        >
+          <template #prependInner>
+            <VaIcon name="key" color="secondary" />
+          </template>
+
+          <template #appendInner>
+            <VaButton
+              v-if="form.password"
+              preset="plain"
+              :title="
+                $t(
+                  isPasswordVisible.value
+                    ? 'auth.hidePassword'
+                    : 'auth.showPassword'
+                )
+              "
+              @click="isPasswordVisible.value = !isPasswordVisible.value"
+            >
+              <VaIcon
+                :name="
+                  isPasswordVisible.value ? 'visibility_off' : 'visibility'
+                "
+                color="primary"
+              />
+            </VaButton>
+          </template>
+        </VaInput>
+      </VaValue>
+      <VaAlert
+        v-if="error.length > 0"
+        color="danger"
+        class="w-full text-center"
+        >{{ $t(error) }}</VaAlert
+      >
+      <VaButtonGroup>
+        <VaButton color="success" type="submit" :disabled="!isValid">{{
+          $t('auth.login')
+        }}</VaButton>
+        <VaButton
+          :to="$localePath('/register')"
+          border-color="primary"
+          preset="secondary"
+          >{{ $t('auth.register_instead') }}</VaButton
+        >
+      </VaButtonGroup>
+    </VaForm>
   </div>
 </template>
 

app/pages/register.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { getRandomName } from '#shared/utils/name';
+import { useForm } from 'vuestic-ui';
+
+definePageMeta({
+  middleware: ['guest']
+});
+const { fetch } = useUserSession();
+const router = useRouter();
+const localePath = useLocalePath();
+const { isValid, resetValidation, validate } = useForm('formRef');
+const validation = useValidation();
+
+const form = reactive({
+  name: getRandomName(),
+  email: '',
+  password: ''
+});
+
+const error = ref('');
+
+async function submit() {
+  if (!validate()) {
+    return;
+  }
+  error.value = '';
+  try {
+    await $fetch('/api/auth/register', {
+      method: 'POST',
+      body: form
+    });
+    await fetch();
+    await router.push(localePath('/'));
+    return;
+  } catch (e) {
+    if (e instanceof Error && 'statusCode' in e && e.statusCode === 409) {
+      error.value = 'auth.conflict';
+    } else {
+      error.value = parseError(e);
+    }
+  }
+  form.password = '';
+  resetValidation();
+}
+</script>
+
+<template>
+  <h1 class="mb-4 text-center text-3xl">{{ $t('auth.login') }}</h1>
+  <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5">
+    <VaForm
+      ref="formRef"
+      tag="form"
+      class="flex flex-col items-baseline gap-6 sm:col-start-2 lg:col-start-3"
+      @submit.prevent="submit"
+    >
+      <VaInput
+        v-model="form.name"
+        class="w-full"
+        type="text"
+        autocomplete="name"
+        clearable
+        clear-value=""
+        :label="$t('auth.name')"
+        :placeholder="$t('auth.name')"
+        max-length="64"
+        min-length="5"
+        :rules="[
+          validation.required($t('auth.name')),
+          validation.max($t('auth.name'), 64),
+          validation.min($t('auth.name'), 5)
+        ]"
+        required
+      >
+        <template #prependInner>
+          <VaIcon name="person" color="secondary" />
+        </template>
+        <template #appendInner>
+          <VaButton
+            icon="refresh"
+            preset="plain"
+            @click="form.name = getRandomName()"
+          />
+        </template>
+      </VaInput>
+      <VaInput
+        v-model="form.email"
+        class="w-full"
+        type="email"
+        :label="$t('auth.email')"
+        autocomplete="email"
+        :rules="[validation.required($t('auth.email'))]"
+        :placeholder="$t('auth.email')"
+        required
+      >
+        <template #prependInner>
+          <VaIcon name="mail_outline" color="secondary" />
+        </template>
+      </VaInput>
+      <VaValue v-slot="isPasswordVisible" :default-value="false">
+        <VaInput
+          v-model="form.password"
+          class="w-full"
+          :type="isPasswordVisible.value ? 'text' : 'password'"
+          :label="$t('auth.password')"
+          :placeholder="$t('auth.password')"
+          :rules="[
+            validation.required($t('auth.password')),
+            validation.min($t('auth.password'), 8)
+          ]"
+          autocomplete="current-password"
+          :minlength="8"
+          required
+        >
+          <template #prependInner>
+            <VaIcon name="key" color="secondary" />
+          </template>
+
+          <template #appendInner>
+            <VaButton
+              v-if="form.password"
+              preset="plain"
+              :title="
+                $t(
+                  isPasswordVisible.value
+                    ? 'auth.hidePassword'
+                    : 'auth.showPassword'
+                )
+              "
+              @click="isPasswordVisible.value = !isPasswordVisible.value"
+            >
+              <VaIcon
+                :name="
+                  isPasswordVisible.value ? 'visibility_off' : 'visibility'
+                "
+                color="primary"
+              />
+            </VaButton>
+          </template>
+        </VaInput>
+      </VaValue>
+      <VaAlert
+        v-if="error.length > 0"
+        color="danger"
+        class="w-full text-center"
+        >{{ $t(error) }}</VaAlert
+      >
+
+      <VaButtonGroup>
+        <VaButton color="success" type="submit" :disabled="!isValid">{{
+          $t('auth.register')
+        }}</VaButton>
+        <VaButton
+          :to="$localePath('/login')"
+          border-color="primary"
+          preset="secondary"
+          >{{ $t('auth.login_instead') }}</VaButton
+        >
+      </VaButtonGroup>
+    </VaForm>
+  </div>
+</template>
+
+<style scoped></style>