Code review

docs/Views/createPost.js

@@ -0,0 +1,39 @@
+import loginFunctions from '../firebase/login.js';
+import { userAccess, createNewPost } from '../firebase/showData.js';
+
+export default () => {
+  const createPostView = document.createElement('div');
+  createPostView.setAttribute('class', 'Home');
+  const header = document.querySelector('header');
+  header.style.display = 'none';
+  createPostView.innerHTML = '';
+  createPostView.innerHTML = `
+    <header>
+    <div class="homeOptions">
+        <img src="images/CodeMakers.png" alt="logo" class="codeMakers">
+        <a href="#/home"><img src="images/casa.svg" alt="Home" title="Home" class="btnHeader"></a>
+        <a href="#/createPost"><img src="images/writePost.svg" alt="createPost" title="Crear Post" class="btnHeader"></a>
+        <a href="#/profile"><img src="images/profile.svg" alt="Profile" title="Perfil" class="btnHeader" id="userPhoto"></a>
+        <img src="images/cerrar-sesion.svg" alt="Cerrar Sesion" title="Salir" class="btnHeader" id="logOutBtn">
+    </div>
+    </header>
+    <section class="sesionPrincipal">
+    <form action="" class="newPost">
+        <div class="welcome">Hola: <br><br><span id="username"></span></div>
+        <textarea name="newTextPost" id="newTextPost" class="postForm" rows="7" placeholder="¿Qué te gustaría compartir?"></textarea>
+        <button type="submit" id="submitNewPost">Compartir</button>
+    </form>
+    </section>`;
+  const logOutBtn = createPostView.querySelector('#logOutBtn');
+  const newPostContent = createPostView.querySelector('#newTextPost');
+  const userPhoto = createPostView.querySelector('#userPhoto');
+  const userName = createPostView.querySelector('#username');
+  userAccess(userName, userPhoto);
+  const submitNewPost = createPostView.querySelector('#submitNewPost');
+  submitNewPost.addEventListener('click', (e) => {
+    e.preventDefault();
+    createNewPost(newPostContent.value);
+  });
+  logOutBtn.addEventListener('click', loginFunctions.sesionLogOut);
+  return createPostView;
+};

docs/Views/home.js

@@ -0,0 +1,43 @@
+import loginFunctions from '../firebase/login.js';
+import { createNewPost, postTemplate } from '../firebase/showData.js';
+
+export default () => {
+  const homeView = document.createElement('div');
+  homeView.setAttribute('class', 'Home');
+  const header = document.querySelector('header');
+  header.style.display = 'none';
+  homeView.innerHTML = '';
+  homeView.innerHTML = `
+            <header>
+                <div class="homeOptions">
+                    <img src="images/CodeMakers.png" alt="logo" class="codeMakers">
+                    <a href="#/home"><img src="images/casa.svg" alt="Home" class="btnHeader"></a>
+                    <a href="#/profile"><img src="${localStorage.getItem('photoURL')}" alt="Profile" class="btnHeader" id="userPhoto"></a>
+                    <img src="images/cerrar-sesion.svg" alt="Cerrar Sesion" class="btnHeader" id="logOutBtn">
+                </div>
+            </header>
+            <section class="sesionPrincipal">
+            <form action="" class="newPost">
+            <div>Bienvenida <span id="username">${localStorage.getItem('displayName')}</span></div>
+            <textarea name="newTextPost" id="newTextPost" class="postForm" rows="3" placeholder="¿Qué te gustaría compartir?"></textarea>
+            <button type="submit" class="updateBtns" id="submitNewPost">Compartir</button>
+        </form>
+            </section>
+            <section class="sesionPrincipal1">
+            </section>`;
+  const logOutBtn = homeView.querySelector('#logOutBtn');
+  logOutBtn.addEventListener('click', loginFunctions.sesionLogOut);
+  const postContainer = homeView.querySelector('.sesionPrincipal1');
+
+  const newPostContent = homeView.querySelector('#newTextPost');
+  const submitNewPost = homeView.querySelector('#submitNewPost');
+
+  submitNewPost.addEventListener('click', (e) => {
+    e.preventDefault();
+    createNewPost(newPostContent.value);
+    newPostContent.value = '';
+  });
+
+  postTemplate(postContainer);
+  return homeView;
+};

