wire frontend email signup

frontend/website/src/router/index.ts

@@ -29,6 +29,32 @@ const router = createRouter({
         guestOnly: true,
       },
     },
+    {
+      path: '/check-email',
+      name: 'check-email',
+      component: () => import('@/views/CheckEmailView.vue'),
+      meta: {
+        guestOnly: true,
+      },
+      beforeEnter: () => {
+        if (!useAuthStore().signupCompleted) {
+          return { name: 'signup' }
+        }
+      },
+    },
+    {
+      path: '/confirm-email',
+      name: 'confirm-email',
+      component: () => import('@/views/ConfirmEmailView.vue'),
+      meta: {
+        guestOnly: true,
+      },
+      beforeEnter: (to) => {
+        if (typeof to.query.token !== 'string' || to.query.token === '') {
+          return { name: 'signup' }
+        }
+      },
+    },
     {
       path: '/dashboard',
       name: 'dashboard',

frontend/website/src/stores/auth.ts

@@ -13,17 +13,20 @@ const meResponseSchema = z.object({
   user: authUserSchema,
 })
 
-const loginErrorResponseSchema = z.object({
+const authErrorResponseSchema = z.object({
   error: z.string(),
 })
 
 export type AuthUser = z.infer<typeof authUserSchema>
 export type LoginFieldErrors = Partial<Record<'email' | 'password', string>>
+export type SignupFieldErrors = Partial<Record<'email', string>>
+export type ConfirmEmailFieldErrors = Partial<Record<'password' | 'passwordConfirmation', string>>
 
 export const useAuthStore = defineStore('auth', () => {
   const user = ref<AuthUser | null>(null)
   const loading = ref(false)
   const error = ref<string | null>(null)
+  const signupCompleted = ref(false)
   const isAuthenticated = computed(() => user.value !== null)
 
   async function fetchMe(): Promise<boolean> {
@@ -85,7 +88,7 @@ export const useAuthStore = defineStore('auth', () => {
       }
 
       user.value = null
-      const errorResponse = loginErrorResponseSchema.safeParse(responseBody)
+      const errorResponse = authErrorResponseSchema.safeParse(responseBody)
       error.value = errorResponse.success
         ? errorResponse.data.error
         : 'Unable to log in. Please try again.'
@@ -101,6 +104,76 @@ export const useAuthStore = defineStore('auth', () => {
     }
   }
 
+  async function signup(email: string): Promise<boolean> {
+    loading.value = true
+    error.value = null
+    signupCompleted.value = false
+
+    try {
+      const response = await fetch(`${API_BASE}/api/signup`, {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email }),
+      })
+
+      if (response.status === 201) {
+        signupCompleted.value = true
+
+        return true
+      }
+
+      error.value = await responseError(response, 'Unable to sign up. Please try again.')
+
+      return false
+    } catch {
+      error.value = 'Unable to sign up. Please try again.'
+
+      return false
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function confirmEmail(token: string, password: string): Promise<boolean> {
+    loading.value = true
+    error.value = null
+
+    try {
+      const response = await fetch(`${API_BASE}/api/confirm-email`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ token, password }),
+      })
+
+      if (response.status === 200) {
+        const responseBody: unknown = await response.json()
+        user.value = meResponseSchema.parse(responseBody).user
+        signupCompleted.value = false
+
+        return true
+      }
+
+      user.value = null
+      error.value = await responseError(response, 'Unable to confirm your email. Please try again.')
+
+      return false
+    } catch {
+      user.value = null
+      error.value = 'Unable to confirm your email. Please try again.'
+
+      return false
+    } finally {
+      loading.value = false
+    }
+  }
+
   async function logout(): Promise<void> {
     try {
       await fetch(`${API_BASE}/api/logout`, {
@@ -119,9 +192,23 @@ export const useAuthStore = defineStore('auth', () => {
     user,
     loading,
     error,
+    signupCompleted,
     isAuthenticated,
     fetchMe,
     login,
+    signup,
+    confirmEmail,
     logout,
   }
 })
+
+async function responseError(response: Response, fallback: string): Promise<string> {
+  try {
+    const responseBody: unknown = await response.json()
+    const parsedError = authErrorResponseSchema.safeParse(responseBody)
+
+    return parsedError.success ? parsedError.data.error : fallback
+  } catch {
+    return fallback
+  }
+}

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>