new funcionality
This commit is contained in:
@@ -3,6 +3,7 @@ import { reactive, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import AppLogo from '../components/AppLogo.vue';
|
||||
|
||||
const auth = useAuthStore();
|
||||
const route = useRoute();
|
||||
@@ -10,28 +11,59 @@ const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
const form = reactive({ email: '', password: '' });
|
||||
const code = ref('');
|
||||
const errors = ref<Record<string, string[]>>({});
|
||||
const loading = ref(false);
|
||||
const step = ref<'credentials' | 'two_factor'>('credentials');
|
||||
|
||||
function redirectAfterLogin(intended: string | null): void {
|
||||
if (intended) {
|
||||
window.location.href = intended;
|
||||
return;
|
||||
}
|
||||
|
||||
router.push((route.query.redirect as string) || { name: 'dashboard' });
|
||||
}
|
||||
|
||||
async function submit(): Promise<void> {
|
||||
loading.value = true;
|
||||
errors.value = {};
|
||||
|
||||
try {
|
||||
const intended = await auth.login(form);
|
||||
const result = await auth.login(form);
|
||||
|
||||
if (intended) {
|
||||
window.location.href = intended;
|
||||
if (result.twoFactor) {
|
||||
step.value = 'two_factor';
|
||||
return;
|
||||
}
|
||||
|
||||
router.push((route.query.redirect as string) || { name: 'dashboard' });
|
||||
redirectAfterLogin(result.intended);
|
||||
} catch (e: any) {
|
||||
errors.value = e.response?.data?.errors ?? { email: [t('login.invalidCredentials')] };
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitTwoFactor(): Promise<void> {
|
||||
loading.value = true;
|
||||
errors.value = {};
|
||||
|
||||
try {
|
||||
const intended = await auth.loginTwoFactor(code.value);
|
||||
redirectAfterLogin(intended);
|
||||
} catch (e: any) {
|
||||
errors.value = e.response?.data?.errors ?? { code: [t('login.invalidTwoFactorCode')] };
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function backToCredentials(): void {
|
||||
step.value = 'credentials';
|
||||
code.value = '';
|
||||
errors.value = {};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -39,31 +71,56 @@ async function submit(): Promise<void> {
|
||||
<div class="auth-page__glow"></div>
|
||||
|
||||
<div class="auth-card">
|
||||
<span class="auth-card__logo">O2</span>
|
||||
<h1 class="auth-card__title">{{ t('login.title') }}</h1>
|
||||
<p class="auth-card__subtitle">{{ t('login.subtitle') }}</p>
|
||||
<AppLogo class="auth-card__logo" />
|
||||
|
||||
<form class="auth-card__form" @submit.prevent="submit">
|
||||
<div class="field">
|
||||
<label class="field__label">{{ t('login.email') }}</label>
|
||||
<input v-model="form.email" type="email" required class="field__input" />
|
||||
<p v-if="errors.email" class="field__error">{{ errors.email[0] }}</p>
|
||||
</div>
|
||||
<template v-if="step === 'credentials'">
|
||||
<h1 class="auth-card__title">{{ t('login.title') }}</h1>
|
||||
<p class="auth-card__subtitle">{{ t('login.subtitle') }}</p>
|
||||
|
||||
<div class="field">
|
||||
<label class="field__label">{{ t('login.password') }}</label>
|
||||
<input v-model="form.password" type="password" required class="field__input" />
|
||||
</div>
|
||||
<form class="auth-card__form" @submit.prevent="submit">
|
||||
<div class="field">
|
||||
<label class="field__label">{{ t('login.email') }}</label>
|
||||
<input v-model="form.email" type="email" required class="field__input" />
|
||||
<p v-if="errors.email" class="field__error">{{ errors.email[0] }}</p>
|
||||
</div>
|
||||
|
||||
<button type="submit" :disabled="loading" class="btn btn--primary btn--pill btn--full">
|
||||
{{ loading ? t('login.submitting') : t('login.submit') }}
|
||||
</button>
|
||||
</form>
|
||||
<div class="field">
|
||||
<label class="field__label">{{ t('login.password') }}</label>
|
||||
<input v-model="form.password" type="password" required class="field__input" />
|
||||
<router-link to="/forgot-password" class="field__hint link">{{ t('login.forgotPassword') }}</router-link>
|
||||
</div>
|
||||
|
||||
<p class="auth-card__footer">
|
||||
{{ t('login.noAccount') }}
|
||||
<router-link to="/register" class="link">{{ t('login.signUp') }}</router-link>
|
||||
</p>
|
||||
<button type="submit" :disabled="loading" class="btn btn--primary btn--pill btn--full">
|
||||
{{ loading ? t('login.submitting') : t('login.submit') }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="auth-card__footer">
|
||||
{{ t('login.noAccount') }}
|
||||
<router-link to="/register" class="link">{{ t('login.signUp') }}</router-link>
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<h1 class="auth-card__title">{{ t('login.twoFactorTitle') }}</h1>
|
||||
<p class="auth-card__subtitle">{{ t('login.twoFactorSubtitle') }}</p>
|
||||
|
||||
<form class="auth-card__form" @submit.prevent="submitTwoFactor">
|
||||
<div class="field">
|
||||
<label class="field__label">{{ t('login.twoFactorCode') }}</label>
|
||||
<input v-model="code" required autofocus autocomplete="one-time-code" class="field__input" />
|
||||
<p v-if="errors.code" class="field__error">{{ errors.code[0] }}</p>
|
||||
</div>
|
||||
|
||||
<button type="submit" :disabled="loading" class="btn btn--primary btn--pill btn--full">
|
||||
{{ loading ? t('login.submitting') : t('login.twoFactorSubmit') }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="auth-card__footer">
|
||||
<button type="button" @click="backToCredentials" class="link">{{ t('login.backToLogin') }}</button>
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user