Merge pull request #68 from Crudzaso/develop

Develop
Crudzaso · Nov 12, 2024 · 5e7e88e · 5e7e88e
2 parents 60fc557 + 54ca956
commit 5e7e88e
Show file tree

Hide file tree

Showing 9 changed files with 338 additions and 20 deletions.
diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
@@ -154,4 +154,55 @@ public function activeRaffles()
         'raffles' => $activeRaffles,
     ]);
 }
+
+public function registerOrganizer(){
+    return Inertia::render('Users/RegisterOrganizer');
+}
+
+
+public function storeOrganizer(Request $request)
+{
+    // Validar los datos del formulario
+    $validated = $request->validate([
+        'document' => 'nullable|string',
+        'document_type' => 'nullable|string',
+        'document_image' => 'required|image|max:2048',
+    ]);
+
+    // Obtener el usuario autenticado
+    $user = auth()->user();
+
+    // Manejar la subida de la imagen del documento
+    if ($request->hasFile('document_image')) {
+        // Eliminar la imagen anterior si existe
+        if ($user->document_image_path) {
+            Storage::disk('public')->delete($user->document_image_path);
+        }
+
+        // Guardar la nueva imagen
+        $documentImagePath = $request->file('document_image')->store('documents', 'public');
+
+        // Actualizar los campos del usuario autenticado
+        $user->update([
+            'document' => $validated['document'] ?? $user->document,
+            'document_type' => $validated['document_type'] ?? $user->document_type,
+            'document_image_path' => $documentImagePath,
+        ]);
+
+        if (!$user->hasRole('organizador')) {
+            $user->assignRole('organizador');
+        }
+
+        return response()->json([
+            'message' => 'Información del organizador actualizada exitosamente.',
+            'document_image_url' => Storage::url($documentImagePath),
+        ], 200);
+    }
+
+    return response()->json([
+        'error' => 'No se recibió la imagen del documento.',
+    ], 400);
+}
+
+
 }
diff --git a/app/Models/User.php b/app/Models/User.php
@@ -26,6 +26,8 @@ class User extends Authenticatable
         'google_id',
         'github_id',
         'profile_photo_path',
+        'document_image_path',
+
     ];
 
     protected $hidden = [

diff --git a/database/migrations/2024_11_12_151027_add_document_image_path_to_users_table.php b/database/migrations/2024_11_12_151027_add_document_image_path_to_users_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->string('document_image_path')->nullable()->after('document_type');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('document_image_path');
+        });
+    }
+};
diff --git a/resources/js/Components/Dashboard/NavBar.vue b/resources/js/Components/Dashboard/NavBar.vue
@@ -4,39 +4,44 @@
       <!-- Logo -->
       <div class="flex items-center gap-4">
         <img :src="isDarkMode ? '/assets/media/auth/Logo-Gananza1.svg' : '/assets/media/auth/Logo-Gananza2.svg'"
-             alt="Logo Gananza" class="h-8 logo" />
+          alt="Logo Gananza" class="h-8 logo" />
       </div>
 
       <!-- Menú Hamburguesa para móvil -->
       <button class="menu-toggle md:hidden btn-icon glow-effect" @click="toggleMenu">
-        <img :src="isDarkMode ? '/assets/media/gananza/bars-light.svg' : '/assets/media/gananza/bars-dark.svg'" alt="Menú" class="icon-img" />
+        <img :src="isDarkMode ? '/assets/media/gananza/bars-light.svg' : '/assets/media/gananza/bars-dark.svg'"
+          alt="Menú" class="icon-img" />
       </button>
 
       <!-- Búsqueda -->
       <div class="header-search hidden md:flex">
         <form class="search-form">
-          <input
-            type="text"
-            class="search-input"
-            placeholder="Buscar..."
-            :style="{ background: theme.cardBackground, color: theme.textPrimary, borderColor: theme.border }"
-          />
+          <input type="text" class="search-input" placeholder="Buscar..."
+            :style="{ background: theme.cardBackground, color: theme.textPrimary, borderColor: theme.border }" />
           <button type="submit" class="search-button">
