@cat-factory/app 0.46.11 → 0.47.0

package/app/components/auth/AuthGate.vue

@@ -7,6 +7,7 @@ import LoginScreen from '~/components/auth/LoginScreen.vue'
 // inside the default slot, so it only fires once the user is allowed in.
 const auth = useAuthStore()
 const route = useRoute()
+const { t } = useI18n()
 
 // 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.
@@ -21,12 +22,12 @@ onMounted(() => auth.bootstrap())
     class="flex h-screen w-screen flex-col items-center justify-center gap-3 bg-slate-950 text-slate-400"
   >
     <UIcon name="i-lucide-loader" class="h-8 w-8 animate-spin" />
-    <span class="text-sm">Loading…</span>
+    <span class="text-sm">{{ t('auth.gate.loading') }}</span>
   </div>
 
   <slot v-else-if="isPublicRoute" />
 
-  <LoginScreen v-else-if="auth.required && !auth.user" />
+  <LoginScreen v-else-if="auth.needsLogin" />
 
   <slot v-else />
 </template>

package/app/components/auth/LoginScreen.vue

@@ -1,8 +1,73 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
 
 const auth = useAuthStore()
+const { t } = useI18n()
+
+// Local-mode source-control PAT login. GitHub/GitLab are brand names (kept verbatim across
+// locales), as are the token-settings URLs, so they're inline constants rather than catalog
+// keys — same convention as the provider descriptors in ApiKeysSection. The actual link
+// prefers the server's scopes-preselected deep link (`patLogin.setupUrls`); these are the
+// fallback when it's absent.
+type PatProvider = 'github' | 'gitlab'
+const PROVIDER_LABELS: Record<PatProvider, string> = { github: 'GitHub', gitlab: 'GitLab' }
+const PROVIDER_ICONS: Record<PatProvider, string> = {
+  github: 'i-lucide-github',
+  gitlab: 'i-lucide-gitlab',
+}
+// Fallback token-creation pages, used only if the server didn't advertise a deep link.
+const PROVIDER_TOKEN_URLS: Record<PatProvider, string> = {
+  github: 'https://github.com/settings/tokens/new',
+  gitlab: 'https://gitlab.com/-/user_settings/personal_access_tokens',
+}
+
+const patLoginCfg = computed(() => auth.localMode?.patLogin)
+const configuredProviders = computed<PatProvider[]>(
+  () => (patLoginCfg.value?.configured ?? []) as PatProvider[],
+)
+const availableProviders = computed<PatProvider[]>(
+  () => (patLoginCfg.value?.available ?? []) as PatProvider[],
+)
+const showLocalLogin = computed(() => availableProviders.value.length > 0)
+
+const patProvider = ref<PatProvider>('github')
+const patToken = ref('')
+const patBusy = ref(false)
+const patError = ref<string | null>(null)
+
+// Keep the picker on an actually-available provider.
+watch(
+  availableProviders,
+  (list) => {
+    if (list.length && !list.includes(patProvider.value)) patProvider.value = list[0]!
+  },
+  { immediate: true },
+)
+
+const patProviderItems = computed(() =>
+  availableProviders.value.map((p) => ({ label: PROVIDER_LABELS[p], value: p })),
+)
+
+// Prefer the server's scopes-preselected deep link (it owns the per-provider scopes);
+// fall back to the plain token page if it wasn't advertised.
+const tokenCreateUrl = computed(
+  () => patLoginCfg.value?.setupUrls?.[patProvider.value] ?? PROVIDER_TOKEN_URLS[patProvider.value],
+)
+
+/** One-click (configured PAT) or pasted-token sign-in; reloads so the app boots signed in. */
+async function submitPat(provider: PatProvider, token?: string) {
+  patError.value = null
+  patBusy.value = true
+  try {
+    await auth.patLogin(token ? { provider, token } : { provider })
+    if (typeof window !== 'undefined') window.location.assign(window.location.pathname)
+  } catch (e) {
+    patError.value = apiErrorEnvelope(e)?.message ?? t('auth.localMode.failed')
+  } finally {
+    patBusy.value = false
+  }
+}
 
 // An invite token may ride in on the URL (?invite=…) — it flows through the OAuth
 // redirect and the password signup so a brand-new user can join the org on first login.
@@ -41,8 +106,7 @@ async function submitPassword() {
     // Reload so the app boots with the new session.
     if (typeof window !== 'undefined') window.location.assign(window.location.pathname)
   } catch (e) {
-    error.value =
-      apiErrorEnvelope(e)?.message ?? 'Sign-in failed. Check your details and try again.'
+    error.value = apiErrorEnvelope(e)?.message ?? t('auth.login.signInFailed')
   } finally {
     busy.value = false
   }
@@ -56,7 +120,7 @@ async function submitForgot() {
     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.'
+    error.value = t('auth.login.genericError')
   } finally {
     busy.value = false
   }
