forked from Laboratoria/LIM016-social-network
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5 from kalyzca/pruebas
Creando usuarios con firestore
- Loading branch information
Showing
14 changed files
with
331 additions
and
41 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }; |
Oops, something went wrong.