-            <img :src="isDarkMode ? '/assets/media/gananza/search-light.svg' : '/assets/media/gananza/search-dark.svg'" alt="Buscar" class="icon-img" />
+            <img :src="isDarkMode ? '/assets/media/gananza/search-light.svg' : '/assets/media/gananza/search-dark.svg'"
+              alt="Buscar" class="icon-img" />
           </button>
         </form>
       </div>
 
       <!-- Links de Navegación -->
-      <nav :class="['nav-links', { 'open': isMenuOpen }]" :style="{ background: theme.navBackground, boxShadow: theme.navShadow }">
+      <nav :class="['nav-links', { 'open': isMenuOpen }]"
+        :style="{ background: theme.navBackground, boxShadow: theme.navShadow }">
         <!-- Botón para cerrar el menú -->
         <button class="close-btn" @click="toggleMenu" :style="{ color: theme.textPrimary }">✖</button>
         <h3 class="menu-title" :style="{ color: theme.textPrimary }">Navegación</h3>
         <a href="/profile" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">Profile</a>
-        <a href="/admin" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">Panel de Administrador</a>
-        <a href="/settings" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">Settings</a>
+        <a href="/admin" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">Panel de
+          Administrador</a>
+        <a href="/settings" class="nav-link"
+          :style="{ color: theme.textPrimary, borderColor: theme.border }">Settings</a>
         <a href="/raffles" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">Rifas</a>
         <a href="/points" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">Puntos</a>
+        <a @click.prevent="logout" class="nav-link logout-link"
+          :style="{ color: theme.textPrimary, borderColor: theme.border, cursor: 'pointer', zIndex: 1000 }">
+          Logout
+        </a>
       </nav>
       <!-- Iconos y Botones -->
       <div class="flex items-center gap-3">
@@ -46,12 +51,15 @@
         </button>
 
         <button class="btn-icon glow-effect">
-          <img :src="isDarkMode ? '/assets/media/gananza/notification-light.svg' : '/assets/media/gananza/notification-dark.svg'" alt="Notificaciones" class="icon-img" />
+          <img
+            :src="isDarkMode ? '/assets/media/gananza/notification-light.svg' : '/assets/media/gananza/notification-dark.svg'"
+            alt="Notificaciones" class="icon-img" />
         </button>
 
         <button class="btn-icon glow-effect">
           <a :href="`/profile/${authUser.id}`">
-            <img :src="isDarkMode ? '/assets/media/gananza/user-light.svg' : '/assets/media/gananza/user-dark.svg'" alt="Perfil" class="icon-img" />
+            <img :src="isDarkMode ? '/assets/media/gananza/user-light.svg' : '/assets/media/gananza/user-dark.svg'"
+              alt="Perfil" class="icon-img" />
           </a>
         </button>
       </div>
@@ -62,6 +70,7 @@
 <script setup>
 import { Sun, Moon } from 'lucide-vue-next';
 import { ref, computed } from 'vue';
+import { router } from '@inertiajs/vue3';
 import { useDarkMode } from '@/composables/useDarkMode';
 import { usePage } from '@inertiajs/vue3';
 
@@ -86,6 +95,15 @@ const theme = computed(() => ({
   gradient: isDarkMode.value ? 'linear-gradient(135deg, #1E1E1E 0%, #2A2A2A 100%)' : 'linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%)',
   emphasis: isDarkMode.value ? '#FFCA28' : '#FFC107',
 }));
+
+const logout = () => {
+  console.log("Logout clickeado"); // Verificar si el clic está funcionando
+  router.post(route('logout'), {}, {
+    onFinish: () => {
+      window.location.href = '/login';
+    },
+  });
+};
 </script>
 
 <style scoped>
