From 7408662f46099496933206fec041423dc9a29b74 Mon Sep 17 00:00:00 2001
From: MasterZendika <125993067+MasterZendika@users.noreply.github.com>
Date: Tue, 26 Nov 2024 14:25:52 -0600
Subject: [PATCH] Frontend autosave

---
 .../static/src/js/extended_signup_view.js     | 42 ++++++++++++++++---
 .../static/src/scss/signup_login.scss         | 32 +++++++++++++-
 2 files changed, 68 insertions(+), 6 deletions(-)

diff --git a/auth_signup_upgraded/static/src/js/extended_signup_view.js b/auth_signup_upgraded/static/src/js/extended_signup_view.js
index 053d07d..11446a6 100644
--- a/auth_signup_upgraded/static/src/js/extended_signup_view.js
+++ b/auth_signup_upgraded/static/src/js/extended_signup_view.js
@@ -1,20 +1,52 @@
 /** @odoo-module **/
 
-import publicWidget from "@web/legacy/js/public/public_widget";
+import publicWidget from '@web/legacy/js/public/public_widget';
+import { _t } from '@web/core';
 
-console.log('Button ssdsd');
+console.log('Module Loaded: Extended Signup View with Autosave and Toggle Password');
 
+// Autosave functionality (Extended Signup View)
+publicWidget.registry.ExtendedSignup = publicWidget.Widget.extend({
+    selector: '.o_extended_signup',
+    
+    events: {
+        'change input': '_onFieldChange', // Detect field changes
+    },
+
+    _onFieldChange: function (event) {
+        // Llamada al autosave cuando los campos cambian
+        this._autosave();
+    },
+
+    _autosave: function () {
+        // Lógica para cambiar el estado del autosave en el frontend
+        var saveButton = $('#autosave_button');
+        var statusText = $('#autosave_status');
+        saveButton.addClass('autosaving');
+        statusText.text(_t('Saving...')); // Text in the appropriate language
+
+        // Simulación de autosave (cambiar a "Saved" después de un tiempo)
+        setTimeout(function () {
+            saveButton.removeClass('autosaving').addClass('saved');
+            statusText.text(_t('Saved'));
+        }, 2000); // Cambia a "Saved" después de 2 segundos
+    }
+});
+
+// Toggle Password functionality
 publicWidget.registry.SignUpForm = publicWidget.Widget.extend({
-    selector: '#togglePassword',
+    selector: '#togglePassword', // Selector for the toggle button
     events: {
-        'click': '_onClick',
+        'click': '_onClick', // Detect click event to toggle password visibility
     },
+
     _onClick: function (ev) {
         var passwordField = document.getElementById('password');
+        // Toggle password visibility
         if (passwordField.type === 'password') {
             passwordField.type = 'text';
         } else {
             passwordField.type = 'password';
         }
     }
-});
\ No newline at end of file
+});
diff --git a/theme_academy/static/src/scss/signup_login.scss b/theme_academy/static/src/scss/signup_login.scss
index 2799777..3694c38 100644
--- a/theme_academy/static/src/scss/signup_login.scss
+++ b/theme_academy/static/src/scss/signup_login.scss
@@ -66,4 +66,34 @@
         padding-top: 0%;
         padding-bottom: 0%;
     }
-  }
\ No newline at end of file
+  }
+
+  /* Estilos para el indicador de autosave */
+.autosave-indicator {
+    display: none;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    padding: 5px 10px;
+    background-color: #0d6efd; /* Color azul */
+    color: white;
+    font-size: 14px;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    animation: fadeIn 0.5s ease-in-out;
+}
+
+/* Mostrar el indicador de autosave cuando se activa */
+.autosave-indicator.show {
+    display: inline-block;
+}
+
+/* Animación para el indicador */
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}