From 090663340a1e9b4446a81793c30dccbcfa47ebf3 Mon Sep 17 00:00:00 2001 From: LizethRivera04 <60666768+LizethRivera04@users.noreply.github.com> Date: Tue, 14 Apr 2020 10:08:52 -0500 Subject: [PATCH 01/14] authentication, pending details --- .firebaserc | 5 + database.rules.json | 6 ++ firebase.json | 16 ++++ package.json | 2 +- src/404.html | 33 +++++++ src/example.js | 154 +++++++++++++++++++++++++++++- src/index.html | 49 ++++++++++ src/index.js | 222 +++++++++++++++++++++++++++++++++++++++++++- src/styles.css | 57 ++++++++++++ storage.rules | 7 ++ 10 files changed, 546 insertions(+), 5 deletions(-) create mode 100644 .firebaserc create mode 100644 database.rules.json create mode 100644 firebase.json create mode 100644 src/404.html create mode 100644 src/styles.css create mode 100644 storage.rules diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 00000000..d6a387ae --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "socialnetwork-15a5f" + } +} diff --git a/database.rules.json b/database.rules.json new file mode 100644 index 00000000..c0aa595d --- /dev/null +++ b/database.rules.json @@ -0,0 +1,6 @@ +{ + "rules": { + ".read": "auth != null", + ".write": "auth != null" + } +} \ No newline at end of file diff --git a/firebase.json b/firebase.json new file mode 100644 index 00000000..2dbc6cb3 --- /dev/null +++ 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 index 9a365577..796f1d15 100644 --- a/package.json +++ b/package.json @@ -33,4 +33,4 @@ "stylelint": "^10.1.0", "stylelint-config-recommended": "^2.2.0" } -} \ No newline at end of file +} diff --git a/src/404.html b/src/404.html new file mode 100644 index 00000000..829eda8f --- /dev/null +++ b/src/404.html @@ -0,0 +1,33 @@ + + + + + + Page Not Found + + + + +
+

404

+

Page Not Found

+

The specified file was not found on this website. Please check the URL for mistakes and try again.

+

Why am I seeing this?

+

This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.