@@ -99,6 +117,7 @@ const theme = computed(() => ({
 .logo {
   transition: transform 0.2s;
 }
+
 .logo:hover {
   transform: scale(1.05);
 }
@@ -107,17 +126,20 @@ const theme = computed(() => ({
 .search-form {
   position: relative;
 }
+
 .search-input {
   width: 250px;
   padding: 8px 12px;
   border-radius: 20px;
   border: 1px solid;
   transition: all 0.3s;
 }
+
 .search-input:focus {
   outline: none;
   box-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
 }
+
 .search-button {
   position: absolute;
   right: 10px;
@@ -158,6 +180,7 @@ const theme = computed(() => ({
   margin-bottom: 15px;
   transition: transform 0.2s;
 }
+
 .close-btn:hover {
   transform: scale(1.1) rotate(90deg);
 }
@@ -181,6 +204,7 @@ const theme = computed(() => ({
   text-align: center;
   transition: color 0.2s, background-color 0.3s, transform 0.2s;
 }
+
 .nav-link:hover {
   color: var(--emphasis);
   background-color: rgba(0, 191, 255, 0.1);
@@ -220,6 +244,7 @@ const theme = computed(() => ({
     opacity: 0;
     transform: translateY(-20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -237,6 +262,7 @@ const theme = computed(() => ({
   height: 24px;
   transition: transform 0.3s;
 }
+
 .icon-img:hover {
   transform: rotate(10deg) scale(1.1);
 }
@@ -247,8 +273,18 @@ const theme = computed(() => ({
   border-radius: 50%;
   transition: transform 0.2s, box-shadow 0.2s;
 }
+
 .btn-icon:hover {
   transform: scale(1.1);
   box-shadow: 0 4px 12px rgba(0, 191, 255, 0.4);
 }
+
+.logout-link {
+  display: block;
+  position: relative;
+  z-index: 1000;
+  cursor: pointer;
+  padding: 10px;
+  text-decoration: none;
+}
 </style>
diff --git a/resources/js/Components/Sign-in/LoginComponent.vue b/resources/js/Components/Sign-in/LoginComponent.vue
@@ -1,8 +1,8 @@
 <template>
-    <div :style="{ background: theme.background }" class="d-flex flex-column flex-root transition-colors duration-500">
+    <div :style="{ background: theme.background }" class="d-flex flex-column flex-root transition-colors duration-500 min-h-100vh">
         <div class="d-flex flex-column flex-lg-row flex-column-fluid">
             <div class="d-flex flex-lg-row-fluid">
-                <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
+                <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100 min-h-100vh">
                     <img v-if="!isDarkMode" class="mx-auto mw-100 mb-10 mb-lg-20" src="assets/media/auth/Login-Page.svg"
                         alt="" style="width: 500px; max-width: 800px;" />
                     <img v-else class="mx-auto mw-100 mb-10 mb-lg-20" src="assets/media/auth/Login-Page.svg" alt=""
@@ -217,4 +217,8 @@ export default {
     right: 20px;
     z-index: 10;
 }
+
+.min-h-100vh {
+    min-height: 100vh;
+}
 </style>
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
@@ -1,9 +1,9 @@
 <template>
     <div :style="{ background: theme.background }" class="d-flex flex-column flex-root transition-colors duration-500">
-        <div class="d-flex flex-column flex-lg-row flex-column-fluid">
+        <div class="d-flex flex-column flex-lg-row flex-column-fluid min-h-100vh">
             <!-- Formulario de Registro -->
             <div :style="{ background: theme.cardBackground }"
-                class="d-flex flex-column-fluid justify-content-center p-12 w-100 w-lg-50">
+                class="d-flex flex-column-fluid justify-content-center p-12 w-100 w-lg-50 min-h-100vh">
                 <div class="form-container d-flex flex-column align-items-center"
                     style="max-width: 600px; margin: 0 auto;">
                     <form class="form w-100" @submit.prevent="submit"
@@ -277,4 +277,8 @@ export default {
     font-size: 2rem;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
+
+.min-h-100vh {
+    min-height: 100vh;
+}
 </style>
diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
@@ -1,8 +1,8 @@
 <template>
-    <div :style="{ background: theme.background }" class="d-flex flex-column flex-root transition-colors duration-500">
+    <div :style="{ background: theme.background }" class="d-flex flex-column flex-root transition-colors duration-500 min-h-100vh">
         <div class="d-flex flex-column flex-lg-row flex-column-fluid">
             <div class="d-flex flex-lg-row-fluid">
-                <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
+                <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100 min-h-100vh">
                     <img v-if="!isDarkMode" class="mx-auto mw-100 mb-10 mb-lg-20" :src="agencyImage"
                         alt="Reset Password" style="width: 500px; max-width: 800px;" />
                     <img v-else class="mx-auto mw-100 mb-10 mb-lg-20" :src="agencyDarkImage" alt="Reset Password"
@@ -186,4 +186,8 @@ export default {
     border: none;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
+
+.min-h-100vh {
+    min-height: 100vh;
+}
 </style>