karenBerrioRufino · karenBerrioRufino · Jan 5, 2022 · Dec 20, 2021 · Dec 20, 2021 · Dec 20, 2021
diff --git a/src/img/facebook.png b/src/img/facebook.png
diff --git a/src/img/google.png b/src/img/google.png
diff --git a/src/img/mujeresunidas_celu.png b/src/img/mujeresunidas_celu.png
diff --git a/src/img/mujeresunidascelupeq.png b/src/img/mujeresunidascelupeq.png
diff --git a/src/img/mujeresunidaspc.png b/src/img/mujeresunidaspc.png
diff --git a/src/index.html b/src/index.html
@@ -5,27 +5,35 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Sinchi Warmi</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
- <header>
-    <figure>
-      <img src="https://img.icons8.com/color/50/000000/friends-hanging-out.png" alt="logo_sinchiwarmi" />
-    </figure>
+
+  <!-- <header class="header">
+    <div class="bienvenida">
+      <h5 class="saludosw">Bienvenida ...</h5>
+      <div class="items">
+        <li> <a href="#/login">Log In</a></li>
+        <li><a href="#/signUp">Sign Up</a></li>
+      </div>
+    </div>
     <nav>
-      <ul>
-        <li> <a href="#/login">login</a>       </li>
-        <li> <a href="#/registro">registro</a> </li>
-        <li> <a href="#/profile">profile</a>   </li>
-        <li> <a href="#/">news</a>             </li>
+      <ul class="menu__items">
+        <li> <a href="#/registro">Registro</a></li>
+        <li> <a href="#/profile">Profile</a></li>
+        <li> <a href="#/">News</a></li>
       </ul>
     </nav>
-  </header>
+  </header> -->
   <main id="mainContainer">
-    <section id="createCredentials"></section>
+    <!-- <section id="createCredentials"></section> -->
   </main>
-  <footer>-- SOCIAL NETWORK --</footer>
+  <!-- <footer>-- SOCIAL NETWORK --</footer> -->
   <script type="module" src="./lib/firebase/config.js"></script>
   <script type="module" src="main.js"></script>
-  <!--<script src="https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth.js"></script>-->
+
 </body>
 </html>
diff --git a/src/lib/firebase/auth.js b/src/lib/firebase/auth.js
@@ -0,0 +1,67 @@
+import {
+  getAuth,
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+} // eslint-disable-next-line import/no-unresolved
+  from 'https://www.gstatic.com/firebasejs/9.6.1/firebase-auth.js';
+
+import { swapp } from './config.js';
+
+// initialize auth
+const auth = getAuth(swapp);
+
+// creando usuarios al registrarse con correo y contraseña
+const createUser = async (correo, contrasena) => {
+  await createUserWithEmailAndPassword(auth, correo, contrasena)
+    .then((userCredential) => {
+      // Signed in
+      const userId = userCredential.user.uid;
+      const userEmail = userCredential.user.email;
+      const user = userCredential.user;
+      // eslint-disable-next-line no-console
+      console.log(userId, userEmail, user);
+      // eslint-disable-next-line no-console
+      console.log('Usuario registrado');
+    })
+    .catch((error) => {
+      const errorMessage = error.message;
+      const errorCode = error.code;
+      if ((errorCode === 'auth/email-already-in-use') || (errorMessage === 'Firebase: Error (auth/email-already-in-use')) {
+        // eslint-disable-next-line no-console
+        console.error('Email ya existe, por favor digite otro.');
+        window.location.hash = '#/';
+      }
+      if ((errorCode === 'auth/invalid-email') || (errorMessage === 'Firebase: Error (auth/invalid-email)')) {
+        // eslint-disable-next-line no-console
+        console.log('Email no válido', errorCode);
+        // eslint-disable-next-line no-console
+        console.log(errorMessage);
+        window.location.hash = '#/';
+      }
+    });
+};
+
+// Acceso de usuarios existente con correo y contraseña para iniciar sesión.
+const signInUser = (email, password) => {
+  signInWithEmailAndPassword(auth, email, password)
+    .then((userCredential) => {
+    // Signed in
+      const user = userCredential.user;
+      const userEmail = userCredential.user.email;
+      const userId = userCredential.user.uid;
+      // eslint-disable-next-line no-console
+      console.log(userId, userEmail, user);
+      window.location.hash = '#/';
+      // eslint-disable-next-line no-console
+      console.log('Usuario ha iniciado sesión');
+    // ...
+    })
+    .catch((error) => {
+      const errorCode = error.code;
+      const errorMessage = error.message;
+      // eslint-disable-next-line no-console
+      console.log('Error: ', errorCode, errorMessage);
+    });
+};
+
+export { createUser, signInUser };
diff --git a/src/lib/firebase/config.js b/src/lib/firebase/config.js
@@ -1,7 +1,5 @@
 // eslint-disable-next-line import/no-unresolved
 import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js';
