Para revision

Readme.md

@@ -1,3 +1,106 @@
+# Healt & Fitness
+
+Healt & Fitness es una app donde podrás compartir tips, recetas, rutinas de ejercicio, y todo lo relacionado con el cuidado de tu salud y tu cuerpo.
+
+Las **caraterísticas técnicas** de la aplicación :
+- Single-Page Application [SPA]
+- Diseñada con un enfoque [mobile first]
+- Permitir la persintencia de datos
+
+#### Arquitectura de la aplicación
+
+- Codigo modularizado a través de *es modules* ([`import`] y [`export`]
+
+- Patrón  modelo - vista - controlador [MVC]
+
+#### Tecnologías 
+
+
+* HTML5 semántico
+*  CSS3
+* Bootstrap
+* JavaScript (ES6+)
+* Firebase
+* Firestore 
+
+# Historias de Usuario
+
+* Como usuario nuevo debo poder crear una cuenta con email y password válidos para poder iniciar sesion e ingresar a la red social.
+
+* Como usuario nuevo debo poder tener la opción de iniciar sesión con mi cuenta de Google o Facebook para ingresar a la red social sin necesidad de crear una cuenta de email válido.
+
+* Como usuario loggeado debo poder crear, guardar, modificar en el mismo lugar (in place) y eliminar una publicación (post) privada o pública, que puede ser una frase o una imagen.
+
+
+# Sketch
+
+![sketch](src/sketch.jpg)
+
+# Wireframe y Mockup
+
+https://www.figma.com/file/VH2HfNAXIWznU9FqpoMFQJ/Social-Network?node-id=0%3A1
+
+# Prototype
+
+https://www.figma.com/proto/VH2HfNAXIWznU9FqpoMFQJ/Social-Network?node-id=102%3A2&scaling=scale-down
+
+## Objetivos de aprendizaje
+
+
+### HTML y CSS
+
+* [x] [HTML semántico]
+* [x] [CSS `flexbox`]
+* [ ] Construir tu aplicación respetando el diseño realizado (maquetación).
+
+### DOM y Web APIs
+
+* [x] [Manipulación dinámica del DOM]
+* [ ] [History API]
+* [x] [`localStorage`]
+
+### Javascript
+
+* [x] [Uso de callbacks]
+* [x] [Consumo de Promesas]
+* [x] Uso ES modules
+
+### Firebase
+
+* [x] [Firestore]
+* [x] [Firebase Auth]
+* [x] [Firebase security rules]
+* [x] [Uso de onSnapshot]
+| [onAuthStateChanged]
+
+### Testing
+
+* [x] [Testeo de tus funciones]
+* [ ] [Testeo asíncrono]
+* [ ] [Mocking]
+
+### Colaboración en Github
+
+* [ ] Branches
+* [x] Pull Requests
+* [ ] Tags
+
+### Organización en Github
+
+* [ ] Projects
+* [ ] Issues
+* [ ] Labels
+* [ ] Milestones
+
+### Buenas prácticas de desarrollo
+
+* [x] Modularización
+* [x] Nomenclatura / Semántica
+* [ ] Linting
+
+
+
+___________________________________________________________________________________________________________
 # Creando una Red Social
 
 Bienvenida a tu primer proyecto del track de Frontend en Laboratoria.

package.json

@@ -33,4 +33,4 @@
     "stylelint": "^10.1.0",
     "stylelint-config-recommended": "^2.2.0"
   }
-}
+}

src/authentication.js

