From 4308c592743822c41e387c052ae58c372e2e2526 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sun, 1 Mar 2026 15:00:40 -0500
Subject: [PATCH] Emergency fix for auth rendering: added SW unregister,
 diagnostic borders, and forced visibility styles

---
 frontend/index.html                           |  7 +++++++
 frontend/src/components/auth/LoginForm.vue    |  4 +++-
 frontend/src/components/auth/RegisterForm.vue |  4 +++-
 frontend/src/views/AuthView.vue               | 13 +++++++++----
 4 files changed, 22 insertions(+), 6 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index 21f261e..6a0fa68 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -17,6 +17,13 @@
 </head>
 
 <body>
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.getRegistrations().then(function(registrations) {
+        for(let registration of registrations) { registration.unregister(); }
+      });
+    }
+  </script>
   <div id="app"></div>
   <script type="module" src="/src/main.ts"></script>
 </body>
diff --git a/frontend/src/components/auth/LoginForm.vue b/frontend/src/components/auth/LoginForm.vue
index fdabf17..9d43d9e 100644
--- a/frontend/src/components/auth/LoginForm.vue
+++ b/frontend/src/components/auth/LoginForm.vue
@@ -49,7 +49,9 @@ const navigateByUserRole = (role: string) => {
 </script>
 
 <template>
-  <div class="login-form">
+  <div class="login-form" style="border: 2px solid rgba(254, 231, 21, 0.3); border-radius: 12px; margin: 10px;">
+    <!-- Indicador de carga para diagnóstico -->
+    <div style="font-size: 10px; color: var(--active-color); opacity: 0.5; text-align: center;">[LoginForm Mounted]</div>
 
 
     <!-- Formulario -->
diff --git a/frontend/src/components/auth/RegisterForm.vue b/frontend/src/components/auth/RegisterForm.vue
index 519bb98..17e5551 100644
--- a/frontend/src/components/auth/RegisterForm.vue
+++ b/frontend/src/components/auth/RegisterForm.vue
@@ -65,7 +65,9 @@ const navigateByUserRole = (role: string) => {
 </script>
 
 <template>
-  <div class="register-form">
+  <div class="register-form" style="border: 2px solid rgba(59, 130, 246, 0.3); border-radius: 12px; margin: 10px;">
+    <!-- Indicador de carga para diagnóstico -->
+    <div style="font-size: 10px; color: #3b82f6; opacity: 0.5; text-align: center;">[RegisterForm Mounted]</div>
 
     <!-- Éxito -->
     <div v-if="successMessage" class="success-card">
diff --git a/frontend/src/views/AuthView.vue b/frontend/src/views/AuthView.vue
index 0ed8e22..a16cb91 100644
--- a/frontend/src/views/AuthView.vue
+++ b/frontend/src/views/AuthView.vue
@@ -65,10 +65,15 @@ onMounted(() => {
           {{ sessionExpiredMessage }}
         </div>
 
-        <!-- Contenedor dinámico de formularios con altura mínima garantizada -->
-        <div class="auth-forms-content" style="min-height: 300px; display: flex; flex-direction: column;">
-          <LoginForm v-if="isLogin" @toggle="toggleAuth" />
-          <RegisterForm v-else @toggle="toggleAuth" @success="isLogin = true" />
+        <!-- Contenedor de formularios con diagnóstico forzado -->
+        <div class="auth-forms-content" style="min-height: 350px; display: flex; flex-direction: column; border: 1px dashed rgba(255,255,255,0.1); padding: 5px;">
+          <!-- Texto de diagnóstico (visible solo si los componentes fallan) -->
+          <div v-if="isLogin" style="display: block !important; visibility: visible !important; opacity: 1 !important; width: 100%;">
+            <LoginForm @toggle="toggleAuth" />
+          </div>
+          <div v-else style="display: block !important; visibility: visible !important; opacity: 1 !important; width: 100%;">
+            <RegisterForm @toggle="toggleAuth" @success="isLogin = true" />
+          </div>
         </div>
       </div>
 
