forked from verdnatura/salix-front
148 lines
4.4 KiB
Vue
148 lines
4.4 KiB
Vue
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import { Dark, useQuasar } from 'quasar';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRouter } from 'vue-router';
|
|
import axios from 'axios';
|
|
|
|
import { useSession } from 'src/composables/useSession';
|
|
|
|
const quasar = useQuasar();
|
|
const session = useSession();
|
|
const router = useRouter();
|
|
const { t, locale } = useI18n();
|
|
|
|
let username = ref('');
|
|
let password = ref('');
|
|
let keepLogin = ref(true);
|
|
|
|
const darkMode = computed({
|
|
get() {
|
|
return Dark.isActive;
|
|
},
|
|
set(value) {
|
|
Dark.set(value);
|
|
},
|
|
});
|
|
|
|
async function onSubmit() {
|
|
try {
|
|
const { data } = await axios.post('/api/accounts/login', {
|
|
user: username.value,
|
|
password: password.value,
|
|
});
|
|
|
|
session.setToken({
|
|
token: data.token,
|
|
keepLogin: keepLogin.value,
|
|
});
|
|
|
|
quasar.notify({
|
|
message: t('login.loginSuccess'),
|
|
type: 'positive',
|
|
});
|
|
|
|
await router.push({ path: '/dashboard' });
|
|
} catch (error) {
|
|
if (axios.isAxiosError(error)) {
|
|
const errorCode = error.response && error.response.status;
|
|
if (errorCode === 401) {
|
|
quasar.notify({
|
|
message: t('login.loginError'),
|
|
type: 'negative',
|
|
});
|
|
}
|
|
} else {
|
|
quasar.notify({
|
|
message: t('errors.statusInternalServerError'),
|
|
type: 'negative',
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-layout>
|
|
<q-header class="transparent">
|
|
<q-toolbar>
|
|
<q-space></q-space>
|
|
<q-toggle
|
|
:label="t(`globals.lang['${locale}']`)"
|
|
icon="public"
|
|
color="orange"
|
|
false-value="es"
|
|
true-value="en"
|
|
v-model="locale"
|
|
/>
|
|
<q-toggle
|
|
v-model="darkMode"
|
|
checked-icon="dark_mode"
|
|
color="orange"
|
|
unchecked-icon="light_mode"
|
|
/>
|
|
</q-toolbar>
|
|
</q-header>
|
|
<q-page-container>
|
|
<q-page>
|
|
<div id="login">
|
|
<q-card class="login q-pa-xl">
|
|
<q-img
|
|
src="~/assets/logo.svg"
|
|
alt="Logo"
|
|
fit="contain"
|
|
:ratio="16 / 9"
|
|
class="q-mb-md"
|
|
/>
|
|
<q-form @submit="onSubmit" class="q-gutter-md">
|
|
<q-input
|
|
filled
|
|
color="orange"
|
|
v-model="username"
|
|
:label="t('login.username')"
|
|
lazy-rules
|
|
:rules="[
|
|
(val) => (val && val.length > 0) || 'Please type something',
|
|
]"
|
|
/>
|
|
<q-input
|
|
filled
|
|
color="orange"
|
|
type="password"
|
|
v-model="password"
|
|
:label="t('login.password')"
|
|
lazy-rules
|
|
:rules="[
|
|
(val) => (val && val.length > 0) || 'Please type something',
|
|
]"
|
|
/>
|
|
<q-toggle
|
|
v-model="keepLogin"
|
|
:label="t('login.keepLogin')"
|
|
color="orange"
|
|
/>
|
|
|
|
<div>
|
|
<q-btn :label="t('login.submit')" type="submit" color="orange" />
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</div>
|
|
</q-page>
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
#login {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: inherit;
|
|
}
|
|
|
|
.login {
|
|
width: 400px;
|
|
}
|
|
</style>
|