kincses/service-finder
1
0
Fork 0
Code Issues 52 Pull Requests Packages Projects 2 Releases Wiki Activity

2026.06.05 frontend javítgatás és új belépési logika megvalósítva

Browse Source
This commit is contained in:
Roo
2026-06-05 05:46:04 +00:00
parent 59a30ac428
commit 18524a08f2
38 changed files with 3967 additions and 1028 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/DashboardHeader.vue
View File

@@ -115,6 +115,9 @@
<!-- ── Spacer to push right items ─────────────────────────────── -->
<div class="flex-1"></div>
<!-- ── Language Switcher (extracted component) ────────────────── -->
<LanguageSwitcher />
<!-- ── Right: Welcome + User Dropdown ─────────────────────────── -->
<div class="relative flex items-center gap-4">
<!-- Welcome text -->
@@ -157,7 +160,7 @@
<div class="py-1">
<!-- Profile settings -->
<button
@click="isUserMenuOpen = false"
@click="goToProfile"
class="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-white/80 transition-all duration-150 hover:bg-white/5 hover:text-white"
>
<!-- User icon -->
@@ -213,9 +216,12 @@
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
import { useAuthStore } from '../stores/auth'
const router = useRouter()
const { t } = useI18n()
const props = withDefaults(
@@ -234,8 +240,9 @@ const authStore = useAuthStore()
// ── Dropdown states ────────────────────────────────────────────────
const isUserMenuOpen = ref(false)
const isFuncMenuOpen = ref(false)
// LanguageSwitcher handles its own state internally
// ── Close Funkciók menu on outside click ───────────────────────────
// ── Close dropdowns on outside click ───────────────────────────────
function handleOutsideClick(e: MouseEvent) {
const target = e.target as HTMLElement
if (isFuncMenuOpen.value && !target.closest('.func-menu-container')) {
@@ -280,6 +287,12 @@ const initials = computed(() => {
return '?'
})
// ── Navigate to Profile ────────────────────────────────────────────
function goToProfile() {
isUserMenuOpen.value = false
router.push('/profile')
}
// ── Logout handler ─────────────────────────────────────────────────
function handleLogout() {
isUserMenuOpen.value = false

96
frontend/src/components/LanguageSwitcher.vue Normal file
View File

@@ -0,0 +1,96 @@
<template>
<div class="relative flex items-center lang-switcher-container">
<button
@click.stop="isOpen = !isOpen"
class="flex items-center gap-1.5 px-3 py-2 rounded-xl text-sm font-medium text-white/70 transition-all duration-200 hover:bg-white/5 hover:text-white cursor-pointer"
:title="t('header.switchLanguage')"
>
<span class="text-base">{{ currentLocale === 'hu' ? '🇭🇺' : '🇬🇧' }}</span>
<span class="hidden sm:inline font-semibold">{{ currentLocale === 'hu' ? 'HU' : 'EN' }}</span>
<!-- Chevron down -->
<svg
class="w-3.5 h-3.5 ml-0.5 text-white/40 transition-transform duration-200"
:class="{ 'rotate-180': isOpen }"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<!-- ── Language Dropdown (Glassmorphism) ────────────────────────── -->
<Transition
enter-active-class="transition duration-150 ease-out"
enter-from-class="scale-95 opacity-0 -translate-y-2"
enter-to-class="scale-100 opacity-100 translate-y-0"
leave-active-class="transition duration-100 ease-in"
leave-from-class="scale-100 opacity-100 translate-y-0"
leave-to-class="scale-95 opacity-0 -translate-y-2"
>
<div
v-if="isOpen"
class="absolute left-0 top-full mt-2 w-40 z-50 rounded-xl border border-white/10 bg-[#04151F]/90 backdrop-blur-xl shadow-2xl shadow-black/40 overflow-hidden"
>
<div class="py-1">
<!-- Magyar -->
<button
@click="setLanguage('hu')"
class="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-white/80 transition-all duration-150 hover:bg-white/5 hover:text-white"
:class="{ 'text-[#70BC84] font-semibold': currentLocale === 'hu' }"
>
<span class="text-base">🇭🇺</span>
<span>Magyar</span>
<span v-if="currentLocale === 'hu'" class="ml-auto text-[#70BC84]">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
</button>
<!-- English -->
<button
@click="setLanguage('en')"
class="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-white/80 transition-all duration-150 hover:bg-white/5 hover:text-white"
:class="{ 'text-[#70BC84] font-semibold': currentLocale === 'en' }"
>
<span class="text-base">🇬🇧</span>
<span>English</span>
<span v-if="currentLocale === 'en'" class="ml-auto text-[#70BC84]">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
</button>
</div>
</div>
</Transition>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
const isOpen = ref(false)
const currentLocale = computed(() => locale.value)
function setLanguage(lang: string) {
locale.value = lang
localStorage.setItem('user-locale', lang)
isOpen.value = false
}
// ── Close dropdown on outside click ───────────────────────────────
function handleOutsideClick(e: MouseEvent) {
const target = e.target as HTMLElement
if (isOpen.value && !target.closest('.lang-switcher-container')) {
isOpen.value = false
}
}
onMounted(() => document.addEventListener('mousedown', handleOutsideClick))
onUnmounted(() => document.removeEventListener('mousedown', handleOutsideClick))
</script>

445
frontend/src/components/LoginModal.vue
View File

@@ -17,7 +17,7 @@
<div
class="relative transition-transform duration-700 transform-style-3d"
:class="{
'rotate-y-180': authMode === 'register',
'rotate-y-180': authMode === 'register' || authMode === 'resend',
'rotate-x-180': authMode === 'forgot'
}"
>
@@ -50,7 +50,7 @@
<!-- Title -->
<h2 class="mb-8 text-center text-2xl font-bold text-white">
Belépés a garázsba
{{ t('auth.loginTitle') }}
</h2>
<!-- Email Input -->
@@ -128,23 +128,43 @@
</button>
</div>
<!-- Forgot Password Link (right-aligned, always visible) -->
<div class="mb-6 text-right">
<!-- Remember Me Checkbox -->
<div class="mb-4 flex items-center gap-2">
<input
id="remember-me"
v-model="rememberMe"
type="checkbox"
class="h-4 w-4 rounded border-white/20 bg-white/5 text-[#14B8A6] focus:ring-2 focus:ring-[#14B8A6]/50 focus:ring-offset-0 cursor-pointer"
/>
<label for="remember-me" class="text-sm text-white/70 cursor-pointer select-none hover:text-white/90 transition-colors">
{{ t('auth.rememberMe') }}
</label>
</div>
<!-- Symmetric Link Row: Resend (left) + Forgot Password (right) -->
<div class="flex justify-between items-center w-full mt-2 mb-6 text-sm">
<a
href="#"
@click.prevent="switchMode('resend')"
class="text-xs text-[#75A882]/70 hover:text-[#D4AF37] transition-colors"
>
{{ t('auth.resendLink') }}
</a>
<a
href="#"
@click.prevent="switchMode('forgot')"
class="text-xs text-[#75A882] hover:text-[#D4AF37] transition-colors"
>
Elfelejtetted a jelszavad?
{{ t('auth.forgotPassword') }}
</a>
</div>
<!-- Error Message -->
<!-- Error Message (translated via i18n) -->
<div
v-if="authStore.error && authMode === 'login'"
class="mb-4 rounded-xl bg-red-500/20 px-4 py-3 text-sm text-red-300"
>
{{ authStore.error }}
{{ translateError(authStore.error) }}
</div>
<!-- Login Button (Premium) -->
@@ -153,17 +173,22 @@
:disabled="authStore.isLoading"
class="btn-premium w-full px-4 py-3 text-lg"
>
{{ authStore.isLoading ? 'Kérlek várj...' : 'Belépés' }}
{{ authStore.isLoading ? t('auth.loginLoading') : t('auth.loginButton') }}
</button>
<!-- Divider -->
<!-- Social Login Divider (Premium) -->
<div class="my-6 flex items-center gap-3">
<span class="flex-1 border-t border-white/10"></span>
<span class="text-sm text-white/40">vagy</span>
<span class="flex items-center gap-2 text-sm text-white/40">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
{{ t('auth.socialDivider') }}
</span>
<span class="flex-1 border-t border-white/10"></span>
</div>
<!-- Social Login Placeholders -->
<!-- Social Login Buttons -->
<div class="mb-6 grid grid-cols-2 gap-3">
<button
type="button"
@@ -192,13 +217,13 @@
<!-- Registration Link (Triggers Flip) -->
<p class="text-center text-sm text-white/50">
Még nincs garázsod?
{{ t('auth.noAccount') }}
<a
href="#"
@click.prevent="switchMode('register')"
class="font-semibold text-[#D4AF37] transition-colors hover:text-[#D4AF37]/80"
>
Regisztráció
{{ t('auth.registerLink') }}
</a>
</p>
</form>
@@ -232,7 +257,7 @@
<!-- Title -->
<h2 class="mb-8 text-center text-2xl font-bold text-white">
Új Garázs Nyitása
{{ t('auth.registerTitle') }}
</h2>
<!-- Last Name Input -->
@@ -343,12 +368,12 @@
</button>
</div>
<!-- Error Message -->
<!-- Error Message (translated via i18n) -->
<div
v-if="authStore.error && authMode === 'register'"
class="mb-4 rounded-xl bg-red-500/20 px-4 py-3 text-sm text-red-300"
>
{{ authStore.error }}
{{ translateError(authStore.error) }}
</div>
<!-- Register Button (Premium) -->
@@ -357,18 +382,18 @@
:disabled="authStore.isLoading"
class="btn-premium w-full px-4 py-3 text-lg"
>
{{ authStore.isLoading ? 'Kérlek várj...' : 'Regisztráció' }}
{{ authStore.isLoading ? t('auth.loginLoading') : t('auth.registerButton') }}
</button>
<!-- Switch back to Login -->
<p class="mt-6 text-center text-sm text-white/50">
Már van garázsod?
{{ t('auth.haveAccount') }}
<a
href="#"
@click.prevent="switchMode('login')"
class="font-semibold text-[#D4AF37] transition-colors hover:text-[#D4AF37]/80"
>
Belépés
{{ t('auth.loginLink') }}
</a>
</p>
</form>
@@ -402,16 +427,48 @@
<!-- Title -->
<h2 class="mb-6 text-center text-2xl font-bold text-white">
Új jelszó igénylése
{{ t('auth.forgotTitle') }}
</h2>
<!-- Description -->
<p class="mb-6 rounded-xl bg-[#1A6B5A]/20 px-4 py-3 text-center text-sm text-[#5EC4B0]">
Add meg az e-mail címed, és küldünk egy biztonsági linket.
<!-- Description (only show before successful send) -->
<p
v-if="!forgotSuccess && !isUserInactive"
class="mb-6 rounded-xl bg-[#1A6B5A]/20 px-4 py-3 text-center text-sm text-[#5EC4B0]"
>
{{ t('auth.forgotDescription') }}
</p>
<!-- Email Input -->
<div class="mb-6">
<!-- Success Message -->
<div
v-if="forgotSuccess"
class="mb-6 rounded-xl bg-[#70BC84]/20 px-4 py-3 text-center text-sm text-[#70BC84]"
>
{{ t('auth.forgotSuccess') }}
</div>
<!-- Inactive User Message + Resend Activation Button -->
<div
v-if="isUserInactive"
class="mb-6 rounded-xl bg-amber-500/20 px-4 py-4 text-center"
>
<p class="mb-3 text-sm text-amber-300">
{{ t('auth.inactiveMessage') }}
</p>
<button
type="button"
:disabled="authStore.isLoading"
@click="handleResendActivation"
class="rounded-lg bg-[#D4AF37] px-5 py-2 text-sm font-semibold text-[#062535] transition-all hover:bg-[#D4AF37]/90 disabled:opacity-50"
>
{{ authStore.isLoading ? t('auth.loginLoading') : t('auth.resendActivationButton') }}
</button>
<p v-if="resendSuccess" class="mt-2 text-xs text-[#70BC84]">
{{ t('auth.resendActivationSuccess') }}
</p>
</div>
<!-- Email Input (hide after successful send) -->
<div v-if="!forgotSuccess && !isUserInactive" class="mb-6">
<label for="forgot-email" class="mb-2 block text-sm font-medium text-white/80">
E-mail
</label>
@@ -426,31 +483,133 @@
/>
</div>
<!-- Error Message -->
<!-- Error Message (non-inactive errors, translated) -->
<div
v-if="authStore.error && authMode === 'forgot'"
v-if="forgotError && !isUserInactive"
class="mb-4 rounded-xl bg-red-500/20 px-4 py-3 text-sm text-red-300"
>
{{ authStore.error }}
{{ translateError(forgotError) }}
</div>
<!-- Send Link Button (Premium) -->
<!-- Send Link Button (Premium) — hide after successful send or inactive -->
<button
v-if="!forgotSuccess && !isUserInactive"
type="submit"
:disabled="authStore.isLoading"
class="btn-premium w-full px-4 py-3 text-lg"
>
{{ authStore.isLoading ? 'Kérlek várj...' : 'Link Küldése' }}
{{ authStore.isLoading ? t('auth.loginLoading') : t('auth.forgotSendButton') }}
</button>
<!-- Back to Login -->
<!-- Back to Login (always visible) -->
<p class="mt-6 text-center text-sm text-white/50">
<a
href="#"
@click.prevent="switchMode('login')"
class="font-semibold text-[#D4AF37] transition-colors hover:text-[#D4AF37]/80"
>
Vissza a belépéshez
{{ t('auth.backToLogin') }}
</a>
</p>
</form>
<!-- ==================== FOURTH FACE: RESEND ACTIVATION ==================== -->
<form
v-if="activeBackFace === 'resend'"
@submit.prevent="handleResend"
class="backface-hidden rotate-y-180 absolute inset-0 w-full rounded-2xl border border-[#75A882]/30 bg-[#062535] p-8 shadow-2xl"
>
<!-- Close Button (X) -->
<button
type="button"
@click="$emit('close')"
class="absolute right-4 top-4 text-white/60 transition-colors hover:text-white"
>
<svg
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
<!-- Title -->
<h2 class="mb-6 text-center text-2xl font-bold text-white">
{{ t('auth.resendTitle') }}
</h2>
<!-- Description (only show before successful send) -->
<p
v-if="!resendSuccess"
class="mb-6 rounded-xl bg-[#1A6B5A]/20 px-4 py-3 text-center text-sm text-[#5EC4B0]"
>
{{ t('auth.resendDescription') }}
</p>
<!-- Success Card (green checkmark) -->
<div
v-if="resendSuccess"
class="mb-6 rounded-xl bg-[#70BC84]/20 px-4 py-6 text-center"
>
<div class="mb-3 flex justify-center">
<svg class="h-12 w-12 text-[#70BC84]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<p class="text-sm font-medium text-[#70BC84]">
{{ t('auth.resendSuccess') }}
</p>
</div>
<!-- Email Input (hide after successful send) -->
<div v-if="!resendSuccess" class="mb-6">
<label for="resend-email" class="mb-2 block text-sm font-medium text-white/80">
E-mail
</label>
<input
id="resend-email"
v-model="email"
type="email"
placeholder="pelda@email.com"
autocomplete="email"
required
class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-white/30 backdrop-blur-sm transition-all duration-200 focus:border-[#75A882] focus:outline-none focus:ring-2 focus:ring-[#75A882]/50"
/>
</div>
<!-- Error Message (translated) -->
<div
v-if="resendError && !resendSuccess"
class="mb-4 rounded-xl bg-red-500/20 px-4 py-3 text-sm text-red-300"
>
{{ translateError(resendError) }}
</div>
<!-- Send Button (Premium) — hide after success, disabled during cooldown -->
<button
v-if="!resendSuccess"
type="submit"
:disabled="resendCooldown > 0 || authStore.isLoading"
class="btn-premium w-full px-4 py-3 text-lg"
>
{{ authStore.isLoading ? t('auth.loginLoading') : (resendCooldown > 0 ? t('auth.resend_cooldown', { seconds: resendCooldown }) : t('auth.send_email')) }}
</button>
<!-- Back to Login (always visible) -->
<p class="mt-6 text-center text-sm text-white/50">
<a
href="#"
@click.prevent="switchMode('login')"
class="font-semibold text-[#D4AF37] transition-colors hover:text-[#D4AF37]/80"
>
{{ t('auth.backToLogin') }}
</a>
</p>
</form>
@@ -461,9 +620,13 @@
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useAuthStore } from '../stores/auth'
import FingerprintJS from '@fingerprintjs/fingerprintjs'
const { t } = useI18n()
const props = defineProps<{
visible: boolean
@@ -476,11 +639,32 @@ const emit = defineEmits<{
const router = useRouter()
const authStore = useAuthStore()
// ── Login form fields ──
const email = ref('')
// ── Device Fingerprinting (FingerprintJS) ──
let fpPromise: ReturnType<typeof FingerprintJS.load> | null = null
/**
* Generate a device fingerprint hash asynchronously.
* Returns the visitorId string, or null if FingerprintJS fails to load.
*/
async function getDeviceFingerprint(): Promise<string | null> {
try {
if (!fpPromise) {
fpPromise = FingerprintJS.load()
}
const fp = await fpPromise
const result = await fp.get()
return result.visitorId
} catch (err) {
console.warn('FingerprintJS failed to load:', err)
return null
}
}
// ── Login form fields (persisted across modal close) ──
const email = ref(localStorage.getItem('saved-email') || '')
const password = ref('')
// ── Register form fields ──
// ── Register form fields (persisted across modal close) ──
const lastName = ref('')
const firstName = ref('')
const regEmail = ref('')
@@ -488,16 +672,90 @@ const regPassword = ref('')
// ── Forgot password form fields ──
const forgotEmail = ref('')
const forgotError = ref('')
const forgotSuccess = ref(false)
const isUserInactive = ref(false)
const resendSuccess = ref(false)
// ── Resend form fields ──
const resendError = ref('')
// ── Resend cooldown (60s spam protection, persisted in localStorage) ──
const resendCooldown = ref(0)
let cooldownTimer: ReturnType<typeof setInterval> | null = null
function startCooldown() {
const expiry = Date.now() + 60000
localStorage.setItem('resend_cooldown_until', expiry.toString())
resendCooldown.value = 60
if (cooldownTimer) clearInterval(cooldownTimer)
cooldownTimer = setInterval(() => {
const remaining = Math.max(0, Math.round((expiry - Date.now()) / 1000))
resendCooldown.value = remaining
if (remaining <= 0) {
if (cooldownTimer) {
clearInterval(cooldownTimer)
cooldownTimer = null
}
localStorage.removeItem('resend_cooldown_until')
}
}, 1000)
}
// ── Password visibility states (hold-to-show) ──
const showPassword = ref(false)
const showRegPassword = ref(false)
// ── 3D Flip state machine ──
const authMode = ref<'login' | 'register' | 'forgot'>('login')
const activeBackFace = ref<'register' | 'forgot'>('register')
// ── Remember Me state (persisted in localStorage) ──
const rememberMe = ref(localStorage.getItem('remember-me-state') === 'true')
// ── Reset modal state when it closes ──
// ── 3D Flip state machine ──
const authMode = ref<'login' | 'register' | 'forgot' | 'resend'>('login')
const activeBackFace = ref<'register' | 'forgot' | 'resend'>('register')
// ── Restore saved email, remember-me state, and resend cooldown on mount ──
onMounted(() => {
const saved = localStorage.getItem('saved-email')
if (saved) {
email.value = saved
}
// Restore remember-me checkbox state
rememberMe.value = localStorage.getItem('remember-me-state') === 'true'
// Restore resend cooldown from localStorage (survives page refresh)
const storedExpiry = localStorage.getItem('resend_cooldown_until')
if (storedExpiry) {
const remaining = Math.max(0, Math.round((parseInt(storedExpiry, 10) - Date.now()) / 1000))
if (remaining > 0) {
resendCooldown.value = remaining
// Resume the countdown
if (cooldownTimer) clearInterval(cooldownTimer)
cooldownTimer = setInterval(() => {
const rem = Math.max(0, Math.round((parseInt(storedExpiry, 10) - Date.now()) / 1000))
resendCooldown.value = rem
if (rem <= 0) {
if (cooldownTimer) {
clearInterval(cooldownTimer)
cooldownTimer = null
}
localStorage.removeItem('resend_cooldown_until')
}
}, 1000)
} else {
localStorage.removeItem('resend_cooldown_until')
}
}
})
// ── Clean up interval on unmount ──
onUnmounted(() => {
if (cooldownTimer) {
clearInterval(cooldownTimer)
cooldownTimer = null
}
})
// ── On modal close: keep form fields, just reset view and clear errors ──
watch(
() => props.visible,
(newVal) => {
@@ -505,14 +763,11 @@ watch(
// Reset view to login
authMode.value = 'login'
activeBackFace.value = 'register'
// Clear all form fields
email.value = ''
password.value = ''
lastName.value = ''
firstName.value = ''
regEmail.value = ''
regPassword.value = ''
forgotEmail.value = ''
forgotError.value = ''
forgotSuccess.value = false
isUserInactive.value = false
resendSuccess.value = false
resendError.value = ''
// Clear store error
authStore.clearError()
}
@@ -524,17 +779,44 @@ watch(authMode, () => {
authStore.clearError()
})
function switchMode(mode: 'login' | 'register' | 'forgot') {
function switchMode(mode: 'login' | 'register' | 'forgot' | 'resend') {
if (mode !== 'login') {
activeBackFace.value = mode
}
authMode.value = mode
}
// ── Smart Login Logic ──
/**
* Translate an error value that may be an i18n key (e.g. 'auth.invalid_credentials')
* or a raw string. If it starts with 'auth.', treat it as an i18n key and translate it.
* Otherwise, return the raw string as-is.
*/
function translateError(msg: string): string {
if (!msg) return ''
if (msg.startsWith('auth.')) {
const translated = t(msg)
// If translation returns the key itself (missing), fall back to raw
if (translated !== msg) return translated
}
return msg
}
// ── Smart Login Logic (with Device Fingerprinting) ──
async function handleLogin() {
try {
await authStore.login(email.value, password.value)
// Generate device fingerprint asynchronously (non-blocking)
const deviceFingerprint = await getDeviceFingerprint()
await authStore.login(email.value, password.value, deviceFingerprint || undefined)
// Persist remember-me state and email
if (rememberMe.value) {
localStorage.setItem('remember-me-state', 'true')
localStorage.setItem('saved-email', email.value)
} else {
localStorage.setItem('remember-me-state', 'false')
localStorage.removeItem('saved-email')
}
// After successful login, check KYC status
if (authStore.isKycComplete) {
@@ -546,7 +828,7 @@ async function handleLogin() {
// Close the modal
emit('close')
} catch {
// Error is already set in authStore.error — UI displays it automatically
// Error is already set in authStore.error — UI displays it automatically via translateError
}
}
@@ -560,15 +842,12 @@ async function handleRegister() {
last_name: lastName.value,
})
// Registration successful — flip back to login so user can sign in
switchMode('login')
// Pre-fill the email field
email.value = regEmail.value
// Clear register fields
lastName.value = ''
firstName.value = ''
regEmail.value = ''
regPassword.value = ''
// Save email to localStorage for next visit
localStorage.setItem('saved-email', regEmail.value)
// Registration successful — redirect to email verification page
emit('close')
router.push('/verify')
} catch {
// Error is already set in authStore.error
}
@@ -576,16 +855,54 @@ async function handleRegister() {
// ── Forgot Password Logic ──
async function handleForgotPassword() {
forgotError.value = ''
isUserInactive.value = false
resendSuccess.value = false
try {
await authStore.forgotPassword(forgotEmail.value)
// Success — flip back to login
switchMode('login')
// Success — show green success message and "Back to login" button
forgotSuccess.value = true
forgotEmail.value = ''
} catch {
const errMsg = authStore.error || ''
// Check if the error is about inactive user
if (errMsg === 'auth.user_inactive') {
isUserInactive.value = true
forgotError.value = errMsg
} else {
// Show error message from the store (already an i18n key or raw string)
forgotError.value = errMsg || 'auth.forgotFailed'
}
}
}
// ── Resend Activation Email Logic (from forgot view) ──
async function handleResendActivation() {
resendSuccess.value = false
try {
await authStore.resendVerification(forgotEmail.value)
resendSuccess.value = true
} catch {
// Error is already set in authStore.error
}
}
// ── Resend Verification Email (from resend view) ──
async function handleResend() {
resendError.value = ''
resendSuccess.value = false
try {
await authStore.resendVerification(email.value)
// Success — show green success card
resendSuccess.value = true
// Start 60s cooldown ONLY after successful send
startCooldown()
} catch {
const errMsg = authStore.error || ''
resendError.value = errMsg || 'auth.resendFailed'
}
}
</script>
<style scoped>
@@ -621,4 +938,4 @@ async function handleForgotPassword() {
.rotate-x-180 {
transform: rotateX(180deg);
}
</style>
</style>