feat(account): login with username or email

src/app/components/form/account/FormAccountSignIn.vue

@@ -7,11 +7,10 @@
       :submit-name="t('signIn')"
       @submit.prevent="submit"
     >
-      <FormInputEmailAddress
-        :form-input="v$.username"
-        @input="form.username = $event"
+      <FormInputEmailUsername
+        :form-input="v$.usernameOrEmail"
+        @input="form.usernameOrEmail = $event"
       />
-      <!-- TODO: allow for username too -->
       <FormInputPassword
         :form-input="v$.password"
         @input="form.password = $event"
@@ -58,7 +57,7 @@ const localePath = useLocalePath()
 const form = reactive({
   captcha: ref<string>(),
   password: ref<string>(),
-  username: ref<string>(),
+  usernameOrEmail: ref<string>(),
 })
 const isFormSent = ref(false)
 const modelError = defineModel<Error>('error')
@@ -73,7 +72,7 @@ const submit = async () => {
 
   const result = await authenticateMutation.executeMutation(
     {
-      username: form.username || '',
+      username: form.usernameOrEmail || '',
       password: form.password || '',
     },
     {
@@ -105,7 +104,7 @@ const submit = async () => {
 // vuelidate
 const rules = {
   captcha: VALIDATION_CAPTCHA(),
-  username: VALIDATION_EMAIL_ADDRESS({ isRequired: true }),
+  usernameOrEmail: VALIDATION_USERNAME_OR_EMAIL({ isRequired: true }),
   password: VALIDATION_PASSWORD(),
 }
 const v$ = useVuelidate(rules, form)

src/app/components/form/input/FormInputEmailUsername.vue

@@ -0,0 +1,96 @@
+<template>
+  <FormInput
+    v-if="formInput"
+    :is-optional="isOptional"
+    :id-label="`input-${id}`"
+    :title="title || t('usernameOrEmail')"
+    :type="inputType"
+    :value="formInput"
+    @input="handleInput"
+  >
+    <template #stateError>
+      <FormInputStateError
+        :form-input="formInput"
+        validation-property="lengthMax"
+      >
+        {{ t('globalValidationLength') }}
+      </FormInputStateError>
+      <FormInputStateError
+        :form-input="formInput"
+        validation-property="required"
+      >
+        {{ t('globalValidationRequired') }}
+      </FormInputStateError>
+      <FormInputStateError :form-input="formInput" validation-property="format">
+        {{ t('globalValidationFormat') }}
+      </FormInputStateError>
+    </template>
+    <template #stateWarning>
+      <FormInputStateWarning
+        v-if="
+          formInput.$dirty &&
+          formInput.$model &&
+          ((formInput.$model.includes('@') &&
+            !isValidEmail(formInput.$model)) ||
+            (!formInput.$model.includes('@') &&
+              !isValidUsername(formInput.$model)))
+        "
+      >
+        {{ t('globalValidationCheck') }}
+      </FormInputStateWarning>
+    </template>
+  </FormInput>
+</template>
+
+<script setup lang="ts">
+import type { BaseValidation } from '@vuelidate/core'
+import { email } from '@vuelidate/validators'
+import { VALIDATION_FORMAT_SLUG } from '~/utils/validation'
+
+const {
+  formInput,
+  id = 'username-or-email',
+  isOptional,
+  title,
+} = defineProps<{
+  formInput: BaseValidation<string | undefined>
+  id?: string
+  isOptional?: boolean
+  title?: string
+}>()
+
+const emit = defineEmits<{
+  input: [event: string]
+}>()
+
+const { t } = useI18n()
+
+const isEmailLike = computed(() => {
+  if (!formInput.$model) return false
+  return String(formInput.$model).includes('@')
+})
+
+const inputType = computed(() => {
+  return isEmailLike.value ? 'email' : 'text'
+})
+
+const isValidEmail = (value: string) => {
+  return email.$validator(value, undefined, undefined)
+}
+
+const isValidUsername = (value: string) => {
+  return VALIDATION_FORMAT_SLUG(value)
+}
+
+const handleInput = (value: string) => {
+  emit('input', value)
+  formInput.$touch()
+}
+</script>
+
+<i18n lang="yaml">
+de:
+  usernameOrEmail: Benutzername oder E-Mail-Adresse
+en:
+  usernameOrEmail: Username or Email address
+</i18n>

src/app/pages/account/verify/create.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="flex grow flex-col">
+    <LayoutTopBar>
+      {{ title }}
+    </LayoutTopBar>
+    <div class="flex grow flex-col justify-center gap-8 p-8">
+      <p class="font-bold">
+        {{ t('checkEmail') }}
+      </p>
+      <ButtonColored
+        :aria-label="t('waiting')"
+        :variant="buttonVariant"
+        class="w-full rounded-lg px-4"
+        :to="
+          localePath({
+            path: '/session/create',
+          })
+        "
+      >
+        {{ buttonText }}
+      </ButtonColored>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'plain',
+})
+
+const localePath = useLocalePath()
+const { t } = useI18n()
+const title = t('title')
+const buttonText = ref(t('waiting'))
+const buttonVariant = ref<'secondary' | 'primary'>('secondary')
+
+onMounted(() => {
+  window.addEventListener('focus', () => {
+    buttonText.value = t('signIn')
+    buttonVariant.value = 'primary'
+  })
+})
+</script>
+
+<i18n lang="yaml">
+de:
+  checkEmail: Überprüfe deine E-Mails für einen Bestätigungslink.
+  signIn: Anmelden
+  title: Verifizierung
+  waiting: Warten auf dich...
+
+en:
+  checkEmail: Check your email for a verification link.
+  signIn: Sign In
+  title: Email Verification Required
+  waiting: Waiting for you..
+</i18n>

src/app/utils/validation.ts

@@ -237,3 +237,29 @@ export const validateUsername = (invert?: boolean) => async (value: string) => {
     ? !result.data?.accountByUsername
     : !!result.data?.accountByUsername
 }
+
+export const VALIDATION_USERNAME_OR_EMAIL = ({
+  isRequired,
+}: {
+  isRequired?: boolean
+}) => ({
+  format: (value: string) => {
+    if (!value) return true
+    if (value.includes('@')) {
+      return email.$validator(value, undefined, undefined)
+    } else {
+      return VALIDATION_FORMAT_SLUG(value)
+    }
+  },
+  lengthMax: {
+    $validator: (value: string) => {
+      if (!value) return true
+      if (value.includes('@')) {
+        return value.length <= VALIDATION_EMAIL_ADDRESS_LENGTH_MAXIMUM
+      } else {
+        return value.length <= VALIDATION_USERNAME_LENGTH_MAXIMUM
+      }
+    },
+  },
+  ...(isRequired ? { required } : {}),
+})

tests/e2e/specs/server/sitemap.spec.ts-snapshots/sitemap-content-de-Mobile-Chrome-linux.xml

@@ -90,6 +90,12 @@
         <xhtml:link rel="alternate" hreflang="en" href="http://localhost:3001/support/contact" />
         <xhtml:link rel="alternate" hreflang="x-default" href="http://localhost:3001/support/contact" />
     </url>
+    <url>
+        <loc>http://localhost:3001/de/account/verify/create</loc>
+        <xhtml:link rel="alternate" hreflang="de" href="http://localhost:3001/de/account/verify/create" />
+        <xhtml:link rel="alternate" hreflang="en" href="http://localhost:3001/account/verify/create" />
+        <xhtml:link rel="alternate" hreflang="x-default" href="http://localhost:3001/account/verify/create" />
+    </url>
     <url>
         <loc>http://localhost:3001/de/docs/legal/attributions</loc>
         <xhtml:link rel="alternate" hreflang="de" href="http://localhost:3001/de/docs/legal/attributions" />

tests/e2e/specs/server/sitemap.spec.ts-snapshots/sitemap-content-de-Mobile-Safari-linux.xml

@@ -90,6 +90,12 @@
         <xhtml:link rel="alternate" hreflang="en" href="http://localhost:3001/support/contact" />
         <xhtml:link rel="alternate" hreflang="x-default" href="http://localhost:3001/support/contact" />
     </url>
+    <url>
+        <loc>http://localhost:3001/de/account/verify/create</loc>
+        <xhtml:link rel="alternate" hreflang="de" href="http://localhost:3001/de/account/verify/create" />
+        <xhtml:link rel="alternate" hreflang="en" href="http://localhost:3001/account/verify/create" />
+        <xhtml:link rel="alternate" hreflang="x-default" href="http://localhost:3001/account/verify/create" />
+    </url>
     <url>
         <loc>http://localhost:3001/de/docs/legal/attributions</loc>
         <xhtml:link rel="alternate" hreflang="de" href="http://localhost:3001/de/docs/legal/attributions" />

tests/e2e/specs/server/sitemap.spec.ts-snapshots/sitemap-content-de-chromium-linux.xml

@@ -90,6 +90,12 @@
         <xhtml:link rel="alternate" hreflang="en" href="http://localhost:3001/support/contact" />
         <xhtml:link rel="alternate" hreflang="x-default" href="http://localhost:3001/support/contact" />
     </url>
+    <url>
+        <loc>http://localhost:3001/de/account/verify/create</loc>
+        <xhtml:link rel="alternate" hreflang="de" href="http://localhost:3001/de/account/verify/create" />
+        <xhtml:link rel="alternate" hreflang="en" href="http://localhost:3001/account/verify/create" />
+        <xhtml:link rel="alternate" hreflang="x-default" href="http://localhost:3001/account/verify/create" />
+    </url>
     <url>
         <loc>http://localhost:3001/de/docs/legal/attributions</loc>
         <xhtml:link rel="alternate" hreflang="de" href="http://localhost:3001/de/docs/legal/attributions" />

tests/e2e/specs/server/sitemap.spec.ts-snapshots/sitemap-content-en-Mobile-Chrome-linux.xml

@@ -90,6 +90,12 @@
         <xhtml:link rel="alternate" hreflang="en" href="http://localhost:3001/support/contact" />
         <xhtml:link rel="alternate" hreflang="x-default" href="http://localhost:3001/support/contact" />
     </url>
+    <url>
+        <loc>http://localhost:3001/account/verify/create</loc>
+        <xhtml:link rel="alternate" hreflang="de" href="http://localhost:3001/de/account/verify/create" />
+        <xhtml:link rel="alternate" hreflang="en" href="http://localhost:3001/account/verify/create" />
+        <xhtml:link rel="alternate" hreflang="x-default" href="http://localhost:3001/account/verify/create" />
+    </url>
     <url>
         <loc>http://localhost:3001/docs/legal/attributions</loc>
         <xhtml:link rel="alternate" hreflang="de" href="http://localhost:3001/de/docs/legal/attributions" />

tests/e2e/specs/server/sitemap.spec.ts-snapshots/sitemap-content-en-Mobile-Safari-linux.xml

@@ -90,6 +90,12 @@
         <xhtml:link rel="alternate" hreflang="en" href="http://localhost:3001/support/contact" />
         <xhtml:link rel="alternate" hreflang="x-default" href="http://localhost:3001/support/contact" />
     </url>
+    <url>
+        <loc>http://localhost:3001/account/verify/create</loc>
+        <xhtml:link rel="alternate" hreflang="de" href="http://localhost:3001/de/account/verify/create" />
+        <xhtml:link rel="alternate" hreflang="en" href="http://localhost:3001/account/verify/create" />
+        <xhtml:link rel="alternate" hreflang="x-default" href="http://localhost:3001/account/verify/create" />
+    </url>
     <url>
         <loc>http://localhost:3001/docs/legal/attributions</loc>
         <xhtml:link rel="alternate" hreflang="de" href="http://localhost:3001/de/docs/legal/attributions" />

tests/e2e/specs/server/sitemap.spec.ts-snapshots/sitemap-content-en-chromium-linux.xml

@@ -90,6 +90,12 @@
         <xhtml:link rel="alternate" hreflang="en" href="http://localhost:3001/support/contact" />
         <xhtml:link rel="alternate" hreflang="x-default" href="http://localhost:3001/support/contact" />
     </url>
+    <url>
+        <loc>http://localhost:3001/account/verify/create</loc>
+        <xhtml:link rel="alternate" hreflang="de" href="http://localhost:3001/de/account/verify/create" />
+        <xhtml:link rel="alternate" hreflang="en" href="http://localhost:3001/account/verify/create" />
+        <xhtml:link rel="alternate" hreflang="x-default" href="http://localhost:3001/account/verify/create" />
+    </url>
     <url>
         <loc>http://localhost:3001/docs/legal/attributions</loc>
         <xhtml:link rel="alternate" hreflang="de" href="http://localhost:3001/de/docs/legal/attributions" />