docs/Views/index.js

@@ -0,0 +1,15 @@
+import Main from './main.js';
+import Register from './register.js';
+import Recovery from './passwordRecovery.js';
+import Home from './home.js';
+import Profile from './profile.js';
+
+const components = {
+  principal: Main,
+  register: Register,
+  recoveryPass: Recovery,
+  home: Home,
+  profile: Profile,
+};
+
+export { components };

docs/Views/main.js

@@ -0,0 +1,36 @@
+import loginFunctions from '../firebase/login.js';
+
+export default () => {
+  const loginView = document.createElement('div');
+  loginView.setAttribute('class', 'viewsStyle');
+  loginView.innerHTML = ` 
+            <center><h3>Inicia Sesión con tu email</h3></center>
+            <form class="registerForm">
+                <input type="email" required id="loginEmail" placeholder= "Correo electrónico">
+                <input type="password" required id="loginPassword" minlength="6" placeholder="Contraseña">
+                <button type="submit" class="registerButton" id="loginButton">INICIAR SESIÓN</button>
+                <h5><a href="#/passwordRecovery" id="recover">¿Has olvidado la contraseña?</a></h5>
+            </form> 
+            <div class="conectWithSocialMedia">
+
+                <img src="images/facebook4.png" id="facebookLogin" class="buttons"> </br>
+                <img src="images/google4.png" id="googleLogin" class="buttons">
+                <p>¿No tienes cuenta? <a href="#/register">Registrate</a></p>
+            </div>  `;
+
+  // Nodos
+  const loginEmail = loginView.querySelector('#loginEmail');
+  const loginPassword = loginView.querySelector('#loginPassword');
+  const loginButton = loginView.querySelector('#loginButton');
+  const facebookLogin = loginView.querySelector('#facebookLogin');
+  const googleLogin = loginView.querySelector('#googleLogin');
+
+  // Listeners
+  googleLogin.addEventListener('click', loginFunctions.google);
+  facebookLogin.addEventListener('click', loginFunctions.facebook);
+  loginButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    loginFunctions.emailLogIn(loginEmail.value, loginPassword.value);
+  });
+  return loginView;
+};

docs/Views/passwordRecovery.js

@@ -0,0 +1,30 @@
+import loginFunctions from '../firebase/login.js';
+
+export default () => {
+  const recView = document.createElement('div');
+  recView.setAttribute('class', 'viewsStyle');
+  recView.innerHTML = '';
+  recView.innerHTML = `
+              <h1>Recupera tu contraseña</h1>
+              <p>Te enviaremos un correo electrónico para recuperar tu contraseña</p>
+              <form class="recoveryForm">
+                  <input type="email" required id="loginMail" placeholder= "Correo electrónico">
+                  <button type="submit" class="registerButton" id="loginButton">ENVIAR</button>
+              </form> 
+              <div class="conectWithSocialMedia">
+              <h4> O </h4>
+              <img src="images/facebook4.png" id="facebookLogin" class="buttons">
+              <img src="images/google4.png" id="googleLogin" class="buttons">
+                <p>¿No tienes cuenta? <a href="#/register">Registrate</a></p>
+            </div>  `;
+
+  // Nodos
+  const googleLogin = recView.querySelector('#googleLogin');
+  const facebookLogin = recView.querySelector('#facebookLogin');
+
+  // Listeners
+  googleLogin.addEventListener('click', loginFunctions.google);
+  facebookLogin.addEventListener('click', loginFunctions.facebook);
+
+  return recView;
+};

docs/Views/profile.js

