diff --git a/package.json b/package.json index 1c37d5e8..e8ae464f 100644 --- a/package.json +++ b/package.json @@ -41,5 +41,8 @@ "createdAt": "2023-05-16T13:46:37.371Z", "version": "6.2.0", "commit": "6a23c58a18f96b4dc3b7b1566dcac06ca9c3ec14" + }, + "dependencies": { + "firebase": "^10.0.0" } -} \ No newline at end of file +} diff --git a/src/imagens/fightback-logo.png b/src/imagens/fightback-logo.png new file mode 100644 index 00000000..77cd89ab Binary files /dev/null and b/src/imagens/fightback-logo.png differ diff --git a/src/imagens/icon _like.png b/src/imagens/icon _like.png new file mode 100644 index 00000000..bac26ff7 Binary files /dev/null and b/src/imagens/icon _like.png differ diff --git a/src/imagens/icon-deletar.png b/src/imagens/icon-deletar.png new file mode 100644 index 00000000..4884ec6b Binary files /dev/null and b/src/imagens/icon-deletar.png differ diff --git a/src/imagens/icon-editar.png b/src/imagens/icon-editar.png new file mode 100644 index 00000000..01189c7b Binary files /dev/null and b/src/imagens/icon-editar.png differ diff --git a/src/imagens/icon-email.png b/src/imagens/icon-email.png new file mode 100644 index 00000000..cc353d8d Binary files /dev/null and b/src/imagens/icon-email.png differ diff --git a/src/imagens/icon-feed.png b/src/imagens/icon-feed.png new file mode 100644 index 00000000..4df271b2 Binary files /dev/null and b/src/imagens/icon-feed.png differ diff --git a/src/imagens/icon-lock.png b/src/imagens/icon-lock.png new file mode 100644 index 00000000..14275af3 Binary files /dev/null and b/src/imagens/icon-lock.png differ diff --git a/src/imagens/icon-menu.png b/src/imagens/icon-menu.png new file mode 100644 index 00000000..e7fbdebc Binary files /dev/null and b/src/imagens/icon-menu.png differ diff --git a/src/imagens/icon-perfil.png b/src/imagens/icon-perfil.png new file mode 100644 index 00000000..65925313 Binary files /dev/null and b/src/imagens/icon-perfil.png differ diff --git a/src/imagens/icon-sair.png b/src/imagens/icon-sair.png new file mode 100644 index 00000000..41b271e7 Binary files /dev/null and b/src/imagens/icon-sair.png differ diff --git a/src/imagens/icon-sos.png b/src/imagens/icon-sos.png new file mode 100644 index 00000000..9d9a8f72 Binary files /dev/null and b/src/imagens/icon-sos.png differ diff --git a/src/imagens/icon-user.png b/src/imagens/icon-user.png new file mode 100644 index 00000000..19bf27d0 Binary files /dev/null and b/src/imagens/icon-user.png differ diff --git a/src/imagens/icon-voltar-branco.png b/src/imagens/icon-voltar-branco.png new file mode 100644 index 00000000..0c88c318 Binary files /dev/null and b/src/imagens/icon-voltar-branco.png differ diff --git a/src/imagens/icon-voltar.png b/src/imagens/icon-voltar.png new file mode 100644 index 00000000..1c4f0da1 Binary files /dev/null and b/src/imagens/icon-voltar.png differ diff --git a/src/imagens/menina-feed.png b/src/imagens/menina-feed.png new file mode 100644 index 00000000..be2de627 Binary files /dev/null and b/src/imagens/menina-feed.png differ diff --git a/src/imagens/menina.png b/src/imagens/menina.png new file mode 100644 index 00000000..4f3fc8fb Binary files /dev/null and b/src/imagens/menina.png differ diff --git a/src/index.html b/src/index.html index 788db3c9..4d29eb61 100644 --- a/src/index.html +++ b/src/index.html @@ -1,12 +1,25 @@ + - Document + + + + + + Fight Back + + + + +
+
+ \ No newline at end of file diff --git a/src/lib/firebase-config.js b/src/lib/firebase-config.js new file mode 100644 index 00000000..31063aae --- /dev/null +++ b/src/lib/firebase-config.js @@ -0,0 +1,26 @@ +// Import the functions you need from the SDKs you need +import { initializeApp } from 'firebase/app'; +import { getAuth } from 'firebase/auth'; +import { getFirestore } from "firebase/firestore"; +// TODO: Add SDKs for Firebase products that you want to use +// https://firebase.google.com/docs/web/setup#available-libraries + +// Your web app's Firebase configuration +const firebaseConfig = { + apiKey: 'AIzaSyAEK-4d-9VmCDMulufoLS010Jul552nTfI', + authDomain: 'fight-back-3c119.firebaseapp.com', + projectId: 'fight-back-3c119', + storageBucket: 'fight-back-3c119.appspot.com', + messagingSenderId: '856302366263', + appId: '1:856302366263:web:353194250250ae8d3519b2', +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); +// Initialize Firebase Authentication and get a reference to the service +const auth = getAuth(app); +const db = getFirestore(app); + +export { + auth, db, +}; diff --git a/src/lib/firebase.js b/src/lib/firebase.js new file mode 100644 index 00000000..d79eea61 --- /dev/null +++ b/src/lib/firebase.js @@ -0,0 +1,72 @@ +// aqui exportaras las funciones que necesites + +// export const myFunction = () => { +// // aqui tu codigo +// console.log('Hola mundo!'); +// }; +import { + createUserWithEmailAndPassword, + updateProfile, + signInWithEmailAndPassword, + signOut, + sendPasswordResetEmail, + // onAuthStateChanged, +} from 'firebase/auth'; +import { auth } from './firebase-config.js'; +// db +// import { collection, addDoc, getDocs } from 'firebase/firestore'; + +export function cadastrarUsuario(email, senha) { + return createUserWithEmailAndPassword(auth, email, senha); +} + +export function atualizarNomeDoUsuario(nome) { + return updateProfile(auth.currentUser, { + displayName: nome, photoURL: 'https://static.thenounproject.com/png/5034901-200.png', + }); +} + +export function loginUsuario(email, senha) { + return signInWithEmailAndPassword(auth, email, senha); +} + +export function sairDaConta() { + return signOut(auth); +} + +// export function identificarUsuarioConectado() { +// return onAuthStateChanged(auth, (user) => { +// if (user) { +// // User is signed in +// const uid = user.uid; +// console.log(uid); +// // ... +// } else { +// // User is signed out +// } +// }); +// } + +export function redefinirSenha(email) { + return sendPasswordResetEmail(auth, email); +}; + +// export async function teste() { +// try { +// const docRef = await addDoc(collection(db, "usuarios"), { +// name: auth.currentUser.displayName, +// uid: auth.currentUser.uid, +// photo: auth.currentUser.photoURL, +// }); +// console.log("Document written with ID: ", docRef.id); +// } catch (e) { +// console.error("Error adding document: ", e); +// } +// }; + +// export async function lerDadosTeste() { +// const querySnapshot = await getDocs(collection(db, "usuarios")); +// querySnapshot.forEach((doc) => { +// console.log(`teste1 ${doc.id} => ${doc.data()}`); +// }); +// }; diff --git a/src/lib/index.js b/src/lib/index.js deleted file mode 100644 index d1930899..00000000 --- a/src/lib/index.js +++ /dev/null @@ -1,6 +0,0 @@ -// aqui exportaras las funciones que necesites - -export const myFunction = () => { - // aqui tu codigo - console.log('Hola mundo!'); -}; diff --git a/src/main.js b/src/main.js index ac27e91a..befc512f 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,50 @@ // Este es el punto de entrada de tu aplicacion -import { myFunction } from './lib/index.js'; +// import { myFunction } from './lib/index.js'; -myFunction(); +// myFunction(); +import home from './pages/home/home'; +import cadastro from './pages/cadastro/cadastro'; +import login from './pages/login/login'; +import feed from './pages/feed/feed'; +import senha from './pages/redefinicao-de-senha/senha'; +// import { identificarUsuarioConectado } from './lib/firebase'; +import { auth } from './lib/firebase-config'; + +const principal = document.querySelector('#principal'); + +const init = () => { + window.addEventListener('hashchange', () => { + principal.innerHTML = ''; + switch (window.location.hash) { + case '': + principal.appendChild(home()); + break; + case '#login': + principal.appendChild(login()); + break; + case '#cadastro': + principal.appendChild(cadastro()); + break; + case '#feed': + // identificarUsuarioConectado(); + if (auth.currentUser) { + principal.appendChild(feed()); + } else { + window.location.hash = '#login'; + } + break; + case '#redefinir-senha': + principal.appendChild(senha()); + break; + default: + principal.appendChild(home()); + break; + } + }); +}; + +window.addEventListener('load', () => { + principal.appendChild(home()); + init(); +}); diff --git a/src/pages/cadastro/cadastro.css b/src/pages/cadastro/cadastro.css new file mode 100644 index 00000000..2ff2ca4d --- /dev/null +++ b/src/pages/cadastro/cadastro.css @@ -0,0 +1,164 @@ +* { + padding: 0; + margin: 0; +} + +#csscadastro { + background-color: #ffff; + height: 100vh; +} + +body { + font-family: 'Open Sans', sans-serif; + font-family: 'Poppins', sans-serif; + height: 100vh; +} + +main { + height: 100vh; +} + +#menina-cadastro { + height: 325px; +} + +#picture-cadastro nav { + background-color: #1e1e1e; + position: relative; + right: 45%; + height: 30px; +} + +#picture-cadastro { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background-color: #1e1e1e; + border-radius: 0 0 32px 32px; +} + +#cadastrocss header { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +header>h1 { + font-size: 15px; + font-weight: 600; +} + +#formulario-cadastro { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 15px; +} + +#csscadastro input { + width: 279px; + height: 50px; + font-size: 24px; + border-top: none; + border-left: none; + border-right: none; + font-family: 'Open Sans', sans-serif; + font-family: 'Poppins', sans-serif; +} + +#input-name { + background: url(/imagens/icon-user.png) no-repeat left / 1em; + padding-left: 1.4em; +} + +#input-email-cadastro { + background: url(/imagens/icon-email.png) no-repeat left / 1em; + padding-left: 1.4em; +} + +#input-senha-cadastro { + background: url(/imagens/icon-lock.png) no-repeat left / 1em; + padding-left: 1.4em; +} + +#btn-vermelho { + display: flex; + align-items: center; + justify-content: center; + width: 328px; + height: 40px; + font-size: 16px; + font-weight: 800; + border-radius: 8px; + background-color: #950909; + color: #ffff; + margin-top: 23px; + font-family: 'Open Sans', sans-serif; + font-family: 'Poppins', sans-serif; + border: currentColor; + box-shadow: 0px 4px 0px 0px #520000; + cursor: pointer; +} + +#paragrafo-cadastro { + display: flex; + align-items: center; + justify-content: center; + margin-top: 12px; + font-weight: bold; +} + +#paragrafo-cadastro a { + color: #950909; +} + +/* botão on-off*/ +.cadastro-check { + position: relative; + } + + .onoff { + display: flex; + height: 0px; + width: 0px; + } + + .check-btncadastro { + position: absolute; + display: inline-block; + margin-top: 20px; + width: 40px; + height: 20px; + left: 260px; + background-color: #666262; + border-radius: 17px; + cursor: pointer; + } + + .check-btncadastro::after { + content: ""; + position: absolute; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #fff; + top: 0px; + left: 1px; + transition: transform 0.3s; + } + + #check-cadastro:checked + .check-btncadastro { + background-color: #f32121; + } + + #check-cadastro:checked + .check-btncadastro::after { + transform: translateX(18px); + } + +#check-cadastro { + display: none; +} + \ No newline at end of file diff --git a/src/pages/cadastro/cadastro.js b/src/pages/cadastro/cadastro.js new file mode 100644 index 00000000..bec38382 --- /dev/null +++ b/src/pages/cadastro/cadastro.js @@ -0,0 +1,94 @@ +import { cadastrarUsuario, atualizarNomeDoUsuario } from '../../lib/firebase'; + +export default () => { + const container = document.createElement('div'); + container.id = 'csscadastro'; + + const template = ` + +menina fazendo movimento de arte marcial + +
+

