From e1a0674667ab87c1c389f12700b31df661b284fd Mon Sep 17 00:00:00 2001 From: lucaslinyker Date: Sat, 28 Jun 2025 14:40:50 -0300 Subject: [PATCH 1/3] Renomear alguns arquivos de login --- login/{login4.html => recuperar.html} | 0 login/{login2.html => registrar.html} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename login/{login4.html => recuperar.html} (100%) rename login/{login2.html => registrar.html} (100%) diff --git a/login/login4.html b/login/recuperar.html similarity index 100% rename from login/login4.html rename to login/recuperar.html diff --git a/login/login2.html b/login/registrar.html similarity index 100% rename from login/login2.html rename to login/registrar.html From ea365195652f3a30949064f226c6358cb9ef7a64 Mon Sep 17 00:00:00 2001 From: lucaslinyker Date: Sat, 28 Jun 2025 14:44:25 -0300 Subject: [PATCH 2/3] Atualizar tela de login (entrar) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - adicionar js para envio dos campos para o backend - criar arquivo css de estilização da página e um global - renomear o nome do arquivo html --- css/entrar.css | 153 ++++++++++++++++++++++++++++++++++++++++ css/style.css | 30 ++++++++ js/entrar.js | 49 +++++++++++++ login/entrar.html | 46 ++++++++++++ login/login1.html | 173 ---------------------------------------------- 5 files changed, 278 insertions(+), 173 deletions(-) create mode 100644 css/entrar.css create mode 100644 css/style.css create mode 100644 js/entrar.js create mode 100644 login/entrar.html delete mode 100644 login/login1.html diff --git a/css/entrar.css b/css/entrar.css new file mode 100644 index 0000000..553d263 --- /dev/null +++ b/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; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..78dcbad --- /dev/null +++ b/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; +} diff --git a/js/entrar.js b/js/entrar.js new file mode 100644 index 0000000..f4ef9e0 --- /dev/null +++ b/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 ? '' : '' + + 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 = '/' + } catch (error) { + console.error('Erro:', error) + alert('Ocorreu um erro ao tentar entrar. Tente novamente.') + + button.disabled = false + button.textContent = 'Entrar' + } +} diff --git a/login/entrar.html b/login/entrar.html new file mode 100644 index 0000000..42dd60f --- /dev/null +++ b/login/entrar.html @@ -0,0 +1,46 @@ + + + + + + + Pizza Stars - Entrar + + + + + + +
+

Entrar

+

Por favor entre com sua conta existente

+
+
+ +
+ +
+ + +
+
+ +
+
+ Não tem uma conta? registre-se +
+
+ Não sabe a senha? alterar senha +
+
+
+ + + + + diff --git a/login/login1.html b/login/login1.html deleted file mode 100644 index ce29c50..0000000 --- a/login/login1.html +++ /dev/null @@ -1,173 +0,0 @@ - - - - - - Tela de Login - - - - - -
-

Entrar

-

Por favor entre com sua conta existente

- -
-
- - - - -
- - 👁️ -
- -
- - Esqueci a senha -
- - -
- -
- Não tem conta? REGISTRE-SE -
- - -
-
- - - From 7fd3e3055490d609740cbb532c4c1ba483b2ce50 Mon Sep 17 00:00:00 2001 From: lucaslinyker Date: Mon, 30 Jun 2025 13:16:44 -0300 Subject: [PATCH 3/3] Fazer o redirecionamento correto quando logado --- js/entrar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/entrar.js b/js/entrar.js index f4ef9e0..238504f 100644 --- a/js/entrar.js +++ b/js/entrar.js @@ -38,7 +38,7 @@ async function entrar(e) { }) localStorage.setItem('token', response.data.token) - window.location.href = '/' + window.location.href = '/Front2' } catch (error) { console.error('Erro:', error) alert('Ocorreu um erro ao tentar entrar. Tente novamente.')