111 lines
3.1 KiB
Vue
111 lines
3.1 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { Notify } from 'quasar';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRouter } from 'vue-router';
|
|
import VnInputPassword from 'src/components/common/VnInputPassword.vue';
|
|
import { useSession } from 'src/composables/useSession';
|
|
import { useLogin } from 'src/composables/useLogin';
|
|
|
|
import VnLogo from 'components/ui/VnLogo.vue';
|
|
import VnInput from 'src/components/common/VnInput.vue';
|
|
import axios from 'axios';
|
|
|
|
const session = useSession();
|
|
const loginCache = useLogin();
|
|
const router = useRouter();
|
|
const { t } = useI18n();
|
|
|
|
const username = ref('');
|
|
const password = ref('');
|
|
const keepLogin = ref(true);
|
|
|
|
async function onSubmit() {
|
|
const params = {
|
|
user: username.value,
|
|
password: password.value,
|
|
};
|
|
try {
|
|
const { data } = await axios.post('Accounts/login', params);
|
|
if (!data) return;
|
|
|
|
data.keepLogin = keepLogin.value;
|
|
await session.setLogin(data);
|
|
} catch (res) {
|
|
if (res.response?.data?.error?.code === 'REQUIRES_2FA') {
|
|
Notify.create({
|
|
message: t('login.twoFactorRequired'),
|
|
icon: 'phoneLink_lock',
|
|
type: 'warning',
|
|
});
|
|
params.keepLogin = keepLogin.value;
|
|
loginCache.setUser(params);
|
|
return router.push({
|
|
name: 'TwoFactor',
|
|
query: router.currentRoute.value?.query,
|
|
});
|
|
}
|
|
Notify.create({
|
|
message: t('login.loginError'),
|
|
type: 'negative',
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard">
|
|
<VnLogo alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
|
|
<VnInput
|
|
v-model="username"
|
|
:label="t('login.username')"
|
|
lazy-rules
|
|
:rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
|
|
color="primary"
|
|
/>
|
|
<VnInputPassword
|
|
v-model="password"
|
|
:label="t('login.password')"
|
|
:toggle-visibility="true"
|
|
:rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
|
|
class="red"
|
|
/>
|
|
<QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
|
|
<div class="column flex-center q-mt-lg">
|
|
<QBtn
|
|
:label="t('login.submit')"
|
|
type="submit"
|
|
color="primary"
|
|
class="full-width"
|
|
rounded
|
|
unelevated
|
|
/>
|
|
<RouterLink
|
|
class="q-mt-md text-primary"
|
|
:to="`/recoverPassword?user=${username}`"
|
|
>
|
|
{{ t('I do not remember my password') }}
|
|
</RouterLink>
|
|
</div>
|
|
</QForm>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.formCard {
|
|
max-width: 350px;
|
|
min-width: 300px;
|
|
}
|
|
|
|
.q-input {
|
|
color: $primary;
|
|
}
|
|
@media (max-width: $breakpoint-xs-max) {
|
|
.formCard {
|
|
min-width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
<i18n>
|
|
es:
|
|
I do not remember my password: No recuerdo mi contraseña
|
|
</i18n>
|