Login

css/entrar.css

@@ -0,0 +1,153 @@
+body, main {
+  min-height: 100vh;
+}
+
+body {
+  background-color: var(--cinza-escuro);
+  color: var(--branco);
+  text-align: center;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+}
+
+.titulo {
+  margin: 4rem 0 1rem 0;
+}
+
+.sub {
+  margin-bottom: 3rem;
+}
+
+.container {
+  background-color: var(--branco);
+  color: var(--cinza);
+  border-radius: 20px 20px 0 0;
+  padding: 2rem;
+  flex: 1;
+}
+
+.container form {
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.email, .senha {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  text-align: left;
+  margin-bottom: 1.5rem;
+}
+
+.senha .senha-area {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.senha .senha-area .olho {
+  position: absolute;
+  right: 2px;
+  padding: 6px;
+  border: none;
+  background: none;
+  color: var(--cinza);
+  font-size: 1rem;
+  cursor: pointer;
+  transition: opacity 50ms, color 0.2s ease;
+  opacity: 1;
+}
+
+.senha .senha-area .olho:focus {
+  color: var(--cinza-escuro);
+  outline: none;
+}
+
+.senha .senha-area .olho:hover {
+  color: var(--laranja);
+}
+
+.senha .senha-area .olho.trocando {
+  opacity: 0;
+}
+
+#email,
+#senha {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 1rem;
+  border: 2px solid transparent;
+  border-radius: 10px;
+  background-color: var(--branco-escuro);
+  color: var(--cinza-escuro);
+  transition: border-color 0.2s ease;
+}
+
+#email:focus,
+#senha:focus {
+  border-color: var(--laranja);
+  outline: none;
+}
+
+#email:not(:focus):not(:placeholder-shown):invalid,
+#senha:not(:focus):not(:placeholder-shown):invalid {
+  border: 2px solid var(--perigo);
+}
+
+#email:not(:focus):not(:placeholder-shown):valid,
+#senha:not(:focus):not(:placeholder-shown):valid {
+  border: 2px solid var(--sucesso);
+}
+
+#senha {
+  padding-right: 2rem;
+}
+
+label {
+  font-weight: 600;
+  color: var(--cinza-escuro);
+}
+
+button[type="submit"] {
+  width: 100%;
+  padding: 1rem;
+  border: none;
+  border-radius: 10px;
+  background-color: var(--laranja);
+  color: var(--branco);
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+  transition: background-color 0.2s ease;
+}
+
+button[type="submit"]:hover {
+  background-color: var(--laranja-claro);
+}
+
+button[type="submit"]:focus {
+  outline: none;
+  background-color: var(--laranja-claro);
+}
+
+.registrar a, .esqueci-senha a {
+  color: var(--laranja);
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.registrar a:focus, .esqueci-senha a:focus {
+  outline: none;
+  text-decoration: underline;
+}
+
+.registrar {
+  margin-bottom: 5px;
+}

css/style.css

@@ -0,0 +1,30 @@
+:root {
+  /* produto */
+  --laranja: #ff7622;
+  --laranja-claro: #fb6d3a;
+  /* base */
+  --cinza-escuro: #32343E;
+  --cinza: #6B6E82;
+  --cinza-claro: #d2d4e4;
+  --branco: #F0F5FA;
+  --branco-escuro: #ECECEC;
+  /* feedback */
+  --sucesso: #2A7138;
+  --perigo: #CD1422;
+  --verde-claro: #29Cb41;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Inter', sans-serif;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}

js/entrar.js

@@ -0,0 +1,49 @@
+const baseApiUrl = 'https://back-mjk6.onrender.com/api'
+
+const olho = document.querySelector('#olho')
+const button = document.querySelector('#btn-entrar')
+
+function mudarVisibilidadeSenha() {
+  olho.classList.add('trocando')
+
+  setTimeout(() => {
+    const senhaInput = document.querySelector('#senha')
+    const isPasswordVisible = senhaInput.type === 'text'
+
+    senhaInput.type = isPasswordVisible ? 'password' : 'text'
+    olho.innerHTML = isPasswordVisible ? '<i class="fa-regular fa-eye"></i>' : '<i class="fa-regular fa-eye-slash"></i>'
+
+    olho.classList.remove('trocando');
+  }, 50)
+}
+
+async function entrar(e) {
+  e.preventDefault()
+
+  const email = document.querySelector('#email').value
+  const senha = document.querySelector('#senha').value
+
+  if (!email || !senha) {
+    alert('Preencha todos os campos')
+    return
+  }
+
+  button.disabled = true
+  button.textContent = 'Entrando...'
+
+  try {
+    const response = await axios.post(`${baseApiUrl}/auth/login`, {
+      email: email,
+      password: senha
+    })
+
+    localStorage.setItem('token', response.data.token)
+    window.location.href = '/Front2'
+  } catch (error) {
+    console.error('Erro:', error)
+    alert('Ocorreu um erro ao tentar entrar. Tente novamente.')
+
+    button.disabled = false
+    button.textContent = 'Entrar'
+  }
+}

login/entrar.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Entre na sua conta Pizza Stars para fazer pedidos e gerenciar suas informações.">
+  <title>Pizza Stars - Entrar</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../css/style.css">
+  <link rel="stylesheet" href="../css/entrar.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+  <main>
+    <h1 class="titulo" tabindex="0">Entrar</h1>
+    <p class="sub">Por favor entre com sua conta existente</p>
+    <div class="container">
+      <form onsubmit="entrar(event)" role="form" aria-label="Formulário de Login">
+        <div class="email">
+          <label for="email">Email</label>
+          <input type="email" id="email" placeholder="email@gmail.com" autocomplete="email" autofocus required aria-required="true">
+        </div>
+        <div class="senha">
+          <label for="senha">Senha</label>
+          <div class="senha-area">
+            <input type="password" id="senha" placeholder="••••••••" minlength="6" autocomplete="current-password" required aria-required="true">
+            <button type="button" class="olho" id="olho" onclick="mudarVisibilidadeSenha()" aria-label="Mostrar ou ocultar senha">
+              <i class="fa-regular fa-eye" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+        <button type="submit" id="btn-entrar">Entrar</button>
+      </form>
+      <div class="registrar">
+        Não tem uma conta? <a href="registrar.html">registre-se</a>
+      </div>
+      <div class="esqueci-senha">
+        Não sabe a senha? <a href="recuperar.html">alterar senha</a>
+      </div>
+    </div>
+  </main>
+
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script src="../js/entrar.js"></script>
+</body>
+</html>