Laboratoria · EdithOrt · Apr 14, 2020 · Apr 14, 2020 · Apr 14, 2020 · Apr 19, 2020
diff --git a/Readme.md b/Readme.md
diff --git a/_mocks_/firebase-mock.js b/_mocks_/firebase-mock.js
@@ -0,0 +1,21 @@
+const firestoreMock = () => {
+    return {
+        collection: (nameCollection) =>{
+            return {
+                add: (objData) => {
+                    return new Promise((resolve) => {
+                        resolve('Hola!')
+                    })
+                }
+            }
+        }
+    }
+}
+
+const firebase = {
+    firestore: firestoreMock
+}
+
+export default jest.fn(() => {
+    return firebase;
+})
diff --git a/images/demo.PNG b/images/demo.PNG
diff --git a/images/demo2.PNG b/images/demo2.PNG
diff --git a/images/demo3.PNG b/images/demo3.PNG
diff --git a/images/proboceto.PNG b/images/proboceto.PNG
diff --git a/images/protalta.PNG b/images/protalta.PNG
diff --git a/images/protalta2.PNG b/images/protalta2.PNG
diff --git a/images/protalta3.PNG b/images/protalta3.PNG
diff --git a/images/protalta4.PNG b/images/protalta4.PNG
diff --git a/package.json b/package.json
@@ -10,10 +10,6 @@
   ],
   "license": "MIT",
   "scripts": {
-    "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",
     "start": "serve src/"
   },
@@ -28,9 +24,13 @@
     "eslint-plugin-jest": "^22.1.2",
     "htmlhint": "^0.11.0",
     "jest": "^24.8.0",
+    "mock-cloud-firestore": "^0.12.0",
     "regenerator-runtime": "^0.13.1",
     "serve": "^11.0.2",
     "stylelint": "^10.1.0",
     "stylelint-config-recommended": "^2.2.0"
+  },
+  "dependencies": {
+    "https-localhost": "^4.5.2"
   }
-}
+}
diff --git a/src/example.js b/src/example.js
diff --git a/src/images/browser.png b/src/images/browser.png
diff --git a/src/images/camera.png b/src/images/camera.png
diff --git a/src/images/comment.png b/src/images/comment.png
diff --git a/src/images/edit.png b/src/images/edit.png
diff --git a/src/images/facebook.png b/src/images/facebook.png
diff --git a/src/images/gmail.png b/src/images/gmail.png
diff --git a/src/images/grayHeart.png b/src/images/grayHeart.png
diff --git a/src/images/logOut.png b/src/images/logOut.png
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/logoLifestyle.png b/src/images/logoLifestyle.png
diff --git a/src/images/logoWhite.png b/src/images/logoWhite.png
diff --git a/src/images/plusImage.png b/src/images/plusImage.png
diff --git a/src/images/redHeart.png b/src/images/redHeart.png
diff --git a/src/images/whiteHeart.png b/src/images/whiteHeart.png
diff --git a/src/images/xGreen.png b/src/images/xGreen.png
diff --git a/src/images/xRed.png b/src/images/xRed.png
diff --git a/src/index.html b/src/index.html
@@ -4,9 +4,37 @@
   <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="style.css">
+  <title>lifestyle</title>
 </head>
 <body>
-  <script type="module" src="index.js"></script>
+  <header class="header">
+    <div id="header">
+    <button id="out"><img src="images/logOut.png"></button>
+    </div>
+  </header>
+  <main>
+    <section id="root" class="root">
+    </section>
+    <section id="modalRoot" class="modal"></section>
+  </main>
+  <footer>
+    <section id="staticMenu" class="menu">
+    <nav class="nav">
+     <button id="welcome" class="btnNav"><img src="images/logoWhite.png"> </button> 
+     <button id="browser" class="btnNav"><img src="images/browser.png"></button>
+     <button id="favorites" class="btnNav"><img src="images/whiteHeart.png"></button>
+     <button id="oupladContent" class="btnNav"><img src="images/camera.png"></button>
+     <button id="profile" class="btnNav"></button>
+    </nav>
+    </section>
+  </footer>
+  <!-- The core Firebase JS SDK is always required and must be listed first -->
+<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase.js"></script>
+
+<!-- TODO: Add SDKs for Firebase products that you want to use
+     https://firebase.google.com/docs/web/setup#available-libraries -->
+<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-analytics.js"></script>
+<script type="module" src="index.js"></script>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,37 @@
-import { example } from './example.js';
+import singIn from './login.js';
+import profile from './profile.js';
+import welcomeView from './welcome.js';
+import showOupladWindow from './uopladContent.js';
+let btns= document.querySelectorAll('.btnNav');
 
