73b3980711
Extract all Chinese from DocsView.vue into docs.* namespace and add auth.narrative.* sub-namespace for LoginView/RegisterView narrative slots. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
602 lines
18 KiB
Vue
602 lines
18 KiB
Vue
<template>
|
|
<AuthLayout>
|
|
<template #narrative>
|
|
<div class="auth-narrative-inner">
|
|
<router-link to="/" class="brand">
|
|
<svg viewBox="0 0 24 24" width="22" height="22" fill="none">
|
|
<path d="M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke="currentColor" stroke-width="1.8" fill="rgba(34, 211, 238, 0.08)"/>
|
|
<path d="M12 7L17 9.5V14.5L12 17L7 14.5V9.5L12 7Z" fill="currentColor"/>
|
|
</svg>
|
|
<span>PURO AI</span>
|
|
</router-link>
|
|
|
|
<div>
|
|
<div class="n-kicker">{{ t('auth.narrative.login.kicker') }}</div>
|
|
<div class="auth-narrative-headline" style="margin-top: 12px;">
|
|
<span class="num-n">{{ t('auth.narrative.login.headlineN') }}</span>
|
|
{{ ' ' + t('auth.narrative.login.headlineSep') + ' ' }}
|
|
<span class="num-1">{{ t('auth.narrative.login.headlineOne') }}</span>
|
|
{{ ' ' + t('auth.narrative.login.headlineSuffix') }}
|
|
</div>
|
|
<p class="auth-narrative-sub">
|
|
{{ t('auth.narrative.login.sub1') }}<br>
|
|
{{ t('auth.narrative.login.sub2') }}<br>
|
|
<span class="auth-narrative-tagline">{{ t('auth.narrative.login.tagline') }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="route-demo">
|
|
<div class="row"><span class="k">POST</span><span class="v">/v1/chat/completions</span></div>
|
|
<div class="row"><span class="k">model</span><span class="pill-inline">claude-sonnet-4-5</span></div>
|
|
<div class="row"><span class="k">route →</span><span class="pill-inline amber">claude-pool-03</span></div>
|
|
<div class="row"><span class="k">status</span><span><span class="dot-g"></span><span style="color:var(--green)">200</span><span style="color:var(--text-3); margin:0 6px;">·</span>213ms<span style="color:var(--text-3); margin:0 6px;">·</span>42 tok</span></div>
|
|
</div>
|
|
|
|
<div class="auth-narrative-foot n-bottom">
|
|
<span>Claude</span><span class="sep">·</span>
|
|
<span>ChatGPT</span><span class="sep">·</span>
|
|
<span>Codex</span><span class="sep">·</span>
|
|
<span>Gemini</span>
|
|
<span class="sep">|</span>
|
|
<span class="live"><span class="dot"></span>ai.puro.im · operational</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Title -->
|
|
<div class="text-center">
|
|
<h2 class="text-2xl font-bold text-slate-50">{{ t('auth.puroLoginTitle') }}</h2>
|
|
<p class="mt-2 text-sm text-slate-400">{{ t('auth.puroLoginSub') }}</p>
|
|
</div>
|
|
|
|
<div v-if="!backendModeEnabled && (linuxdoOAuthEnabled || oidcOAuthEnabled)" class="space-y-4">
|
|
<LinuxDoOAuthSection
|
|
v-if="linuxdoOAuthEnabled"
|
|
:disabled="isLoading"
|
|
:show-divider="false"
|
|
/>
|
|
<OidcOAuthSection
|
|
v-if="oidcOAuthEnabled"
|
|
:disabled="isLoading"
|
|
:provider-name="oidcOAuthProviderName"
|
|
:show-divider="false"
|
|
/>
|
|
<div class="flex items-center gap-3">
|
|
<div class="h-px flex-1 bg-gray-200 dark:bg-dark-700"></div>
|
|
<span class="text-xs text-gray-500 dark:text-dark-400">
|
|
{{ t('auth.oauthOrContinue') }}
|
|
</span>
|
|
<div class="h-px flex-1 bg-gray-200 dark:bg-dark-700"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Login Form -->
|
|
<form @submit.prevent="handleLogin" class="space-y-5">
|
|
<!-- Email Input -->
|
|
<div>
|
|
<label for="email" class="input-label">
|
|
{{ t('auth.emailLabel') }}
|
|
</label>
|
|
<div class="relative">
|
|
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
|
|
<Icon name="mail" size="md" class="text-gray-400 dark:text-dark-500" />
|
|
</div>
|
|
<input
|
|
id="email"
|
|
v-model="formData.email"
|
|
type="email"
|
|
required
|
|
autofocus
|
|
autocomplete="email"
|
|
:disabled="isLoading"
|
|
class="input pl-11"
|
|
:class="{ 'input-error': errors.email }"
|
|
:placeholder="t('auth.emailPlaceholder')"
|
|
/>
|
|
</div>
|
|
<p v-if="errors.email" class="input-error-text">
|
|
{{ errors.email }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Password Input -->
|
|
<div>
|
|
<label for="password" class="input-label">
|
|
{{ t('auth.passwordLabel') }}
|
|
</label>
|
|
<div class="relative">
|
|
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
|
|
<Icon name="lock" size="md" class="text-gray-400 dark:text-dark-500" />
|
|
</div>
|
|
<input
|
|
id="password"
|
|
v-model="formData.password"
|
|
:type="showPassword ? 'text' : 'password'"
|
|
required
|
|
autocomplete="current-password"
|
|
:disabled="isLoading"
|
|
class="input pl-11 pr-11"
|
|
:class="{ 'input-error': errors.password }"
|
|
:placeholder="t('auth.passwordPlaceholder')"
|
|
/>
|
|
<button
|
|
type="button"
|
|
@click="showPassword = !showPassword"
|
|
class="absolute inset-y-0 right-0 flex items-center pr-3.5 text-gray-400 transition-colors hover:text-gray-600 dark:hover:text-dark-300"
|
|
>
|
|
<Icon v-if="showPassword" name="eyeOff" size="md" />
|
|
<Icon v-else name="eye" size="md" />
|
|
</button>
|
|
</div>
|
|
<div class="mt-1 flex items-center justify-between">
|
|
<p v-if="errors.password" class="input-error-text">
|
|
{{ errors.password }}
|
|
</p>
|
|
<span v-else></span>
|
|
<router-link
|
|
v-if="passwordResetEnabled && !backendModeEnabled"
|
|
to="/forgot-password"
|
|
class="text-sm font-medium text-primary-600 transition-colors hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
|
|
>
|
|
{{ t('auth.forgotPassword') }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Turnstile Widget -->
|
|
<div v-if="turnstileEnabled && turnstileSiteKey">
|
|
<TurnstileWidget
|
|
ref="turnstileRef"
|
|
:site-key="turnstileSiteKey"
|
|
@verify="onTurnstileVerify"
|
|
@expire="onTurnstileExpire"
|
|
@error="onTurnstileError"
|
|
/>
|
|
<p v-if="errors.turnstile" class="input-error-text mt-2 text-center">
|
|
{{ errors.turnstile }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
<transition name="fade">
|
|
<div
|
|
v-if="errorMessage"
|
|
class="rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-800/50 dark:bg-red-900/20"
|
|
>
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex-shrink-0">
|
|
<Icon name="exclamationCircle" size="md" class="text-red-500" />
|
|
</div>
|
|
<p class="text-sm text-red-700 dark:text-red-400">
|
|
{{ errorMessage }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<!-- Submit Button -->
|
|
<button
|
|
type="submit"
|
|
:disabled="isLoading || (turnstileEnabled && !turnstileToken)"
|
|
class="btn btn-primary w-full"
|
|
>
|
|
<svg
|
|
v-if="isLoading"
|
|
class="-ml-1 mr-2 h-4 w-4 animate-spin text-white"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle
|
|
class="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
stroke-width="4"
|
|
></circle>
|
|
<path
|
|
class="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
></path>
|
|
</svg>
|
|
<Icon v-else name="login" size="md" class="mr-2" />
|
|
{{ isLoading ? t('auth.signingIn') : t('auth.signIn') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<template v-if="!backendModeEnabled" #footer>
|
|
<p class="text-gray-500 dark:text-dark-400">
|
|
{{ t('auth.dontHaveAccount') }}
|
|
<router-link
|
|
to="/register"
|
|
class="font-medium text-primary-600 transition-colors hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
|
|
>
|
|
{{ t('auth.signUp') }}
|
|
</router-link>
|
|
</p>
|
|
</template>
|
|
</AuthLayout>
|
|
|
|
<!-- 2FA Modal -->
|
|
<TotpLoginModal
|
|
v-if="show2FAModal"
|
|
ref="totpModalRef"
|
|
:temp-token="totpTempToken"
|
|
:user-email-masked="totpUserEmailMasked"
|
|
@verify="handle2FAVerify"
|
|
@cancel="handle2FACancel"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { AuthLayout } from '@/components/layout'
|
|
import LinuxDoOAuthSection from '@/components/auth/LinuxDoOAuthSection.vue'
|
|
import OidcOAuthSection from '@/components/auth/OidcOAuthSection.vue'
|
|
import TotpLoginModal from '@/components/auth/TotpLoginModal.vue'
|
|
import Icon from '@/components/icons/Icon.vue'
|
|
import TurnstileWidget from '@/components/TurnstileWidget.vue'
|
|
import { useAuthStore, useAppStore } from '@/stores'
|
|
import { getPublicSettings, isTotp2FARequired } from '@/api/auth'
|
|
import type { TotpLoginResponse } from '@/types'
|
|
|
|
const { t } = useI18n()
|
|
|
|
// ==================== Router & Stores ====================
|
|
|
|
const router = useRouter()
|
|
const authStore = useAuthStore()
|
|
const appStore = useAppStore()
|
|
|
|
// ==================== State ====================
|
|
|
|
const isLoading = ref<boolean>(false)
|
|
const errorMessage = ref<string>('')
|
|
const showPassword = ref<boolean>(false)
|
|
|
|
// Public settings
|
|
const turnstileEnabled = ref<boolean>(false)
|
|
const turnstileSiteKey = ref<string>('')
|
|
const linuxdoOAuthEnabled = ref<boolean>(false)
|
|
const backendModeEnabled = ref<boolean>(false)
|
|
const oidcOAuthEnabled = ref<boolean>(false)
|
|
const oidcOAuthProviderName = ref<string>('OIDC')
|
|
const passwordResetEnabled = ref<boolean>(false)
|
|
|
|
// Turnstile
|
|
const turnstileRef = ref<InstanceType<typeof TurnstileWidget> | null>(null)
|
|
const turnstileToken = ref<string>('')
|
|
|
|
// 2FA state
|
|
const show2FAModal = ref<boolean>(false)
|
|
const totpTempToken = ref<string>('')
|
|
const totpUserEmailMasked = ref<string>('')
|
|
const totpModalRef = ref<InstanceType<typeof TotpLoginModal> | null>(null)
|
|
|
|
const formData = reactive({
|
|
email: '',
|
|
password: ''
|
|
})
|
|
|
|
const errors = reactive({
|
|
email: '',
|
|
password: '',
|
|
turnstile: ''
|
|
})
|
|
|
|
// ==================== Lifecycle ====================
|
|
|
|
onMounted(async () => {
|
|
const expiredFlag = sessionStorage.getItem('auth_expired')
|
|
if (expiredFlag) {
|
|
sessionStorage.removeItem('auth_expired')
|
|
const message = t('auth.reloginRequired')
|
|
errorMessage.value = message
|
|
appStore.showWarning(message)
|
|
}
|
|
|
|
try {
|
|
const settings = await getPublicSettings()
|
|
turnstileEnabled.value = settings.turnstile_enabled
|
|
turnstileSiteKey.value = settings.turnstile_site_key || ''
|
|
linuxdoOAuthEnabled.value = settings.linuxdo_oauth_enabled
|
|
backendModeEnabled.value = settings.backend_mode_enabled
|
|
oidcOAuthEnabled.value = settings.oidc_oauth_enabled
|
|
oidcOAuthProviderName.value = settings.oidc_oauth_provider_name || 'OIDC'
|
|
backendModeEnabled.value = settings.backend_mode_enabled
|
|
passwordResetEnabled.value = settings.password_reset_enabled
|
|
} catch (error) {
|
|
console.error('Failed to load public settings:', error)
|
|
}
|
|
})
|
|
|
|
// ==================== Turnstile Handlers ====================
|
|
|
|
function onTurnstileVerify(token: string): void {
|
|
turnstileToken.value = token
|
|
errors.turnstile = ''
|
|
}
|
|
|
|
function onTurnstileExpire(): void {
|
|
turnstileToken.value = ''
|
|
errors.turnstile = t('auth.turnstileExpired')
|
|
}
|
|
|
|
function onTurnstileError(): void {
|
|
turnstileToken.value = ''
|
|
errors.turnstile = t('auth.turnstileFailed')
|
|
}
|
|
|
|
// ==================== Validation ====================
|
|
|
|
function validateForm(): boolean {
|
|
// Reset errors
|
|
errors.email = ''
|
|
errors.password = ''
|
|
errors.turnstile = ''
|
|
|
|
let isValid = true
|
|
|
|
// Email validation
|
|
if (!formData.email.trim()) {
|
|
errors.email = t('auth.emailRequired')
|
|
isValid = false
|
|
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
|
errors.email = t('auth.invalidEmail')
|
|
isValid = false
|
|
}
|
|
|
|
// Password validation
|
|
if (!formData.password) {
|
|
errors.password = t('auth.passwordRequired')
|
|
isValid = false
|
|
} else if (formData.password.length < 6) {
|
|
errors.password = t('auth.passwordMinLength')
|
|
isValid = false
|
|
}
|
|
|
|
// Turnstile validation
|
|
if (turnstileEnabled.value && !turnstileToken.value) {
|
|
errors.turnstile = t('auth.completeVerification')
|
|
isValid = false
|
|
}
|
|
|
|
return isValid
|
|
}
|
|
|
|
// ==================== Form Handlers ====================
|
|
|
|
async function handleLogin(): Promise<void> {
|
|
// Clear previous error
|
|
errorMessage.value = ''
|
|
|
|
// Validate form
|
|
if (!validateForm()) {
|
|
return
|
|
}
|
|
|
|
isLoading.value = true
|
|
|
|
try {
|
|
// Call auth store login
|
|
const response = await authStore.login({
|
|
email: formData.email,
|
|
password: formData.password,
|
|
turnstile_token: turnstileEnabled.value ? turnstileToken.value : undefined
|
|
})
|
|
|
|
// Check if 2FA is required
|
|
if (isTotp2FARequired(response)) {
|
|
const totpResponse = response as TotpLoginResponse
|
|
totpTempToken.value = totpResponse.temp_token || ''
|
|
totpUserEmailMasked.value = totpResponse.user_email_masked || ''
|
|
show2FAModal.value = true
|
|
isLoading.value = false
|
|
return
|
|
}
|
|
|
|
// Show success toast
|
|
appStore.showSuccess(t('auth.loginSuccess'))
|
|
|
|
// Redirect to dashboard or intended route
|
|
const redirectTo = (router.currentRoute.value.query.redirect as string) || '/dashboard'
|
|
await router.push(redirectTo)
|
|
} catch (error: unknown) {
|
|
// Reset Turnstile on error
|
|
if (turnstileRef.value) {
|
|
turnstileRef.value.reset()
|
|
turnstileToken.value = ''
|
|
}
|
|
|
|
// Handle login error
|
|
const err = error as { message?: string; response?: { data?: { detail?: string } } }
|
|
|
|
if (err.response?.data?.detail) {
|
|
errorMessage.value = err.response.data.detail
|
|
} else if (err.message) {
|
|
errorMessage.value = err.message
|
|
} else {
|
|
errorMessage.value = t('auth.loginFailed')
|
|
}
|
|
|
|
// Also show error toast
|
|
appStore.showError(errorMessage.value)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
// ==================== 2FA Handlers ====================
|
|
|
|
async function handle2FAVerify(code: string): Promise<void> {
|
|
if (totpModalRef.value) {
|
|
totpModalRef.value.setVerifying(true)
|
|
}
|
|
|
|
try {
|
|
await authStore.login2FA(totpTempToken.value, code)
|
|
|
|
// Close modal and show success
|
|
show2FAModal.value = false
|
|
appStore.showSuccess(t('auth.loginSuccess'))
|
|
|
|
// Redirect to dashboard or intended route
|
|
const redirectTo = (router.currentRoute.value.query.redirect as string) || '/dashboard'
|
|
await router.push(redirectTo)
|
|
} catch (error: unknown) {
|
|
const err = error as { message?: string; response?: { data?: { message?: string } } }
|
|
const message = err.response?.data?.message || err.message || t('profile.totp.loginFailed')
|
|
|
|
if (totpModalRef.value) {
|
|
totpModalRef.value.setError(message)
|
|
totpModalRef.value.setVerifying(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
function handle2FACancel(): void {
|
|
show2FAModal.value = false
|
|
totpTempToken.value = ''
|
|
totpUserEmailMasked.value = ''
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
.auth-narrative-inner {
|
|
position: relative;
|
|
z-index: 2;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
color: var(--text-0);
|
|
}
|
|
.brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
letter-spacing: -0.01em;
|
|
color: var(--text-0);
|
|
text-decoration: none;
|
|
}
|
|
.brand svg {
|
|
color: var(--cyan);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.n-kicker {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
letter-spacing: 0.1em;
|
|
color: var(--cyan);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.auth-narrative-headline {
|
|
font-size: clamp(40px, 5vw, 64px);
|
|
font-weight: 800;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.03em;
|
|
margin-bottom: 24px;
|
|
}
|
|
.auth-narrative-headline .num-n { color: var(--amber); }
|
|
.auth-narrative-headline .num-1 { color: var(--cyan); }
|
|
.auth-narrative-sub {
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
color: var(--text-1);
|
|
}
|
|
.auth-narrative-tagline {
|
|
display: block;
|
|
margin-top: 12px;
|
|
font-size: 12px;
|
|
color: var(--text-3);
|
|
}
|
|
|
|
/* Route demo panel */
|
|
.route-demo {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
background: rgba(2, 6, 23, 0.6);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-md, 8px);
|
|
padding: 18px 22px;
|
|
max-width: 440px;
|
|
}
|
|
.route-demo .row {
|
|
display: flex;
|
|
gap: 20px;
|
|
padding: 4px 0;
|
|
align-items: center;
|
|
}
|
|
.route-demo .k { color: var(--text-3); min-width: 70px; }
|
|
.route-demo .v { color: var(--text-0); }
|
|
.route-demo .pill-inline {
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
background: rgba(34, 211, 238, 0.08);
|
|
border: 1px solid rgba(34, 211, 238, 0.25);
|
|
color: var(--cyan);
|
|
}
|
|
.route-demo .pill-inline.amber {
|
|
background: rgba(251, 191, 36, 0.08);
|
|
border-color: rgba(251, 191, 36, 0.25);
|
|
color: var(--amber);
|
|
}
|
|
.route-demo .dot-g {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
display: inline-block;
|
|
margin-right: 6px;
|
|
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
|
|
}
|
|
|
|
/* Bottom status bar */
|
|
.auth-narrative-foot {
|
|
font-size: 12px;
|
|
color: var(--text-3);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.n-bottom {
|
|
display: flex;
|
|
gap: 14px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.n-bottom .sep { color: var(--border-2, rgba(255,255,255,0.12)); }
|
|
.n-bottom .live {
|
|
color: var(--green, #34d399);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.n-bottom .live .dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: var(--green, #34d399);
|
|
box-shadow: 0 0 6px var(--green, #34d399);
|
|
}
|
|
</style>
|