feat(02-02): frontend auth store, router guard, Login/Register views
- frontend/src/stores/auth.js: useAuthStore with accessToken in memory only (never browser storage); login() accepts options.backupCode - frontend/src/api/client.js: extended with Bearer token injection, 401 auto-refresh retry, all auth/admin API functions, changePassword - frontend/src/router/index.js: auth routes added (/login, /register, /password-reset, /account, /admin); beforeEach guard redirects unauthenticated users to /login with redirect param - frontend/src/layouts/AuthLayout.vue: centered bare layout for auth pages - frontend/src/views/auth/LoginView.vue: three-step flow (password, TOTP, backup code); "Use a backup code instead" link; UI-SPEC copywriting - frontend/src/views/auth/RegisterView.vue: registration with PasswordStrengthBar; HIBP error display; UI-SPEC copywriting - frontend/src/components/auth/PasswordStrengthBar.vue: 4-segment bar - frontend/src/components/ui/AppSpinner.vue: animate-spin SVG spinner - Stub views: PasswordResetView, NewPasswordView, AccountView, AdminView - .gitignore: exclude frontend/node_modules, dist, package-lock.json npm run build exits 0. All acceptance criteria verified. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
curo1305
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
1882edfff6
commit
3b7d362600
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 w-full">
|
||||
<!-- Step: password -->
|
||||
<template v-if="step === 'password'">
|
||||
<h2 class="text-2xl font-semibold text-gray-900 mb-6">Sign in to DocuVault</h2>
|
||||
|
||||
<form @submit.prevent="submitPassword" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Email</label>
|
||||
<input
|
||||
v-model="email"
|
||||
type="email"
|
||||
required
|
||||
autocomplete="email"
|
||||
class="block w-full rounded-lg px-3 py-3 text-sm border border-gray-300 bg-white text-gray-900 transition-colors focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Password</label>
|
||||
<input
|
||||
v-model="password"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
class="block w-full rounded-lg px-3 py-3 text-sm border border-gray-300 bg-white text-gray-900 transition-colors focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Form-level error -->
|
||||
<div
|
||||
v-if="error"
|
||||
class="p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700"
|
||||
>
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="loading"
|
||||
class="w-full flex items-center justify-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-lg text-sm font-semibold hover:bg-indigo-700 transition-colors disabled:opacity-75 min-h-[44px]"
|
||||
>
|
||||
<AppSpinner v-if="loading" />
|
||||
{{ loading ? 'Signing in…' : 'Sign in' }}
|
||||
</button>
|
||||
|
||||
<p class="text-center text-sm text-gray-500">
|
||||
<router-link to="/password-reset" class="text-indigo-600 hover:underline">
|
||||
Forgot your password?
|
||||
</router-link>
|
||||
</p>
|
||||
|
||||
<p class="text-center text-sm text-gray-500">
|
||||
Don't have an account?
|
||||
<router-link to="/register" class="text-indigo-600 hover:underline">
|
||||
Create one
|
||||
</router-link>
|
||||
</p>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<!-- Step: TOTP -->
|
||||
<template v-else-if="step === 'totp'">
|
||||
<h2 class="text-2xl font-semibold text-gray-900 mb-1">Two-factor authentication</h2>
|
||||
<p class="text-sm text-gray-500 mb-6">Enter the 6-digit code from your authenticator app.</p>
|
||||
|
||||
<form @submit.prevent="submitTotp" class="space-y-4">
|
||||
<div class="flex justify-center">
|
||||
<input
|
||||
v-model="totpInput"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
maxlength="6"
|
||||
autocomplete="one-time-code"
|
||||
placeholder="000000"
|
||||
class="block w-36 rounded-lg px-3 py-3 text-sm text-center border border-gray-300 bg-white text-gray-900 transition-colors focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Form-level error -->
|
||||
<div
|
||||
v-if="error"
|
||||
class="p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700"
|
||||
>
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="loading"
|
||||
class="w-full flex items-center justify-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-lg text-sm font-semibold hover:bg-indigo-700 transition-colors disabled:opacity-75 min-h-[44px]"
|
||||
>
|
||||
<AppSpinner v-if="loading" />
|
||||
{{ loading ? 'Verifying…' : 'Verify code' }}
|
||||
</button>
|
||||
|
||||
<p class="text-center">
|
||||
<button
|
||||
type="button"
|
||||
@click="step = 'backup'"
|
||||
class="text-sm text-indigo-600 hover:underline"
|
||||
>
|
||||
Use a backup code instead
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p class="text-center">
|
||||
<button
|
||||
type="button"
|
||||
@click="resetToPassword"
|
||||
class="text-sm text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
Back to sign in
|
||||
</button>
|
||||
</p>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<!-- Step: backup code -->
|
||||
<template v-else-if="step === 'backup'">
|
||||
<h2 class="text-2xl font-semibold text-gray-900 mb-1">Two-factor authentication</h2>
|
||||
<p class="text-sm text-gray-500 mb-6">Enter a backup code.</p>
|
||||
|
||||
<form @submit.prevent="submitBackupCode" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Backup code</label>
|
||||
<input
|
||||
v-model="backupCodeInput"
|
||||
type="text"
|
||||
placeholder="XXXXXXXX"
|
||||
autocomplete="off"
|
||||
class="block w-full rounded-lg px-3 py-3 text-sm border border-gray-300 bg-white text-gray-900 font-mono transition-colors focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Form-level error -->
|
||||
<div
|
||||
v-if="error"
|
||||
class="p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700"
|
||||
>
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="loading"
|
||||
class="w-full flex items-center justify-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-lg text-sm font-semibold hover:bg-indigo-700 transition-colors disabled:opacity-75 min-h-[44px]"
|
||||
>
|
||||
<AppSpinner v-if="loading" />
|
||||
{{ loading ? 'Verifying…' : 'Sign in with backup code' }}
|
||||
</button>
|
||||
|
||||
<p class="text-center">
|
||||
<button
|
||||
type="button"
|
||||
@click="step = 'totp'"
|
||||
class="text-sm text-indigo-600 hover:underline"
|
||||
>
|
||||
Use authenticator app instead
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p class="text-center">
|
||||
<button
|
||||
type="button"
|
||||
@click="resetToPassword"
|
||||
class="text-sm text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
Back to sign in
|
||||
</button>
|
||||
</p>
|
||||
</form>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useAuthStore } from '../../stores/auth.js'
|
||||
import AppSpinner from '../../components/ui/AppSpinner.vue'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// Form state
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const totpInput = ref('')
|
||||
const backupCodeInput = ref('')
|
||||
const loading = ref(false)
|
||||
const error = ref(null)
|
||||
|
||||
// Step: 'password' | 'totp' | 'backup'
|
||||
const step = ref('password')
|
||||
|
||||
function resetToPassword() {
|
||||
step.value = 'password'
|
||||
totpInput.value = ''
|
||||
backupCodeInput.value = ''
|
||||
error.value = null
|
||||
}
|
||||
|
||||
async function handleLoginResult(result) {
|
||||
if (!result) {
|
||||
// Full success — tokens set in store
|
||||
const redirect = route.query.redirect || '/'
|
||||
await router.push(redirect)
|
||||
return
|
||||
}
|
||||
if (result.requires_totp) {
|
||||
error.value = null
|
||||
step.value = 'totp'
|
||||
return
|
||||
}
|
||||
if (result.requires_password_change) {
|
||||
// User must change password before accessing the app
|
||||
await router.push('/account')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
async function submitPassword() {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const result = await authStore.login(email.value, password.value)
|
||||
await handleLoginResult(result)
|
||||
} catch (e) {
|
||||
error.value = e.message
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submitTotp() {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const result = await authStore.login(email.value, password.value, {
|
||||
totpCode: totpInput.value,
|
||||
})
|
||||
await handleLoginResult(result)
|
||||
} catch (e) {
|
||||
error.value = e.message
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submitBackupCode() {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const result = await authStore.login(email.value, password.value, {
|
||||
backupCode: backupCodeInput.value,
|
||||
})
|
||||
await handleLoginResult(result)
|
||||
} catch (e) {
|
||||
error.value = e.message || 'Invalid or already used code'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user