@cat-factory/app 0.37.3 → 0.38.0

package/app/components/auth/AuthGate.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import LoginScreen from '~/components/auth/LoginScreen.vue'
 
 // Resolves auth state once on mount, then either renders the app (auth off, or
 // on with a signed-in user) or the login screen. The board's own bootstrap runs
 // inside the default slot, so it only fires once the user is allowed in.
 const auth = useAuthStore()
+const route = useRoute()
+
+// The password-reset page is public: a recipient of an emailed reset link is signed
+// out, so it must render even when auth is required and there's no user.
+const isPublicRoute = computed(() => route.path === '/reset-password')
 
 onMounted(() => auth.bootstrap())
 </script>
@@ -18,6 +24,8 @@ onMounted(() => auth.bootstrap())
     <span class="text-sm">Loading…</span>
   </div>
 
+  <slot v-else-if="isPublicRoute" />
+
   <LoginScreen v-else-if="auth.required && !auth.user" />
 
   <slot v-else />

package/app/components/auth/LoginScreen.vue

@@ -12,13 +12,17 @@ const invite = computed(() => {
 })
 
 // Password form: signup creates a new user (invite or allowed-email-domain gated),
-// login authenticates an existing one. Default to login; flip to signup when invited.
-const mode = ref<'login' | 'signup'>(invite.value ? 'signup' : 'login')
+// login authenticates an existing one, forgot requests a reset link. Default to login;
+// flip to signup when invited.
+const mode = ref<'login' | 'signup' | 'forgot'>(invite.value ? 'signup' : 'login')
 const email = ref('')
 const password = ref('')
 const name = ref('')
 const error = ref<string | null>(null)
 const busy = ref(false)
+// Set once a reset link has been requested, so we can show a generic confirmation
+// (we never reveal whether the email is registered).
+const forgotSent = ref(false)
 
 async function submitPassword() {
   error.value = null
@@ -44,6 +48,27 @@ async function submitPassword() {
   }
 }
 
+async function submitForgot() {
+  error.value = null
+  busy.value = true
+  try {
+    await auth.forgotPassword(email.value)
+    forgotSent.value = true
+  } catch {
+    // The request endpoint is generic by design; only an infra error lands here.
+    error.value = 'Something went wrong. Please try again.'
+  } finally {
+    busy.value = false
+  }
+}
+
+/** Switch modes, clearing any transient form state. */
+function setMode(next: 'login' | 'signup' | 'forgot') {
+  mode.value = next
+  error.value = null
+  forgotSent.value = false
+}
+
 const showOAuthDivider = computed(
   () => auth.providers.password && (auth.providers.github || auth.providers.google),
 )
