Merge branch 'test' of https://gitea.verdnatura.es/verdnatura/salix-front
gitea/salix-front/pipeline/head This commit looks good
Details
gitea/salix-front/pipeline/head This commit looks good
Details
This commit is contained in:
commit
3156292c63
|
|
@ -102,7 +102,8 @@ module.exports = configure(function (ctx) {
|
|||
config: {
|
||||
brand: {
|
||||
primary: 'orange'
|
||||
}
|
||||
},
|
||||
dark: 'auto'
|
||||
},
|
||||
lang: 'es',
|
||||
|
||||
|
|
|
|||
|
|
@ -4,12 +4,13 @@ export default {
|
|||
es: 'Spanish',
|
||||
en: 'English',
|
||||
},
|
||||
language: 'Language',
|
||||
collapseMenu: 'Collapse left menu',
|
||||
backToDashboard: 'Return to dashboard',
|
||||
notifications: 'Notifications',
|
||||
userPanel: 'User panel',
|
||||
favoriteModules: 'Favorite modules',
|
||||
theme: 'Theme',
|
||||
darkMode: 'Dark mode',
|
||||
logOut: 'Log out',
|
||||
dataSaved: 'Data saved',
|
||||
add: 'Add',
|
||||
|
|
@ -43,7 +44,8 @@ export default {
|
|||
submit: 'Log in',
|
||||
keepLogin: 'Keep me logged in',
|
||||
loginSuccess: 'You have successfully logged in',
|
||||
loginError: 'Invalid username or password'
|
||||
loginError: 'Invalid username or password',
|
||||
fieldRequired: 'This field is required'
|
||||
},
|
||||
dashboard: {
|
||||
pageTitles: {
|
||||
|
|
|
|||
|
|
@ -4,12 +4,13 @@ export default {
|
|||
es: 'Español',
|
||||
en: 'Inglés',
|
||||
},
|
||||
language: 'Idioma',
|
||||
collapseMenu: 'Contraer menú lateral',
|
||||
backToDashboard: 'Volver al tablón',
|
||||
notifications: 'Notificaciones',
|
||||
userPanel: 'Panel de usuario',
|
||||
favoriteModules: 'Módulos favoritos',
|
||||
theme: 'Tema',
|
||||
darkMode: 'Modo oscuro',
|
||||
logOut: 'Cerrar sesión',
|
||||
dataSaved: 'Datos guardados',
|
||||
add: 'Añadir',
|
||||
|
|
@ -44,6 +45,7 @@ export default {
|
|||
keepLogin: 'Mantener sesión iniciada',
|
||||
loginSuccess: 'Inicio de sesión correcto',
|
||||
loginError: 'Nombre de usuario o contraseña incorrectos',
|
||||
fieldRequired: 'Este campo es obligatorio'
|
||||
},
|
||||
dashboard: {
|
||||
pageTitles: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { ref, computed } from 'vue';
|
||||
import { Dark, Quasar, useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
|
|
@ -10,7 +10,31 @@ import { useSession } from 'src/composables/useSession';
|
|||
const quasar = useQuasar();
|
||||
const session = useSession();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const userLocale = computed({
|
||||
get() {
|
||||
return locale.value;
|
||||
},
|
||||
set(value) {
|
||||
locale.value = value;
|
||||
|
||||
if (value === 'en') value = 'en-GB';
|
||||
|
||||
import(`quasar/lang/${value}`).then((language) => {
|
||||
Quasar.lang.set(language.default);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const darkMode = computed({
|
||||
get() {
|
||||
return Dark.isActive;
|
||||
},
|
||||
set(value) {
|
||||
Dark.set(value);
|
||||
},
|
||||
});
|
||||
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
|
|
@ -43,35 +67,61 @@ async function onSubmit() {
|
|||
<template>
|
||||
<q-layout>
|
||||
<q-page-container>
|
||||
<q-page>
|
||||
<div id="login">
|
||||
<q-card class="login q-pa-xl">
|
||||
<q-page id="login">
|
||||
<q-page-sticky position="top-right">
|
||||
<q-toolbar>
|
||||
<q-btn :label="t('globals.language')" icon="translate" color="primary" size="sm" flat rounded>
|
||||
<q-menu auto-close>
|
||||
<q-list dense>
|
||||
<q-item @click="userLocale = 'en'" :active="userLocale == 'en'" v-ripple clickable>
|
||||
{{ t('globals.lang.en') }}
|
||||
</q-item>
|
||||
<q-item @click="userLocale = 'es'" :active="userLocale == 'es'" v-ripple clickable>
|
||||
{{ t('globals.lang.es') }}
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t(`globals.darkMode`) }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-toggle v-model="darkMode" checked-icon="dark_mode" unchecked-icon="light_mode" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-toolbar>
|
||||
</q-page-sticky>
|
||||
<div class="login-form 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']"
|
||||
:rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
|
||||
/>
|
||||
<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']"
|
||||
:rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
|
||||
/>
|
||||
<q-toggle v-model="keepLogin" :label="t('login.keepLogin')" color="orange" />
|
||||
<q-toggle v-model="keepLogin" :label="t('login.keepLogin')" />
|
||||
|
||||
<div>
|
||||
<q-btn :label="t('login.submit')" type="submit" color="orange" />
|
||||
<q-btn
|
||||
:label="t('login.submit')"
|
||||
type="submit"
|
||||
color="primary"
|
||||
class="full-width"
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-page>
|
||||
</q-page-container>
|
||||
|
|
@ -86,7 +136,7 @@ async function onSubmit() {
|
|||
min-height: inherit;
|
||||
}
|
||||
|
||||
.login {
|
||||
.login-form {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue