refactor: organize frontend by feature
This commit is contained in:
214
frontend/src/features/auth/views/LoginView.vue
Normal file
214
frontend/src/features/auth/views/LoginView.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div class="flex min-h-full w-full items-center justify-center p-4">
|
||||
<div class="flex w-full max-w-[512px] flex-col gap-10">
|
||||
<h1 class="login-text text-center text-2xl font-bold">
|
||||
{{ t('title') }}
|
||||
</h1>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<google-login
|
||||
:callback="googleCallback"
|
||||
popup-type="TOKEN"
|
||||
>
|
||||
<button class="secondary">
|
||||
<v-icon
|
||||
:icon="mdiGoogle"
|
||||
class="mr-2"
|
||||
/>
|
||||
{{ t('continueWithGoogle') }}
|
||||
</button>
|
||||
</google-login>
|
||||
</div>
|
||||
|
||||
<div class="my-4 flex items-center">
|
||||
<div class="h-px grow bg-gray-200"></div>
|
||||
<span class="px-3 text-sm font-semibold uppercase text-gray-300">{{ t('orContinueWith') }}</span>
|
||||
<div class="h-px grow bg-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Add email/password form -->
|
||||
<v-form @submit.prevent="handleLocalLogin">
|
||||
<div class="flex flex-col gap-4">
|
||||
<v-text-field
|
||||
v-model="email"
|
||||
:label="t('email')"
|
||||
required
|
||||
type="email"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
:label="t('password')"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
required
|
||||
>
|
||||
<template v-slot:append-inner>
|
||||
<v-icon
|
||||
:icon="showPassword ? mdiEyeOff : mdiEye"
|
||||
class="visibility-toggle"
|
||||
size="small"
|
||||
@click="showPassword = !showPassword"
|
||||
/>
|
||||
</template>
|
||||
</v-text-field>
|
||||
|
||||
<v-btn
|
||||
block
|
||||
color="primary"
|
||||
type="submit"
|
||||
>
|
||||
{{ t('signIn') }}
|
||||
</v-btn>
|
||||
|
||||
<div class="text-center">
|
||||
<a
|
||||
class="cursor-pointer text-sm text-blue-500"
|
||||
@click="forgotPassword"
|
||||
>
|
||||
{{ t('forgotPassword') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 text-center">
|
||||
<a
|
||||
class="cursor-pointer text-sm text-blue-500"
|
||||
@click="resendVerification"
|
||||
>
|
||||
{{ t('resendVerification') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
{{ t('noAccount') }}
|
||||
<router-link
|
||||
class="text-blue-500"
|
||||
to="/register"
|
||||
>
|
||||
{{ t('register') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</v-form>
|
||||
</div>
|
||||
|
||||
<!-- Error notification -->
|
||||
<v-snackbar
|
||||
v-model="errorSnackBar"
|
||||
color="error"
|
||||
>
|
||||
{{ t('loginFailed') }}
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { GoogleLogin } from 'vue3-google-login';
|
||||
import { useAuthStore } from '@/features/auth/stores/authStore.js';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { mdiEye, mdiEyeOff, mdiGoogle } from '@mdi/js';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
const email = ref('');
|
||||
const password = ref('');
|
||||
const errorSnackBar = ref(false);
|
||||
const showPassword = ref(false);
|
||||
|
||||
const props = defineProps({
|
||||
returnUrl: {
|
||||
type: String,
|
||||
default: '/landing',
|
||||
},
|
||||
});
|
||||
|
||||
async function handleLocalLogin() {
|
||||
try {
|
||||
await authStore.login(email.value, password.value);
|
||||
await router.push(props.returnUrl);
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
errorSnackBar.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
async function googleCallback(token) {
|
||||
try {
|
||||
const response = await authStore.loginWithGoogle(JSON.stringify(token));
|
||||
if (response === true) {
|
||||
await router.push(props.returnUrl);
|
||||
} else {
|
||||
errorSnackBar.value = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
errorSnackBar.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function forgotPassword() {
|
||||
router.push('/forgot-password');
|
||||
}
|
||||
|
||||
function resendVerification() {
|
||||
router.push('/verify-email');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.visibility-toggle {
|
||||
@apply cursor-pointer;
|
||||
@apply transition-opacity duration-300;
|
||||
@apply opacity-60 hover:opacity-100;
|
||||
@apply z-10;
|
||||
}
|
||||
|
||||
/* Override Vuetify's default padding to accommodate our icon */
|
||||
:deep(.v-field__append-inner) {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
/* Dark mode support if needed */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.custom-divider {
|
||||
background-color: rgb(75, 85, 99);
|
||||
/* Equivalent to gray-600 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
{
|
||||
"en": {
|
||||
"title": "Sign in",
|
||||
"alt": "Login",
|
||||
"email": "Email",
|
||||
"password": "Password",
|
||||
"signIn": "Connect",
|
||||
"forgotPassword": "Forgot password?",
|
||||
"resendVerification": "Resend verification email",
|
||||
"orContinueWith": "Or",
|
||||
"noAccount": "Don't have an account?",
|
||||
"register": "Register",
|
||||
"loginFailed": "Login failed. Please check your credentials.",
|
||||
"continueWithGoogle": "Continue with Google"
|
||||
},
|
||||
"fr": {
|
||||
"title": "Se connecter",
|
||||
"alt": "Connexion",
|
||||
"email": "Email",
|
||||
"password": "Mot de passe",
|
||||
"signIn": "Connexion",
|
||||
"forgotPassword": "Mot de passe oublié?",
|
||||
"resendVerification": "Renvoyer l'email de vérification",
|
||||
"orContinueWith": "Ou",
|
||||
"noAccount": "Vous n'avez pas de compte?",
|
||||
"register": "S'inscrire",
|
||||
"loginFailed": "Échec de la connexion. Veuillez vérifier vos identifiants.",
|
||||
"continueWithGoogle": "Continuer avec Google"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
Reference in New Issue
Block a user