@@ -0,0 +1,53 @@
+import loginFunctions from '../firebase/login.js';
+import { currentUserPosts } from '../firebase/showData.js';
+
+export default () => {
+  const profileView = document.createElement('div');
+  profileView.setAttribute('class', 'Home');
+  const header = document.querySelector('header');
+  header.style.display = 'none';
+  profileView.innerHTML = '';
+  profileView.innerHTML = `
+    <header>
+    <div class="homeOptions">
+        <img src="images/CodeMakers.png" alt="logo" class="codeMakers">
+        <a href="#/home"><img src="images/casa.svg" alt="Home" class="btnHeader"></a>
+        <a href="#/profile"><img src="${localStorage.getItem('photoURL')}" alt="Profile" class="btnHeader" id="userPhoto"></a>
+        <img src="images/cerrar-sesion.svg" alt="Cerrar Sesion" class="btnHeader" id="logOutBtn">
+    </div>
+    </header>
+    <section class="sesionPrincipal">
+    <div class="nameandphoto">
+        <img src="${localStorage.getItem('photoURL')}" alt="photo" class="userPhoto">
+        <h3 class="username" id="username">${localStorage.getItem('displayName')}</h3>
+    </div>
+    <button class="updateBtns" id="editProfile">Editar Perfil</button>
+    <div class="updateInfo">
+        <h3>Edita tus datos</h3>
+        <label for="name">Nombre</label><input type="text" class="updateFields" id="updateName">
+        <label for="email">Email</label><input type="text" class="updateFields" id="updateEmail">
+        <label for="photo">Foto</label><input type="file" class="updateFields" id="updatePhoto">
+        <button type="submit" class="updateBtns" id="sendUpdate">Actualizar</button>
+    </div>
+    <hr>
+    </section>
+    <section class="sesionPrincipal1">
+    </section>`;
+  const logOutBtn = profileView.querySelector('#logOutBtn');
+  logOutBtn.addEventListener('click', loginFunctions.sesionLogOut);
+  const postContainer = profileView.querySelector('.sesionPrincipal1');
+
+  // funcion provisional
+  const editBtn = profileView.querySelector('#editProfile');
+  editBtn.addEventListener('click', () => {
+    const editFields = profileView.querySelector('.updateInfo');
+    editFields.style.display = 'flex';
+    const updateInfo = profileView.querySelector('#sendUpdate');
+    updateInfo.addEventListener('click', () => {
+      editFields.style.display = 'none';
+    });
+  });
+
+  currentUserPosts(postContainer);
+  return profileView;
+};

docs/Views/register.js

@@ -0,0 +1,37 @@
+import loginFunctions from '../firebase/login.js';
+
+export default () => {
+  const regView = document.createElement('div');
+  regView.setAttribute('class', 'viewsStyle');
+  regView.innerHTML = '';
+  regView.innerHTML = `
+        <h1>Abre una cuenta:</h1>
+        <form action="" class="registerForm">
+            <input type="email" required id="registerEmail" placeholder="Correo Electronico"><br>
+            <input type="password" id="registerPassword" minlength="6" required placeholder="Contraseña(mínimo 6 caracteres)"><br>
+            <input type="submit" id="registerButton1" class="registerButton" value="REGISTRAR">
+            <h5>¿Ya tienes una cuenta? <a href="#/login">Inicia Sesión</a></h5>
+        </form>
+        <div class="conectWithSocialMedia">
+          <h4> O </h4>
+          <img src="images/facebook4.png" id="facebookLogin" class="buttons">
+          <img src="images/google4.png" id="googleLogin" class="buttons">
+        </div>  `;
+  // Nodos
+  const registerEmail = regView.querySelector('#registerEmail');
+  const registerPassword = regView.querySelector('#registerPassword');
+  const registerButton1 = regView.querySelector('#registerButton1');
+  const googleLogin = regView.querySelector('#googleLogin');
+  const facebookLogin = regView.querySelector('#facebookLogin');
+
+  // Listeners
+  googleLogin.addEventListener('click', loginFunctions.google);
+  facebookLogin.addEventListener('click', loginFunctions.facebook);
+
+  registerButton1.addEventListener('click', (e) => {
+    e.preventDefault();
+    loginFunctions.emailRegister(registerEmail.value, registerPassword.value);
+  });
+
+  return regView;
+};