+
+ + diff --git a/src/example.js b/src/example.js index 52d2c7ea..9b3f191f 100644 --- a/src/example.js +++ b/src/example.js @@ -1,3 +1,153 @@ -export const example = () => { +/* export const example = () => { // aquí tu código -} \ No newline at end of file +} */ + +// Are you sure that you want to delete the element? +const overDelete = document.createElement('div'); +overDelete.className = 'overSmall'; +overDelete.id = 'overDelete'; +overDelete.innerHTML = ` +
+
+
+ +
+
+ +

Estás seguro que quieres eliminar el elemento?

+ + + +
+ +
+
+` +document.body.appendChild(overDelete); + + + +// Open PopUpDelete +const btnPop = document.querySelector('#pop') +const overlayDelete = document.querySelector('#overDelete');// el id lo tiene el overlay +const popup = document.querySelector('.popSmall'); +const btnClosePopup = document.querySelector('#btn-cerrar-delete'); +btnPop.addEventListener('click', abrirPopup); +btnClosePopup.addEventListener('click', cerrarPopup); + +function abrirPopup() { + overlayDelete.classList.add('active'); + popup.classList.add('active'); +} +function cerrarPopup() { + overlayDelete.classList.remove('active'); + popup.classList.remove('active'); +} + + +//Task Completed + +const overComplete = document.createElement('div'); +overComplete.className = 'overSmall'; +overComplete.id = 'overComplete'; +overComplete.innerHTML = ` +
+
+
+ +
+
+ +

Se han guardado tus cambios

+
+ +
+
+` +document.body.appendChild(overComplete); + + +// Open PopUp Task Complete +const btnComplete = document.querySelector('#taskCompleted') +const overComp = document.querySelector('#overComplete');// el id lo tiene el overlay +const popuptask = document.querySelector('.popSmall'); +const btnCloseTask = document.querySelector('#btn-cerrar-complete'); +btnComplete.addEventListener('click', openComplete); +btnCloseTask.addEventListener('click', closeComplete); + +function openComplete() { + overComp.classList.add('active'); + popuptask.classList.add('active'); +} +function closeComplete() { + overComp.classList.remove('active'); + popuptask.classList.remove('active'); +} + + +//Show Error + +const overError = document.createElement('div'); +overError.className = 'overSmall'; +overError.id = 'overError'; +overError.innerHTML = ` +
+
+
+

ERROR

+ +

Intenta de nuevo, alguno de tus datos no coincide

+
+
+ +
+ +
+
+` +document.body.appendChild(overError); + + +// Open PopUp Task Complete +const btnError = document.querySelector('#showError') +const overErr = document.querySelector('#overError');// el id lo tiene el overlay +const popupError = document.querySelector('.popSmall'); +const btnCloseError = document.querySelector('#btn-cerrar-error'); +btnError.addEventListener('click', openError); +btnCloseError.addEventListener('click', closeError); + +function openError() { + overErr.classList.add('active'); + popupError.classList.add('active'); +} +function closeError() { + overErr.classList.remove('active'); + popupError.classList.remove('active'); +} + + + +/* const profileCard = document.createElement('div'); +profileCard.className = 'profileCard'; +profileCard.innerHTML = ` +
+
+
+

Estás seguro que quieres eliminar el elemento?

+ +
+ + +` +profileContainer.appendChild(profileCard); */ + +/* const closeButton = document.createElement('div'); +closeButton.className = 'closeButton'; +profileCard.appendChild(closeButton); */ + +/* const close = document.createElement('a'); +close.className = 'btn-cerrar-popup'; +closeButton.appendChild(close); +const icon = document.createElement('i'); +icon.className = 'far fa-times-circle'; +close.appendChild(icon); */ diff --git a/src/index.html b/src/index.html index bb6937cc..8091c5d2 100644 --- a/src/index.html +++ b/src/index.html @@ -1,12 +1,61 @@ + Document + + + +

Inicia Sesión

+ + + + Ingresa a tu cuenta +
+ + + + + +
+
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 35868bab..d7cf359a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,221 @@ -import { example } from './example.js'; +/* import { example } from './example.js'; -example(); +example(); */ +var db = firebase.firestore(); + +//login, instancia del provedor del servicio +var provider = new firebase.auth.GoogleAuthProvider(); +var providerf = new firebase.auth.FacebookAuthProvider(); + +let div = document.querySelector('#root'); +//Autentificar con Google +let btn = document.querySelector('#login'); +btn.addEventListener('click', function () { + 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) + guardaDatos(result.user)//Se le manda a la func guardDatos para hacer uns BD + //ocultar el boton y mostrar la foto + btn.classList.hide; + div.innerHTML = ` + + ` + + }) +}); + +//const docData = db.doc('datausers/users'); +//func que guarda los datos gmail automaticamente +function guardaDatos(user) { + //console.log(user); + /* firebase.database().ref("usersapp/" + user.uid)//la / y el + user.uid hace que no se duplique el usuario + .set(usuario) */ + const docData = db.doc('datausers/' + user.uid);//la / y el + user.uid hace que no se duplique el usuario + docData.set({ + uid: user.uid,//Servirá para eliminar + nombre: user.displayName,//Se obtiene el nom + email: user.email, + foto: user.photoURL + }) + + .then(function () { + console.log('Los datos se guardaron'); + + }) + .catch(function (error) { + console.log('Hubo en error:', error); + + }) + updateData(docData) + +} + + +//se leen los datos de la BD + +function updateData(docData) { + docData.get().then(function (snapshot) { + let myData = snapshot.data(); + console.log(myData); + div.innerHTML = `Hola ${myData.nombre}` + + }) +} + +//se leen los datos de la BD +/* firebase.database().ref("datausers/users")//cuando alguien agregue un elemen a la rama + .on("child_added", function (snapshot) {//on escucha si se agrega algo(child_added), recibe snapshot que es el nodo con toda la info del obj telmex + //Se agregan las fotos de las personas que ingresan + var user = snapshot.val()//val tiene los datos (obj con key y val) + div.innerHTML = ` + + ` + + + }) */ + +//Autentificar con facebook +let btnfb = document.querySelector('#loginfb'); +btnfb.addEventListener('click', function () { + 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) + guardaDatosFb(result.user)//Se le manda a la func guardDatos para hacer una BD + //ocultar el boton y mostrar la foto + btn.classList.hide; + div.innerHTML = ` + + ` + + }) +}); + +//func que guarda los datos gmail automaticamente +function guardaDatosFb(user) { + //console.log(user); + /* firebase.database().ref("usersapp/" + user.uid)//la / y el + user.uid hace que no se duplique el usuario + .set(usuario) */ + const docDataFb = db.doc('datausers/' + user.uid);//la / y el + user.uid hace que no se duplique el usuario + docDataFb.set({ + uid: user.uid,//Servirá para eliminar + nombre: user.displayName,//Se obtiene el nom + email: user.email, + foto: user.photoURL + }) + + .then(function () { + console.log('Los datos se guardaron'); + + }) + .catch(function (error) { + console.log('Hubo en error:', error); + + }) + updateDataFb(docDataFb) + +} + +//se leen los datos de la BD + +function updateDataFb(docDataFb) { + docDataFb.get().then(function (snapshot) { + let myData = snapshot.data(); + console.log(myData); + div.innerHTML = `Hola ${myData.nombre} ` + + }) +} + +//Crear cuenta con email +/* document.querySelector('#ingresar').addEventListener('submit', cargarEmail) + +function cargarEmail(e) { + e.preventDefault(); + + //Leer variables del form + const valEmail = document.querySelector('#email').value + const valPass = document.querySelector('#password').value + + console.log(valEmail); + console.log(valPass); + + +} */ +//Leer y guardar los datos del usuario para crear cuenta +document.querySelector('#create').addEventListener('click', function (e) { + e.preventDefault() + //Leer variables del form + const email = document.querySelector('#email').value + const password = document.querySelector('#password').value + + //console.log(valEmail); + //console.log(valPass); + + return createUser(email, password) +}) +//Guardar los datos en firebase y BD +function createUser(email, password) { + console.log(email + password); + firebase.auth().createUserWithEmailAndPassword(email, password) + .then(function (user) { + console.log('Se ha creado la cuenta!'); + console.log(user.user); + + }) + .catch(function (error) { + console.error(error); + + }) + const docData = db.doc('datausers/' + email);//la / y el + user.uid hace que no se duplique el usuario + docData.set({ + email: email, + password: password + }) + + .then(function () { + console.log('Los datos se guardaron'); + + }) + .catch(function (error) { + console.log('Hubo en error:', error); + + }) + +} + + +//Leer y guardar los datos del us. para despues comparar con los datos almacenados en la BD +document.querySelector('#enter').addEventListener('click', function (e) { + e.preventDefault() + //Leer variables del form + const email = document.querySelector('#email').value + const password = document.querySelector('#password').value + + //console.log(email); + //console.log(password) + return loginUser(email, password) +}) + +//Comparar los datos del usuario con los datos que usó para crear cuenta +function loginUser(email, password) { + console.log(email + password); + firebase.auth().signInWithEmailAndPassword(email, password) + .then(function (user) { + console.log('Datos correctos, bienvenido!') + }) + .catch(function (error) { + alert('Upsi, datos incorrectos'); + + }) + +} + +//salir de la sesión +const btnexit = document.querySelector('#salir') +btnexit.addEventListener('click', signoutUser) + +function signoutUser() { + firebase.auth().signOut(); +} \ No newline at end of file diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 00000000..d08af301 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,57 @@ +.overSmall{ + display: flex; + flex-direction: column; + background: rgba(0, 0, 0, .3); + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + align-items: center; + justify-content: center; + visibility: hidden; + } + .active{ + visibility: visible; + } + .popSmall{ + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: space-between; + width: 500px; + height: 700px; + background: #F8F8F8; + border-radius: 10%; + margin-top: 5%; + -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); + } + .containerPop{ + + margin: 50px; + text-align: center; + } + .closeButton{ + display: block; + text-align: center; + margin-right: 7%; + } + .btn-cerrar-popup{ + font-size: 40px; + display: flex; + color: #BBB; + } + .textSmall{ + text-align: center; + } + .imagePop{ + font-size: 100px; + } + .acceptDelete{ + font-size: 70px; + color: rgb(11, 155, 18); + } + .cancelDelete{ + font-size: 60px; + color: rgb(243, 26, 26); + } \ No newline at end of file diff --git a/storage.rules b/storage.rules new file mode 100644 index 00000000..d494542e --- /dev/null +++ b/storage.rules @@ -0,0 +1,7 @@ +service firebase.storage { + match /b/{bucket}/o { + match /{allPaths=**} { + allow read, write: if request.auth!=null; + } + } +} From f2a7c1a13fe824da43418cfd0b323620430f5597 Mon Sep 17 00:00:00 2001 From: LizethRivera04 <60666768+LizethRivera04@users.noreply.github.com> Date: Tue, 14 Apr 2020 16:54:25 -0500 Subject: [PATCH 02/14] email and password validation, bulma install --- package.json | 3 ++ src/index.js | 83 +++++++++++++++++++++++++++++++++++++++----------- src/styles.css | 57 ---------------------------------- 3 files changed, 68 insertions(+), 75 deletions(-) diff --git a/package.json b/package.json index 796f1d15..f59500b2 100644 --- 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/index.js b/src/index.js index d7cf359a..d963118a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,12 @@ /* import { example } from './example.js'; example(); */ -var db = firebase.firestore(); +const db = firebase.firestore(); + //login, instancia del provedor del servicio -var provider = new firebase.auth.GoogleAuthProvider(); -var providerf = new firebase.auth.FacebookAuthProvider(); +const provider = new firebase.auth.GoogleAuthProvider(); +const providerf = new firebase.auth.FacebookAuthProvider(); let div = document.querySelector('#root'); //Autentificar con Google @@ -15,6 +16,8 @@ btn.addEventListener('click', function () { .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) + + guardaDatos(result.user)//Se le manda a la func guardDatos para hacer uns BD //ocultar el boton y mostrar la foto btn.classList.hide; @@ -23,6 +26,10 @@ btn.addEventListener('click', function () { ` }) + .catch(function (error) { + console.log('No tienes una cuenta Google'); + + }) }); //const docData = db.doc('datausers/users'); @@ -97,6 +104,8 @@ function guardaDatosFb(user) { //console.log(user); /* firebase.database().ref("usersapp/" + user.uid)//la / y el + user.uid hace que no se duplique el usuario .set(usuario) */ + let useremailFb = user.email + compareData(useremailFb) const docDataFb = db.doc('datausers/' + user.uid);//la / y el + user.uid hace que no se duplique el usuario docDataFb.set({ uid: user.uid,//Servirá para eliminar @@ -113,10 +122,12 @@ function guardaDatosFb(user) { console.log('Hubo en error:', error); }) + updateDataFb(docDataFb) } + //se leen los datos de la BD function updateDataFb(docDataFb) { @@ -128,6 +139,7 @@ function updateDataFb(docDataFb) { }) } + //Crear cuenta con email /* document.querySelector('#ingresar').addEventListener('submit', cargarEmail) @@ -153,25 +165,53 @@ document.querySelector('#create').addEventListener('click', function (e) { //console.log(valEmail); //console.log(valPass); - return createUser(email, password) + createUser(email, password) }) //Guardar los datos en firebase y BD function createUser(email, password) { + //console.log(user); console.log(email + password); - firebase.auth().createUserWithEmailAndPassword(email, password) - .then(function (user) { - console.log('Se ha creado la cuenta!'); - console.log(user.user); - }) - .catch(function (error) { - console.error(error); + 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,}$/ - }) - const docData = db.doc('datausers/' + email);//la / y el + user.uid hace que no se duplique el usuario - docData.set({ + if (expRegPass.test(password) === true && expRegEmail.test(email) === true) { + firebase.auth().createUserWithEmailAndPassword(email, password) + + .then(function (user) { + console.log('Se ha creado la cuenta!'); + console.log(user.user); + //useremail = user.user.email + saveEmailBD(email, password, user) + //compareData(useremail) + + + }) + + .catch(function (error) {//Si la cuenta se ha creado se muestra el error + console.log(error.message); + + }) + + } else { + 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).') + } + + +} +function compareData(useremailFb) { + console.log(useremailFb); + + //console.log(useremail); + +} + +function saveEmailBD(email, password, user) { + const docDataEm = db.doc('datausers/' + user.user.uid);//la / y el + user.uid hace que no se duplique el usuario + docDataEm.set({ email: email, - password: password + password: password, + uid: user.user.uid }) .then(function () { @@ -183,10 +223,11 @@ function createUser(email, password) { }) + } -//Leer y guardar los datos del us. para despues comparar con los datos almacenados en la BD +//Leer y guardar los datos del us. para despues comparar con los datos almacenados en la autenticación document.querySelector('#enter').addEventListener('click', function (e) { e.preventDefault() //Leer variables del form @@ -195,7 +236,7 @@ document.querySelector('#enter').addEventListener('click', function (e) { //console.log(email); //console.log(password) - return loginUser(email, password) + loginUser(email, password) }) //Comparar los datos del usuario con los datos que usó para crear cuenta @@ -212,10 +253,16 @@ function loginUser(email, password) { } + + + //salir de la sesión const btnexit = document.querySelector('#salir') btnexit.addEventListener('click', signoutUser) -function signoutUser() { +function signoutUser(e) { + e.preventDefault() firebase.auth().signOut(); + console.log('Adiós Bye'); + } \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index d08af301..e69de29b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,57 +0,0 @@ -.overSmall{ - display: flex; - flex-direction: column; - background: rgba(0, 0, 0, .3); - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - align-items: center; - justify-content: center; - visibility: hidden; - } - .active{ - visibility: visible; - } - .popSmall{ - display: flex; - flex-direction: column; - flex-wrap: nowrap; - justify-content: space-between; - width: 500px; - height: 700px; - background: #F8F8F8; - border-radius: 10%; - margin-top: 5%; - -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); - } - .containerPop{ - - margin: 50px; - text-align: center; - } - .closeButton{ - display: block; - text-align: center; - margin-right: 7%; - } - .btn-cerrar-popup{ - font-size: 40px; - display: flex; - color: #BBB; - } - .textSmall{ - text-align: center; - } - .imagePop{ - font-size: 100px; - } - .acceptDelete{ - font-size: 70px; - color: rgb(11, 155, 18); - } - .cancelDelete{ - font-size: 60px; - color: rgb(243, 26, 26); - } \ No newline at end of file From de031f9a8857a1a3314e1667d6dca0e92ce6a4a7 Mon Sep 17 00:00:00 2001 From: LizethRivera04 <60666768+LizethRivera04@users.noreply.github.com> Date: Mon, 20 Apr 2020 15:15:40 -0500 Subject: [PATCH 03/14] Login settings and popup functionality --- src/example.js | 257 +++++++++++++++++++---------------------- src/index.html | 21 ++-- src/index.js | 301 ++++++++++++++++++++----------------------------- src/login.js | 67 +++++++++++ src/pops.js | 175 ++++++++++++++++++++++++++++ src/signIn.js | 80 +++++++++++++ src/styles.css | 93 +++++++++++++++ src/vista.js | 7 ++ 8 files changed, 666 insertions(+), 335 deletions(-) create mode 100644 src/login.js create mode 100644 src/pops.js create mode 100644 src/signIn.js create mode 100644 src/vista.js diff --git a/src/example.js b/src/example.js index 9b3f191f..c8f913e0 100644 --- a/src/example.js +++ b/src/example.js @@ -1,153 +1,122 @@ -/* export const example = () => { - // aquí tu código -} */ - -// Are you sure that you want to delete the element? -const overDelete = document.createElement('div'); -overDelete.className = 'overSmall'; -overDelete.id = 'overDelete'; -overDelete.innerHTML = ` -
-
-
- -
-
- -

Estás seguro que quieres eliminar el elemento?

