Alissonred · KarenthCruz · Sep 27, 2022
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@
 coverage/
 node_modules/
 .yarn.lock
-package-lock.json
+src/lib/config.js
+package-lock.json
diff --git a/package.json b/package.json
@@ -13,8 +13,8 @@
     "htmlhint": "htmlhint dist/*.html ",
     "eslint": "eslint --ext .js src/ test/",
     "stylelint": "stylelint --aei src/**/*.css",
-    "pretest": "npm run htmlhint && npm run eslint && npm run stylelint",
-    "test": "jest --coverage",
+    "_pretest": "npm run htmlhint && npm run eslint && npm run stylelint",
+    "test": "jest --coverage --env=jsdom --watchAll",
     "start": "serve -s src/"
   },
   "devDependencies": {

diff --git a/src/image/danaYogaLogo.png b/src/image/danaYogaLogo.png
diff --git a/src/image/imgLogoGoogle.png b/src/image/imgLogoGoogle.png
diff --git a/src/index.html b/src/index.html
@@ -2,11 +2,19 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <meta name="author" content="Alisson R, Lorena M, Karenth C">
   <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="./styles/styles.css"/>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&family=Roboto:wght@100;300;400&display=swap" rel="stylesheet">
+  <title>Lady Code</title>
 </head>
+
 <body>
+  <div id="root"></div>
   <script type="module" src="main.js"></script>
+  <script type="module" src="./lib/firebase.js"></script>
+
 </body>
+
 </html>
diff --git a/src/lib/firebase-auth.js b/src/lib/firebase-auth.js
@@ -0,0 +1,11 @@
+import { auth, createUserWithEmailAndPassword } from './firebase.js';
+
+const register = async (email, password) => {
+  try {
+    await createUserWithEmailAndPassword(auth, email, password);
+  } catch (error) {
+    throw error.message;
+  }
+};
+
+export { register };
diff --git a/src/lib/firebase.js b/src/lib/firebase.js
@@ -0,0 +1,35 @@
+// importando los servicios de firebase
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.10.0/firebase-app.js';
+import {
+  getAuth, createUserWithEmailAndPassword, onAuthStateChanged, signInWithPopup,
+  signInWithEmailAndPassword, signOut, GoogleAuthProvider,
+} from 'https://www.gstatic.com/firebasejs/9.10.0/firebase-auth.js';
+// import {
+//   getFirestore, collection, addDoc, getDocs, getDoc, onSnapshot, doc, query,
+//   serverTimestamp, orderBy, deleteDoc, updateDoc, arrayUnion, arrayRemove,
+// } from 'https://www.gstatic.com/firebasejs/9.10.0/firebase-firestore.js';
+
+import config from './config.js'; // config es la llave de firebase
+
+// Creando una constante para cada servicio
+const firebaseApp = initializeApp(config);
+const auth = getAuth(firebaseApp);
+auth.languageCode = 'es';
+const createUser = (email, password) => createUserWithEmailAndPassword(auth, email, password);
+const singUser = (email, password) => signInWithEmailAndPassword(auth, email, password);
+const loginOut = signOut(auth);
+const provider = new GoogleAuthProvider();
+
+// Detectando el estado de autenticación
+onAuthStateChanged(auth, (user) => { /// dice si estamos comctados/////
+  if (user != null) {
+    console.log('Usuario Conectado');
+  } else {
+    console.log('No se encuentra el usuario');
+  }
+});
+
+export {
+  initializeApp, createUserWithEmailAndPassword, auth, createUser, singUser,
+  loginOut, provider, signInWithPopup, GoogleAuthProvider, onAuthStateChanged,
+};
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,35 @@
-// Este es el punto de entrada de tu aplicacion
+import { login } from './views/login.js';
+import { register } from './views/register.js';
+import { wall } from './views/wall.js';
+import { profile } from './views/profile.js';
 
-import { myFunction } from './lib/index.js';
+const root = document.getElementById('root');
 
-myFunction();
+const routes = {
+  '/': login, // clave y valor
+  '/login': login,
+  '/register': register,
+  '/wall': wall,
+  '/profile': profile,
+};
+
+// función para anexar un registro al historial del navegador (.pushState)
+export const onNavigate = (pathname) => {
+  window.history.pushState(
+    {}, // estado vacio
+    pathname, // title
+    window.location.origin + pathname, // URL + (Ruta)
+  );
+  root.removeChild(root.firstChild);
+  root.appendChild(routes[pathname]());
+};
+// Renderiza sólo ésta parte de la ruta
+const component = routes[window.location.pathname];
+
+// onpopstate, se dispara realizando una acción en el navegador como volver
+window.onpopstate = () => {
+  root.removeChild(root.firstChild);// borrando el primer nodo
+  root.append(routes[window.location.pathname]());// insertando el nuevo nodo
+};
+
+root.appendChild(component());
diff --git a/src/serve.json b/src/serve.json
@@ -0,0 +1,5 @@
+{
+    "rewrites": [
+        {"source": "/**", "destination": "index.html"}
+    ]
+}
diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -0,0 +1,257 @@
+@media (max-width: 600px) {
+    body {
+        flex-direction: column;
+    }
+}
+
+body{
+    height: auto;
+    width: auto;
+    font-family: 'Poppins', sans-serif;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+}
+
+.headerProfile{
+    display: flex;
+    align-items: center;
+    margin: 10px;
+}
+
+form{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.imgLogo{
+    height: 110px;
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+.imgLogoProfile{
+    width: 130px;
+    margin: 10px;
+    padding-right: 5px;
+}
+.imgUser{
+    width: 70px;
+}
+
+.viewLogin{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 20px;
+    margin-top: 70px;
+    padding: 20px;
+}
+.viewRegister{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+    align-items: center;
+    margin: 20px;
+    margin-top: 100px;
+    padding: 20px;
+}
+
+.viewProfile{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.contRegist{
+    display: flex;
+}
+
+.sectionUser{
+    display: flex;
+    align-items: center;
+    margin: 10px;
+}
+
+.sectionPost{
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.input{
+    width: 250px;
+    height: 37px;
+    margin: 10px;
+    padding: 5px;
+    color:rgb(93, 92, 92);
+    font-size:large;
+    text-align: center;
+    border-radius: 10px;
+    border: 1.3px solid rgb(167, 167, 167);
+}
+.input:focus {
+    border-color: #F9965E;
+    outline: 0;
+}
+
+.input::placeholder {
+    color:rgb(197, 196, 196);
+  }
+
+.inputPost{
+    width: 280px;
+    height: 100px;
+    margin: 10px;
+    padding: 10px 10px 10px 10px;
+    font-family: 'Poppins', sans-serif;
+    font-size: 15px;
+    border-radius: 15px;
+    border: 1.5px solid #DFBBAB;
+}
+
+.inputPost::placeholder {
+    color:rgb(197, 196, 196);
+    font-size: 15px;
+  }
+
+.inputPost:focus {
+    border-color: #F9965E;
+    outline: 0;
+}
+
+.btn {
+    width: 200px;
+    height: 45px;
+    color: white;
+    margin: 5px;
+    font-size:large;
+    border-radius: 10px;
+    align-items: center;
+    background-color: #DFBBAB;
+    border: white;
+    padding-right: 10px;
+}
+
+.btn.registration {
+    margin-top: 60px;
+}
+
+.btn.login {
+    margin-top: 60px;
+}
+
+.btn:hover {
+    background-color: #F9965E;
+}
+
+.btnBack{
+    margin-top: 20px;
+    color: rgb(127, 127, 127);
+    border: white;
+    background-color: white;
+    font-size: medium;
+    text-decoration: underline;
+
+}
+
+.btnGoogle{
+    height: 45px;
+    font-family: 'Roboto';
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    padding: 0px 10px 0px 3px;
+    font-size: medium;
+    color: rgb(93, 93, 93);
+    border-radius: 5px;
+    border-color: white;
+    border-style: solid;
+    background-color: white;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
+}
+
+.btnGoogle:before{
+    content: '';
+    width: 35px;
+    height: 35px;
+    display: flex;
+    margin-right: 10px;
+    background-image: url('../image/imgLogoGoogle.png');
+    background-repeat: no-repeat;
+    box-sizing: border-box;
+    background-color: white;
+    background-size: 20px 20px;
+    background-position: center center;
+
+}
+
+.btnGoogle:hover {
+    background-color: #4285F4;
+    color: #ffffff;
+}
+
+.btnRegister{
+    color: #DFBBAB;
+    border: white;
+    background-color: white;
+    font-size:large;
+}
+
+.btnNav{
+    color: #4b4b4b;
+    border: white;
+    letter-spacing: 1px;
+    border-radius: 5px;
+    background-color: white;
+    font-size: medium;
+    text-decoration: underline; 
+}
+
+.btnNav:hover {
+    color: white;
+    background-color: #F9965E;
+}
+
+.btnPost{
+    width: 150px;
+    height: 45px;
+    color: white;
+    margin: 5px;
+    font-size:large;
+    border-radius: 10px;
+    align-items: center;
+    background-color: #DFBBAB;
+    border: white;
+    padding-right: 10px;
+}
+
+ p{
+    text-align: center;
+    color: rgb(83, 83, 83);
+ }
+
+ h2{
+    margin: 0px;
+    font-size: 20px;
+    padding-right: 50px;
+    color: rgb(59, 59, 59);
+ }
+
+ h3{
+    margin: 0px;
+    font-size: 15px;
+    padding-right: 50px;
+    color: rgb(59, 59, 59);
+ }
+
+
+
+
+