Laboratoria · amandascam03 · Jul 6, 2023 · Jul 6, 2023 · Jul 6, 2023 · Jul 6, 2023
diff --git 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"
   }
-}
+}
diff --git a/src/imagens/fightback-logo.png b/src/imagens/fightback-logo.png
diff --git a/src/imagens/icon _like.png b/src/imagens/icon _like.png
diff --git a/src/imagens/icon-deletar.png b/src/imagens/icon-deletar.png
diff --git a/src/imagens/icon-editar.png b/src/imagens/icon-editar.png
diff --git a/src/imagens/icon-email.png b/src/imagens/icon-email.png
diff --git a/src/imagens/icon-feed.png b/src/imagens/icon-feed.png
diff --git a/src/imagens/icon-like.png b/src/imagens/icon-like.png
diff --git a/src/imagens/icon-lock.png b/src/imagens/icon-lock.png
diff --git a/src/imagens/icon-menu.png b/src/imagens/icon-menu.png
diff --git a/src/imagens/icon-perfil.png b/src/imagens/icon-perfil.png
diff --git a/src/imagens/icon-sair.png b/src/imagens/icon-sair.png
diff --git a/src/imagens/icon-sos.png b/src/imagens/icon-sos.png
diff --git a/src/imagens/icon-user.png b/src/imagens/icon-user.png
diff --git a/src/imagens/icon-voltar-branco.png b/src/imagens/icon-voltar-branco.png
diff --git a/src/imagens/icon-voltar.png b/src/imagens/icon-voltar.png
diff --git a/src/imagens/menina-feed.png b/src/imagens/menina-feed.png
diff --git a/src/imagens/menina.png b/src/imagens/menina.png
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Document</title>
+  <link rel="stylesheet" href="pages/home/home.css">
+  <link rel="stylesheet" href="pages/cadastro/cadastro.css">
+  <link rel="stylesheet" href="pages/login/login.css">
+  <link rel="stylesheet" href="pages/feed/feed.css">
+  <link rel="stylesheet" href="pages/redefinicao-de-senha/senha.css">
+  <title>Fight Back</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Poppins&display=swap" rel="stylesheet">
 </head>
+
 <body>
+  <main id="principal">
+  </main>
   <script type="module" src="main.js"></script>
 </body>
+
 </html>
diff --git a/src/lib/firebase-config.js 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
@@ -0,0 +1,74 @@
+// aqui exportaras las funciones que necesites
+
+// export const myFunction = () => {
+//   // aqui tu codigo
+//   console.log('Hola mundo!');
+// };
+import {
+  createUserWithEmailAndPassword,
+  updateProfile,
+  signInWithEmailAndPassword,
+  signOut,
+  sendPasswordResetEmail,
+} from 'firebase/auth';
+import { collection, addDoc, getDocs } from 'firebase/firestore';
+import { auth, db } from './firebase-config.js';
+
+export function cadastrarUsuario(email, senha) {
+  return createUserWithEmailAndPassword(auth, email, senha);
+}
+
+export function atualizarNomeDoUsuario(nome) {
+  return updateProfile(auth.currentUser, {
+    displayName: nome,
+  });
+}
+
+export function loginUsuario(email, senha) {
+  return signInWithEmailAndPassword(auth, email, senha);
+}
+
+export function sairDaConta() {
+  return signOut(auth);
+}
+
+export function redefinirSenha(email) {
+  return sendPasswordResetEmail(auth, email);
+}
+
+export async function adicionarPost(username, conteudo, nivel) {
+  try {
+    const docRef = await addDoc(collection(db, 'posts'), {
+      username: auth.currentUser.displayName,
+      uid: auth.currentUser.uid,
+      conteudo,
+      nivel,
+    });
+    console.log('Document written with ID: ', docRef.id);
+  } catch (e) {
+    console.error('Error adding document: ', e);
+  }
+  return { username, conteudo };
+}
+
+export async function exibirPosts() {
+  try {
+    const querySnapshot = await getDocs(collection(db, 'posts'));
+    const feedElement = document.querySelector('.post');
+    feedElement.innerHTML = '';
+    const array = [];
+    querySnapshot.forEach((doc) => {
+      //   const post = doc.data();
+      //   const postElement = document.createElement('div');
+      //   postElement.innerHTML = `<h2>${post.username}</h2>
+      // <p>${post.conteudo}</p>
+      // <hr>`;
+      //   feedElement.appendChild(postElement);
+      array.push(doc.data());
+      // console.log(`${doc.id} => ${doc.data()}`);
+      return array;
+    });
+  } catch (error) {
+    console.error('erro ao obter os posts', error);
+  }
+}
diff --git a/src/lib/index.js b/src/lib/index.js
diff --git 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
@@ -0,0 +1,174 @@
+* {
+    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;
+}
+
+#caixaDeTexto {
+    position: relative;
+}
+
+#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: #950909;
+  }
+
+  #check-cadastro:checked + .check-btncadastro::after {
+    transform: translateX(18px);
+  }
+
+#check-cadastro {
+    display: none;
+}
+
+#mensagemErro{
+    color: #950909;
+    font-weight: bolder;
+    font-size: 13px;
+
+}