Laboratoria · AniaCuapio · Apr 14, 2020 · Apr 14, 2020 · Apr 14, 2020 · Apr 20, 2020
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "socialnetwork-15a5f"
+  }
+}
diff --git a/database.rules.json b/database.rules.json
@@ -0,0 +1,6 @@
+{
+  "rules": {
+    ".read": "auth != null",
+    ".write": "auth != null"
+  }
+}
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,16 @@
+{
+  "database": {
+    "rules": "database.rules.json"
+  },
+  "hosting": {
+    "public": "src",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  },
+  "storage": {
+    "rules": "storage.rules"
+  }
+}
diff --git a/package.json b/package.json
@@ -32,5 +32,8 @@
     "serve": "^11.0.2",
     "stylelint": "^10.1.0",
     "stylelint-config-recommended": "^2.2.0"
+  },
+  "dependencies": {
+    "bulma": "^0.8.2"
   }
-}
+}
diff --git a/src/404.html b/src/404.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Page Not Found</title>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
+      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+      <h3>Why am I seeing this?</h3>
+      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+    </div>
+  </body>
+</html>
diff --git a/src/example.js b/src/example.js
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,59 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class= "has-background-dark">
+
 <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>
+  <title>Red social Microcuentos</title>
+  <link rel="stylesheet" href="styles.css">
+  <script src="https://kit.fontawesome.com/90e469c395.js" crossorigin="anonymous"></script>
+  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
 </head>
+
+
 <body>
-  <script type="module" src="index.js"></script>
+  <button id="goOut">Cerrar Sesión</button>
+  <button id="showLogin">Vista Login</button>
+  <div>
+  <div id="root"></div>
+  <div id="showP"></div>
+  <nav class="navbar is-fixed-bottom is-hoverable is-primary" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <a href="#/Home" id="home" class="navbar-item is-expanded is-primary">Mi muro</a>
+      <a href="#/Post" id="post" class="navbar-item is-expanded is-primary">Publicar</a>
+      <a href="#/My_profile" id="profile" class="navbar-item is-expanded">Mi perfil</a>
+      <a href="#/Exit" id="exit" class="navbar-item is-expanded">Salir</a>
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="active" data-target="navbarBasicExample">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+  </nav>
+
+  <script src="https://www.gstatic.com/firebasejs/7.14.0/firebase.js"></script>
+
+
+  <script>
+    // Your web app's Firebase configuration
+    var firebaseConfig = {
+      apiKey: "AIzaSyCBWMiBIM_0KMxQgbZZarPb4R_htLsd9UE",
+      authDomain: "socialnetwork-15a5f.firebaseapp.com",
+      databaseURL: "https://socialnetwork-15a5f.firebaseio.com",
+      projectId: "socialnetwork-15a5f",
+      storageBucket: "socialnetwork-15a5f.appspot.com",
+      messagingSenderId: "863801306874",
+      appId: "1:863801306874:web:c6631f9d9d65117d44a343",
+      measurementId: "G-YSFLLZDYTT"
+    };
+    // Initialize Firebase
+    firebase.initializeApp(firebaseConfig);
+    //firebase.analytics();
+  </script>
+  <script type="module" src="main.js"></script>
+  <!-- <script src="pops.js"></script> -->
 </body>
-</html>
+
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,240 @@
-import { example } from './example.js';
+import { root } from "../main.js";
+import { viewLogin } from '/main.js'
+import { viewSign } from '/main.js'
+import { showPosts } from "./views/home.js"
+import { renderPostView } from "./views/post.js"
+import { renderProfileView } from "./views/profile.js"
+import { userObserverProfile } from "./views/profile.js"
 
