wire frontend email signup

frontend/website/src/views/CheckEmailView.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import AuthLayout from '@/components/AuthLayout.vue'
+</script>
+
+<template>
+  <AuthLayout
+    eyebrow="One more step"
+    title="Check your email"
+    description="We sent you a link to confirm your signup."
+  >
+    <div class="check-email-message">
+      <p>Open the link in your email to choose a password and finish creating your account.</p>
+      <p>The confirmation link expires in 10 minutes.</p>
+    </div>
+
+    <template #footer>
+      Already confirmed?
+      <RouterLink to="/login">Log in</RouterLink>
+    </template>
+  </AuthLayout>
+</template>
+
+<style scoped>
+.check-email-message {
+  display: grid;
+  gap: 0.8rem;
+  padding: 1.15rem 1.25rem;
+  border: 1px solid #d8dcd7;
+  border-radius: 0.85rem;
+  color: #52605a;
+  background: #fbfcf9;
+  font-size: 0.88rem;
+  line-height: 1.6;
+}
+
+.check-email-message p {
+  margin: 0;
+}
+</style>

frontend/website/src/views/ConfirmEmailView.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRoute, useRouter } from 'vue-router'
+import { z } from 'zod'
+
+import AuthForm from '@/components/AuthForm.vue'
+import AuthLayout from '@/components/AuthLayout.vue'
+import AuthTextField from '@/components/AuthTextField.vue'
+import { type ConfirmEmailFieldErrors, useAuthStore } from '@/stores/auth'
+
+const confirmEmailSchema = z
+  .object({
+    password: z.string().min(8, 'Password must be at least 8 characters.'),
+    passwordConfirmation: z.string(),
+  })
+  .refine((values) => values.password === values.passwordConfirmation, {
+    message: 'Passwords do not match.',
+    path: ['passwordConfirmation'],
+  })
+
+const password = ref('')
+const passwordConfirmation = ref('')
+const fieldErrors = ref<ConfirmEmailFieldErrors>({})
+const authStore = useAuthStore()
+const { loading, error } = storeToRefs(authStore)
+const route = useRoute()
+const router = useRouter()
+
+async function submitConfirmation(): Promise<void> {
+  const result = confirmEmailSchema.safeParse({
+    password: password.value,
+    passwordConfirmation: passwordConfirmation.value,
+  })
+  if (!result.success) {
+    fieldErrors.value = {}
+    for (const issue of result.error.issues) {
+      const field = issue.path[0]
+      if (field === 'password' || field === 'passwordConfirmation') {
+        fieldErrors.value[field] ??= issue.message
+      }
+    }
+
+    return
+  }
+
+  const token = route.query.token
+  if (typeof token !== 'string' || token === '') {
+    return
+  }
+
+  fieldErrors.value = {}
+  const confirmationSucceeded = await authStore.confirmEmail(token, result.data.password)
+  if (confirmationSucceeded) {
+    await router.push({ name: 'dashboard' })
+  }
+}
+</script>
+
+<template>
+  <AuthLayout
+    eyebrow="Finish your account"
+    title="Choose your password"
+    description="Secure your account, then keep moving toward what matters."
+  >
+    <AuthForm
+      submit-label="Create account"
+      submitting-label="Creating account..."
+      :submitting="loading"
+      :error="error ?? undefined"
+      @submit="submitConfirmation"
+    >
+      <AuthTextField
+        id="confirm-email-password"
+        label="Password"
+        type="password"
+        autocomplete="new-password"
+        placeholder="Create a password"
+        v-model="password"
+        :error="fieldErrors.password"
+        :disabled="loading"
+      />
+      <AuthTextField
+        id="confirm-email-password-confirmation"
+        label="Confirm password"
+        type="password"
+        autocomplete="new-password"
+        placeholder="Repeat your password"
+        v-model="passwordConfirmation"
+        :error="fieldErrors.passwordConfirmation"
+        :disabled="loading"
+      />
+    </AuthForm>
+
+    <template #footer>
+      Already have an account?
+      <RouterLink to="/login">Log in</RouterLink>
+    </template>
+  </AuthLayout>
+</template>

frontend/website/src/views/SignupView.vue

@@ -1,7 +1,40 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRouter } from 'vue-router'
+import { z } from 'zod'
+
 import AuthForm from '@/components/AuthForm.vue'
 import AuthLayout from '@/components/AuthLayout.vue'
 import AuthTextField from '@/components/AuthTextField.vue'
+import { type SignupFieldErrors, useAuthStore } from '@/stores/auth'
+
+const signupSchema = z.object({
+  email: z.string().email('Enter a valid email address.'),
+})
+const email = ref('')
+const fieldErrors = ref<SignupFieldErrors>({})
+const authStore = useAuthStore()
+const { loading, error } = storeToRefs(authStore)
+const router = useRouter()
+
+async function submitSignup(): Promise<void> {
+  const normalizedEmail = email.value.trim()
+  const result = signupSchema.safeParse({ email: normalizedEmail })
+  if (!result.success) {
+    fieldErrors.value = {
+      email: result.error.issues[0]?.message ?? 'Enter a valid email address.',
+    }
+
+    return
+  }
+
+  fieldErrors.value = {}
+  const signupSucceeded = await authStore.signup(normalizedEmail)
+  if (signupSucceeded) {
+    await router.push({ name: 'check-email' })
+  }
+}
 </script>
 
 <template>
@@ -10,34 +43,22 @@ import AuthTextField from '@/components/AuthTextField.vue'
     title="Start your journey"
     description="Create your space to turn ambitious goals into steady progress."
   >
-    <AuthForm submit-label="Create account">
-      <AuthTextField
-        id="signup-name"
-        label="Full name"
-        type="text"
-        autocomplete="name"
-        placeholder="Your full name"
-      />
+    <AuthForm
+      submit-label="Continue with email"
+      submitting-label="Sending link..."
+      :submitting="loading"
+      :error="error ?? undefined"
+      @submit="submitSignup"
+    >
       <AuthTextField
         id="signup-email"
         label="Email address"
         type="email"
         autocomplete="email"
         placeholder="you@example.com"
-      />
-      <AuthTextField
-        id="signup-password"
-        label="Password"
-        type="password"
-        autocomplete="new-password"
-        placeholder="Create a password"
-      />
-      <AuthTextField
-        id="signup-password-confirmation"
-        label="Confirm password"
-        type="password"
-        autocomplete="new-password"
-        placeholder="Repeat your password"
+        v-model="email"
+        :error="fieldErrors.email"
+        :disabled="loading"
       />
     </AuthForm>