CADASTRE-SE

+ +logo do app + +
+ + +
+ + + +
+ +

Já tem uma conta? Entrar

+
`; + + container.innerHTML = template; + + const botaoCadastrar = container.querySelector('#btn-vermelho'); + const inputEmail = container.querySelector('#input-email-cadastro'); + const inputSenha = container.querySelector('#input-senha-cadastro'); + const inputNome = container.querySelector('#input-name'); + + const checkBtn = container.querySelector('#check-cadastro'); + + function mostrarSenha() { + if (checkBtn.checked) { + inputSenha.type = 'text'; + } else { + inputSenha.type = 'password'; + } + } + + checkBtn.addEventListener('change', mostrarSenha); + + botaoCadastrar.addEventListener('click', (event) => { + event.preventDefault(); + const emailDoUsuario = inputEmail.value; + const senhaDoUsuario = inputSenha.value; + const nomeDoUsuario = inputNome.value; + + cadastrarUsuario(emailDoUsuario, senhaDoUsuario) + .then((userCredential) => { + // Signed in + const user = userCredential.user; + console.log('usuário cadastrado com sucesso'); + console.log(user); + alert('Cadastro realizado com sucesso!'); + window.location.hash = '#feed'; + }) + .catch((error) => { + const errorCode = error.code; + const errorMessage = error.message; + console.error(`${errorCode} - ${errorMessage}`); + if (nomeDoUsuario === '') { + alert('Por favor, insira seu nome.'); + } else if (emailDoUsuario === '') { + alert('Por favor, insira um email.'); + } else if (senhaDoUsuario === '') { + alert('Por favor, insira uma senha.'); + } else { + alert('Usuário já cadastrado. Tente outro email.'); + } + }); + + atualizarNomeDoUsuario(nomeDoUsuario) + .then(() => { + // Profile updated! + // ... + }) + .catch((error) => { + // An error occurred + const errorCode = error.code; + const errorMessage = error.message; + console.error(`${errorCode} - ${errorMessage}`); + }); + }); + + return container; +}; + +// const inputEmail = document.querySelector("#input-email"); +// const inputSenha = document.querySelector("#input-senha"); diff --git a/src/pages/feed/feed.css b/src/pages/feed/feed.css new file mode 100644 index 00000000..642657ca --- /dev/null +++ b/src/pages/feed/feed.css @@ -0,0 +1,149 @@ +* { + margin: 0; + padding: 0; +} + +#menu { + display: flex; + flex-direction: row; + background-color: #1e1e1e; + width: 100vw; + justify-content: space-between; + align-items: center; + +} + +#menu h1 { + color: white; + font-size: 18px; + padding: 10px; + +} + +.lista-menu { + flex-direction: row; + list-style: none; + display: none; +} + +#menu button { + background-color: transparent; + border: none; + padding: 10px; +} + +#menu button>img { + height: 30px; +} + +#cssfeed>header>picture>img { + width: 100vw; + background-color: #ffff; + position: relative; +} + +#menu .lista-menu>li>picture>img { + height: 25px; + width: 25px; + padding: 5px 10px; + +} + +#cssfeed>header>picture>img::before { + position: absolute; + inset: 0; + z-index: -1; +} + +#check-feed, +#check-sos, +#check-sair { + display: none; +} + +.icon-feed, +.icon-sos, +.icon-sair { + height: 25px; + width: 25px; + padding: 8px 16px; + +} + +.lista-menu-mobile { + background-color: rgba(0, 0, 0, 80%); + z-index: 2; + position: fixed; + width: 100vw; +} + +.lista-menu-mobile > li { + padding: 8px; +} + +.lista-menu-mobile > li { + display: flex; + align-items: center; + text-decoration: none; + color: #FFFF; +} + +#cssfeed .post-feed { + display: flex; + align-items: center; + justify-content: center; + background-color: #930909; + height: 150px; + border-radius: 15px; + margin: 0 10px; + flex-direction: column; +} + +#cssfeed .select { + background-color: #332F2F; + color: rgb(255, 255, 255); + height: 35px; + width: 150px; + border-radius: 20px; + margin: 10px; + border: none; + position: sticky; + left: 50%; + font-size: 12px; +} + +#cssfeed textarea { + font-size: 20px; + resize: none; + border-radius: 13px; + text-align: center; + height: 90px; + width: 300px; + color: #797979; + background-color: #d9d9d9; +} + +#btn-publicar { + margin: 10px 0 5px 0; + height: 40px; + width: 170px; + border-radius: 25px; + color: aliceblue; + background-color: black; + font-weight: bolder; + border: none; +} + +@media (min-width: 768px) { + .lista-menu { + display: flex; + } + + .lista-menu-mobile { + display: none; + } + + #menu button { + display: none; + } +} \ No newline at end of file diff --git a/src/pages/feed/feed.js b/src/pages/feed/feed.js new file mode 100644 index 00000000..981430c8 --- /dev/null +++ b/src/pages/feed/feed.js @@ -0,0 +1,86 @@ +import { sairDaConta } from "../../lib/firebase"; + +export default () => { + const container = document.createElement('div'); + container.id = 'cssfeed'; + + const template = ` +
+ + + +
+
+ +
+
+ + + +
+ + `; + + container.innerHTML = template; + + const botaoMenu = container.querySelector('#btn-menu'); + + function abrirMenu() { + const listaMenu = container.querySelector('.lista-menu-mobile'); + + if (listaMenu.style.display === 'none') { + listaMenu.style.display = 'block'; + } else if (document.body.clientWidth >= 768) { + listaMenu.style.display = 'none'; + } else { + listaMenu.style.display = 'none'; + } + } + + botaoMenu.addEventListener('click', abrirMenu); + + const botaoSair = container.querySelector('#sair'); + + botaoSair.addEventListener('click', () => { + sairDaConta() + .then(() => { + // Sign-out successful. + alert('Voce saiu') + window.location.hash = ''; + }) + .catch((error) => { + // An error happened. + const errorCode = error.code; + const errorMessage = error.message; + console.error(`${errorCode} - ${errorMessage}`); + }); + }); + + return container; +}; diff --git a/src/pages/home/home.css b/src/pages/home/home.css new file mode 100644 index 00000000..23eb8b65 --- /dev/null +++ b/src/pages/home/home.css @@ -0,0 +1,97 @@ +* { + margin: 0; + padding: 0; +} + +body { + font-family: 'Open Sans', sans-serif; + font-family: 'Poppins', sans-serif; + height: 100vh; +} + +#csshome { + background-color: #930909; + height: 100vh; +} + +main { + height: 100vh; +} + +#menina-home { + height: 359px; +} + +#picture-home { + display: flex; + justify-content: center; + align-items: center; + background-color: #FFFF; + border-radius: 0 0 32px 32px; +} + +article { + color: #FFFF; + padding: 24px; + text-align: center; +} + +#csshome h1 { + margin-bottom: 10px; + font-size: 32px; +} + +.botoes { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + flex-direction: column; +} + +#btn-cinza-home { + display: flex; + width: 320px; + height: 40px; + justify-content: center; + align-items: center; + margin: 0 auto 20px auto; + background-color: #1E1E1E; + border-radius: 8px; + box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.80); + font-weight: bolder; + color: #FFFF; + border: currentColor; + cursor: pointer; + font-family: 'Open Sans', sans-serif; + font-family: 'Poppins', sans-serif; +} + +#btn-branco { + display: flex; + width: 320px; + height: 40px; + justify-content: center; + align-items: center; + margin: 0 auto; + border-radius: 8px; + font-weight: bolder; + background: #FFF; + box-shadow: 0px 4px 0px 0px #afafaf; + border: currentColor; + cursor: pointer; + font-family: 'Open Sans', sans-serif; + font-family: 'Poppins', sans-serif; +} + +#btn-cinza-home a { + text-decoration: none; + color: #FFFF; + padding: 10px 138px; +} + +#btn-branco a { + text-decoration: none; + color: #930909; + padding: 10px 138px; +} \ No newline at end of file diff --git a/src/pages/home/home.js b/src/pages/home/home.js new file mode 100644 index 00000000..14be4a64 --- /dev/null +++ b/src/pages/home/home.js @@ -0,0 +1,24 @@ +export default () => { + const container = document.createElement('div'); + container.id = 'csshome'; + + const template = ` + + menina fazendo movimento de arte marcial + +
+