- - - -
- -
-
-` -document.body.appendChild(overDelete); - - - -// Open PopUpDelete -const btnPop = document.querySelector('#pop') -const overlayDelete = document.querySelector('#overDelete');// el id lo tiene el overlay -const popup = document.querySelector('.popSmall'); -const btnClosePopup = document.querySelector('#btn-cerrar-delete'); -btnPop.addEventListener('click', abrirPopup); -btnClosePopup.addEventListener('click', cerrarPopup); - -function abrirPopup() { - overlayDelete.classList.add('active'); - popup.classList.add('active'); -} -function cerrarPopup() { - overlayDelete.classList.remove('active'); - popup.classList.remove('active'); +import vista from '/vista.js' +import login from '/login.js' +import signIn from '/signIn.js' +import { loginGoogle } from '/index.js'//Se importa para usar addEventListener +import { loginFacebook } from '/index.js' +import { createUser } from '/index.js' +import { loginUser } from '/index.js' +import { signoutUser } from '/index.js' + +//Boton para mostrar iniciar sesión +const btnshow = document.querySelector('#showLogin') +btnshow.addEventListener('click', principalView) + +//Boton para cerrar sesión +const btnExit = document.querySelector('#goOut') +btnExit.addEventListener('click', signoutUser) + +//Mostrar vista (una antes de iniciar sesión) +function principalView() { + const divRoot = document.querySelector('#root') + divRoot.innerHTML = vista() + let goLogin = document.querySelector('#goLogin') + goLogin.addEventListener('click', viewLogin) } - -//Task Completed - -const overComplete = document.createElement('div'); -overComplete.className = 'overSmall'; -overComplete.id = 'overComplete'; -overComplete.innerHTML = ` -
-
-
- -
-
- -

Se han guardado tus cambios

-
- -
-
-` -document.body.appendChild(overComplete); - - -// Open PopUp Task Complete -const btnComplete = document.querySelector('#taskCompleted') -const overComp = document.querySelector('#overComplete');// el id lo tiene el overlay -const popuptask = document.querySelector('.popSmall'); -const btnCloseTask = document.querySelector('#btn-cerrar-complete'); -btnComplete.addEventListener('click', openComplete); -btnCloseTask.addEventListener('click', closeComplete); - -function openComplete() { - overComp.classList.add('active'); - popuptask.classList.add('active'); -} -function closeComplete() { - overComp.classList.remove('active'); - popuptask.classList.remove('active'); +//Mostrar vista iniciar sesión +export function viewLogin() { + const divRoot = document.querySelector('#root') + divRoot.innerHTML = login() + let goSignIn = document.querySelector('#goSignIn') + + //Listeners modales + const btnCloseError = document.querySelector('#btn-cerrar-error'); + btnCloseError.addEventListener('click', closeError); + const errorGooFbkModal = document.querySelector('#noAccountGooFbk'); + const btnCloseGoogleError = document.querySelector('#btn-cerrar-noGooFbk'); + btnCloseGoogleError.addEventListener('click', closeGooFbkError) + + //Ingresar + let btnEnter = document.querySelector('#enter') + btnEnter.addEventListener('click', function (e) { + e.preventDefault() + let email = document.querySelector('#email').value + let password = document.querySelector('#password').value + const errorModal = document.querySelector('#errorModal'); + /* console.log(email); + console.log(password); */ + loginUser(email, password, errorModal) + }) + //Ocultar Modaless + function closeError() { + errorModal.classList.remove('is-active'); + } + function closeGooFbkError() { + errorGooFbkModal.classList.remove('is-active'); + } + viewSign(goSignIn) + loginGoogle(errorGooFbkModal) + loginFacebook(errorGooFbkModal) } +//Mostrar vista Resgistro +export function viewSign(goSignIn) { + goSignIn.addEventListener('click', (e) => { + e.preventDefault() + const divRoot = document.querySelector('#root') + divRoot.innerHTML = signIn() + + //Listeners Modales + const btnCloseError = document.querySelector('#btn-cerrar-error'); + btnCloseError.addEventListener('click', closeError); + const btnCloseExist = document.querySelector('#btn-cerrar-exist-error'); + btnCloseExist.addEventListener('click', closeErrorExist); + let btnBack = document.querySelector('#backOne') + const errorGooFbkModal = document.querySelector('#noAccountGooFbk'); + const btnCloseGoogleError = document.querySelector('#btn-cerrar-noGooFbk'); + btnCloseGoogleError.addEventListener('click', closeGooFbkError) + + //Crear cuenta + let btnRegister = document.querySelector('#signIn') + btnRegister.addEventListener('click', function (e) { + e.preventDefault() + //Leer variables del form + const newName = document.querySelector('#newName').value + const newEmail = document.querySelector('#newEmail').value + const newPassword = document.querySelector('#newPassword').value + const registryModal = document.querySelector('#registryModal');// el id lo tiene el overlay + const alreadyExistModal = document.querySelector('#alreadyExistModal'); + /* console.log(newName); + console.log(newEmail); + console.log(newPassword); */ + createUser(newName, newEmail, newPassword, registryModal, alreadyExistModal) + + }) + //Ocultar Modales + function closeError() { + registryModal.classList.remove('is-active'); + } + function closeErrorExist() { + alreadyExistModal.classList.remove('is-active'); + } + function closeGooFbkError() { + errorGooFbkModal.classList.remove('is-active'); + } + arrowBack(btnBack) + loginGoogle(errorGooFbkModal) + loginFacebook(errorGooFbkModal) + }) -//Show Error - -const overError = document.createElement('div'); -overError.className = 'overSmall'; -overError.id = 'overError'; -overError.innerHTML = ` -
-
-
-

ERROR

- -

Intenta de nuevo, alguno de tus datos no coincide

-
-
- -
- -
-
-` -document.body.appendChild(overError); - - -// Open PopUp Task Complete -const btnError = document.querySelector('#showError') -const overErr = document.querySelector('#overError');// el id lo tiene el overlay -const popupError = document.querySelector('.popSmall'); -const btnCloseError = document.querySelector('#btn-cerrar-error'); -btnError.addEventListener('click', openError); -btnCloseError.addEventListener('click', closeError); - -function openError() { - overErr.classList.add('active'); - popupError.classList.add('active'); -} -function closeError() { - overErr.classList.remove('active'); - popupError.classList.remove('active'); } +//Regresar a inicio de sesión +function arrowBack(btnBack) { + btnBack.addEventListener('click', (e) => { + e.preventDefault() + const divRoot = document.querySelector('#root') + divRoot.innerHTML = login() + viewLogin() + }) +} -/* const profileCard = document.createElement('div'); -profileCard.className = 'profileCard'; -profileCard.innerHTML = ` -
-
-
-

Estás seguro que quieres eliminar el elemento?