@@ -0,0 +1,152 @@
+export {logIn,createAccount, checkIn, logInFacebook, logInGoogle};
+import {home} from './post.js';
+import {init} from './index.js';
+
+const provider = new firebase.auth.GoogleAuthProvider();//proveedor del servicio
+
+function logIn(emailLogIn, passLogIn){
+
+    console.log(emailLogIn);
+
+     console.log(passLogIn);
+     //home ()
+    firebase.auth().signInWithEmailAndPassword(emailLogIn, passLogIn).catch(function(error) {
+
+      // Handle Errors here.
+      var errorCode = error.code;
+      alert(errorCode);
+      var errorMessage = error.message;
+      alert(errorMessage);
+      // ...
+
+    });
+
+  }
+
+  //const createAccountButton = document.querySelector('#creatAccount');
+
+  function createAccount() {
+
+    document.getElementById('logInUser').style.display = 'none';
+    document.getElementById('init').style.display = 'none';
+    document.getElementById('logInNetwoork').style.display = 'none';
+    document.getElementById('LogInNewUser').style.display = 'none';
+    const createAccountView = `
+        <div class="login" id="createAccount">
+
+           <input id="email" type="email" placeholder="email" />
+          <br>
+          <input id="pass" type="password" placeholder="pass" />
+          <button id="checkIn" >Registrarse</button>
+          <button id="back" >volver</button>
+        </div>`
+       // primero se dibuja en el DOM 
+      root.innerHTML = createAccountView
+      // escuchar primero hay que manipular
+      let checkInButton = document.querySelector('#checkIn')
+      let backButton = document.querySelector('#back')
+      let email = document.querySelector('#email')
+      let pass = document.querySelector('#pass')
+      checkInButton.onclick = e=>checkIn(email.value, pass.value) // listener que ejecuta la funcion de Firebase
+      backButton.onclick = e=> init()
+    }
+
+function checkIn(email, pass) {
+
+  console.log(email);
+  console.log(pass);
+  firebase.auth().createUserWithEmailAndPassword(email, pass).catch(function (error) {
+    // Handle Errors here.
+    const errorCode = error.code;
+    const errorMessage = error.message;
+    // ...
+    alert(errorCode);
+    alert(errorMessage);
+
+  });
+
+
+}
+
+
+function logInFacebook () {
+
+  const provider = new firebase.auth.FacebookAuthProvider();
+  firebase.auth().signInWithPopup(provider).then(function(result) {
+    /// This gives you a Facebook Access Token. You can use it to access the Facebook API.
+    var token = result.credential.accessToken;
+    // The signed-in user info.
+   var user = result.user;
+    // ...
+ // console.log(user);
+
+  }).catch(function(error) {
+    // Handle Errors here.
+    var errorCode = error.code;
+    var errorMessage = error.message;
+    // The email of the user's account used.
+   var email = error.email;
+    // The firebase.auth.AuthCredential type that was used.
+   var credential = error.credential;
+    // ...
+  });
+
+}
+
+
+
+function logInGoogle (){
+  firebase.auth().signInWithPopup(provider).then(function(result) {
+    // This gives you a Google Access Token. You can use it to access the Google API.
+    var token = result.credential.accessToken;
+    // The signed-in user info.
+    var user = result.user;
+    // ...
+   // console.log(user);
+
+    // Cuando hacemos login con google ocultamos todos los input y los botones 
+  document.getElementById('logInUser').style.display="none";
+  document.getElementById('init').style.display="none";
+  document.getElementById('logInNetwoork').style.display="none";
+  document.getElementById('LogInNewUser').style.display="none";
+  console.log(user);
+ // document.getElementById("root").innerHTML="<img src= '" +user.photoURL +"' />";
+
+  }).catch(function(error) {
+    // Handle Errors here.
+    var errorCode = error.code;
+    var errorMessage = error.message;
+    // The email of the user's account used.
+    var email = error.email;
+    // The firebase.auth.AuthCredential type that was used.
+    var credential = error.credential;
+    // ...
+  });
+
+}
+
+
+
+function observador () {
+  firebase.auth().onAuthStateChanged(function(user) {
+    if (user) {
+      console.log("Existe Usuario activo");
+      home ();
+      var displayName = user.displayName;
+      var email = user.email;
+      var emailVerified = user.emailVerified;
+      var photoURL = user.photoURL;
+      var isAnonymous = user.isAnonymous;
+      var uid = user.uid;
+      var providerData = user.providerData;
+      // ...
+    } else {
+      // User is signed out.
+      console.log("No existe usuario activo");
+      // ...
+    }
+  });
+
+}  
+
+observador ();

src/firebase.js

