feat(account)!: update authentication flow

src/app/components/_/AppLink.vue

@@ -41,7 +41,7 @@ const emit = defineEmits<{
 const classes = computed(() => {
   return [
     'rounded',
-    ...(props.isColored ? ['text-link-dark dark:text-link-bright'] : []),
+    ...(props.isColored ? ['text-accent-strong dark:text-link-bright'] : []),
     ...(props.isDisabled ? ['disabled'] : []),
     ...(props.isUnderlined ? ['underline'] : []),
   ].join(' ')

src/app/components/button/ButtonColored.vue

@@ -3,15 +3,9 @@
     :aria-label="ariaLabel"
     class="justify-center rounded-md px-4 py-2 font-medium"
     :class="
-      [
-        ...(isPrimary
-          ? [
-              'bg-gradient-to-tr from-blue-500 to-blue-600 text-text-bright dark:from-blue-300 dark:to-blue-400 dark:text-text-dark',
-            ]
-          : [
-              'border border-gray-300 text-text-dark hover:bg-black/5 dark:border-gray-600 dark:text-text-bright dark:hover:bg-black/30',
-            ]),
-      ].join(' ')
+      variant === 'primary'
+        ? 'bg-accent-fancy from-blue-500 to-blue-600 text-text-bright hover:bg-accent-strong dark:from-blue-300 dark:to-blue-400 dark:text-text-dark'
+        : 'bg-accent-weak text-accent-strong hover:bg-accent-mid dark:border dark:border-gray-600 dark:bg-inherit dark:text-text-bright dark:hover:bg-black/30'
     "
     :disabled="disabled"
     :to="props.to"
@@ -35,14 +29,15 @@ export interface Props {
   ariaLabel: string
   disabled?: boolean
   isExternal?: boolean
-  isPrimary?: boolean
+  variant?: 'primary' | 'accent'
   to?: RouteLocationRaw
   type?: 'button' | 'reset' | 'submit'
 }
+
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   isExternal: undefined,
-  isPrimary: true,
+  variant: 'primary', // default variant
   to: undefined,
   type: 'button',
 })

src/app/components/button/ButtonConfirm.vue

@@ -0,0 +1,27 @@
+<template>
+  <button
+    :aria-label="ariaLabel"
+    :class="[
+      'w-full justify-center rounded-md px-4 py-2 font-medium transition-colors',
+      disabled
+        ? 'text-faint-mid cursor-not-allowed bg-faint-weak'
+        : 'bg-accent-strong text-text-bright hover:bg-accent-mid dark:bg-accent-strong dark:text-text-dark',
+    ]"
+    :disabled="disabled"
+    :type="type"
+    @click="handleSubmit"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  ariaLabel: string
+  disabled?: boolean
+  type?: 'button' | 'reset' | 'submit'
+  handleSubmit: () => void
+}
+
+defineProps<Props>()
+</script>

src/app/components/footer/Footer.vue

@@ -0,0 +1,33 @@
+<template>
+  <footer class="mt-auto py-8">
+    <div class="mx-auto flex flex-row justify-center gap-x-20">
+      <AppLink :to="localePath('legal-notice')" :is-colored="true">
+        {{ t('terms') }}
+      </AppLink>
+
+      <AppLink :to="localePath('index')" :is-colored="true">
+        {{ t('imprint') }}
+      </AppLink>
+
+      <AppLink :to="localePath('privacy-policy')" :is-colored="true">
+        {{ t('policy') }}
+      </AppLink>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+const localePath = useLocalePath()
+</script>
+
+<i18n lang="yaml">
+de:
+  terms: Bedingungen
+  imprint: Impressum
+  policy: Datenschutzrichtlinie
+en:
+  terms: Terms
+  imprint: Imprint
+  policy: Policy
+</i18n>

src/app/components/form/Form.vue

@@ -12,9 +12,10 @@
     <div class="flex flex-col">
       <div class="flex min-h-0 flex-col gap-6">
         <slot />
-        <div class="flex flex-col items-center justify-between">
+        <div class="flex flex-col justify-between">
           <ButtonColored
             :aria-label="submitName || t('submit')"
+            :is-primary="false"
             :class="{
               'animate-shake': $error,
             }"

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

@@ -1,15 +1,5 @@
 <template>
   <div class="flex flex-col items-center gap-4">
-    <ButtonColored
-      :is-primary="false"
-      :aria-label="t('register')"
-      :to="localePath('session-create')"
-    >
-      {{ t('signIn') }}
-      <template #prefix>
-        <IHeroiconsArrowLeft />
-      </template>
-    </ButtonColored>
     <Form
       :errors="api.errors"
       :errors-pg-ids="{
@@ -20,7 +10,7 @@
       form-class="w-full"
       :is-form-sent="isFormSent"
       :submit-name="t('register')"
-      @submit.prevent="submit"
+      @submit.prevent="handleSubmit"
     >
       <FormInputUsername
         :form-input="v$.username"
@@ -47,45 +37,86 @@
         </FormInputStateInfo>
       </template>
     </Form>
+
+    <AppLink
+      :to="localePath('session-create')"
+      :is-underlined="true"
+      :is-colored="true"
+    >
+      {{ t('alreadyHaveAnAccount') }}
+    </AppLink>
+
+    <!-- Modals -->
+    <ModalPrivacyPolicy
+      v-model="privacyModalOpen"
+      @open-general-terms="openGeneralTerms"
+    />
+
+    <ModalGeneralTerms v-model="generalTermsModalOpen" @accepted="submit" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useVuelidate } from '@vuelidate/core'
+import { useCreateLegalTermAcceptanceMutation } from '~~/gql/documents/mutations/account/accountLegalTermAcceptance'
 import { useAccountRegistrationMutation } from '~~/gql/documents/mutations/account/accountRegistration'
 
 const { locale, t } = useI18n()
 const localePath = useLocalePath()
 const fireAlert = useFireAlert()
 const store = useMaevsiStore()
 