@@ -81,15 +145,81 @@ const showOAuthDivider = computed(
     >
       <div class="mb-6 text-center">
         <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>
+        <h1 class="mb-1 text-lg font-semibold text-white">{{ t('auth.login.appTitle') }}</h1>
         <p class="text-sm text-slate-400">
-          <template v-if="mode === 'forgot'">Reset your password.</template>
+          <template v-if="mode === 'forgot'">{{ t('auth.login.forgotSubtitle') }}</template>
           <template v-else>{{
-            invite ? 'Accept your invitation to continue.' : 'Sign in to continue.'
+            invite ? t('auth.login.inviteSubtitle') : t('auth.login.subtitle')
           }}</template>
         </p>
       </div>
 
+      <!-- Local mode: sign in with a source-control PAT (no OAuth round-trip needed) -->
+      <div v-if="showLocalLogin && mode !== 'forgot'" class="space-y-3">
+        <!-- One-click: a PAT is already configured server-side -->
+        <UButton
+          v-for="p in configuredProviders"
+          :key="p"
+          block
+          size="lg"
+          color="primary"
+          :icon="PROVIDER_ICONS[p]"
+          :loading="patBusy"
+          @click="submitPat(p)"
+        >
+          {{ t('auth.localMode.continueWith', { provider: PROVIDER_LABELS[p] }) }}
+        </UButton>
+
+        <!-- Enter a PAT inline -->
+        <form class="space-y-2" @submit.prevent="submitPat(patProvider, patToken.trim())">
+          <p class="text-xs font-medium text-slate-400">{{ t('auth.localMode.enterPatTitle') }}</p>
+          <USelect
+            v-if="patProviderItems.length > 1"
+            v-model="patProvider"
+            :items="patProviderItems"
+            size="lg"
+            class="w-full"
+          />
+          <UTextarea
+            v-model="patToken"
+            :rows="2"
+            :placeholder="
+              t('auth.localMode.tokenPlaceholder', { provider: PROVIDER_LABELS[patProvider] })
+            "
+            class="w-full font-mono"
+          />
+          <div class="flex items-center justify-between gap-2">
+            <a
+              :href="tokenCreateUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-xs text-indigo-400 hover:underline"
+            >
+              {{ t('auth.localMode.createToken', { provider: PROVIDER_LABELS[patProvider] }) }}
+            </a>
+            <UButton
+              size="lg"
+              color="neutral"
+              variant="subtle"
+              type="submit"
+              :loading="patBusy"
+              :disabled="!patToken.trim()"
+            >
+              {{ t('auth.localMode.submit') }}
+            </UButton>
+          </div>
+        </form>
+        <p v-if="patError" class="text-sm text-rose-400">{{ patError }}</p>
+      </div>
+
+      <div
+        v-if="showLocalLogin && auth.providers.password && mode !== 'forgot'"
+        class="my-4 flex items-center gap-3 text-xs text-slate-500"
+      >
+        <span class="h-px flex-1 bg-slate-800" /> {{ t('auth.localMode.orDivider') }}
+        <span class="h-px flex-1 bg-slate-800" />
+      </div>
+
       <!-- OAuth providers -->
       <div v-if="mode !== 'forgot'" class="space-y-2">
         <UButton
@@ -100,7 +230,7 @@ const showOAuthDivider = computed(
           icon="i-lucide-github"
           @click="auth.login(invite)"
         >
-          Continue with GitHub
+          {{ t('auth.login.continueWithGithub') }}
         </UButton>
         <UButton
           v-if="auth.providers.google"
@@ -111,7 +241,7 @@ const showOAuthDivider = computed(
           icon="i-lucide-mail"
           @click="auth.loginWithGoogle(invite)"
         >
-          Continue with Google
+          {{ t('auth.login.continueWithGoogle') }}
         </UButton>
       </div>
 
@@ -119,7 +249,8 @@ const showOAuthDivider = computed(
         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" />
+        <span class="h-px flex-1 bg-slate-800" /> {{ t('auth.login.or') }}
+        <span class="h-px flex-1 bg-slate-800" />
       </div>
 
       <!-- Email / password -->
@@ -131,7 +262,7 @@ const showOAuthDivider = computed(
         <UInput
           v-if="mode === 'signup'"
           v-model="name"
-          placeholder="Name (optional)"
+          :placeholder="t('auth.login.namePlaceholder')"
           icon="i-lucide-user"
           size="lg"
           class="w-full"
@@ -140,7 +271,7 @@ const showOAuthDivider = computed(
           v-model="email"
           type="email"
           required
-          placeholder="Email"
+          :placeholder="t('auth.login.emailPlaceholder')"
           icon="i-lucide-at-sign"
           size="lg"
           class="w-full"
@@ -149,36 +280,46 @@ const showOAuthDivider = computed(
           v-model="password"
           type="password"
           required
-          placeholder="Password"
+          :placeholder="t('auth.login.passwordPlaceholder')"
           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">
-          {{ mode === 'signup' ? 'Create account' : 'Sign in' }}
+          {{ mode === 'signup' ? t('auth.login.createAccount') : t('auth.login.signIn') }}
         </UButton>
         <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="setMode('signup')"
-            >
-              Sign up
-            </button>
+            <i18n-t keypath="auth.login.needAccount" tag="span" scope="global">
+              <template #signUp>
+                <button
+                  type="button"
+                  class="text-indigo-400 hover:underline"
+                  @click="setMode('signup')"
+                >
+                  {{ t('auth.login.signUp') }}
+                </button>
+              </template>
+            </i18n-t>
           </template>
           <template v-else>
-            Already have an account?
-            <button type="button" class="text-indigo-400 hover:underline" @click="setMode('login')">
-              Sign in
-            </button>
+            <i18n-t keypath="auth.login.haveAccount" tag="span" scope="global">
+              <template #signIn>
+                <button
+                  type="button"
+                  class="text-indigo-400 hover:underline"
+                  @click="setMode('login')"
+                >
+                  {{ t('auth.login.signIn') }}
+                </button>
+              </template>
+            </i18n-t>
           </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?
+            {{ t('auth.login.forgotPassword') }}
           </button>
         </p>
       </form>
@@ -191,8 +332,7 @@ const showOAuthDivider = computed(
       >
         <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.
+            {{ t('auth.login.forgotSent') }}
           </p>
         </template>
         <template v-else>
@@ -200,19 +340,19 @@ const showOAuthDivider = computed(
             v-model="email"
             type="email"
             required
-            placeholder="Email"
+            :placeholder="t('auth.login.emailPlaceholder')"
             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
+            {{ t('auth.login.sendResetLink') }}
           </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
+            {{ t('auth.login.backToSignIn') }}
           </button>
         </p>
       </form>

package/app/components/auth/ResetPasswordScreen.vue

@@ -5,6 +5,7 @@ import { computed, ref } from 'vue'
 // (`/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 { t } = useI18n()
 
 const token = computed(() => {
   if (typeof window === 'undefined') return ''
@@ -20,11 +21,11 @@ const done = ref(false)
 async function submit() {
   error.value = null
   if (password.value.length < 8) {
-    error.value = 'Password must be at least 8 characters.'
+    error.value = t('auth.resetPassword.errorTooShort')
     return
   }
   if (password.value !== confirm.value) {
-    error.value = 'Passwords do not match.'
+    error.value = t('auth.resetPassword.errorMismatch')
     return
   }
   busy.value = true
@@ -34,7 +35,7 @@ async function submit() {
   } catch (e) {
     error.value =
       (e as { data?: { error?: { message?: string } } })?.data?.error?.message ??
-      'This password reset link is invalid or has expired.'
+      t('auth.resetPassword.errorInvalidLink')
   } finally {
     busy.value = false
   }
@@ -52,23 +53,25 @@ function goToLogin() {
     >
       <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>
+        <h1 class="mb-1 text-lg font-semibold text-white">{{ t('auth.resetPassword.title') }}</h1>
+        <p class="text-sm text-slate-400">{{ t('auth.resetPassword.subtitle') }}</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.
+          {{ t('auth.resetPassword.doneBody') }}
         </p>
-        <UButton block size="lg" color="primary" @click="goToLogin">Go to sign in</UButton>
+        <UButton block size="lg" color="primary" @click="goToLogin">{{
+          t('auth.resetPassword.goToSignIn')
+        }}</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.
+          {{ t('auth.resetPassword.missingToken') }}
         </p>
         <UButton block size="lg" color="neutral" variant="subtle" @click="goToLogin">
-          Back to sign in
+          {{ t('auth.resetPassword.backToSignIn') }}
         </UButton>
       </template>
 
@@ -77,7 +80,7 @@ function goToLogin() {
           v-model="password"
           type="password"
           required
-          placeholder="New password"
+          :placeholder="t('auth.resetPassword.newPasswordPlaceholder')"
           icon="i-lucide-lock"
           size="lg"
           class="w-full"
@@ -86,18 +89,18 @@ function goToLogin() {
           v-model="confirm"
           type="password"
           required
-          placeholder="Confirm new password"
+          :placeholder="t('auth.resetPassword.confirmPasswordPlaceholder')"
           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
+          {{ t('auth.resetPassword.submit') }}
         </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
+            {{ t('auth.resetPassword.backToSignIn') }}
           </button>
         </p>
       </form>

package/app/components/auth/UserMenu.vue

@@ -4,20 +4,21 @@ import type { DropdownMenuItem } from '@nuxt/ui'
 // Signed-in identity + per-user actions, shown in the sidebar when auth is enabled.
 const auth = useAuthStore()
 const ui = useUiStore()
+const { t } = useI18n()
 
 const items = computed<DropdownMenuItem[][]>(() => [
   [
     {
       // The user-scoped "My setup" hub (personal GitHub token, local runners, personal
       // subscriptions) — kept out of the workspace Integrations hub, reachable here.
-      label: 'My setup',
+      label: t('auth.userMenu.mySetup'),
       icon: 'i-lucide-user-cog',
       onSelect: () => ui.openPersonalSetup(),
     },
   ],
   [
     {
-      label: 'Sign out',
+      label: t('auth.userMenu.signOut'),
       icon: 'i-lucide-log-out',
       onSelect: () => auth.logout(),
     },