Merge pull request #10 from DevSquadPE/login-register

Login register

.gitignore

@@ -0,0 +1 @@
+info.txt

assets/css/login.css

@@ -0,0 +1,176 @@
+@import url('global.css');
+
+main {
+    font-family: 'Mukta', sans-serif;
+    min-width: 100vw;
+    min-height: 100vh;
+    background-image: linear-gradient(to top, transparent 0%, #000 98%), url('../images/bg-login.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+header {
+    width: 100%;
+    position: fixed;
+    top: 0;
+    padding-left: 3rem;
+}
+
+.logo {
+    font-size: 4rem;
+    font-weight: 700;
+    line-height: 6.648rem;
+}
+
+
+.gradient {
+    /* Primeiro passo: definir um degradê como fundo */
+    background-image: linear-gradient(to right, #FF267A, #FFA634);
+
+    /* Segundo passo: apagar do fundo tudo que não estiver imediatamente atrás de texto */
+    background-clip: text;
+    -webkit-background-clip: text;
+    /* Alguns navegadores precisam do prefixo */
+
+    /* Terceiro passo: apagar o texto, deixando apenas o fundo atrás dele */
+    -webkit-text-fill-color: transparent;
+
+    /* Cor que contraste com o degradê, caso o navegador não suporte `background-clip: text` */
+    color: black;
+}
+
+
+
+form#form-login, form#form-register {
+    width: max-content;
+    background-color: rgba(0, 0, 0, 0.6);
+    box-shadow: 0 0 .5rem var(--support-04), 0 0 .5rem var(--dark-40), 0 0 .5rem var(--support-04);
+    border-radius: 2rem;
+    padding: 4rem 2rem;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.input-group {
+    width: max-content;
+    margin: 0 auto 1rem;
+}
+
+label {
+    display: block;
+    margin-bottom: .5rem;
+}
+
+.input-group input {
+    width: 30rem;
+    color: var(--dark-10);
+    font-size: 1.6rem;
+    color: var(--support-04);
+    border: 0;
+    border-radius: .8rem;
+    outline: none;
+    padding: 1rem;
+
+    transition: all .5s ease-in-out;
+}
+
+.input-group input:focus {
+    background-image: linear-gradient(to right, #FF267A, #FFA634);
+    color: var(--dark-40);
+    font-weight: bold;
+}
+
+button {
+    width: 100%;
+    background-color: transparent;
+    color: var(--dark-40);
+    font-size: 1.6rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    border: .1rem solid var(--dark-40);
+    border-radius: .8rem;
+    margin-top: 1.4rem;
+    padding: 1rem;
+    cursor: pointer;
+
+    transition: all .5s ease-in-out;
+}
+
+div.answer {
+    text-align: center;
+}
+
+div.answer a {
+    color: var(--dark-40);
+    font-weight: bold;
+    border-radius: 1rem;
+    padding: .1rem .3rem;
+    transition: all .2s ease-in-out;
+}
+
+div.answer a:hover {
+    background-color: var(--dark-40);
+    color: var(--support-04);
+}
+
+button:hover {
+    background-image: linear-gradient(to right, #ff267a, #FFA634);
+    transform: scale(1.05);
+}
+
+
+/* Validações */
+div.error {
+    display: none;
+    opacity: 0;
+    background-color: rgba(255, 2, 57, 0.5);
+    text-align: center;
+    border-radius: 1rem;
+    margin-bottom: 1rem;
+    transition: all .2s ease-in-out;
+}
+
+input:invalid {
+    border: .2rem solid var(--support-04);
+    box-shadow: 0 0 .5rem var(--support-04);
+}
+
+input:valid {
+    border: .2rem solid var(--support-02);
+    box-shadow: 0 0 .5rem var(--support-02);
+}
+
+
+
+
+/* Modal */
+#modal {
+    width: 100vw;
+    background-image: linear-gradient(to right, rgba(255, 38, 122, 0.6), rgba(255, 166, 52, 0.8));
+
+    position: fixed;
+    top: 0;
+    bottom: 0;
+
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 99999;
+
+    opacity: 0;
+    transition: all .2s ease-in-out;
+}
+
+
+#modal form {
+    background-color: var(--dark-20);
+}
+

assets/js/login.js

@@ -0,0 +1,162 @@
+
+const errorEl = document.querySelector('.error');
+const nomeInput = document.querySelector('#nome');
+const emailInput = document.querySelectorAll('#email');
+const senhaInput = document.querySelectorAll('#senha');
+const modal = document.querySelector('#modal');
+
+const registeredUsers = JSON.parse(localStorage.getItem('users')) || [];
+
+
+// Funções
+
+// Validações
+function verifyName(userName) {
+    const name = userName.trim();
+
+    const pattern = /^[a-zA-Z]+\s[a-zA-Z]+$/;
+    return pattern.test(name);
+};
+
+function verifyEmail(userEmail) {
+    const email = userEmail.trim();
+
+    const pattern = /^\w+[.|-]?\w+\@\w+\.\w+(\.\w+)?$/;
+    return pattern.test(email);
+};
+
+function verifyPassword(password) {
+    const senha = password.trim();
+
+    const pattern = /^[\w|\W]{6,20}$/; // Aceita alfanumérico e símbolos
+    console.log(pattern.test(senha));
+    return pattern.test(senha);
+};
+
+
+function showMessage() {
+    const style = errorEl.style;
+    style.display = 'block';
+
+    setTimeout(() => {
+        style.opacity = 1;
+    }, 100);
+};
+
+function showHiddenModal() {
+    modal.style.display === 'flex' ?  modal.style.display = 'none' : modal.style.display = 'flex';
+
+    setTimeout(() => {
+        modal.style.opacity = 1;
+    }, 200);
+};
+
+
+async function saveUserToLocalStorage(name, userEmail, password) {
+
+    const userFound = await registeredUsers.find(user => user.email === userEmail);
+    // console.log('Localizado: ', userFound);
+
+    if (userFound) {
+        alert('Já existe um cadastro com o e-mail informado!');
+        return;
+    };
+
+    const registerUser = { nome: name, email: userEmail, senha: password };
+    localStorage.setItem('users', JSON.stringify([...registeredUsers, registerUser]));
+    alert(`Olá, ${name}! Seu cadastro foi realizado com sucesso!\nRealize o login a seguir.`)
+    window.location.reload();
+};
+
+
+async function login(userEmail, password) {
+
+    console.log('Lista de usuários cadastrados: ', registeredUsers)
+
+    // find: pega o primeiro registro localizado
+    const userFound = await registeredUsers.find(user => user.email === userEmail);
+
+    console.log('Localizado? ', userFound);
+
+    if (userFound) {
+        const { senha } = userFound;
+
+        if (senha === password) {
+            localStorage.setItem('loggedUser', JSON.stringify(userFound)); // salva o usuário logado
+            // window.location = `${window.location.origin}/pages/profile.html`; // para uso local
+            window.location = `${window.location.origin}/plataforma-filmes/pages/profile.html`; // uso github
+        } else {
+            errorEl.innerText = 'Senha inválida!';
+        };
+
+    } else {
+        errorEl.innerText = 'Usuário não localizado!';
+    };
+
+    showMessage();
+};
+
+
+// Eventos
+
+nomeInput.addEventListener('input', (event) => {
+    const input = event.target;
+    let validName = verifyName(input.value);
+
+    // Mensagem personalizada de campo obrigatório
+    if (validName)
+        input.setCustomValidity('');
+    else
+        input.setCustomValidity('Informe seu nome e sobrenome. Ex.: Fulano Silva');
+});
+
+
+emailInput.forEach(email => {
+
+    email.addEventListener('input', (event) => {
+        const input = event.target;
+
+        let validEmail = verifyEmail(input.value);
+
+        // Mensagem personalizada de campo obrigatório
+        if (validEmail)
+            input.setCustomValidity('');
+        else
+            input.setCustomValidity('Preencha este campo com um e-mail válido. Ex.: [email protected]');
+    });
+
+});
+
+senhaInput.forEach(senha => {
+    senha.addEventListener('input', (event) => {
+        const input = event.target;
+        let validPassword = verifyPassword(input.value);
+
+        // Mensagem personalizada de campo obrigatório
+        if (validPassword)
+            input.setCustomValidity('');
+        else
+            input.setCustomValidity('Sua senha deve conter de 6 a 20 caracteres, podendo ter letras, números e caracteres especiais.');
+    });
+});
+
+
+
+document.querySelector('#btn-register').addEventListener('click', showHiddenModal);
+document.querySelector('#btn-login').addEventListener('click', showHiddenModal);
+
+
+// Cadastra usuário
+document.querySelector('#form-register').addEventListener('submit', (event) => {
+    event.preventDefault();
+
+    saveUserToLocalStorage(nomeInput.value, emailInput[1].value, senhaInput[1].value);
+
+});
+
+// Realiza o login
+document.querySelector('#form-login').addEventListener('submit', (event) => {
+    event.preventDefault();
+
+    login(emailInput[0].value, senhaInput[0].value);
+});