-// api data
+const privacyModalOpen = ref(false)
+const generalTermsModalOpen = ref(false)
+
 const accountRegistrationMutation = useAccountRegistrationMutation()
 const api = getApiData([accountRegistrationMutation])
 
-// data
 const form = reactive({
   captcha: ref<string>(),
   emailAddress: ref<string>(),
   password: ref<string>(),
   username: ref<string>(),
 })
-const isFormSent = ref(false)
 
-// methods
-const submit = async () => {
-  if (!(await isFormValid({ v$, isFormSent }))) return
+const isFormSent = ref(false)
 
+// Methods
+const submit = async (termId: string) => {
   store.turnstileToken = form.captcha
 
-  const result = await accountRegistrationMutation.executeMutation({
+  const accountResult = await accountRegistrationMutation.executeMutation({
     emailAddress: form.emailAddress || '',
     language: locale.value,
     password: form.password || '',
     username: form.username || '',
   })
 
-  if (result.error || !result.data) return
+  if (accountResult.error) {
+    return
+  }
+
+  const accountUuid = accountResult.data?.accountRegistration?.uuid
+  if (!accountUuid) {
+    console.error('No account UUID received')
+    return
+  }
+
+  const legalTermAcceptanceMutation = useCreateLegalTermAcceptanceMutation()
+
+  const acceptanceResult = await legalTermAcceptanceMutation.executeMutation({
+    input: {
+      legalTermAcceptance: {
+        accountId: accountUuid,
+        legalTermId: termId,
+      },
+    },
+  })
+
+  if (acceptanceResult.error) {
+    console.error('Legal term acceptance error:', acceptanceResult.error)
+    return
+  }
 
   await fireAlert({
     level: 'success',
@@ -94,6 +125,16 @@ const submit = async () => {
   })
 }
 
+const handleSubmit = async () => {
+  if (!(await isFormValid({ v$, isFormSent }))) return
+
+  privacyModalOpen.value = true
+}
+
+const openGeneralTerms = () => {
+  generalTermsModalOpen.value = true
+}
+
 // vuelidate
 const rules = {
   captcha: VALIDATION_CAPTCHA(),
@@ -104,6 +145,7 @@ const rules = {
   password: VALIDATION_PASSWORD(),
   emailAddress: VALIDATION_EMAIL_ADDRESS({ isRequired: true }),
 }
+
 const v$ = useVuelidate(rules, form)
 </script>
 
@@ -115,13 +157,13 @@ de:
   register: Registrieren
   registrationSuccessBody: Verifiziere deinen Account über den Link in der E-Mail, die du in Kürze erhalten wirst.
   registrationSuccessTitle: Verifizierungs-E-Mail gesendet.
-  signIn: Stattdessen anmelden
+  alreadyHaveAnAccount: 'Du hast bereits ein Konto? Anmelden'
 en:
   accountDeletionNotice: "You'll be able to delete your account at any time."
   postgres22023: Your password is too short! Think of a longer one.
   postgres23505: This username or email address is already in use! Think of a new name or try signing in instead.
-  register: Register
+  register: Sign Up
   registrationSuccessBody: Verify your account using the verification link sent to you by email.
   registrationSuccessTitle: Verification email sent.
-  signIn: Sign in instead
+  alreadyHaveAnAccount: Already have an account? Log in
 </i18n>

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

@@ -1,15 +1,5 @@
 <template>
   <div class="flex flex-col items-center gap-4">
-    <ButtonColored
-      :is-primary="false"
-      :aria-label="t('register')"
-      :to="localePath('account-create')"
-    >
-      {{ t('register') }}
-      <template #prefix>
-        <IHeroiconsArrowRight />
-      </template>
-    </ButtonColored>
     <Form
       :errors="api.errors"
       :errors-pg-ids="{
@@ -56,7 +46,21 @@
         </ButtonColored>
       </template>
     </Form>
-    <AppLink :to="localePath('account-password-reset-request')">
+    <div class="flex w-full flex-col justify-between">
+      <ButtonColored
+        variant="accent"
+        :aria-label="t('register')"
+        :to="localePath('account-create')"
+        class="w-full"
+      >
+        {{ t('register') }}
+      </ButtonColored>
+    </div>
+    <AppLink
+      :to="localePath('account-password-reset-request')"
+      :is-underlined="true"
+      :is-colored="true"
+    >
       {{ t('passwordReset') }}
     </AppLink>
   </div>
@@ -140,14 +144,14 @@ de:
   passwordReset: Passwort zurücksetzen
   postgres55000: Deine E-Mail-Adresse ist noch nicht verifiziert! Schau in dein E-Mail-Postfach, ggf. auch in den Spam-Ordner, oder kontaktiere den Support.
   postgresP0002: Anmeldung fehlgeschlagen! Hast du dich schon registriert? Überprüfe deine Eingaben auf Schreibfehler oder kontaktiere den Support.
-  register: Stattdessen registrieren
+  register: Konto erstellen
   signIn: Anmelden
 en:
   contactSupport: Contact support
   jwtStoreFail: Failed to store the authentication data!
-  passwordReset: Reset password
+  passwordReset: I forgot my password
   postgres55000: Your email address has not been verified yet! Check your email inbox, including the spam folder if necessary, or contact support.
   postgresP0002: Login failed! Have you registered yet? Check your input for spelling mistakes or contact support.
-  register: Register instead
+  register: Create an account
   signIn: Sign in
 </i18n>