- -
- - -` -profileContainer.appendChild(profileCard); */ - -/* const closeButton = document.createElement('div'); -closeButton.className = 'closeButton'; -profileCard.appendChild(closeButton); */ - -/* const close = document.createElement('a'); -close.className = 'btn-cerrar-popup'; -closeButton.appendChild(close); -const icon = document.createElement('i'); -icon.className = 'far fa-times-circle'; -close.appendChild(icon); */ diff --git a/src/index.html b/src/index.html index 8091c5d2..ee3cdaad 100644 --- a/src/index.html +++ b/src/index.html @@ -8,22 +8,17 @@ Document + + + -

Inicia Sesión

- - - - Ingresa a tu cuenta -
- - - - - -
+ +
+ + @@ -55,7 +50,7 @@

Inicia Sesión

//firebase.analytics(); - + \ No newline at end of file diff --git a/src/index.js b/src/index.js index d963118a..260dc7da 100644 --- a/src/index.js +++ b/src/index.js @@ -1,268 +1,213 @@ -/* import { example } from './example.js'; +import { viewLogin } from '/example.js' +import { viewSign } from '/example.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(); -let div = document.querySelector('#root'); -//Autentificar con Google -let btn = document.querySelector('#login'); -btn.addEventListener('click', function () { - 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) - - - guardaDatos(result.user)//Se le manda a la func guardDatos para hacer uns BD - //ocultar el boton y mostrar la foto - btn.classList.hide; - div.innerHTML = ` - - ` - - }) - .catch(function (error) { - console.log('No tienes una cuenta Google'); - - }) -}); +//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) + guardaDatos(result.user)//Se le manda a la func guardDatos para hacer uns BD + //div.innerHTML = `` + }) + .catch(function (error) { + errorGooFbkModal.classList.add('is-active'); + console.log('error:', error); + }) + }); +} -//const docData = db.doc('datausers/users'); -//func que guarda los datos gmail automaticamente +//Guardar datos gmail en BD function guardaDatos(user) { //console.log(user); - /* firebase.database().ref("usersapp/" + user.uid)//la / y el + user.uid hace que no se duplique el usuario - .set(usuario) */ - const docData = db.doc('datausers/' + user.uid);//la / y el + user.uid hace que no se duplique el usuario - docData.set({ + const docRef = db.collection('datausers/').doc(user.uid);//la / y el + user.uid hace que no se duplique el usuario + docRef.set({ uid: user.uid,//Servirá para eliminar nombre: user.displayName,//Se obtiene el nom email: user.email, foto: user.photoURL }) - .then(function () { console.log('Los datos se guardaron'); - }) .catch(function (error) { console.log('Hubo en error:', error); - }) - updateData(docData) - + updateData(docRef) } - -//se leen los datos de la BD - -function updateData(docData) { - docData.get().then(function (snapshot) { +//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}` - + /* div.innerHTML = `Hola ${myData.nombre}` */ }) } -//se leen los datos de la BD -/* firebase.database().ref("datausers/users")//cuando alguien agregue un elemen a la rama - .on("child_added", function (snapshot) {//on escucha si se agrega algo(child_added), recibe snapshot que es el nodo con toda la info del obj telmex - //Se agregan las fotos de las personas que ingresan - var user = snapshot.val()//val tiene los datos (obj con key y val) - div.innerHTML = ` - - ` - - - }) */ - -//Autentificar con facebook -let btnfb = document.querySelector('#loginfb'); -btnfb.addEventListener('click', function () { - 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) - guardaDatosFb(result.user)//Se le manda a la func guardDatos para hacer una BD - //ocultar el boton y mostrar la foto - btn.classList.hide; - div.innerHTML = ` - - ` - }) -}); +//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); + guardaDatosFb(result.user)//Se le manda a la func guardDatos para hacer una BD + //div.innerHTML = `` + }) + .catch(function (error) { + errorGooFbkModal.classList.add('is-active'); + console.log('Hubo en error:', error); + }) + }); +} -//func que guarda los datos gmail automaticamente +//Guardar datos Fb en BD function guardaDatosFb(user) { //console.log(user); - /* firebase.database().ref("usersapp/" + user.uid)//la / y el + user.uid hace que no se duplique el usuario - .set(usuario) */ - let useremailFb = user.email - compareData(useremailFb) - const docDataFb = db.doc('datausers/' + user.uid);//la / y el + user.uid hace que no se duplique el usuario - docDataFb.set({ - uid: user.uid,//Servirá para eliminar - nombre: user.displayName,//Se obtiene el nom + const docRef = db.collection('datausers/').doc(user.uid);//la / y el + user.uid hace que no se duplique el usuario + docRef.set({ + uid: user.uid, + nombre: user.displayName, email: user.email, foto: user.photoURL }) - .then(function () { console.log('Los datos se guardaron'); - }) .catch(function (error) { console.log('Hubo en error:', error); - }) - - updateDataFb(docDataFb) - + updateDataFb(docRef) } - -//se leen los datos de la BD - -function updateDataFb(docDataFb) { - docDataFb.get().then(function (snapshot) { +//Leer los datos de la BD +function updateDataFb(docRef) { + docRef.get().then(function (snapshot) { let myData = snapshot.data(); console.log(myData); - div.innerHTML = `Hola ${myData.nombre} ` - + /* div.innerHTML = `Hola ${myData.nombre} ` */ }) } //Crear cuenta con email -/* document.querySelector('#ingresar').addEventListener('submit', cargarEmail) - -function cargarEmail(e) { - e.preventDefault(); - - //Leer variables del form - const valEmail = document.querySelector('#email').value - const valPass = document.querySelector('#password').value - - console.log(valEmail); - console.log(valPass); - - -} */ -//Leer y guardar los datos del usuario para crear cuenta -document.querySelector('#create').addEventListener('click', function (e) { - e.preventDefault() - //Leer variables del form - const email = document.querySelector('#email').value - const password = document.querySelector('#password').value - - //console.log(valEmail); - //console.log(valPass); - - createUser(email, password) -}) -//Guardar los datos en firebase y BD -function createUser(email, password) { +//Registrarse: +export function createUser(newName, newEmail, newPassword, registryModal, alreadyExistModal) { //console.log(user); - console.log(email + password); - + 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(password) === true && expRegEmail.test(email) === true) { - firebase.auth().createUserWithEmailAndPassword(email, password) + 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); - //useremail = user.user.email - saveEmailBD(email, password, user) - //compareData(useremail) - - + saveEmailBD(newName, newEmail, newPassword, user) }) - .catch(function (error) {//Si la cuenta se ha creado se muestra el error + alreadyExistModal.classList.add('is-active'); console.log(error.message); - }) - } else { - 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).') + 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).') } - - } -function compareData(useremailFb) { - console.log(useremailFb); - //console.log(useremail); - -} - -function saveEmailBD(email, password, user) { - const docDataEm = db.doc('datausers/' + user.user.uid);//la / y el + user.uid hace que no se duplique el usuario - docDataEm.set({ - email: email, - password: password, +//: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, uid: user.user.uid }) - .then(function () { console.log('Los datos se guardaron'); - }) .catch(function (error) { console.log('Hubo en error:', error); - }) - - } -//Leer y guardar los datos del us. para despues comparar con los datos almacenados en la autenticación -document.querySelector('#enter').addEventListener('click', function (e) { - e.preventDefault() - //Leer variables del form - const email = document.querySelector('#email').value - const password = document.querySelector('#password').value - - //console.log(email); - //console.log(password) - loginUser(email, password) -}) - -//Comparar los datos del usuario con los datos que usó para crear cuenta -function loginUser(email, password) { - console.log(email + password); +//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); }) .catch(function (error) { - alert('Upsi, datos incorrectos'); - + 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 = "" +} + +//Nos dice que usuario tiene sesión abierta y nos trae sus datos de la BD +function userObserver() { + firebase.auth().onAuthStateChanged(function (user) { + if (user) { + const docRef = db.collection('datausers/').doc(user.uid); + docRef.get().then(function (snapshot) { + let myData = snapshot.data(); + console.log(myData); + /* div.innerHTML = `Hola ${myData.nombre} ` */ + }) + } else { + // No user is signed in. + console.log('No user'); + } + }); +} +userObserver() +//Actualización de perfil +/* function profileUpdate(user) { + //var user = firebase.auth().currentUser; -//salir de la sesión -const btnexit = document.querySelector('#salir') -btnexit.addEventListener('click', signoutUser) + user.updateProfile({ + displayName: "Lizeth", + photoURL: "" + }).then(function () { + console.log('los dtos se actualizaron'); -function signoutUser(e) { - e.preventDefault() - firebase.auth().signOut(); - console.log('Adiós Bye'); + // Update successful. + }).catch(function (error) { + // An error happened. + console.log(error); -} \ No newline at end of file + }); +} */ diff --git a/src/login.js b/src/login.js new file mode 100644 index 00000000..9e9cc4ab --- /dev/null +++ b/src/login.js @@ -0,0 +1,67 @@ +export default () => { + const viewLogin = ` +
+
+
+

Iniciar Sesión

+
+
+ + + + +
+
+ + + + +
+ + +

O accede con:

+ +
+ +
+ +
+ + +
+
+

¿Eres nuevo? Resgistrate

+
+ + +
+
+ + + + + ` + return viewLogin +} + + diff --git a/src/pops.js b/src/pops.js new file mode 100644 index 00000000..8ae79bd8 --- /dev/null +++ b/src/pops.js @@ -0,0 +1,175 @@ +const areYouSure = ` + + + +` + + +const saveChange = ` + + +` +const divRoot = document.querySelector('#root') +divRoot.innerHTML = saveChange + +// Are you sure that you want to delete the element? +/* const overDelete = document.createElement('div'); +overDelete.className = 'overSmall'; +overDelete.id = 'overDelete'; +overDelete.innerHTML = ` +
+
+
+ +
+
+ +

Estás seguro que quieres eliminar el elemento?

+ + + +
+ +
+
+` +document.body.appendChild(overDelete); + +// Open PopUpDelete +const btnPop = document.querySelector('#pop') +const overlayDelete = document.querySelector('#overDelete');// el id lo tiene el overlay +const popup = document.querySelector('.popSmall'); +const btnClosePopup = document.querySelector('#btn-cerrar-delete'); +btnPop.addEventListener('click', abrirPopup); +btnClosePopup.addEventListener('click', cerrarPopup); + +function abrirPopup() { + overlayDelete.classList.add('active'); + popup.classList.add('active'); +} +function cerrarPopup() { + overlayDelete.classList.remove('active'); + popup.classList.remove('active'); +} + +//Task Completed + +const overComplete = document.createElement('div'); +overComplete.className = 'overSmall'; +overComplete.id = 'overComplete'; +overComplete.innerHTML = ` +
+
+
+ +
+
+ +

Se han guardado tus cambios

+
+ +
+
+` +document.body.appendChild(overComplete); + +// Open PopUp Task Complete +const btnComplete = document.querySelector('#taskCompleted') +const overComp = document.querySelector('#overComplete');// el id lo tiene el overlay +const popuptask = document.querySelector('.popSmall'); +const btnCloseTask = document.querySelector('#btn-cerrar-complete'); +btnComplete.addEventListener('click', openComplete); +btnCloseTask.addEventListener('click', closeComplete); + +function openComplete() { + overComp.classList.add('active'); + popuptask.classList.add('active'); +} +function closeComplete() { + overComp.classList.remove('active'); + popuptask.classList.remove('active'); +} + +//Show Error + +const overError = document.createElement('div'); +overError.className = 'overSmall'; +overError.id = 'overError'; +overError.innerHTML = ` +
+
+
+

ERROR

+ +

Intenta de nuevo, alguno de tus datos no coincide

+
+
+ +
+ +
+
+` +document.body.appendChild(overError); + +// Open PopUp error +const btnError = document.querySelector('#showError') +const overErr = document.querySelector('#overError');// el id lo tiene el overlay +const popupError = document.querySelector('.popSmall'); +const btnCloseError = document.querySelector('#btn-cerrar-error'); +btnError.addEventListener('click', openError); +btnCloseError.addEventListener('click', closeError); + +function openError() { + overErr.classList.add('active'); + popupError.classList.add('active'); +} +function closeError() { + overErr.classList.remove('active'); + popupError.classList.remove('active'); +} + */ + +/* const profileCard = document.createElement('div'); +profileCard.className = 'profileCard'; +profileCard.innerHTML = ` +
+
+
+

Estás seguro que quieres eliminar el elemento?

+ +
+ + +` +profileContainer.appendChild(profileCard); */ + +/* const closeButton = document.createElement('div'); +closeButton.className = 'closeButton'; +profileCard.appendChild(closeButton); */ + +/* const close = document.createElement('a'); +close.className = 'btn-cerrar-popup'; +closeButton.appendChild(close); +const icon = document.createElement('i'); +icon.className = 'far fa-times-circle'; +close.appendChild(icon); */ \ No newline at end of file diff --git a/src/signIn.js b/src/signIn.js new file mode 100644 index 00000000..59b95b22 --- /dev/null +++ b/src/signIn.js @@ -0,0 +1,80 @@ +export default () => { + const viewSignIn = ` +
+
+
+

Crea una cuenta

+
+
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +

O accede con:

