MOD: componentes de autenticación y diseño, mejora de estilos y estructura

src/components/Holos/Layout/Auth.vue

@@ -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="h-screen flex bg-white dark:bg-gray-900">
-    <div
+    <!-- Columna izquierda - Logo -->
-      class="relative flex w-full lg:w-full justify-around items-center with-transition"
+    <div class="hidden lg:flex lg:w-1/2 bg-[#621134] items-center justify-center relative">
-      :class="{'app-bg-light':darkMode.isLight,'app-bg-dark':darkMode.isDark}"
+      <div class="flex items-center justify-center">
-    >
+        <Logo size="xl" class="text-lg inline-flex" />
-      <header class="absolute top-0 flex w-full h-8 px-1 items-center justify-end text-white">
+      </div>
-        <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">
+        <footer class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
-          <div>
+          <span>
-              <span>
+            &copy {{year}} {{ APP_COPYRIGHT }}
-                  &copy;2024 {{ APP_COPYRIGHT }}
+          </span>
-              </span>
-          </div>
-          <div>
-              <span>
-                APP {{ APP_VERSION }} API {{ $page.app.version }}
-              </span>
-          </div>
         </footer>
       </div>
     </div>

src/components/Holos/Layout/TermsLayout.vue

@@ -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>
 

src/components/Holos/Logo.vue

@@ -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>

src/components/Holos/Skeleton/Sidebar/Left.vue

@@ -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">
                 &copy {{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>

src/pages/Auth/Login.vue

@@ -44,33 +44,41 @@ onMounted(() => {
 </script>
 
 <template>
-  <form @submit.prevent="login">
+  <div>
-    <Input
+    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">
-      icon="mail"
+      Bienvenido de nuevo
-      id="email"
+    </h1>
-      type="email"
+
-      v-model="form.email"
+    <form @submit.prevent="login" class="space-y-6">
-      :onError="form.errors.email"
+      <Input
-      :placeholder="$t('email.title')"
+        icon="mail"
-    />
+        id="email"
-    <Input
+        type="email"
-      v-model="form.password"
+        v-model="form.email"
-      icon="password"
+        :onError="form.errors.email"
-      id="password"
+        :placeholder="$t('email.title')"
-      type="password"
+      />
-      :onError="form.errors.password"
+      <Input
-      :placeholder="$t('password')"
+        v-model="form.password"
-    />
+        icon="lock"
-    <PrimaryButton class="!w-full">
+        id="password"
-      {{ $t('auth.login') }}
+        type="password"
-    </PrimaryButton>
+        :onError="form.errors.password"
-    <div class="flex justify-end mt-4">
+        :placeholder="$t('password')"
-      <RouterLink
+      />
-          class="text-sm ml-2 hover:text-blue-200 cursor-pointer hover:-translate-y-1 duration-500 transition-all"
+
+      <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>
+        </RouterLink>
-    </div>
+      </div>
-  </form>
+
+      <PrimaryButton class="w-full! py-3! text-base! font-semibold!">
+        {{$t('auth.login')}}
+      </PrimaryButton>
+    </form>
+  </div>
 </template>