Bem-vinda ao Fight Back!

+

Um espaço pensado para mulheres com espírito + de lutadoras e sobreviventes. Compartilhe ideias e técnicas de + autodefesa, ajude pessoas em vulnerabilidade a se defenderem e + alimente seu conhecimento em defesa pessoal.

+
+
+ + +
`; + + container.innerHTML = template; + + return container; +}; diff --git a/src/pages/login/login.css b/src/pages/login/login.css new file mode 100644 index 00000000..61039b8f --- /dev/null +++ b/src/pages/login/login.css @@ -0,0 +1,157 @@ +* { + padding: 0; + margin: 0; +} + +#csslogin { + background-color: #ffff; + height: 100vh; +} + +body { + font-family: 'Open Sans', sans-serif; + font-family: 'Poppins', sans-serif; + height: 100vh; +} + +main { + height: 100vh; +} + +#picture-login nav { + background-color: #950909; + position: relative; + right: 45%; + height: 30px; +} + +#picture-login { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background-color: #950909; + border-radius: 0 0 32px 32px; +} + +#menina-login { + height: 325px; +} + +#formulario-login { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 20px; +} + +#csslogin input { + width: 279px; + height: 50px; + font-size: 24px; + border-top: none; + border-left: none; + border-right: none; + font-family: 'Open Sans', sans-serif; + font-family: 'Poppins', sans-serif; +} + +#input-email-login { + background: url(/imagens/icon-email.png) no-repeat left / 1em; + padding-left: 1.4em; +} + +#input-senha-login { + background: url(/imagens/icon-lock.png) no-repeat left / 1em; + padding-left: 1.4em; +} + +#btn-cinza-login { + display: flex; + width: 320px; + height: 40px; + justify-content: center; + align-items: center; + margin: 23px auto; + background-color: #1E1E1E; + border-radius: 8px; + box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.80); + font-weight: bolder; + color: #FFFF; + border: currentColor; + cursor: pointer; + font-family: 'Open Sans', sans-serif; + font-family: 'Poppins', sans-serif; +} + +#btn-cinza-login a { + text-decoration: none; + color: #FFFF; + padding: 10px 138px; +} + +#paragrafo-login { + display: flex; + align-items: center; + justify-content: center; + margin-top: 12px; + font-weight: bold; +} + +/* botão on-off*/ +.senha-check{ + position: relative; + +} +.on-off { + display: flex; + height: 0px; + width: 0px; + } + + #check { + display: none; + } + + .check-btn { + position: absolute; + display: inline-block; + margin-top: 20px; + width: 40px; + height: 20px; + left: 260px; + background-color: #666262; + border-radius: 17px; + cursor: pointer; + } + + .check-btn::after { + content: ""; + position: absolute; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #fff; + top: 0px; + left: 1px; + transition: transform 0.3s; + } + + #check:checked + .check-btn { + background-color: #950909; + } + + #check:checked + .check-btn::after { + transform: translateX(18px); + } + + #paragrafo-login a { + color: #950909; +} + +#csslogin form > #redefinir-senha { + border: none; + cursor: pointer; +} + diff --git a/src/pages/login/login.js b/src/pages/login/login.js new file mode 100644 index 00000000..905cd3a4 --- /dev/null +++ b/src/pages/login/login.js @@ -0,0 +1,90 @@ +import { loginUsuario } from '../../lib/firebase'; +// lerDadosTeste, teste +export default () => { + const container = document.createElement('div'); + container.id = 'csslogin'; + + const template = ` + + + menina fazendo movimento de arte marcial + +
+

