Add login and register

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>