+
+ + +
+ +
+
+ + + + + + + + ` + return viewSignIn +} \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index e69de29b..08c0fc63 100644 --- a/src/styles.css +++ b/src/styles.css @@ -0,0 +1,93 @@ +#root{ + height: 600px; +} +body{ + /*background-color:#131515;*/ + + background-color:#232323; + height: 600px; + color: blanchedalmond; + +} +.form-container{ + margin: 50px; + padding: 80px,80px,50px,80px; + justify-content: center; + color:#FAFAFA; +} +.titles{ + font-size: large; +} + +.centerItem{ + margin: 10px, 50px,10px,50px; + display: flex; + justify-content: center; + text-align: center; +} +.container-separate{ + margin-top: 20px; + +} +a{ + text-decoration-color: #A5DED3; + text-decoration:none; + color: #A5DED3; +} + +.btnIcon{ + margin-top: 50px; + margin: 16px; +} + +.registryLink{ + margin-top: 80px; +} +.back{ + padding: 20px; + justify-content:left; + margin-left: 30px; + margin-top: 30px; +} +.rudyIcon{ + justify-content: center; + color: #A5DED3; + +} + +.modal-content{ + width: 80px; + display: flex; + justify-content: center; +} +.containerPop{ + background-color: #E5E5E5; + color:#232323; + text-align: center; + margin: 15px; + padding: 15px; + + } + +.imagePop{ + font-size: 100px; + color: #000000; + } +.acceptDelete{ + font-size: 25px; + background-color: #47C674; + margin-right: 20px; + border-radius: 10px; + color:#2E2F32; + + } +.cancelDelete{ + font-size: 25px; + background-color: #FF385F; + margin-left: 20px; + border-radius: 12px; + padding-right: 10px; + padding-left: 10px; + color:#2E2F32; + +} diff --git a/src/vista.js b/src/vista.js new file mode 100644 index 00000000..0ea45c74 --- /dev/null +++ b/src/vista.js @@ -0,0 +1,7 @@ +export default () => { + const vista = ` + + + ` + return vista +} \ No newline at end of file From ceab89ecbea629e0bad5663d2ca0fea5973b0170 Mon Sep 17 00:00:00 2001 From: LizethRivera04 <60666768+LizethRivera04@users.noreply.github.com> Date: Mon, 20 Apr 2020 17:51:43 -0500 Subject: [PATCH 04/14] SPA integration and modularization completed --- src/index.html | 17 +++++++++-- src/index.js | 18 +++++++++-- src/{example.js => main.js} | 45 ++++++++++++++++++++++------ src/views/exit.js | 7 +++++ src/views/home.js | 7 +++++ src/{ => views}/login.js | 0 src/views/post.js | 42 ++++++++++++++++++++++++++ src/{vista.js => views/principal.js} | 4 +-- src/views/profile.js | 7 +++++ src/{ => views}/signIn.js | 0 src/views/viewcontroler.js | 16 ++++++++++ 11 files changed, 148 insertions(+), 15 deletions(-) rename src/{example.js => main.js} (75%) create mode 100644 src/views/exit.js create mode 100644 src/views/home.js rename src/{ => views}/login.js (100%) create mode 100644 src/views/post.js rename src/{vista.js => views/principal.js} (75%) create mode 100644 src/views/profile.js rename src/{ => views}/signIn.js (100%) create mode 100644 src/views/viewcontroler.js diff --git a/src/index.html b/src/index.html index ee3cdaad..8bb01062 100644 --- a/src/index.html +++ b/src/index.html @@ -17,7 +17,20 @@
- + @@ -49,7 +62,7 @@ firebase.initializeApp(firebaseConfig); //firebase.analytics(); - + diff --git a/src/index.js b/src/index.js index 260dc7da..da6d0c29 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,19 @@ -import { viewLogin } from '/example.js' -import { viewSign } from '/example.js' +import { viewLogin } from '/main.js' +import { viewSign } from '/main.js' +import { renderHomeView } from "./views/home.js" +import { renderPostView } from "./views/post.js" +import { renderProfileView } from "./views/profile.js" +//import { renderLoginView } from "./views/login.js" +import { renderExitView } from "./views/exit.js" + +export const components = { + home: renderHomeView, + post: renderPostView, + profile: renderProfileView, + //login: renderLoginView, + exit: renderExitView +}; + //Instanciar Firestore const db = firebase.firestore(); diff --git a/src/example.js b/src/main.js similarity index 75% rename from src/example.js rename to src/main.js index c8f913e0..f6c0de36 100644 --- a/src/example.js +++ b/src/main.js @@ -1,12 +1,39 @@ -import vista from '/vista.js' -import login from '/login.js' -import signIn from '/signIn.js' +import { changeView } from './views/viewcontroler.js' +import { renderHomeView } from "./views/home.js" +import { renderPostView } from "./views/post.js" +import { renderProfileView } from "./views/profile.js" +import { renderExitView } from "./views/exit.js" +import login from "./views/login.js" +import signIn from "./views/signIn.js" +import principal from "./views/principal.js" + import { loginGoogle } from '/index.js'//Se importa para usar addEventListener import { loginFacebook } from '/index.js' import { createUser } from '/index.js' import { loginUser } from '/index.js' import { signoutUser } from '/index.js' +// Nodos +export const root = document.querySelector('#root'); +const homeButton = document.querySelector('#home'); +const postButton = document.querySelector('#post'); +const profileButton = document.querySelector('#profile'); +//const loginButton = document.querySelector('#login'); +const exitButton = document.querySelector('#exit'); + +// listeners +homeButton.onclick = renderHomeView; +postButton.onclick = renderPostView; +profileButton.onclick = renderProfileView(); +//loginButton.onclick = renderLoginView(); +exitButton.onclick = renderExitView(); + +// Función de inicio que cambia la URL +const init = () => { + window.addEventListener('hashchange', () => changeView(window.location.hash)) +} +window.addEventListener('load', init); + //Boton para mostrar iniciar sesión const btnshow = document.querySelector('#showLogin') btnshow.addEventListener('click', principalView) @@ -17,16 +44,16 @@ btnExit.addEventListener('click', signoutUser) //Mostrar vista (una antes de iniciar sesión) function principalView() { - const divRoot = document.querySelector('#root') - divRoot.innerHTML = vista() + //const divRoot = document.querySelector('#root') + root.innerHTML = principal() let goLogin = document.querySelector('#goLogin') goLogin.addEventListener('click', viewLogin) } //Mostrar vista iniciar sesión export function viewLogin() { - const divRoot = document.querySelector('#root') - divRoot.innerHTML = login() + //const divRoot = document.querySelector('#root') + root.innerHTML = login() let goSignIn = document.querySelector('#goSignIn') //Listeners modales @@ -63,8 +90,8 @@ export function viewLogin() { export function viewSign(goSignIn) { goSignIn.addEventListener('click', (e) => { e.preventDefault() - const divRoot = document.querySelector('#root') - divRoot.innerHTML = signIn() + //const divRoot = document.querySelector('#root') + root.innerHTML = signIn() //Listeners Modales const btnCloseError = document.querySelector('#btn-cerrar-error'); diff --git a/src/views/exit.js b/src/views/exit.js new file mode 100644 index 00000000..53e0c024 --- /dev/null +++ b/src/views/exit.js @@ -0,0 +1,7 @@ +import { root } from '../main.js'; + +export const renderExitView = () => { + `

Exit

+ ` + root.innerHTML = renderExitView; +}; \ No newline at end of file diff --git a/src/views/home.js b/src/views/home.js new file mode 100644 index 00000000..869b2ce7 --- /dev/null +++ b/src/views/home.js @@ -0,0 +1,7 @@ +import { root } from "../main.js"; + +export const renderHomeView = () => { + `

Home

+ ` + root.innerHTML = renderHomeView; +}; \ No newline at end of file diff --git a/src/login.js b/src/views/login.js similarity index 100% rename from src/login.js rename to src/views/login.js diff --git a/src/views/post.js b/src/views/post.js new file mode 100644 index 00000000..1b9fd41e --- /dev/null +++ b/src/views/post.js @@ -0,0 +1,42 @@ +import { root } from "../main.js"; + +export const renderPostView = () => { + `
+
+

Escribe tu microcuento:

+ + +
+ +
+ +
+ +
+ +
+ + +
` + root.innerHTML = renderPostView; +}; + +// //Función para el file upload + +// const fileInput = document.querySelector('#file-js-example input[type=file]'); +// fileInput.onchange = () => { +// if (fileInput.files.length > 0) { +// const fileName = document.querySelector('#file-js-example .file-name'); +// fileName.textContent = fileInput.files[0].name; +// } +// } \ No newline at end of file diff --git a/src/vista.js b/src/views/principal.js similarity index 75% rename from src/vista.js rename to src/views/principal.js index 0ea45c74..3a6d3485 100644 --- a/src/vista.js +++ b/src/views/principal.js @@ -1,7 +1,7 @@ export default () => { - const vista = ` + const principal = ` ` - return vista + return principal } \ No newline at end of file diff --git a/src/views/profile.js b/src/views/profile.js new file mode 100644 index 00000000..18466107 --- /dev/null +++ b/src/views/profile.js @@ -0,0 +1,7 @@ +import { root } from "../main.js"; + +export const renderProfileView = () => { + `

Mi perfil

+ ` + root.innerHTML = renderProfileView; +}; \ No newline at end of file diff --git a/src/signIn.js b/src/views/signIn.js similarity index 100% rename from src/signIn.js rename to src/views/signIn.js diff --git a/src/views/viewcontroler.js b/src/views/viewcontroler.js new file mode 100644 index 00000000..bb2becb7 --- /dev/null +++ b/src/views/viewcontroler.js @@ -0,0 +1,16 @@ +import { components } from '../index.js' +import { root } from "../main.js"; +// Funcion que cambia la vista +export const changeView = (route) => { + root.innerHTML = ''; + switch (route) { + case '#/Home': { return root.appendChild(components.home); } + //case '#/Login': { return root.appendChild(components.login); } + case '#/Post': { return root.appendChild(components.post); } + case '#/My_profile': { return root.appendChild(components.profile); } + case '#/Exit': { return root.appendChild(components.exit); } + default: + break; + } + console.log(route); +}; \ No newline at end of file From 88516f6e568e24a022851b08ae28340f34c9494b Mon Sep 17 00:00:00 2001 From: LizethRivera04 <60666768+LizethRivera04@users.noreply.github.com> Date: Tue, 21 Apr 2020 09:00:33 -0500 Subject: [PATCH 05/14] The code was ordered --- src/index.js | 8 ++++---- src/main.js | 16 ++++++---------- src/styles.css | 4 +--- src/views/login.js | 4 ++-- src/views/signIn.js | 6 +++--- 5 files changed, 16 insertions(+), 22 deletions(-) diff --git a/src/index.js b/src/index.js index da6d0c29..ab762fa3 100644 --- a/src/index.js +++ b/src/index.js @@ -32,7 +32,7 @@ export function loginGoogle(errorGooFbkModal) { .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) - guardaDatos(result.user)//Se le manda a la func guardDatos para hacer uns BD + saveDataG(result.user)//Se le manda a la func guardDatos para hacer uns BD //div.innerHTML = `` }) .catch(function (error) { @@ -43,7 +43,7 @@ export function loginGoogle(errorGooFbkModal) { } //Guardar datos gmail en BD -function guardaDatos(user) { +function saveDataG(user) { //console.log(user); const docRef = db.collection('datausers/').doc(user.uid);//la / y el + user.uid hace que no se duplique el usuario docRef.set({ @@ -81,7 +81,7 @@ export function loginFacebook(errorGooFbkModal) { .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); - guardaDatosFb(result.user)//Se le manda a la func guardDatos para hacer una BD + saveDataF(result.user)//Se le manda a la func guardDatos para hacer una BD //div.innerHTML = `` }) .catch(function (error) { @@ -92,7 +92,7 @@ export function loginFacebook(errorGooFbkModal) { } //Guardar datos Fb en BD -function guardaDatosFb(user) { +function saveDataF(user) { //console.log(user); const docRef = db.collection('datausers/').doc(user.uid);//la / y el + user.uid hace que no se duplique el usuario docRef.set({ diff --git a/src/main.js b/src/main.js index f6c0de36..be78649f 100644 --- a/src/main.js +++ b/src/main.js @@ -44,7 +44,6 @@ btnExit.addEventListener('click', signoutUser) //Mostrar vista (una antes de iniciar sesión) function principalView() { - //const divRoot = document.querySelector('#root') root.innerHTML = principal() let goLogin = document.querySelector('#goLogin') goLogin.addEventListener('click', viewLogin) @@ -52,15 +51,14 @@ function principalView() { //Mostrar vista iniciar sesión export function viewLogin() { - //const divRoot = document.querySelector('#root') root.innerHTML = login() let goSignIn = document.querySelector('#goSignIn') //Listeners modales - const btnCloseError = document.querySelector('#btn-cerrar-error'); + const btnCloseError = document.querySelector('#btnCloseError'); btnCloseError.addEventListener('click', closeError); const errorGooFbkModal = document.querySelector('#noAccountGooFbk'); - const btnCloseGoogleError = document.querySelector('#btn-cerrar-noGooFbk'); + const btnCloseGoogleError = document.querySelector('#btnCloseNoGooFbk'); btnCloseGoogleError.addEventListener('click', closeGooFbkError) //Ingresar @@ -90,17 +88,16 @@ export function viewLogin() { export function viewSign(goSignIn) { goSignIn.addEventListener('click', (e) => { e.preventDefault() - //const divRoot = document.querySelector('#root') root.innerHTML = signIn() //Listeners Modales - const btnCloseError = document.querySelector('#btn-cerrar-error'); + const btnCloseError = document.querySelector('#btnCloseError'); btnCloseError.addEventListener('click', closeError); - const btnCloseExist = document.querySelector('#btn-cerrar-exist-error'); + const btnCloseExist = document.querySelector('#btnCloseExistAccount'); btnCloseExist.addEventListener('click', closeErrorExist); let btnBack = document.querySelector('#backOne') const errorGooFbkModal = document.querySelector('#noAccountGooFbk'); - const btnCloseGoogleError = document.querySelector('#btn-cerrar-noGooFbk'); + const btnCloseGoogleError = document.querySelector('#btnCloseNoGooFbk'); btnCloseGoogleError.addEventListener('click', closeGooFbkError) //Crear cuenta @@ -140,8 +137,7 @@ export function viewSign(goSignIn) { function arrowBack(btnBack) { btnBack.addEventListener('click', (e) => { e.preventDefault() - const divRoot = document.querySelector('#root') - divRoot.innerHTML = login() + root.innerHTML = login() viewLogin() }) } diff --git a/src/styles.css b/src/styles.css index 08c0fc63..940c0326 100644 --- a/src/styles.css +++ b/src/styles.css @@ -52,7 +52,6 @@ a{ .rudyIcon{ justify-content: center; color: #A5DED3; - } .modal-content{ @@ -65,8 +64,7 @@ a{ color:#232323; text-align: center; margin: 15px; - padding: 15px; - + padding: 15px; } .imagePop{ diff --git a/src/views/login.js b/src/views/login.js index 9e9cc4ab..2fec35b1 100644 --- a/src/views/login.js +++ b/src/views/login.js @@ -44,7 +44,7 @@ export default () => {

Intenta de nuevo, alguno de tus datos no coincide