ENTRAR

+ +logo do app + +
+ +
+ + + + +
+ + + + + +

Ainda não tem uma conta?? Cadastre-se

+
`; + + container.innerHTML = template; + + const botaoEntrar = container.querySelector('#btn-cinza-login'); + const inputEmail = container.querySelector('#input-email-login'); + const inputSenha = container.querySelector('#input-senha-login'); + const btnRedefSenha = container.querySelector('#redefinir-senha'); + const checkBtn = container.querySelector('#check'); + + function mostrarSenha() { + if (checkBtn.checked) { + inputSenha.type = 'text'; + } else { + inputSenha.type = 'password'; + } + } + + checkBtn.addEventListener('change', mostrarSenha); + + btnRedefSenha.addEventListener('click', (event) => { + event.preventDefault(); + window.location.hash = '#redefinir-senha'; + }); + + botaoEntrar.addEventListener('click', (event) => { + event.preventDefault(); + const emailDoUsuario = inputEmail.value; + const senhaDoUsuario = inputSenha.value; + + loginUsuario(emailDoUsuario, senhaDoUsuario) + + .catch((error) => { + const errorCode = error.code; + const errorMessage = error.message; + console.error(`${errorCode} - ${errorMessage}`); + if (errorCode === 'auth/invalid-email') { + alert('Email inválido. Verifique o campo e tente novamente.'); + } else if (errorCode === 'auth/missing-password') { + alert('Por favor, insira sua senha.'); + } else if (errorCode === 'auth/wrong-password') { + alert('Senha incorreta. Tente novamente.'); + } else { + alert('Você ainda não tem uma conta. Cadastre-se.'); + } + }) + + .then((userCredential) => { + // Signed in + const user = userCredential.user; + console.log('usuário logado com sucesso'); + console.log(user); + window.location.hash = '#feed'; + // teste(); + // lerDadosTeste(); + }); + }); + + return container; +}; diff --git a/src/pages/redefinicao-de-senha/senha.css b/src/pages/redefinicao-de-senha/senha.css new file mode 100644 index 00000000..3097826e --- /dev/null +++ b/src/pages/redefinicao-de-senha/senha.css @@ -0,0 +1,47 @@ +* { + margin: 0; + padding: 0; +} + +#csssenha > form { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin-bottom: 50px; + gap: 10px; +} + + +#csssenha > form > label { + text-align: center; +} + +#csssenha input { + width: 279px; + height: 50px; + font-size: 24px; + border-top: none; + border-left: none; + border-right: none; + font-family: 'Open Sans', sans-serif; + font-family: 'Poppins', sans-serif; +} + +#enviar-email { + display: flex; + width: 200px; + height: 35px; + justify-content: center; + align-items: center; + margin: 23px auto; + background-color: #1E1E1E; + border-radius: 8px; + box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.80); + font-weight: bolder; + color: #FFFF; + border: currentColor; + cursor: pointer; + font-family: 'Open Sans', sans-serif; + font-family: 'Poppins', sans-serif; +} diff --git a/src/pages/redefinicao-de-senha/senha.js b/src/pages/redefinicao-de-senha/senha.js new file mode 100644 index 00000000..58c43504 --- /dev/null +++ b/src/pages/redefinicao-de-senha/senha.js @@ -0,0 +1,37 @@ +import { redefinirSenha } from '../../lib/firebase'; + +export default () => { + const container = document.createElement('div'); + container.id = 'csssenha'; + + const template = ` +
+