-example();
+//Instanciar Firestore
+const db = firebase.firestore();
+
+//login, instancia del provedor del servicio
+const provider = new firebase.auth.GoogleAuthProvider();
+const providerf = new firebase.auth.FacebookAuthProvider();
+
+//Autenticar con Google
+export function loginGoogle(errorGooFbkModal) {
+    //console.log(viewLogin);
+    let btngoGoogle = document.querySelector('#goGoogle')
+    btngoGoogle.addEventListener('click', (e) => {
+        e.preventDefault()
+        firebase.auth()//Se llama a la func autenticar
+            .signInWithPopup(provider)//Se va a usar una popUp y se va a loguear con la var provider que es google
+            .then(function (result) {//lo que se hace cuando el usuario ya inicio sension y ya dio permisos, nos dio su info
+                console.log(result.user);//trae info de usuario(correo, nombre, foto, etc)
+                saveDataG(result.user)//Se le manda a la func guardDatos para hacer uns BD
+                renderPostView();
+                //userObserverProfile()
+
+
+            })
+            .catch(function (error) {
+                errorGooFbkModal.classList.add('is-active');
+                console.log('error:', error);
+            })
+    });
+}
+
+//Guardar datos gmail en BD
+function saveDataG(user) {
+    //console.log(user);
+    const docRef = db.collection('datausers/').doc(user.uid)
+    docRef.get().then(userBD => {
+        if (userBD.exists === true) {
+            console.log(userBD);
+            console.log('ya existe');
+
+        } else {
+            console.log('no existe');
+            console.log(userBD);
+            docRef.set({
+                uid: user.uid,//Servirá para eliminar
+                name: user.displayName,//Se obtiene el nom
+                email: user.email,
+                photo: user.photoURL,
+                //interests: 'uhuggy'
+            })
+                .then(function () {
+                    console.log('Los datos se guardaron');
+                })
+                .catch(function (error) {
+                    console.log('Hubo en error:', error);
+                })
+
+        }
+    })
+    /*     const docRef = db.collection('datausers/').doc(user.uid);//la / y el + user.uid hace que no se duplique el usuario */
+
+    updateData(docRef)
+}
+
+//Leer los datos de la BD
+function updateData(docRef) {
+    docRef.get().then(function (snapshot) {
+        let myData = snapshot.data();
+        console.log(myData);
+        /*  div.innerHTML = `Hola ${myData.nombre}` */
+    })
+}
+
+
+//Autenticar con facebook
+export function loginFacebook(errorGooFbkModal) {
+    let btngoFacebook = document.querySelector('#goFacebook');
+    btngoFacebook.addEventListener('click', function (e) {
+        e.preventDefault()
+        firebase.auth()//Se llama a la func autenticar
+            .signInWithPopup(providerf)//Se va a usar una popUp y se va a loguear con la var provider que es google
+            .then(function (result) {//lo que se hace cuando el usuario ya inicio sension y ya dio permisos, nos dio su info
+                console.log(result.user);//trae info de usuario(correo, nombre, foto, etc)
+                console.log(result.credential);
+                saveDataF(result.user)//Se le manda a la func guardDatos para hacer una BD
+                //userObserverProfile()
+                renderPostView();
+
+                //div.innerHTML = `<img src="${result.user.photoURL}"/>`
+
+            })
+            .catch(function (error) {
+                errorGooFbkModal.classList.add('is-active');
+                console.log('Hubo en error:', error);
+            })
+    });
+}
+
+//Guardar datos Fb en BD
+function saveDataF(user) {
+    //console.log(user);
+    const docRef = db.collection('datausers/').doc(user.uid)
+    docRef.get().then(userBD => {
+        if (userBD.exists === true) {
+            console.log(userBD);
+            console.log('ya existe');
+
+        } else {
+            console.log('no existe');
+            console.log(userBD);
+            docRef.set({
+                uid: user.uid,//Servirá para eliminar
+                name: user.displayName,//Se obtiene el nom
+                email: user.email,
+                photo: user.photoURL,
+                interests: 'Interes'
+            })
+                .then(function () {
+                    console.log('Los datos se guardaron');
+                })
+                .catch(function (error) {
+                    console.log('Hubo en error:', error);
+                })
+
+        }
+    })
+    updateDataFb(docRef)
+}
+
+//Leer los datos de la BD
+function updateDataFb(docRef) {
+    docRef.get().then(function (snapshot) {
+        let myData = snapshot.data();
+        console.log(myData);
+        /* div.innerHTML = `Hola <img src='${myData.foto}'> ${myData.nombre} ` */
+    })
+}
+
+
+//Crear cuenta con email
+//Registrarse:
+export function createUser(newName, newEmail, newPassword, registryModal, alreadyExistModal) {
+    //console.log(user);
+    console.log(newName + newEmail + newPassword);
+    //const expRegName = /^[a-z0-9_-]{3,16}$/
+    const expRegEmail = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/
+    const expRegPass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/
+    if (expRegPass.test(newPassword) === true && expRegEmail.test(newEmail) === true) {
+        firebase.auth().createUserWithEmailAndPassword(newEmail, newPassword)
+
+            .then(function (user) {
+                console.log('Se ha creado la cuenta!');
+                console.log(user.user);
+                saveEmailBD(newName, newEmail, newPassword, user)
+                renderPostView();
+            })
+            .catch(function (error) {//Si la cuenta se ha creado se muestra el error
+                alreadyExistModal.classList.add('is-active');
+                console.log(error.message);
+            })
+    } else {
+        registryModal.classList.add('is-active');
+        //alert('Comprueba tu correo o contraseña (debe contener al menos 6 caracteres,un número, una minúscula y al menos una mayúscula).')
+    }
+}
+
+//:Guardar los datos en BD
+function saveEmailBD(newName, newEmail, newPassword, user) {
+    const docRef = db.collection('datausers/').doc(user.user.uid);//la / y el + user.uid hace que no se duplique el usuario
+    docRef.set({
+        name: newName,
+        email: newEmail,
+        password: newPassword,
+        interests: 'Interés',
+        photo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS_nu03Fphc39lFDYvqsGjluX8keorjzG79akJclhK2fS2SwLKo&usqp=CAU',
+        uid: user.user.uid
+
+    })
+        .then(function () {
+            console.log('Los datos se guardaron');
+        })
+        .catch(function (error) {
+            console.log('Hubo en error:', error);
+        })
+}
+
+
+//Inicio de Sesión:
+//:Comparar los datos del usuario con los datos que usó para crear cuenta
+export function loginUser(email, password, errorModal) {
+    //console.log(email + password + errorModal);
+    firebase.auth().signInWithEmailAndPassword(email, password)
+        .then(function (user) {
+            console.log('Datos correctos, bienvenido!')
+            //console.log(user);
+            renderPostView()
+        })
+        .catch(function (error) {
+            errorModal.classList.add('is-active');
+            //alert('Upsi, datos incorrectos');
+        })
+
+}
+
+
+//Salir de la sesión:
+export function signoutUser() {
+    //e.preventDefault()
+    firebase.auth().signOut();
+    console.log('Adiós Bye');
+    /* const divRoot = document.querySelector('#root')
+    divRoot.innerHTML = principal() */
+    principalView()
+
+}
+
+//Nos dice que usuario tiene sesión abierta y nos trae sus datos de la BD
+function userObserver() {
+    firebase.auth().onAuthStateChanged(function (user) {
+        //console.log(user);
+        if (user) {
+            const docRef = db.collection('datausers/').doc(user.uid);
+            docRef.get().then(function (snapshot) {
+                let myData = snapshot.data();
+                console.log(myData)
+            })
+        } else {
+            // No user is signed in.
+            console.log('No user');
+        }
+    });
+}
+userObserver()