-example();
+function router(root) {
+  singIn();
+  switch(root){
+    case 'profile':
+      profile();
+      break;
+    case 'welcome':
+      welcomeView();
+      break;
+    case 'oupladContent':
+      showOupladWindow();
+      break;
+  }
+}
+
+// btns.forEach(btn => btn.onclick= e => router(e.target.id))
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: 'AIzaSyBuxP-xlUpYjWc5KNNt6q0hKbsxc8L4cE4',
+  authDomain: 'cdmx009-f4cac.firebaseapp.com',
+  databaseURL: 'https://cdmx009-f4cac.firebaseio.com',
+  projectId: 'cdmx009-f4cac',
+  storageBucket: 'cdmx009-f4cac.appspot.com',
+  messagingSenderId: '206411662308',
+  appId: '1:206411662308:web:8c3266d5640e307ca57df1',
+  measurementId: 'G-L6NB5984DB',
+};
+// Initialize Firebase
+firebase.initializeApp(firebaseConfig);
+firebase.firestore();
+window.addEventListener('load', router);
diff --git a/src/login.js b/src/login.js
@@ -0,0 +1,79 @@
+import showOupladWindow from './uopladContent.js'
+import welcomeView from './welcome.js'
+import profile from './profile.js'
+import { showRegisterWindow } from './register.js'
+let content= document.querySelector(".root");
+let staticMenu= document.querySelector("#staticMenu");
+let btnOut= document.querySelector("#out");
+
+function singIn (){
+    btnOut.style.display="none";
+    staticMenu.style.display= "none";
+        content.innerHTML='';
+        let profileView= `
+        <section class="container">
+        <div>
+        <img id="logotype" src="images/logo.png">
+        </div>
+        <input class="inputUser" id="mail" placeholder="Ingresa tu correo electrónico">
+        <br>
+        <input class="inputUser" id="password" placeholder="Ingresa tu contraseña">
+        <br>
+        <button id="loginBtn" class="buttons">INGRESAR</button>
+        <br>
+        <p>O inicia sesión con:</p>
+        <div id="containerBtns">
+        <button id="loginFacebook" class="btnFbGmail">
+        <img class="authSocial" src="images/facebook.png">
+        </button>
+        <button id="loginGmail" class="btnFbGmail">
+        <img class="authSocial" src="images/gmail.png">
+        </button>
+        </div>
+        <button id="btnRegister">Registrate si eres nuevo</button>
+        </section>`
+        content.innerHTML= profileView;
+        // staticMenu.remove();
+        document.querySelector("#btnRegister").addEventListener('click', showRegisterWindow);
+        document.querySelector("#profile").addEventListener('click', profile);
+        let btnFacebook= document.querySelector("#loginFacebook");
+        btnFacebook.onclick= authFacebook;
+        function authFacebook () {
+        let provider= new firebase.auth.FacebookAuthProvider();
+        firebase.auth().signInWithPopup(provider).then(function(result){
+            alert("Éxito");
+            welcomeView();
+            console.log(result);
+        })
+        .catch(function(error){
+            alert("Error");
+            console.log(error);
+        })
+        }
+        let btnGmail= document.querySelector("#loginGmail");
+        btnGmail.onclick= authGmail;
+        function authGmail () {
+            let provider = new firebase.auth.GoogleAuthProvider();
+            firebase.auth().signInWithPopup(provider).then(function(result) {
+                let token = result.credential.accessToken;
+                console.log(token);
+                let user = result.user;
+                console.log(user);
+                welcomeView();
+              }).catch(function(error) {
+                let errorCode = error.code;
+                console.log(errorCode);
+                let errorMessage = error.message;
+                console.log(errorMessage);
+                let email = error.email;
+                console.log(email);
+                let credential = error.credential;
+                console.log(credential);
+              });
+        }
+        let user = firebase.auth().currentUser;
+        if (user != null){
+        console.log(user);}
+    }
+
+export default singIn;
diff --git a/src/profile.js b/src/profile.js
@@ -0,0 +1,57 @@
+import {modal} from './welcome.js'
+let content= document.querySelector(".root");
+
+
+function profile () {
+    content.innerHTML='';
+    let user = firebase.auth().currentUser;
+    let dataBase= firebase.firestore();
+    if (user != null) {
+        let infoUser= `
+        <div>${user.displayName}</div>
+        <div id="flexImg">
+        <img id="imgUserProfile" src=${user.photoURL}>
+        </div>`
+        content.innerHTML=infoUser;
+        dataBase.collection("posts").where("id", "==", user.uid).orderBy("date","desc")
+        .onSnapshot(function(snapshot){
+            let changes= snapshot.docChanges();
+            console.log(changes);
+            changes.forEach(change =>{
+                let section= document.createElement("section");
+                section.classList.add("containerProfile");
+                let button= document.createElement("button");
+                button.classList.add("btnsPosts");
+                let link= change.doc.data().img;
+                let img= document.createElement("img");
+                img.src= link;
+                img.id = change.doc.id;
+                img.setAttribute('data-title',change.doc.data().title);
+                img.setAttribute('data-description', change.doc.data().description);
+                img.setAttribute('data-user', change.doc.data().user);
+                button.appendChild(img);
+                section.appendChild(button);
+                content.appendChild(section);
+                content.removeChild(section);
+            });
+            let modalRoot= document.querySelector("#modalRoot");
+            let btnsPosts= document.querySelectorAll(".btnsPosts");
+            btnsPosts.forEach(btn=> btn.onclick = e => {
+                modalRoot.style.display= "block";
+                let value= e.target.id;
+                // console.log(value);
+                let link = e.target.getAttribute('src');
+                let title= e.target.getAttribute('data-title');
+                let description= e.target.getAttribute('data-description');
+                let user= e.target.getAttribute('data-user');
+                modal(value, link, title, description, user);
+            });
+        })
+        // .catch(function(error) {
+        //     console.log("Error getting documents: ", error);
+        // });
+
+    }
+}
+
+export default profile;
diff --git a/src/register.js b/src/register.js
@@ -0,0 +1,66 @@
+const content = document.querySelector(".root");
+const footer= document.querySelector("footer");
+
+
+export function showRegisterWindow (){
+  content.innerHTML='';
+  const render= `
+  <section>
+  <div> Registrate </div>
+  <form class= "form">
+    <input class= "input" id= "signUpUser" type ="text" placeholder = "Nombre de usuario" required><br>
+    <input class= "input" id= "signUpEmail" type= "email" placeholder = "Correo electrónico" required> <br>
+    <input class= "input" id= "signUpPassword" type= "password" placeholder = "Nueva contraseña" required> <br>
+    <input class= "btn" id= "signup" type= "submit" placeholder="ENVIAR">  
+  </form>
+  <button id="btnReturn">Regresar</button>
+  </section>
+  `;
+  content.innerHTML= render;
+  const renderFooter= `
+  <div>
+  <img src="images/logoLifestyle.png">
+  </div>`
+  footer.innerHTML= renderFooter;
+  const data= document.querySelector(".form");
+  getData(data);
+}
+
+function getData (form){
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const userName= form['signUpUser'].value;
+    const email= form['signUpEmail'].value;
+    const password= form['signUpPassword'].value;
+    console.log(userName, email, password);
+    createNewUser(email, password, userName);
+ })
+}
+
+function createNewUser(email, password, userName){
+  const dataBase= firebase.firestore();
+  firebase.auth().createUserWithEmailAndPassword(email, password).then ((function(result){
+    console.log(result);
+    let user = firebase.auth().currentUser;
+      console.log(user);
+    dataBase.collection("users").add({
+      user: userName,
+      id: user.uid,
+      email: email,
+    })
+    .then(function(docRef) {
+        console.log("Document written with ID: ", docRef.id);
+    })
+    .catch(function(error) {
+        console.error("Error adding document: ", error);
+    });
+}))
+  .catch(function(error) {
+        // Handle Errors here.
+    var errorCode = error.code;
+    var errorMessage = error.message;
+    console.log(errorCode);
+    console.log(errorMessage);
+        // ...
+  });
+}