MOD: componentes de autenticación y diseño, mejora de estilos y estructura
This commit is contained in:
Juan Felipe Zapata Moreno
parent
5e46e55d73
commit
4ac8799f88
@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { APP_VERSION, APP_COPYRIGHT } from '@/config.js'
|
||||
import { APP_COPYRIGHT } from '@/config.js'
|
||||
import useDarkMode from '@Stores/DarkMode'
|
||||
|
||||
import Logo from '@Holos/Logo.vue'
|
||||
@ -9,6 +9,8 @@ import IconButton from '@Holos/Button/Icon.vue'
|
||||
/** Definidores */
|
||||
const darkMode = useDarkMode()
|
||||
|
||||
const year = (new Date).getFullYear();
|
||||
|
||||
/** Propiedades */
|
||||
defineProps({
|
||||
title: String
|
||||
@ -21,13 +23,20 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-screen flex bg-primary dark:bg-primary-d">
|
||||
<div
|
||||
class="relative flex w-full lg:w-full justify-around items-center with-transition"
|
||||
:class="{'app-bg-light':darkMode.isLight,'app-bg-dark':darkMode.isDark}"
|
||||
>
|
||||
<header class="absolute top-0 flex w-full h-8 px-1 items-center justify-end text-white">
|
||||
<div>
|
||||
<div class="h-screen flex bg-white dark:bg-gray-900">
|
||||
<!-- Columna izquierda - Logo -->
|
||||
<div class="hidden lg:flex lg:w-1/2 bg-[#621134] items-center justify-center relative">
|
||||
<div class="flex items-center justify-center">
|
||||
<Logo size="xl" class="text-lg inline-flex" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Columna derecha - Formulario -->
|
||||
<div class="flex w-full lg:w-1/2 items-center justify-center bg-gray-50 dark:bg-gray-800">
|
||||
<div class="w-full max-w-md px-8">
|
||||
<!-- Mobile logo y dark mode toggle -->
|
||||
<div class="lg:hidden mb-8 flex items-center justify-between">
|
||||
<Logo size="md" class="text-lg inline-flex" />
|
||||
<IconButton v-if="darkMode.isLight"
|
||||
icon="light_mode"
|
||||
:title="$t('app.theme.light')"
|
||||
@ -39,29 +48,15 @@ onMounted(() => {
|
||||
@click="darkMode.applyLight()"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex w-full flex-col items-center justify-center space-y-2">
|
||||
<div class="flex space-x-2 items-center justify-start text-white">
|
||||
<Logo
|
||||
class="text-lg inline-flex"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main class="bg-white/10 w-full backdrop-blur-xs text-white px-4 py-4 rounded-sm max-w-80">
|
||||
<main>
|
||||
<RouterView />
|
||||
</main>
|
||||
|
||||
<footer class="absolute bottom-0 flex w-full h-8 px-4 items-center justify-between bg-primary dark:bg-primary-d backdrop-blur-md text-white transition-colors duration-global">
|
||||
<div>
|
||||
<span>
|
||||
©2024 {{ APP_COPYRIGHT }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
APP {{ APP_VERSION }} API {{ $page.app.version }}
|
||||
</span>
|
||||
</div>
|
||||
<footer class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>
|
||||
© {{year}} {{ APP_COPYRIGHT }}
|
||||
</span>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -43,7 +43,7 @@ onMounted(() => {
|
||||
<div class="flex w-full flex-col space-y-2">
|
||||
<div class="flex space-x-2 items-center justify-start text-white">
|
||||
<Logo
|
||||
class="text-lg inline-flex"
|
||||
size="md" class="text-lg inline-flex"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,10 +1,20 @@
|
||||
<script setup>
|
||||
import { hasToken } from '@Services/Api';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { computed } from 'vue';
|
||||
|
||||
/** Definidores */
|
||||
const router = useRouter();
|
||||
|
||||
/* Propiedades */
|
||||
const props = defineProps({
|
||||
size: {
|
||||
type: String,
|
||||
default: 'lg',
|
||||
validator: (value) => ['sm', 'md', 'lg', 'xl'].includes(value)
|
||||
}
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
const home = () => {
|
||||
if(hasToken()) {
|
||||
@ -13,12 +23,23 @@ const home = () => {
|
||||
location.replace('/');
|
||||
}
|
||||
}
|
||||
|
||||
/* Computed */
|
||||
const heightClass = computed(() => {
|
||||
const size = {
|
||||
sm: 'h-12',
|
||||
md: 'h-16',
|
||||
lg: 'h-20',
|
||||
xl: 'h-64'
|
||||
}
|
||||
return size[props.size];
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="flex w-full justify-center items-center space-x-2 cursor-pointer"
|
||||
@click="home"
|
||||
>
|
||||
<img :src="'/logo.png'" class="h-20" />
|
||||
<img :src="'/logo.png'" :class="heightClass" />
|
||||
</div>
|
||||
</template>
|
||||
@ -33,7 +33,7 @@ const year = (new Date).getFullYear();
|
||||
<div>
|
||||
<div class="flex w-full px-2 mt-2">
|
||||
<Logo
|
||||
class="text-lg inline-flex"
|
||||
size="md" class="text-lg inline-flex"
|
||||
/>
|
||||
</div>
|
||||
<ul class="flex h-full flex-col md:pb-4 space-y-1">
|
||||
@ -44,9 +44,9 @@ const year = (new Date).getFullYear();
|
||||
<p class="block text-center text-xs">
|
||||
© {{year}} {{ APP_COPYRIGHT }}
|
||||
</p>
|
||||
<p class="text-center text-xs text-yellow-500 cursor-pointer">
|
||||
<!-- <p class="text-center text-xs text-yellow-500 cursor-pointer">
|
||||
<RouterLink :to="{name:'changelogs.app'}"> APP {{ APP_VERSION }} </RouterLink> <RouterLink :to="{name:'changelogs.core'}"> API {{ $page.app.version }} </RouterLink>
|
||||
</p>
|
||||
</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -44,33 +44,41 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form @submit.prevent="login">
|
||||
<Input
|
||||
icon="mail"
|
||||
id="email"
|
||||
type="email"
|
||||
v-model="form.email"
|
||||
:onError="form.errors.email"
|
||||
:placeholder="$t('email.title')"
|
||||
/>
|
||||
<Input
|
||||
v-model="form.password"
|
||||
icon="password"
|
||||
id="password"
|
||||
type="password"
|
||||
:onError="form.errors.password"
|
||||
:placeholder="$t('password')"
|
||||
/>
|
||||
<PrimaryButton class="!w-full">
|
||||
{{ $t('auth.login') }}
|
||||
</PrimaryButton>
|
||||
<div class="flex justify-end mt-4">
|
||||
<RouterLink
|
||||
class="text-sm ml-2 hover:text-blue-200 cursor-pointer hover:-translate-y-1 duration-500 transition-all"
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">
|
||||
Bienvenido de nuevo
|
||||
</h1>
|
||||
|
||||
<form @submit.prevent="login" class="space-y-6">
|
||||
<Input
|
||||
icon="mail"
|
||||
id="email"
|
||||
type="email"
|
||||
v-model="form.email"
|
||||
:onError="form.errors.email"
|
||||
:placeholder="$t('email.title')"
|
||||
/>
|
||||
<Input
|
||||
v-model="form.password"
|
||||
icon="lock"
|
||||
id="password"
|
||||
type="password"
|
||||
:onError="form.errors.password"
|
||||
:placeholder="$t('password')"
|
||||
/>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<RouterLink
|
||||
class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary-dt transition-colors"
|
||||
:to="viewTo({ name: 'forgot-password' })"
|
||||
>
|
||||
>
|
||||
{{ $t('auth.forgotPassword.ask') }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</form>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<PrimaryButton class="w-full! py-3! text-base! font-semibold!">
|
||||
{{$t('auth.login')}}
|
||||
</PrimaryButton>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user