@@ -58,12 +83,15 @@ const showOAuthDivider = computed(
         <UIcon name="i-lucide-layout-dashboard" class="mx-auto mb-3 h-10 w-10 text-indigo-400" />
         <h1 class="mb-1 text-lg font-semibold text-white">Architecture Board</h1>
         <p class="text-sm text-slate-400">
-          {{ invite ? 'Accept your invitation to continue.' : 'Sign in to continue.' }}
+          <template v-if="mode === 'forgot'">Reset your password.</template>
+          <template v-else>{{
+            invite ? 'Accept your invitation to continue.' : 'Sign in to continue.'
+          }}</template>
         </p>
       </div>
 
       <!-- OAuth providers -->
-      <div class="space-y-2">
+      <div v-if="mode !== 'forgot'" class="space-y-2">
         <UButton
           v-if="auth.providers.github"
           block
@@ -87,12 +115,19 @@ const showOAuthDivider = computed(
         </UButton>
       </div>
 
-      <div v-if="showOAuthDivider" class="my-4 flex items-center gap-3 text-xs text-slate-500">
+      <div
+        v-if="showOAuthDivider && mode !== 'forgot'"
+        class="my-4 flex items-center gap-3 text-xs text-slate-500"
+      >
         <span class="h-px flex-1 bg-slate-800" /> or <span class="h-px flex-1 bg-slate-800" />
       </div>
 
       <!-- Email / password -->
-      <form v-if="auth.providers.password" class="space-y-3" @submit.prevent="submitPassword">
+      <form
+        v-if="auth.providers.password && mode !== 'forgot'"
+        class="space-y-3"
+        @submit.prevent="submitPassword"
+      >
         <UInput
           v-if="mode === 'signup'"
           v-model="name"
@@ -126,17 +161,60 @@ const showOAuthDivider = computed(
         <p class="text-center text-xs text-slate-400">
           <template v-if="mode === 'login'">
             Need an account?
-            <button type="button" class="text-indigo-400 hover:underline" @click="mode = 'signup'">
+            <button
+              type="button"
+              class="text-indigo-400 hover:underline"
+              @click="setMode('signup')"
+            >
               Sign up
             </button>
           </template>
           <template v-else>
             Already have an account?
-            <button type="button" class="text-indigo-400 hover:underline" @click="mode = 'login'">
+            <button type="button" class="text-indigo-400 hover:underline" @click="setMode('login')">
               Sign in
             </button>
           </template>
         </p>
+        <p v-if="mode === 'login'" class="text-center text-xs text-slate-400">
+          <button type="button" class="text-indigo-400 hover:underline" @click="setMode('forgot')">
+            Forgot password?
+          </button>
+        </p>
+      </form>
+
+      <!-- Forgot password: request a reset link by email -->
+      <form
+        v-if="auth.providers.password && mode === 'forgot'"
+        class="space-y-3"
+        @submit.prevent="submitForgot"
+      >
+        <template v-if="forgotSent">
+          <p class="text-sm text-slate-300">
+            If an account exists for that email, a password reset link is on its way. Check your
+            inbox.
+          </p>
+        </template>
+        <template v-else>
+          <UInput
+            v-model="email"
+            type="email"
+            required
+            placeholder="Email"
+            icon="i-lucide-at-sign"
+            size="lg"
+            class="w-full"
+          />
+          <p v-if="error" class="text-sm text-rose-400">{{ error }}</p>
+          <UButton block size="lg" color="primary" type="submit" :loading="busy">
+            Send reset link
+          </UButton>
+        </template>
+        <p class="text-center text-xs text-slate-400">
+          <button type="button" class="text-indigo-400 hover:underline" @click="setMode('login')">
+            Back to sign in
+          </button>
+        </p>
       </form>
     </div>
   </div>

package/app/components/auth/ResetPasswordScreen.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+// Standalone full-screen reset form reached from the emailed link
+// (`/reset-password?token=…`). It is a public route (see AuthGate), so a recipient who
+// is signed out can still set a new password. On success we send them to the login.
+const auth = useAuthStore()
+
+const token = computed(() => {
+  if (typeof window === 'undefined') return ''
+  return new URLSearchParams(window.location.search).get('token') || ''
+})
+
+const password = ref('')
+const confirm = ref('')
+const error = ref<string | null>(null)
+const busy = ref(false)
+const done = ref(false)
+
+async function submit() {
+  error.value = null
+  if (password.value.length < 8) {
+    error.value = 'Password must be at least 8 characters.'
+    return
+  }
+  if (password.value !== confirm.value) {
+    error.value = 'Passwords do not match.'
+    return
+  }
+  busy.value = true
+  try {
+    await auth.resetPassword(token.value, password.value)
+    done.value = true
+  } catch (e) {
+    error.value =
+      (e as { data?: { error?: { message?: string } } })?.data?.error?.message ??
+      'This password reset link is invalid or has expired.'
+  } finally {
+    busy.value = false
+  }
+}
+
+function goToLogin() {
+  if (typeof window !== 'undefined') window.location.assign('/')
+}
+</script>
+
+<template>
+  <div class="flex h-screen w-screen items-center justify-center bg-slate-950 text-slate-100">
+    <div
+      class="w-full max-w-sm rounded-xl border border-slate-800 bg-slate-900/80 p-8 backdrop-blur"
+    >
+      <div class="mb-6 text-center">
+        <UIcon name="i-lucide-key-round" class="mx-auto mb-3 h-10 w-10 text-indigo-400" />
+        <h1 class="mb-1 text-lg font-semibold text-white">Reset password</h1>
+        <p class="text-sm text-slate-400">Choose a new password for your account.</p>
+      </div>
+
+      <template v-if="done">
+        <p class="mb-4 text-sm text-slate-300">
+          Your password has been reset. You can now sign in with your new password.
+        </p>
+        <UButton block size="lg" color="primary" @click="goToLogin">Go to sign in</UButton>
+      </template>
+
+      <template v-else-if="!token">
+        <p class="mb-4 text-sm text-rose-400">
+          This reset link is missing its token. Request a new link from the sign-in screen.
+        </p>
+        <UButton block size="lg" color="neutral" variant="subtle" @click="goToLogin">
+          Back to sign in
+        </UButton>
+      </template>
+
+      <form v-else class="space-y-3" @submit.prevent="submit">
+        <UInput
+          v-model="password"
+          type="password"
+          required
+          placeholder="New password"
+          icon="i-lucide-lock"
+          size="lg"
+          class="w-full"
+        />
+        <UInput
+          v-model="confirm"
+          type="password"
+          required
+          placeholder="Confirm new password"
+          icon="i-lucide-lock"
+          size="lg"
+          class="w-full"
+        />
+        <p v-if="error" class="text-sm text-rose-400">{{ error }}</p>
+        <UButton block size="lg" color="primary" type="submit" :loading="busy">
+          Reset password
+        </UButton>
+        <p class="text-center text-xs text-slate-400">
+          <button type="button" class="text-indigo-400 hover:underline" @click="goToLogin">
+            Back to sign in
+          </button>
+        </p>
+      </form>
+    </div>
+  </div>
+</template>

package/app/composables/api/auth.ts

@@ -1,10 +1,12 @@
 import {
   acceptInvitationContract,
   authConfigContract,
+  forgotPasswordContract,
   logoutContract,
   meContract,
   passwordLoginContract,
   peekInvitationContract,
+  resetPasswordContract,
   signupContract,
 } from '@cat-factory/contracts'
 import type { ApiContext } from './context'
@@ -25,6 +27,15 @@ export function authApi({ http, send, ws }: ApiContext) {
     passwordLogin: (body: { email: string; password: string }) =>
       send(passwordLoginContract, { pathPrefix: '/auth', body }),
 
+    // Request a reset link. Always succeeds (204) regardless of whether the email is
+    // registered, so the response can't be used to enumerate accounts.
+    forgotPassword: (body: { email: string }) =>
+      send(forgotPasswordContract, { pathPrefix: '/auth', body }),
+
+    // Redeem a reset token + set a new password (throws 400 on an invalid/expired token).
+    resetPassword: (body: { token: string; password: string }) =>
+      send(resetPasswordContract, { pathPrefix: '/auth', body }),
+
     peekInvite: (token: string) =>
       send(peekInvitationContract, { pathPrefix: '/auth', pathParams: { token } }),
 

package/app/pages/reset-password.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import ResetPasswordScreen from '~/components/auth/ResetPasswordScreen.vue'
+</script>
+
+<template>
+  <ResetPasswordScreen />
+</template>

package/app/stores/auth.ts

@@ -133,6 +133,16 @@ export const useAuthStore = defineStore(
       applySession(await api.passwordLogin(body))
     }
 
+    /** Request a password-reset link by email (always resolves; never reveals existence). */
+    async function forgotPassword(email: string) {
+      await api.forgotPassword({ email })
+    }
+
+    /** Redeem a reset token and set a new password. Throws on an invalid/expired token. */
+    async function resetPassword(token: string, password: string) {
+      await api.resetPassword({ token, password })
+    }
+
     /** Drop the local session (sessions are stateless server-side). */
     function logout() {
       api.logout().catch(() => {})
@@ -159,6 +169,8 @@ export const useAuthStore = defineStore(
       loginWithGoogle,
       signup,
       passwordLogin,
+      forgotPassword,
+      resetPassword,
       logout,
       handleUnauthorized,
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.37.3",
+  "version": "0.38.0",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     "pinia-plugin-persistedstate": "^4.7.1",
     "vue": "^3.5.38",
     "wretch": "^3.0.9",
-    "@cat-factory/contracts": "0.36.0"
+    "@cat-factory/contracts": "0.37.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.1",