fixed response data for login,
fixed tabs
This commit is contained in:
@ -2,14 +2,14 @@
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import {
|
||||
faEnvelope,
|
||||
faEye,
|
||||
faEyeSlash,
|
||||
faGlobe,
|
||||
faLock,
|
||||
faMoon,
|
||||
faRightToBracket,
|
||||
faSun,
|
||||
faEnvelope,
|
||||
faEye,
|
||||
faEyeSlash,
|
||||
faGlobe,
|
||||
faLock,
|
||||
faMoon,
|
||||
faRightToBracket,
|
||||
faSun,
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
import BackendAPI from '@/BackendAPI.ts'
|
||||
@ -19,11 +19,13 @@ import { SUPPORTED_LOCALES, type AppLocale } from '@/i18n'
|
||||
type ThemeMode = 'light' | 'dark'
|
||||
|
||||
type LoginResponse = {
|
||||
auto_registered?: boolean
|
||||
user?: {
|
||||
email?: string | null
|
||||
token?: string | null
|
||||
}
|
||||
data?: {
|
||||
auto_registered?: boolean
|
||||
user?: {
|
||||
email?: string | null
|
||||
token?: string | null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const { t } = useI18n({ useScope: 'global' })
|
||||
@ -36,199 +38,187 @@ const errorMessage = ref('')
|
||||
const successMessage = ref('')
|
||||
|
||||
const isSupportedLocale = (value: string): value is AppLocale => {
|
||||
return SUPPORTED_LOCALES.includes(value as AppLocale)
|
||||
return SUPPORTED_LOCALES.includes(value as AppLocale)
|
||||
}
|
||||
|
||||
const setLocale = (value: string) => {
|
||||
if (!isSupportedLocale(value)) {
|
||||
return
|
||||
}
|
||||
i18n.global.locale.value = value
|
||||
document.documentElement.setAttribute('lang', value)
|
||||
localStorage.setItem('locale', value)
|
||||
if (!isSupportedLocale(value)) {
|
||||
return
|
||||
}
|
||||
i18n.global.locale.value = value
|
||||
document.documentElement.setAttribute('lang', value)
|
||||
localStorage.setItem('locale', value)
|
||||
}
|
||||
|
||||
const localeValue = computed({
|
||||
get: () => i18n.global.locale.value as AppLocale,
|
||||
set: (value: string) => setLocale(value),
|
||||
get: () => i18n.global.locale.value as AppLocale,
|
||||
set: (value: string) => setLocale(value),
|
||||
})
|
||||
|
||||
watch(
|
||||
() => i18n.global.locale.value,
|
||||
(nextLocale) => {
|
||||
document.documentElement.setAttribute('lang', nextLocale)
|
||||
},
|
||||
{ immediate: true },
|
||||
() => i18n.global.locale.value,
|
||||
(nextLocale) => {
|
||||
document.documentElement.setAttribute('lang', nextLocale)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
const getInitialTheme = (): ThemeMode => {
|
||||
const storedTheme = localStorage.getItem('theme')
|
||||
return storedTheme === 'dark' ? 'dark' : 'light'
|
||||
const storedTheme = localStorage.getItem('theme')
|
||||
return storedTheme === 'dark' ? 'dark' : 'light'
|
||||
}
|
||||
|
||||
const theme = ref<ThemeMode>(getInitialTheme())
|
||||
|
||||
const applyTheme = (nextTheme: ThemeMode) => {
|
||||
theme.value = nextTheme
|
||||
document.documentElement.setAttribute('data-theme', nextTheme)
|
||||
localStorage.setItem('theme', nextTheme)
|
||||
theme.value = nextTheme
|
||||
document.documentElement.setAttribute('data-theme', nextTheme)
|
||||
localStorage.setItem('theme', nextTheme)
|
||||
}
|
||||
|
||||
applyTheme(theme.value)
|
||||
|
||||
const toggleTheme = () => {
|
||||
applyTheme(theme.value === 'dark' ? 'light' : 'dark')
|
||||
applyTheme(theme.value === 'dark' ? 'light' : 'dark')
|
||||
}
|
||||
|
||||
const isDarkMode = computed(() => theme.value === 'dark')
|
||||
|
||||
const themeLabel = computed(() => {
|
||||
return isDarkMode.value ? t('theme.dark') : t('theme.light')
|
||||
return isDarkMode.value ? t('theme.dark') : t('theme.light')
|
||||
})
|
||||
|
||||
const submitLabel = computed(() => {
|
||||
return isLoading.value ? t('auth.submitting') : t('auth.submit')
|
||||
return isLoading.value ? t('auth.submitting') : t('auth.submit')
|
||||
})
|
||||
|
||||
const mapApiError = (error: unknown): string => {
|
||||
if (typeof error !== 'string') {
|
||||
return t('auth.errors.loginFailed')
|
||||
}
|
||||
if (error === 'Invalid email or password') {
|
||||
return t('auth.errors.invalidCredentials')
|
||||
}
|
||||
if (error === 'Invalid email format') {
|
||||
return t('auth.errors.invalidEmail')
|
||||
}
|
||||
return t('auth.errors.loginFailed')
|
||||
if (typeof error !== 'string') {
|
||||
return t('auth.errors.loginFailed')
|
||||
}
|
||||
if (error === 'Invalid email or password') {
|
||||
return t('auth.errors.invalidCredentials')
|
||||
}
|
||||
if (error === 'Invalid email format') {
|
||||
return t('auth.errors.invalidEmail')
|
||||
}
|
||||
return t('auth.errors.loginFailed')
|
||||
}
|
||||
|
||||
const submitForm = async () => {
|
||||
errorMessage.value = ''
|
||||
successMessage.value = ''
|
||||
errorMessage.value = ''
|
||||
successMessage.value = ''
|
||||
|
||||
const normalizedEmail = email.value.trim().toLowerCase()
|
||||
const normalizedPassword = password.value
|
||||
const normalizedEmail = email.value.trim().toLowerCase()
|
||||
const normalizedPassword = password.value
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
|
||||
if (!emailRegex.test(normalizedEmail)) {
|
||||
errorMessage.value = t('auth.errors.invalidEmail')
|
||||
return
|
||||
}
|
||||
if (!emailRegex.test(normalizedEmail)) {
|
||||
errorMessage.value = t('auth.errors.invalidEmail')
|
||||
return
|
||||
}
|
||||
|
||||
if (normalizedPassword.length <= 0) {
|
||||
errorMessage.value = t('auth.errors.passwordRequired')
|
||||
return
|
||||
}
|
||||
if (normalizedPassword.length <= 0) {
|
||||
errorMessage.value = t('auth.errors.passwordRequired')
|
||||
return
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
try {
|
||||
const response = (await BackendAPI.userLogin(normalizedEmail, normalizedPassword)) as LoginResponse
|
||||
const token = response.user?.token ?? null
|
||||
const userEmail = response.user?.email ?? normalizedEmail
|
||||
isLoading.value = true
|
||||
try {
|
||||
const response = (await BackendAPI.userLogin(
|
||||
normalizedEmail,
|
||||
normalizedPassword,
|
||||
)) as LoginResponse
|
||||
const token = response.data?.user?.token ?? null
|
||||
const userEmail = response.data?.user?.email ?? normalizedEmail
|
||||
console.log(response)
|
||||
if (token) {
|
||||
localStorage.setItem('token', token)
|
||||
} else {
|
||||
localStorage.removeItem('token')
|
||||
}
|
||||
localStorage.setItem('user_email', userEmail)
|
||||
|
||||
if (token) {
|
||||
localStorage.setItem('token', token)
|
||||
} else {
|
||||
localStorage.removeItem('token')
|
||||
}
|
||||
localStorage.setItem('user_email', userEmail)
|
||||
successMessage.value = response.auto_registered
|
||||
? t('auth.successAutoRegistered')
|
||||
: t('auth.successLoggedIn')
|
||||
|
||||
successMessage.value = response.auto_registered
|
||||
? t('auth.successAutoRegistered')
|
||||
: t('auth.successLoggedIn')
|
||||
|
||||
email.value = normalizedEmail
|
||||
password.value = ''
|
||||
showPassword.value = false
|
||||
} catch (error) {
|
||||
errorMessage.value = mapApiError(error)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
email.value = normalizedEmail
|
||||
password.value = ''
|
||||
showPassword.value = false
|
||||
} catch (error) {
|
||||
errorMessage.value = mapApiError(error)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="auth-page">
|
||||
<div class="auth-shell">
|
||||
<section class="auth-brand">
|
||||
<img src="/Nutrio.png" :alt="t('app.name')" class="auth-logo" />
|
||||
<h1>{{ t('app.name') }}</h1>
|
||||
<p>{{ t('app.slogan') }}</p>
|
||||
</section>
|
||||
<main class="auth-page">
|
||||
<div class="auth-shell">
|
||||
<section class="auth-brand">
|
||||
<img src="/Nutrio.png" :alt="t('app.name')" class="auth-logo" />
|
||||
<h1>{{ t('app.name') }}</h1>
|
||||
<p>{{ t('app.slogan') }}</p>
|
||||
</section>
|
||||
|
||||
<section class="auth-card">
|
||||
<div class="auth-toolbar">
|
||||
<label class="locale-control" :aria-label="t('auth.languageLabel')">
|
||||
<font-awesome-icon :icon="faGlobe" />
|
||||
<span>{{ t('auth.languageLabel') }}</span>
|
||||
<select v-model="localeValue">
|
||||
<option v-for="lang in SUPPORTED_LOCALES" :key="lang" :value="lang">
|
||||
{{ t(`locale.${lang}`) }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<section class="auth-card">
|
||||
<div class="auth-toolbar">
|
||||
<label class="locale-control" :aria-label="t('auth.languageLabel')">
|
||||
<font-awesome-icon :icon="faGlobe" />
|
||||
<span>{{ t('auth.languageLabel') }}</span>
|
||||
<select v-model="localeValue">
|
||||
<option v-for="lang in SUPPORTED_LOCALES" :key="lang" :value="lang">
|
||||
{{ t(`locale.${lang}`) }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<button type="button" class="theme-btn" :aria-label="t('auth.themeToggle')" @click="toggleTheme">
|
||||
<font-awesome-icon :icon="isDarkMode ? faMoon : faSun" />
|
||||
<span>{{ themeLabel }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="theme-btn" :aria-label="t('auth.themeToggle')" @click="toggleTheme">
|
||||
<font-awesome-icon :icon="isDarkMode ? faMoon : faSun" />
|
||||
<span>{{ themeLabel }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h2>{{ t('auth.title') }}</h2>
|
||||
<p class="auth-subtitle">{{ t('auth.subtitle') }}</p>
|
||||
<h2>{{ t('auth.title') }}</h2>
|
||||
<p class="auth-subtitle">{{ t('auth.subtitle') }}</p>
|
||||
|
||||
<form class="auth-form" @submit.prevent="submitForm">
|
||||
<label for="email">{{ t('auth.emailLabel') }}</label>
|
||||
<div class="input-wrap">
|
||||
<font-awesome-icon :icon="faEnvelope" class="input-icon" />
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
:placeholder="t('auth.emailPlaceholder')"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<form class="auth-form" @submit.prevent="submitForm">
|
||||
<label for="email">{{ t('auth.emailLabel') }}</label>
|
||||
<div class="input-wrap">
|
||||
<font-awesome-icon :icon="faEnvelope" class="input-icon" />
|
||||
<input id="email" v-model="email" type="email" autocomplete="email"
|
||||
:placeholder="t('auth.emailPlaceholder')" required />
|
||||
</div>
|
||||
|
||||
<label for="password">{{ t('auth.passwordLabel') }}</label>
|
||||
<div class="input-wrap">
|
||||
<font-awesome-icon :icon="faLock" class="input-icon" />
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
autocomplete="current-password"
|
||||
:placeholder="t('auth.passwordPlaceholder')"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="password-btn"
|
||||
:aria-label="showPassword ? t('auth.hidePassword') : t('auth.showPassword')"
|
||||
@click="showPassword = !showPassword"
|
||||
>
|
||||
<font-awesome-icon :icon="showPassword ? faEyeSlash : faEye" />
|
||||
</button>
|
||||
</div>
|
||||
<label for="password">{{ t('auth.passwordLabel') }}</label>
|
||||
<div class="input-wrap">
|
||||
<font-awesome-icon :icon="faLock" class="input-icon" />
|
||||
<input id="password" v-model="password" :type="showPassword ? 'text' : 'password'"
|
||||
autocomplete="current-password" :placeholder="t('auth.passwordPlaceholder')" required />
|
||||
<button type="button" class="password-btn"
|
||||
:aria-label="showPassword ? t('auth.hidePassword') : t('auth.showPassword')"
|
||||
@click="showPassword = !showPassword">
|
||||
<font-awesome-icon :icon="showPassword ? faEyeSlash : faEye" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="submit-btn" type="submit" :disabled="isLoading">
|
||||
<font-awesome-icon :icon="faRightToBracket" />
|
||||
<span>{{ submitLabel }}</span>
|
||||
</button>
|
||||
</form>
|
||||
<button class="submit-btn" type="submit" :disabled="isLoading">
|
||||
<font-awesome-icon :icon="faRightToBracket" />
|
||||
<span>{{ submitLabel }}</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="auth-helper">{{ t('auth.helper') }}</p>
|
||||
<p class="auth-helper">{{ t('auth.helper') }}</p>
|
||||
|
||||
<p v-if="errorMessage.length > 0" class="feedback feedback-error">{{ errorMessage }}</p>
|
||||
<p v-if="errorMessage.length > 0" class="feedback feedback-error">{{ errorMessage }}</p>
|
||||
|
||||
<p v-if="successMessage.length > 0" class="feedback feedback-success">
|
||||
{{ successMessage }} {{ t('auth.tokenSaved') }}
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
<p v-if="successMessage.length > 0" class="feedback feedback-success">
|
||||
{{ successMessage }} {{ t('auth.tokenSaved') }}
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
Reference in New Issue
Block a user