docs/Views/router.js

@@ -0,0 +1,35 @@
+import { components } from './index.js';
+
+const router = (route) => {
+  const container = document.querySelector('#root');
+  container.innerHTML = '';
+  switch (route) {
+    case '':
+    case '#/':
+    case '#/login': {
+      container.appendChild(components.principal());
+      break;
+    }
+    case '#/register': {
+      container.appendChild(components.register());
+      break;
+    }
+    case '#/passwordRecovery': {
+      container.appendChild(components.recoveryPass());
+      break;
+    }
+    case '#/home': {
+      container.appendChild(components.home());
+      break;
+    }
+    case '#/profile': {
+      container.appendChild(components.profile());
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+};
+
+export { router };

docs/example.js

@@ -0,0 +1,3 @@
+// export const example = () => {
+//     // aquí tu código
+// }

docs/firebase/login.js

@@ -0,0 +1,95 @@
+/* eslint-disable no-console */
+/* eslint-disable no-alert */
+export const database = firebase.firestore();
+
+export default {
+  google: () => {
+    const provider = new firebase.auth.GoogleAuthProvider();
+    firebase.auth().signInWithPopup(provider)
+      .then(() => {
+        // const user = result.user;
+        const currentUser = firebase.auth().currentUser;
+        database.collection('users').doc(currentUser.uid).set({
+          id: currentUser.uid,
+          name: currentUser.displayName,
+          email: currentUser.email,
+          photo: currentUser.photoURL,
+        });
+        window.location.hash = '#/home';
+      });
+  },
+  facebook: () => {
+    const provider = new firebase.auth.FacebookAuthProvider();
+    firebase.auth().signInWithPopup(provider)
+      .then(() => {
+      // const user = result.user;
+        const currentUser = firebase.auth().currentUser;
+        console.log(currentUser);
+        database.collection('users').doc(currentUser.uid).set({
+          id: currentUser.uid,
+          name: currentUser.displayName,
+          email: currentUser.email,
+          photo: currentUser.photoURL,
+        });
+        window.location.hash = '#/home';
+      });
+  },
+  emailRegister: (mail, password) => {
+    firebase.auth().createUserWithEmailAndPassword(mail, password)
+      .then(() => {
+      // const user = result.user;
+        const currentUser = firebase.auth().currentUser;
+        console.log(currentUser);
+        database.collection('users').doc(currentUser.uid).set({
+          id: currentUser.uid,
+          name: currentUser.displayName,
+          email: currentUser.email,
+          photo: currentUser.photoURL,
+        });
+        window.location.hash = '#/home';
+      }).catch((error) => {
+        const errorCode = error.code;
+        switch (errorCode) {
+          case 'auth/email-already-in-use':
+            alert('El email ingresado ya existe');
+            break;
+          case 'auth/weak-password':
+            alert('La contraseña ingresada no es segura, intente de nuevo');
+            break;
+          default:
+            alert(errorCode);
+        }
+      });
+  },
+  emailLogIn: (email, password) => {
+    firebase.auth().signInWithEmailAndPassword(email, password)
+      .then(() => {
+        window.location.hash = '#/home';
+      }).catch((error) => {
+        const errorCode = error.code;
+        switch (errorCode) {
+          case 'auth/user-not-found':
+            alert('Usuario no encontrado, intenta de nuevo o registrate');
+            break;
+          case 'auth/wrong-password':
+            alert('La contraseña es incorrecta, intenta de nuevo');
+            break;
+          case 'auth/invalid-email':
+            alert('El correo ingresado no es válido');
+            break;
+          default:
+            alert('Algo salió mal. Intente de nuevo');
+        }
+      });
+  },
+  sesionLogOut: () => {
+    firebase.auth().signOut()
+      .then(() => {
+        alert('Sesión cerrada');
+        document.querySelector('header').style.display = '';
+        window.location.hash = '#/login';
+      }).catch(() => {
+        alert('Algo salió mal. Intente de nuevo');
+      });
+  },
+};