@@ -0,0 +1,4 @@
+
+
+
+

src/index.html

@@ -1,12 +1,52 @@
 <!DOCTYPE html>
-<html lang="en">
+<!--<html lang="en">-->
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Document</title>
+  <title>Social Network</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <link rel="stylesheet" href="styles.css">
+  <script src="https://kit.fontawesome.com/533a6c5775.js" crossorigin="anonymous"></script>
+
+  <!--Esto es firebase-->
+<!-- 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>
+  // Your web app's Firebase configuration
+  var firebaseConfig = {
+    apiKey: "AIzaSyDsPJ2yzzgrFwK5Q4yhGMBnYrQEm25v0Wk",
+    authDomain: "social-netwoork.firebaseapp.com",
+    databaseURL: "https://social-netwoork.firebaseio.com",
+    projectId: "social-netwoork",
+    storageBucket: "social-netwoork.appspot.com",
+    messagingSenderId: "1064927720184",
+    appId: "1:1064927720184:web:9e3470be6171d89880410d",
+    measurementId: "G-0N67YBL0EX"
+  };
+  // Initialize Firebase
+  firebase.initializeApp(firebaseConfig);
+  firebase.analytics();
+  const auth = firebase.auth ();
+</script>
 </head>
-<body>
-  <script type="module" src="index.js"></script>
-</body>
+
+<body class="m-3 border">
+
+<div id="root"></div>
+
+
+<script type="module" src="index.js"></script>
+<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+
+  </body>
 </html>

src/index.js

@@ -1,3 +1,52 @@
-import { example } from './example.js';
+import {home, close} from './post.js'
+import {logIn, createAccount, checkIn, logInFacebook, logInGoogle}from './authentication.js'
+export {init};
+
+window.onload= init();
+
+ function init() {
+
+
+  let initView =`
+  <section class="container text-center">
+  <h1 class="display-4 font-weight-bold pt-1">Healt & Fitness <i class="fas fa-dumbbell"></i></h1>
+
+  <div class=" mb-4" id="init">
+  <h2 class="display-5 text-black font-weight-bold">Inicia Sesión</h2 class="display-4">
+  </div>
+
+  <div id="logInUser" class="logIn pt-3 pb-3">
+    <input id="emailLogIn" type="email" placeholder="Nombre de usuario" name="email" class="form-control mb-5 mr-sm-5 p-2"/>
+    <input  id="passLogIn" type="password" placeholder="Contraseña" class="form-control mb-5 mr-sm-5 p-2"/>
+    <button id="logIn" class="shadow btn btn-warning btn-default pl-5 pr-5" >Ingresar</button>
+  </div>
+
+  <div class="m-2"id="logInNetwoork">
+  <p>Iniciar con:</p> 
+  <button id="logInFacebook" class="btn btn-primary btn-circle btn-xl m-2"><i class="fab fa-facebook"></i></button>  
+  <button id="logInGoogle" class="btn btn-danger btn-circle btn-xl m-2"><i class="fab fa-google"></i></button>
+  </div>
+
+  <div id="LogInNewUser" class="creatAccount">
+    <p>No tienes Cuenta?</p>
+    <button id="creatAccount" class="btn btn-link"> Crear Cuenta</button>
+  </div>
+  </section>
+  `
+  root.innerHTML = initView
+    let logInButton = document.querySelector('#logIn')
+    let emailLogIn = document.querySelector('#emailLogIn')
+    let passLogIn = document.querySelector('#passLogIn')
+    logInButton.onclick = e => logIn(emailLogIn.value, passLogIn.value) // listener que ejecuta la funcion de Firebase
+    let logInFacebookButoon = document.querySelector('#logInFacebook')
+    logInFacebookButoon.onclick = e => logInFacebook ()
+    let logInGoogleButton = document.querySelector('#logInGoogle')
+    logInGoogleButton.onclick = e => logInGoogle ()
+    let creatAccountButton = document.querySelector('#creatAccount')
+    creatAccountButton.onclick= e => createAccount()
+ }
+
+
+
+
 
-example();