feat: Reset de senha pela página de login (#117)

ICEI-PUC-Minas-PMV-ADS · Jun 14, 2024 · aee6173 · aee6173
1 parent 3294429
commit aee6173
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 276 deletions.
diff --git a/src/README.md b/src/README.md
@@ -269,6 +269,16 @@ O site em HTML/CSS/JS é um projeto estático. É necessário implantá-lo em um
 
 - Lógica para buscar os cartões de crédito cadastrados
 
+### [0.1.31] - 12/06/2024
+
+#### Atualizado
+
+- Lógica de reset da senha na página de Login
+
+#### Removido
+
+- Página de reset de senha
+
 ### [0.1.31] - DD/MM/AAAA
 
 #### Adicionado/Atualizado/Removido

diff --git a/src/assets/css/login.css b/src/assets/css/login.css
@@ -67,7 +67,6 @@ form
 
 .formulario 
 {
-    color: #343F4B;
     font-family: Lato;
 }
 
@@ -79,7 +78,7 @@ form
     border-radius: 5px;
     width: 280px;
     height: 38px;
-    color: #8190A5;
+    color: #000000;
     font-family: Lato;
     font-size: 16px;
     text-align: left;

diff --git a/src/assets/js/login.js b/src/assets/js/login.js
@@ -3,6 +3,14 @@ const loginButton = document.getElementById("BtnEntrar");
 const emailInput = document.getElementById("email_user");
 const passwordInput = document.getElementById("senha_user");
 
+// variáveis globais de reset de senha
+const modal = new bootstrap.Modal(document.querySelector('.modal'));
+const emailInputReset = document.getElementById('email__reset');
+const passwordReset = document.getElementById('nova-senha__reset');
+const passwordResetConfirmation = document.getElementById('confirmar-senha__reset');
+const showPassword = document.getElementById('showPassword');
+const showConfirmPassword = document.getElementById('showConfirmPassword');
+
 function getUserFromLocalStorage(email) {
   return JSON.parse(localStorage.getItem(email));
 }
@@ -16,6 +24,7 @@ loginButton.addEventListener("click", function (event) {
     if (user && user.password === passwordInput.value) {
       alert("Login realizado com sucesso!");
       window.location.href = "restaurantes.html";
+      localStorage.setItem("lastEmail", emailInput.value);
       localStorage.setItem("userLoggedIn", "true");
     } else if (user) {
       formSection.textContent = "Senha incorreta!";
@@ -42,3 +51,122 @@ loginButton.addEventListener("click", function (event) {
     return;
   }
 });
+
+// Lógica para reset da senha
+
+/**
+ * Função que valida se um email é válido
+ * @param {string} email 
+ * @returns 
+ */
+function emailIsValid(email) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+/**
+ * Função que adiciona a classe is-invalid ao input e exibe a mensagem de erro
+ */
+function showInputError(input, divError="", message="") {
+  input.classList.add("is-invalid");
+  divError.textContent = message;
+}
+
+/**
+ * Função que remove a classe is-invalid do input e limpa a mensagem de erro
+ */
+function clearInputError(input, divError="") {
+  input.classList.remove("is-invalid");
+  divError.textContent = "";
+}
+
+/**
+ * Função que compara as senhas digitadas no formulário de reset de senha
+ */
+function comparePasswords() {
+  if (!(passwordReset.value === passwordResetConfirmation.value)) {
+    showInputError(passwordReset);
+    showInputError(passwordResetConfirmation, document.getElementById('password-error__reset'), 'As senhas não coincidem');
+  } else {
+    passwordReset.classList.remove('is-invalid');
+    passwordResetConfirmation.classList.remove('is-invalid');  
+    passwordReset.classList.add('is-valid');
+    passwordResetConfirmation.classList.add('is-valid');
+    document.getElementById('password-error__reset').textContent = '';
+  }
+}
+
+/**
+ * Função que atualiza a classe de um elemento
+ */
+function updateClass(element, add, className) {
+  if (add) {
+    element.classList.add(className);
+  } else {
+    element.classList.remove(className);
+  }
+}
+
+/**
+ * Função que exibe a senha do input e muda o ícone do botão de exibir senha
+ */
+showPassword.addEventListener("click", function () {
+  const isPassword = passwordReset.type === "password";
+  passwordReset.type = isPassword ? "text" : "password";
+  updateClass(showPassword, isPassword, "bi-eye-slash");
+  updateClass(showPassword, !isPassword, "bi-eye-fill");
+});
+
+
+/**
+ * Função que exibe a senha do input de confirmar senha e muda o ícone do botão de exibir senha
+ */
+showConfirmPassword.addEventListener("click", function () {
+  const isPassword = passwordResetConfirmation.type === "password";
+  passwordResetConfirmation.type = isPassword ? "text" : "password";
+  updateClass(showConfirmPassword, isPassword, "bi-eye-slash");
+  updateClass(showConfirmPassword, !isPassword, "bi-eye-fill");
+});
+
+document.getElementById('forgot-pass').addEventListener('click', function(e) {
+  e.preventDefault();
+
+  modal.show();
+
+  emailInputReset.addEventListener('input', function() {
+    const emailResetValue = emailInputReset.value;
+    if (emailResetValue === '') {
+      showInputError(emailInputReset, document.getElementById('email-error__reset'), 'O campo de email não pode estar vazio');
+    } else if (!emailIsValid(emailResetValue)) {
+      showInputError(emailInputReset, document.getElementById('email-error__reset'), 'Email inválido');
+    } else if (!getUserFromLocalStorage(emailResetValue)) {
+      showInputError(emailInputReset, document.getElementById('email-error__reset'), 'Email não cadastrado');
+    } else {
+      emailInputReset.classList.remove('is-invalid');
+      emailInputReset.classList.add('is-valid');
+    }
+  });
+
+  passwordReset.addEventListener('input', comparePasswords);
+  passwordResetConfirmation.addEventListener('input', comparePasswords);
+});
+
+document.getElementById('forgot-pass-form').addEventListener('submit', function(event) {
+  event.preventDefault();
+
+  const invalidFields = this.querySelectorAll('.is-invalid');
+  if (invalidFields.length > 0) {
+    alert("Corrija os erros antes de enviar o formulário!")
+  } else {
+    modal.hide()
+
+    const email = emailInputReset.value;
+    const userInfo = JSON.parse(localStorage.getItem(email));
+    userInfo.password = passwordReset.value;
+    localStorage.setItem(email, JSON.stringify(userInfo));
+    this.querySelectorAll('.is-valid').forEach(function(element) {
+      element.classList.remove('is-valid');
+    });
+    this.reset();
+    alert("Senha alterada com sucesso! Faça o login com as novas credenciais");
+  }
+});
diff --git a/src/assets/js/pass-recovery.js b/src/assets/js/pass-recovery.js
diff --git a/src/pages/login.html b/src/pages/login.html
@@ -3,23 +3,21 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
         <title>Login</title>
         <link rel="stylesheet" href="../assets/css/login.css">
         <link rel="icon" type="image/x-icon" href="../assets/img/iconeFilaFacil.png">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-
     </head>
-
     <body>
         <header>
             <nav
               class="navbar navbar-expand-md bg-light fixed-top py-2 border-bottom px-5"
               role="navigation"
             >
               <div class="container-fluid">
-                <a href="./index.html" class="navbar-brand">
+                <a href="../index.html" class="navbar-brand">
                   <img
                     src="../assets/img/logoFilaFacil.png"
                     alt="Logo FilaFácil"
@@ -66,31 +64,51 @@
             </nav>
           </header>
           <main class="m-auto d-flex justify-content-center align-items-center">
+            <div class="modal fade" tabindex="-1">
+              <div class="modal-dialog">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h5 class="modal-title">Esqueci minha senha</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                  </div>
+                  <form id="forgot-pass-form">
+                    <div class="modal-body">
+                      <div class="mb-3">
+                        <label for="email__reset" class="form-label">E-mail</label>
+                        <input type="email" class="form-control" id="email__reset" required>
+                        <div class="invalid-feedback" id="email-error__reset"></div>
+                        <label for="nova-senha__reset" class="form-label">Nova senha</label>
+                        <div class="input-group">
+                          <input type="password" class="form-control" id="nova-senha__reset" required>
+                          <i id="showPassword" class="bi bi-eye-fill input-group-text" style="cursor: pointer"></i>
+                        </div>
+                        <label for="confirmar-senha__reset" class="form-label">Confirmar senha</label>
+                        <div class="input-group">
+                          <input type="password" class="form-control" id="confirmar-senha__reset" required>
+                          <i id="showConfirmPassword" class="bi bi-eye-fill input-group-text" style="cursor: pointer"></i>
+                          <div class="invalid-feedback" id="password-error__reset"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="modal-footer">
+                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
+                      <button type="submit" id="confirmPasswordReset" class="btn btn-danger">Mudar senha</button>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
             <section class="login__form">
                 <div class="text-center">
                     <form class="formulario" id="formulario_log">
                         <h1 class="formulario-titulo">Login</h1>
                         <div class="mensagem"></div>
                         <input class="formulario_input" type="email" placeholder="E-mail" id="email_user" required>
                         <input class="formulario_input" type="password" placeholder="Senha" id="senha_user" required>
-
-                        <!--onclick="document.getElementById('BtnEntrar')"-->
-                        <button class="formulario_botao" type="button" id="BtnEntrar">
-                            <div class="position-relative">
-                                <h5>Entrar</h5>
-                            </div>
-                        </button>
-
-
+                        <button class="formulario_botao mb-3" type="button" id="BtnEntrar">Entrar</button>
                     </form>
-
-                    <script src="../assets/js/login.js"></script>
-
-                    <br>
-
-
                     <div>
-                        <a href="pass-recovery.html" target="_self" id="forgot-pass" class="link-vermelho">Esqueceu a senha?</a>
+                        <a href="#" target="_self" id="forgot-pass" class="link-vermelho">Esqueceu a senha?</a>
                         <p class="login">Não tem uma conta? <a class="link-vermelho" href="./cadastro.html">Cadastre-se</a></p>
                     </div>
                 </div>
@@ -124,7 +142,7 @@ <h5>Entrar</h5>
           </div>
         </div>
       </footer>
-        
+    <script src="../assets/js/login.js"></script>
     <script
       src="https://kit.fontawesome.com/66a97ae9e9.js"
       crossorigin="anonymous"