Redefinir senha

+ + + +
`; + + container.innerHTML = template; + + const btnEnviarEmail = container.querySelector('#enviar-email'); + const inputEmailRedefSenha = container.querySelector('#input-redef-senha'); + + btnEnviarEmail.addEventListener('click', () => { + const emailDoUsuario = inputEmailRedefSenha.value; + redefinirSenha(emailDoUsuario) + .then(() => { + // Password reset email sent! + // .. + alert('Email de redefinição de senha enviado com sucesso. Verifique sua caixa de entrada.'); + }) + .catch((error) => { + const errorCode = error.code; + const errorMessage = error.message; + console.error(`${errorCode} - ${errorMessage}`); + // .. + }); + }); + + return container; +}; diff --git a/test/index.spec.js b/test/index.spec.js index 91f11a33..142d52e5 100644 --- a/test/index.spec.js +++ b/test/index.spec.js @@ -1,8 +1,8 @@ // importamos la funcion que vamos a testear -import { myFunction } from '../src/lib/index'; +// import { myFunction } from '../src/lib/index'; -describe('myFunction', () => { - it('debería ser una función', () => { - expect(typeof myFunction).toBe('function'); - }); -}); +// describe('myFunction', () => { +// it('debería ser una función', () => { +// expect(typeof myFunction).toBe('function'); +// }); +// });