- + @@ -56,7 +56,7 @@ export default () => {

No tienes una cuenta

- + diff --git a/src/views/signIn.js b/src/views/signIn.js index 59b95b22..0d00fb55 100644 --- a/src/views/signIn.js +++ b/src/views/signIn.js @@ -43,7 +43,7 @@ export default () => {
- +

ERROR

Comprueba tu correo o contraseña: debe contener al menos 6 caracteres,un número, una minúscula y una mayúscula.

@@ -55,7 +55,7 @@ export default () => {
- +

ERROR

La cuenta ya existe

@@ -71,7 +71,7 @@ export default () => {

No tienes una cuenta

- +
From e3bca0fe6bfe51f3b82707e9536e88a3a49c48b3 Mon Sep 17 00:00:00 2001 From: AniaCuapio <60676655+AniaCuapio@users.noreply.github.com> Date: Tue, 21 Apr 2020 09:48:27 -0500 Subject: [PATCH 06/14] Update post.js --- src/views/post.js | 86 ++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 77 insertions(+), 9 deletions(-) diff --git a/src/views/post.js b/src/views/post.js index 1b9fd41e..b7e0bcd9 100644 --- a/src/views/post.js +++ b/src/views/post.js @@ -1,11 +1,11 @@ import { root } from "../main.js"; - +//Esto dibuja la vista donde se puede agregar un post export const renderPostView = () => { `

Escribe tu microcuento:

- - + +
@@ -14,7 +14,7 @@ export const renderPostView = () => {
- + +
` - root.innerHTML = renderPostView; -}; + root.innerHTML = renderPostView; + + const fileInput = document.querySelector("#file") + fileInput.onchange = (e) =>{ + const file = e.target.file + firebase.storage().ref("postsList").child(file.name).put(file) + .then(snap => { + return snap.ref.getDownloadURL() + }) + .then(link => { + url = link + let img= document.createElement("img") + img.src = link + document.body.appendChild(img) + }) + .catch(err =>{ + alert("Error al cargar el documento"); + }) + } + +//Esto agrega un post nuevo a la lista de posts + + //NODOS + const text = document.querySelector('#body') + const title = document.querySelector("#title") + const newPost = document.querySelector("#newPost") + //Función que trae el texto + newPost.onclick = ()=> { + let post = { + title: title.value, + text: text.value, + // user: user.name.value, + date: new Date(), + img: url + } + addNewPost(post) + .then (res=> { + console.log(res) + }) + .catch(err => { + console.log("No hay nuevo post", err) + }) + } + } -// //Función para el file upload +// //Función para que el file upload traiga el nombre // const fileInput = document.querySelector('#file-js-example input[type=file]'); // fileInput.onchange = () => { @@ -39,4 +82,29 @@ export const renderPostView = () => { // const fileName = document.querySelector('#file-js-example .file-name'); // fileName.textContent = fileInput.files[0].name; // } -// } \ No newline at end of file +// } + +//Funciones de Firebase +let db = firebase.firestore() +let postRef = db.collection("postsList") + +//Esto agrega el post al storage +function addNewPost(post) +{return firebase.firestore().collection("postsList").add(post) +} +//Esto muestra el post nuevo +firebase.firestore().collection("postsList").onSnapshot(snap=>{ + const post = document.querySelector("#posts"); + post.innerHTML = '' + snap.forEach(doc=> { + let renderPosts = `
+

${doc.data().title}

+

${doc.data().body}

+

Author:${doc.data().author}

+ +
` + const newNode = document.createElement("div") + newNode.innerHTML = renderPosts + post.appendChild(newNode) + }) +}) From 6fdef399309a7f38e5fb7a5045bd23fc3742a5fc Mon Sep 17 00:00:00 2001 From: AniaCuapio <60676655+AniaCuapio@users.noreply.github.com> Date: Tue, 21 Apr 2020 09:49:46 -0500 Subject: [PATCH 07/14] Update index.html --- src/index.html | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/index.html b/src/index.html index 8bb01062..367a3541 100644 --- a/src/index.html +++ b/src/index.html @@ -33,17 +33,7 @@ - - - - - - - - - - + - + https://firebase.google.com/docs/web/setup#available-libraries + + @@ -16,12 +16,12 @@ +
- +
` root.innerHTML = posts @@ -46,226 +46,105 @@ export const renderPostView = () => { readFile(fileInput, sectionPosts) -//showPosts(sectionPosts) - } + //showPosts(sectionPosts) +} - function readFile(fileInput, sectionPosts) { +function readFile(fileInput, sectionPosts) { let url fileInput.onchange = (e) => { - console.log(e); - let file = e.target.files[0] - console.log(file); - firebase.storage().ref("postsList").child(file.name).put(file) - .then(snap => { - console.log(snap); - return snap.ref.getDownloadURL() - }) - .then(link => { - url = link - console.log(url); - const img = document.createElement('img') - img.src = url - sectionPosts.appendChild(img) - textImage() - }) - .catch(err => { - alert("Error:", err); - }) - } - function textImage() { - const text = document.querySelector('#body').value - const title = document.querySelector("#title").value - let user = firebase.auth().currentUser; - let post = { - title: title, - text: text, - user: user.displayName, - photo: user.photoURL, - date: new Date(), - img: url - } - addNewPost(post) - .then(res => { - console.log(res) - }) - .catch(err => { - console.log("No hay nuevo post", err) - }) - addPostBD(post) - } - } - - function readText() { - const text = document.querySelector('#body').value - const title = document.querySelector("#title").value - let user = firebase.auth().currentUser; - let post = { - title: title, - text: text, - user: user.displayName, - photo: user.photoURL, - date: new Date(), - } - addNewPost(post) - .then(res => { - console.log(res) - }) - .catch(err => { - console.log("No hay nuevo post", err) - }) - addPostBD(post) - showPosts() - } - -// Se agrega el post a la collección postsList en la BD - function addNewPost(post) { - return firebase.firestore().collection("postsList").add(post) - } - -// Se agregan los post al perfil del usuario - function addPostBD(post) { - let user = firebase.auth().currentUser; - const docRef = firebase.firestore().collection('datausers/').doc(user.uid);//la / y el + user.uid hace que no se duplique el usuario - docRef.update({ - post: firebase.firestore.FieldValue.arrayUnion(post) - }) - } - -//Muestra TODOS los posts en tiempo real -// function showPosts(sectionPosts) { -// firebase.firestore().collection("postsList").orderBy("date", "desc").onSnapshot(snap => { -// clean(sectionPosts) -// snap.forEach(doc => { -// if (doc.data().img === undefined && doc.data().photo === undefined) { -// let renderPosts = `
-//

Autor:${doc.data().user}

-//

Titulo:${doc.data().title}

-//

${doc.data().text}

-// Editar -// Borrar -// Comentar -// -// -//
` -// console.log(doc.data()) -// const newNode = document.createElement("div") -// newNode.innerHTML = renderPosts -// sectionPosts.appendChild(newNode) -// } if (doc.data().photo != undefined) { -// let renderPosts = `
-//

Autor: ${doc.data().user}

-//

Titulo:${doc.data().title}

-//

${doc.data().text}

-// -// Editar -// Borrar -// Comentar -// - -// -//
` -// console.log(doc.data()) -// const newNode = document.createElement("div") -// newNode.innerHTML = renderPosts -// sectionPosts.appendChild(newNode) -// } else { -// let renderPosts = `
-//

Autor: ${doc.data().user}

-//

Titulo:${doc.data().title}

-//

${doc.data().text}

-// -// Editar -// Borrar -// Comentar -// -// -//

Autor:${doc.data().user}

-//

Autor: ${doc.data().user}

-//
-//
` -// console.log(doc.data()) -// const newNode = document.createElement("div") -// newNode.innerHTML = renderPosts -// sectionPosts.appendChild(newNode) - -// //NODO y Listener de los botones -// // const btnEditPost = document.querySelector("#edit") -// // btnEditPost.addEventListener("click", editPost) -// } -// }) -// }) -// } - -// //Antes de poner el nuevo post limpia la sectionPost para evitar se dupliquen -// function clean(sectionPosts) { -// sectionPosts.innerHTML = ''; -// } - -// function editPost(e) { -// console.log(e.target.id) -// console.log("saludos de prueba") -// // const id= event.target.id; -// // let Title = document.querySelector('#Title').contentEditable = "true"; -// // let Tale = document.querySelector('#Tale').contentEditable = "true"; -// let btnSave = document.querySelector('#SavePost'); -// btnSave.style = "display:block"; -// } - -////////////////////////////////////////////////// -// function saveEditPost(e) { -// const id = e.target.dataset.id; -// const saveText = document.querySelector(`#text[data-id='${id}']`); -// const newText = saveText.textContent; -// firebase.firestore().collection('postsList').doc(id).update({ -// text: newText, -// }); -// saveText.setAttribute('contentEditable', 'false'); - -// function deletePost(e) { -// const id = e.target.dataset.id; -// //Esto sí lo borra-> firebase.firestore().collection('postsList').doc(id).delete(); -// postContainer = document.querySelector(`#PostContainer[data-id='${id}']`) -// postContainer.style.display = "none"; -// //.remove(); -// }; - // function likePost (e) { - // const id = e.target.dataset.id; - // const like= document.querySelector(`#Love[data-id='${id}']`); - // const likeCounter = parseInt(like.textContent) + 1; - // like.textContent = likeCounter - // firebase.firestore().collection('posts').doc(id).update({likes: likeCounter}); - // let post = firebase.firestore().collection('posts').doc(); - // } -// } - - - -// ////Prueba Edicion -// let sectionPosts = document.querySelector("#PostContainer"); -// let render = document.querySelector("#renderPost") -// render = addEventListener("click", renderPostView) - -// export function renderPostView(){ -// let postTemplate= ` -//

Autor desconocido

-//

cualquier Título

-//

un cuento chino

-// ` - -// const newNode = document.createElement("div") -// newNode.innerHTML = postTemplate -// root.appendChild(newNode) + console.log(e); + let file = e.target.files[0] + console.log(file); + firebase.storage().ref("postsList").child(file.name).put(file) + .then(snap => { + console.log(snap); + return snap.ref.getDownloadURL() + }) + .then(link => { + url = link + console.log(url); + const img = document.createElement('img') + img.src = url + sectionPosts.appendChild(img) + textImage() + }) + .catch(err => { + alert("Error:", err); + }) + } + function textImage() { + const text = document.querySelector('#body').value + const title = document.querySelector("#title").value + const text = document.querySelector('#body').value + const title = document.querySelector("#title").value + firebase.auth().onAuthStateChanged(function (user) { + //console.log(user); + const docRef = db.collection('datausers/').doc(user.uid); + docRef.get().then(function (snapshot) { + let userData = snapshot.data(); + console.log(userData); + let post = { + title: title, + text: text, + user: user.displayName, + photo: user.photoURL, + date: new Date(), + img: url, + uid: userData.uid + } + addNewPost(post) + .then(res => { + console.log(res) + }) + .catch(err => { + console.log("No hay nuevo post", err) + }) + addPostBD(post) + }) + }) + } -// const btnEditPost = document.querySelector("#EditPost") -// btnEditPost.addEventListener("click", editPost) -// } + function readText() { + const text = document.querySelector('#body').value + const title = document.querySelector("#title").value + firebase.auth().onAuthStateChanged(function (user) { + //console.log(user); + const docRef = db.collection('datausers/').doc(user.uid); + docRef.get().then(function (snapshot) { + let userData = snapshot.data(); + console.log(userData); + let post = { + title: title, + text: text, + user: user.displayName, + photo: user.photoURL, + date: new Date(), + uid: userData.uid + } + addNewPost(post) + .then(res => { + console.log(res) + }) + .catch(err => { + console.log("No hay nuevo post", err) + }) + addPostBD(post) + showPosts() + }) + }) + }; + + // Se agrega el post a la collección postsList en la BD + function addNewPost(post) { + return firebase.firestore().collection("postsList").add(post) + } -// function editPost(e){ -// console.log("saludos de prueba") -// const id= event.target.id; -// let Title = document.querySelector('#postTitle').contentEditable = "true"; -// let Tale = document.querySelector('#postText').contentEditable = "true"; -// let btnSave = document.querySelector('#SavePost'); -// btnSave.style = "display:block"; -// } -// //////////Fin de prueba \ No newline at end of file + // Se agregan los post al perfil del usuario + function addPostBD(post) { + let user = firebase.auth().currentUser; + const docRef = firebase.firestore().collection('datausers/').doc(user.uid);//la / y el + user.uid hace que no se duplique el usuario + docRef.update({ + post: firebase.firestore.FieldValue.arrayUnion(post) + }) + } +} \ No newline at end of file From bd7603e1154a4f655a4409705c8d2a3f57cba8be Mon Sep 17 00:00:00 2001 From: AniaCuapio Date: Mon, 4 May 2020 16:58:08 -0500 Subject: [PATCH 14/14] Evitar problemas en index y main --- src/index.js | 129 ++++++++++++++++--------------- src/main.js | 189 ++++++++++++++++++++++------------------------ src/views/post.js | 2 - 3 files changed, 159 insertions(+), 161 deletions(-) diff --git a/src/index.js b/src/index.js index 71b88e75..85315b02 100644 --- a/src/index.js +++ b/src/index.js @@ -6,13 +6,6 @@ import { renderPostView } from "./views/post.js" import { renderProfileView } from "./views/profile.js" import { userObserverProfile } from "./views/profile.js" -// export const components = { -// home: showPosts, -// post: renderPostView, -// profile: renderProfileView, -// }; - - //Instanciar Firestore const db = firebase.firestore(); @@ -31,8 +24,10 @@ export function loginGoogle(errorGooFbkModal) { .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 - //div.innerHTML = `` - showPosts() + renderPostView(); + //userObserverProfile() + + }) .catch(function (error) { errorGooFbkModal.classList.add('is-active'); @@ -44,19 +39,33 @@ export function loginGoogle(errorGooFbkModal) { //Guardar datos gmail en BD function saveDataG(user) { //console.log(user); - const docRef = db.collection('datausers/').doc(user.uid);//la / y el + user.uid hace que no se duplique el usuario - docRef.set({ - uid: user.uid,//Servirá para eliminar - name: user.displayName,//Se obtiene el nom - email: user.email, - photo: user.photoURL + 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); + }) + + } }) - .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) } @@ -81,7 +90,9 @@ export function loginFacebook(errorGooFbkModal) { 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() + //userObserverProfile() + renderPostView(); + //div.innerHTML = `` }) @@ -95,19 +106,31 @@ export function loginFacebook(errorGooFbkModal) { //Guardar datos Fb en BD function saveDataF(user) { //console.log(user); - const docRef = db.collection('datausers/').doc(user.uid);//la / y el + user.uid hace que no se duplique el usuario - docRef.set({ - uid: user.uid, - name: user.displayName, - email: user.email, - photo: user.photoURL + 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); + }) + + } }) - .then(function () { - console.log('Los datos se guardaron'); - }) - .catch(function (error) { - console.log('Hubo en error:', error); - }) updateDataFb(docRef) } @@ -136,8 +159,7 @@ export function createUser(newName, newEmail, newPassword, registryModal, alread 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'); @@ -156,6 +178,8 @@ function saveEmailBD(newName, newEmail, newPassword, user) { 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 }) @@ -176,6 +200,7 @@ export function loginUser(email, password, errorModal) { .then(function (user) { console.log('Datos correctos, bienvenido!') //console.log(user); + renderPostView() }) .catch(function (error) { errorModal.classList.add('is-active'); @@ -190,44 +215,26 @@ export function signoutUser() { //e.preventDefault() firebase.auth().signOut(); console.log('Adiós Bye'); - const divRoot = document.querySelector('#root') - divRoot.innerHTML = "" + /* 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); - + console.log(myData) }) } else { // No user is signed in. console.log('No user'); } - }); - } -userObserver() - -//Actualización de perfil -/* function profileUpdate(user) { - //var user = firebase.auth().currentUser; - - user.updateProfile({ - displayName: "Lizeth", - photoURL: "" - }).then(function () { - console.log('los dtos se actualizaron'); - - // Update successful. - }).catch(function (error) { - // An error happened. - console.log(error); - - }); -} */ +userObserver() \ No newline at end of file diff --git a/src/main.js b/src/main.js index eaaf90db..6723ad4c 100644 --- a/src/main.js +++ b/src/main.js @@ -1,21 +1,22 @@ -//import { changeView } from './views/viewcontroler.js' -// import { renderHomeView } from "./views/home.js"; import { renderPostView } from "./views/post.js" import { showPosts } from "./views/home.js" import { renderProfileView } from "./views/profile.js" +import { showPosts } from "./views/home.js" +import { userObserverProfile } from "./views/profile.js" +import { renderExitView } from "./views/exit.js" import login from "./views/login.js" import signIn from "./views/signIn.js" import principal from "./views/principal.js" - -import { loginGoogle } from './index.js'//Se importa para usar addEventListener -import { loginFacebook } from './index.js' -import { createUser } from './index.js' -import { loginUser } from './index.js' -import { signoutUser } from './index.js' +import { loginGoogle } from '/index.js'// Se importa para usar addEventListener +import { loginFacebook } from '/index.js' +import { createUser } from '/index.js' +import { loginUser } from '/index.js' +import { signoutUser } from '/index.js' // Nodos export const root = document.querySelector('#root'); export const showP = document.querySelector('#showP') +export const navBar = document.querySelector('#navBar'); const homeButton = document.querySelector('#home'); const postButton = document.querySelector('#post'); const profileButton = document.querySelector('#profile'); @@ -24,122 +25,114 @@ const exitButton = document.querySelector('#exit'); // listeners homeButton.addEventListener("click", showPosts) postButton.addEventListener("click", renderPostView) +profileButton.addEventListener('click', userObserverProfile); exitButton.addEventListener("click", signoutUser) -profileButton.addEventListener("click", renderProfileView) - - -// Función de inicio que cambia la URL -// const init = () => { -// window.addEventListener('hashchange', () => changeView(window.location.hash)) -// } -// window.addEventListener('load', init); -//Boton para mostrar iniciar sesión -const btnshow = document.querySelector('#showLogin') -btnshow.addEventListener('click', principalView) +window.onload = principalView(); -//Mostrar vista (una antes de iniciar sesión) -function principalView() { - root.innerHTML = principal() +export function principalView() { + root.innerHTML = principal(); let goLogin = document.querySelector('#goLogin') goLogin.addEventListener('click', viewLogin) } -window.onload = principalView(); - -//Mostrar vista iniciar sesión +// Mostrar vista iniciar sesión export function viewLogin() { root.innerHTML = login() - let goSignIn = document.querySelector('#goSignIn') - - //Listeners modales - const btnCloseError = document.querySelector('#btnCloseError'); - btnCloseError.addEventListener('click', closeError); - const errorGooFbkModal = document.querySelector('#noAccountGooFbk'); - const btnCloseGoogleError = document.querySelector('#btnCloseNoGooFbk'); - btnCloseGoogleError.addEventListener('click', closeGooFbkError) - - //Ingresar - let btnEnter = document.querySelector('#enter') - btnEnter.addEventListener('click', function (e) { - e.preventDefault() - let email = document.querySelector('#email').value - let password = document.querySelector('#password').value - const errorModal = document.querySelector('#errorModal'); - /* console.log(email); - console.log(password); */ - loginUser(email, password, errorModal) - }) - //Ocultar Modaless - function closeError() { - errorModal.classList.remove('is-active'); - } - function closeGooFbkError() { - errorGooFbkModal.classList.remove('is-active'); - } - viewSign(goSignIn) - loginGoogle(errorGooFbkModal) - loginFacebook(errorGooFbkModal) -} + let goSignIn = document.querySelector('#goSignIn'); -//Mostrar vista Resgistro -export function viewSign(goSignIn) { - goSignIn.addEventListener('click', (e) => { - e.preventDefault() - root.innerHTML = signIn() + //Mostrar vista iniciar sesión + export function viewLogin() { + root.innerHTML = login() + let goSignIn = document.querySelector('#goSignIn') - //Listeners Modales + + // Listeners modales const btnCloseError = document.querySelector('#btnCloseError'); btnCloseError.addEventListener('click', closeError); - const btnCloseExist = document.querySelector('#btnCloseExistAccount'); - btnCloseExist.addEventListener('click', closeErrorExist); - let btnBack = document.querySelector('#backOne') const errorGooFbkModal = document.querySelector('#noAccountGooFbk'); const btnCloseGoogleError = document.querySelector('#btnCloseNoGooFbk'); btnCloseGoogleError.addEventListener('click', closeGooFbkError) - //Crear cuenta - let btnRegister = document.querySelector('#signIn') - btnRegister.addEventListener('click', function (e) { + //Ingresar + let btnEnter = document.querySelector('#enter') + btnEnter.addEventListener('click', function (e) { e.preventDefault() - - //Leer variables del form - const newName = document.querySelector('#newName').value - const newEmail = document.querySelector('#newEmail').value - const newPassword = document.querySelector('#newPassword').value - const registryModal = document.querySelector('#registryModal');// el id lo tiene el overlay - const alreadyExistModal = document.querySelector('#alreadyExistModal'); - /* console.log(newName); - console.log(newEmail); - console.log(newPassword); */ - createUser(newName, newEmail, newPassword, registryModal, alreadyExistModal) - - + let email = document.querySelector('#email').value + let password = document.querySelector('#password').value + const errorModal = document.querySelector('#errorModal'); + /* console.log(email); + console.log(password); */ + loginUser(email, password, errorModal) }) - //Ocultar Modales + //Ocultar Modaless function closeError() { - registryModal.classList.remove('is-active'); - } - function closeErrorExist() { - alreadyExistModal.classList.remove('is-active'); + errorModal.classList.remove('is-active'); } function closeGooFbkError() { errorGooFbkModal.classList.remove('is-active'); } - arrowBack(btnBack) + viewSign(goSignIn) loginGoogle(errorGooFbkModal) loginFacebook(errorGooFbkModal) - }) + } + //Mostrar vista Resgistro + export function viewSign(goSignIn) { + goSignIn.addEventListener('click', (e) => { + e.preventDefault() + root.innerHTML = signIn() + + //Listeners Modales + const btnCloseError = document.querySelector('#btnCloseError'); + btnCloseError.addEventListener('click', closeError); + const btnCloseExist = document.querySelector('#btnCloseExistAccount'); + btnCloseExist.addEventListener('click', closeErrorExist); + let btnBack = document.querySelector('#backOne') + const errorGooFbkModal = document.querySelector('#noAccountGooFbk'); + const btnCloseGoogleError = document.querySelector('#btnCloseNoGooFbk'); + btnCloseGoogleError.addEventListener('click', closeGooFbkError) + + //Crear cuenta + let btnRegister = document.querySelector('#signIn') + btnRegister.addEventListener('click', function (e) { + e.preventDefault() + + //Leer variables del form + const newName = document.querySelector('#newName').value + const newEmail = document.querySelector('#newEmail').value + const newPassword = document.querySelector('#newPassword').value + const registryModal = document.querySelector('#registryModal');// el id lo tiene el overlay + const alreadyExistModal = document.querySelector('#alreadyExistModal'); + /* console.log(newName); + console.log(newEmail); + console.log(newPassword); */ + createUser(newName, newEmail, newPassword, registryModal, alreadyExistModal) + + + }) + //Ocultar Modales + function closeError() { + registryModal.classList.remove('is-active'); + } + function closeErrorExist() { + alreadyExistModal.classList.remove('is-active'); + } + function closeGooFbkError() { + errorGooFbkModal.classList.remove('is-active'); + } + arrowBack(btnBack) + loginGoogle(errorGooFbkModal) + loginFacebook(errorGooFbkModal) + }) -} + } -//Regresar a inicio de sesión -function arrowBack(btnBack) { - btnBack.addEventListener('click', (e) => { - e.preventDefault() - root.innerHTML = login() - viewLogin() - }) + //Regresar a inicio de sesión + function arrowBack(btnBack) { + btnBack.addEventListener('click', (e) => { + e.preventDefault() + root.innerHTML = login() + viewLogin() + }) + } } - - diff --git a/src/views/post.js b/src/views/post.js index 1302024e..958d46cc 100644 --- a/src/views/post.js +++ b/src/views/post.js @@ -73,8 +73,6 @@ function readFile(fileInput, sectionPosts) { }) } function textImage() { - const text = document.querySelector('#body').value - const title = document.querySelector("#title").value const text = document.querySelector('#body').value const title = document.querySelector("#title").value firebase.auth().onAuthStateChanged(function (user) {