-// import { getAuth } from 'https://www.gstatic.com/firebasejs/9.6.1/firebase-auth.js';
-// import { firestore } from 'https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js'
 
 const firebaseConfig = {
   apiKey: 'AIzaSyDhB7rYYx_tmv7V2idc3b5B6B28epqaXFs',

diff --git a/src/lib/firebase/firestore.js b/src/lib/firebase/firestore.js
@@ -0,0 +1,38 @@
+import {
+  getFirestore, collection, addDoc, getDocs,
+// eslint-disable-next-line import/no-unresolved
+} from 'https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js';
+
+import { swapp } from './config.js';
+
+// Initialize Cloud Firestore through Firebase
+const db = getFirestore(swapp);
+
+// agregando datos de los usarios en firestore
+const saveUser = async (email, password) => {
+  // objeto dataUSer que contiene los datos del usuario
+  const dataUser = {
+    correo: email,
+    contrasena: password,
+  };
+
+  try {
+    const docRef = await addDoc(collection(db, 'users'), dataUser);
+    // eslint-disable-next-line no-console
+    console.log('Documento creado con ID: ', docRef.id);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('Error agregando el documento: ', e);
+  }
+};
+
+// leyendo dato de los usuarios en firestore
+const queryUser = async () => {
+  const querySnapshot = await getDocs(collection(db, 'users'));
+  querySnapshot.forEach((doc) => {
+    // eslint-disable-next-line no-console
+    console.log(`${doc.id} => ${doc.data()}`);
+  });
+};
+
+export { saveUser, queryUser };
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,103 @@
+*{
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: 'Poiret One', cursive;
+  font-weight: 900;
+}
+.bienvenida{
+  justify-content: space-between;
+}
+nav{
+  background-color: #B9A6E0;
+}
+.bienvenida, nav{
+  border: 1px solid #99337a;
+  padding: 0.5rem;
+}
+.items{
+  justify-content: flex-end;
+}
+.bienvenida, .items, .menu__items{
+  display: flex;
+}
+.items>li, .menu__items>li{
+  list-style-type: none;
+}
+.items>li>a, .menu__items>li>a{
+  text-decoration: none;
+  padding: 0.5rem;
+  font-size: 0.8rem;
+}
+.items>li>a{
+  color: #B9A6E0;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+}
+.menu__items>li>a{
+  color: #fff;
+}
+.menu__items{
+  justify-content: center;
+}
+main{
+  width: auto;
+
+}
+main{
+  background: #EAC9E2;;
+}
+
+.titulo{
+  padding: 3rem 1rem 0;
+  font-size: 3rem;
+  text-align: center;
+  color: #FFFFFF;
+  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1);
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  }
+form{
+  display: grid;
+  justify-content: center;
+  align-items: center;
+}
+form >input[type ='text'], input[type ='password']{
+  justify-self: center;
+  border: 1px solid #fff;
+  border-radius: 10px;
+  margin-bottom: 0.5rem;
+  padding: 1rem;
+  width: 15.625rem;
+  height: 2rem;
+  font-family: 'Poiret One', cursive;
+}
+form >input[type ='text']{
+  margin-top: 1rem;
+}
+form>input[type ='submit']{
+  justify-self: center;
+  margin: 0.5rem 0;
+  width: fit-content;
+  height: auto;
+  background-color: #8BDFE2;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border: 1px solid transparent;
+  border-radius: 20px;
+  padding: 0.5rem 2rem;
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+.iconos_sesion{
+  display: inline-block;
+  justify-self: center;
+  margin-top: 1rem;
+}
+
+.forgetpass{
+  font-size: 0.6rem;
+  text-align: center;
+}
+.registerUser{
+  font-size: 0.75rem;
+  text-align: center;
+}
diff --git a/src/view/index.js b/src/view/index.js
@@ -1,15 +1,17 @@
 // IMPORTAR TODAS LAS VISTAS
 import { login } from './login.js';
+import { signUp } from './sign_up.js';
 import { news } from './news.js';
 import { profile } from './profile.js';
-import { profileRegister } from './profileRegister.js';
+// import { profileRegister } from './profileRegister.js';
 import Different from './404.js';
 
 const components = {
   Login: login,
   News: news,
   Profile: profile,
-  Registro: profileRegister,
+  SignUp: signUp,
+  // Registro: profileRegister,
   different: Different,
 };
 

diff --git a/src/view/login.js b/src/view/login.js
@@ -1,28 +1,40 @@
-// eslint-disable-next-line import/no-unresolved
-import { createUser } from '../lib/firebase/sign-up.js';
+import { signInUser } from '../lib/firebase/auth.js';
 
+// vista del login
 const login = () => {
   const viewLogin = `
+
     <form id='formLogin'>
-      <label for='email'>Usuario </label>
-      <input type='text' placeholder='Ingrese su usuario' id ='email' >
-      <label for='pass'>Contraseña</label>
+      <p class = 'titulo'>Sinchi Warmi</p>
+      <input type='text' placeholder='Ingrese su email' id ='email' >
       <input type='password' placeholder='Ingrese su contraseña' id = 'pass'>
-      <input type='submit' value='LogIn' id='save' >
-    </form>
+      <a class ='forgetpass'>¿Haz olvidado tu contraseña?</a>
+      <input type='submit' value='Log In' id='login'>
+      <a class = 'registerUser' href="#/signUp" >Quiero registrarme</a>
+      <div class='iconos_sesion'>
+        <img src="../img//google.png" alt="img-google">
+        <img src='../img/facebook.png'> 
+      </div>
+      <img src='../img/mujeresunidascelupeq.png'> 
     `;
   const divElement = document.createElement('div');
   divElement.setAttribute('id', 'content');
+  divElement.className = 'contenido';
   divElement.innerHTML = viewLogin;
-  const save = divElement.querySelector('#formLogin'); // divElement ya es un elemento de html
-  save.addEventListener('submit', (event) => {
-    event.preventDefault();
-    const email = document.querySelector('#email');
-    const pass = document.querySelector('#pass');
-    // console.log(email.value, pass.value);
-    createUser(email.value, pass.value);
-  });
-
   return divElement;
 };
-export { login };
+
+const signIn = () => {
+  const formLogin = document.getElementById('formLogin');
+  const email = document.getElementById('email');
+  const password = document.getElementById('pass');
+  // evento para el boton login
+  formLogin.addEventListener('submit', async () => {
+    const valueEmail = email.value;
+    const valuePassword = password.value;
+    email.value = '';
+    password.value = '';
+    signInUser(valueEmail, valuePassword);
+  });
+};
+export { login, signIn };
diff --git a/src/view/sign_up.js b/src/view/sign_up.js
@@ -0,0 +1,51 @@
+import { createUser, signInUser } from '../lib/firebase/auth.js';
+import { saveUser } from '../lib/firebase/firestore.js';
+// vista del registro del usuario
+const signUp = () => {
+  const viewLogin = `
+    <form id='formSignUp'>
+      <p class = 'titulo'>Sinchi Warmi</p>
+      <input type='text' placeholder='Ingrese su email' id ='email' >
+      <input type='password' placeholder='Ingrese su contraseña' id = 'pass'>
+      <input type='submit' value='Sign Up' id='save'>
+      <div class='iconos_sesion'>
+        <img src="../img//google.png" alt="img-google">
+        <img src='../img/facebook.png'> 
+      </div>
+      <img src='../img/mujeresunidascelupeq.png'> 
+    `;
+  const divElement = document.createElement('div');
+  divElement.setAttribute('id', 'content');
+  divElement.innerHTML = viewLogin;
+  return divElement;
+};
+
+// creando credenciales (correo y contraseña)
+const createCredential = (mycallback) => {
+  const formSignUp = document.getElementById('formSignUp');
+  const email = document.getElementById('email');
+  const password = document.getElementById('pass');
+  // evento para el boton login
+  formSignUp.addEventListener('submit', async () => {
+    const valueEmail = email.value;
+    const valuePassword = password.value;
+    email.value = '';
+    password.value = '';
+    await mycallback(valueEmail, valuePassword);
+  });
+};
+
+// obteniendo el correo electrónico y la contraseña
+const getCredential = async (correo, contrasena) => {
+  // eslint-disable-next-line no-console
+  console.log(correo, contrasena);
+  // llamando a createUser con firebase y saveUser que guarda el usuario creado con firestore
+  // eslint-disable-next-line no-console
+  await createUser(correo, contrasena);
+  await saveUser(correo, contrasena);
+  signInUser(correo, contrasena);
+  // retorno del correo y contraseña
+  return (correo, contrasena);
+};
+
+export { signUp, createCredential, getCredential };