From b4811628949a0cd3c4a3f3868e315742dcc82037 Mon Sep 17 00:00:00 2001 From: Oralia Date: Fri, 17 Apr 2020 09:25:51 -0500 Subject: [PATCH 01/15] Permite Crear una cuenta e ingresar a iun usuario existente --- src/example.js | 3 --- src/firebase.js | 19 ++++++++++++++++ src/index.html | 56 ++++++++++++++++++++++++++++++++++++++++++--- src/index.js | 60 +++++++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 130 insertions(+), 8 deletions(-) delete mode 100644 src/example.js create mode 100644 src/firebase.js diff --git a/src/example.js b/src/example.js deleted file mode 100644 index 52d2c7ea..00000000 --- a/src/example.js +++ /dev/null @@ -1,3 +0,0 @@ -export const example = () => { - // aquí tu código -} \ No newline at end of file diff --git a/src/firebase.js b/src/firebase.js new file mode 100644 index 00000000..3aee9645 --- /dev/null +++ b/src/firebase.js @@ -0,0 +1,19 @@ +export { checkIn }; + +function checkIn(email, pass) { + + console.log(email); + console.log(pass); + + firebase.auth().createUserWithEmailAndPassword(email, pass).catch(function(error) { + // Handle Errors here. + var errorCode = error.code; + var errorMessage = error.message; + // ... + alert(errorCode); + alert(errorMessage); + }); + + // que hago despues? -- esta funcion debería llamar a otra funcion que dibuje... (createAccount), (renderHome) + // renderHome() + } diff --git a/src/index.html b/src/index.html index bb6937cc..bf3bfb0c 100644 --- a/src/index.html +++ b/src/index.html @@ -4,9 +4,59 @@ - Document + Social Network + + + + + + + + + + + + - - +

Healt & Fitness

+

Inicia Sesion

+ +
+ + + + +
+ + + +

No tienes Cuenta?

+
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 35868bab..1c0c1835 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,59 @@ -import { example } from './example.js'; +import { checkIn } from './firebase.js'; -example(); +const logInButton = document.querySelector('#logIn'); + +const creatAccountButton = document.querySelector('#creatAccount'); + +function createAccount() { + + let createAccountView = ` +
+ + +
+ + +
` + // primero se dibuja en el DOM + root.innerHTML = createAccountView + // escuchar primero hay que manipular + let checkInButton = document.querySelector('#checkIn') + let email = document.querySelector('#email') + let pass = document.querySelector('#pass') + checkInButton.onclick = e=>checkIn(email.value, pass.value) // listener que ejecuta la funcion de Firebase + + } + creatAccountButton.onclick = createAccount + + + + + +function logIn(){ + + let emailLogIn = document.querySelector('#emailLogIn').value + let passLogIn = document.querySelector('#passLogIn').value + console.log(emailLogIn); + + + console.log(passLogIn); + + + + firebase.auth().signInWithEmailAndPassword(emailLogIn, passLogIn).catch(function(error) { + // Handle Errors here. + var errorCode = error.code; + alert(errorCode); + var errorMessage = error.message; + alert(errorMessage); + // ... + + }); + + let loginView = ` + ` + root.innerHTML = loginView + + } + + logInButton.onclick = logIn; From 181db65a8819da68b02590efcc942ea8aa4e289c Mon Sep 17 00:00:00 2001 From: Oralia Date: Sat, 18 Apr 2020 18:15:35 -0500 Subject: [PATCH 02/15] El usuario puede ingresar con su cuenta de google --- src/index.html | 14 ++++++++---- src/index.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 5 deletions(-) diff --git a/src/index.html b/src/index.html index bf3bfb0c..45ca2176 100644 --- a/src/index.html +++ b/src/index.html @@ -9,8 +9,7 @@ - - + @@ -37,19 +36,24 @@

Healt & Fitness

+ +

Inicia Sesion

+
- - -
- +

Healt & Fitness

+
+ -
- - - + ` root.innerHTML = homeView let toggleButton=document.querySelector('#toggle'); @@ -167,7 +164,7 @@ function createAccount() { let datos=snapshot.val(); let result=""; for (var key in datos){ - result += ''; + result += ''; } document.getElementById("root").innerHTML=result; }) @@ -210,7 +207,6 @@ function createAccount() { } - function menu (){ document.getElementById('sidebar').classList.toggle('active'); diff --git a/src/styles.css b/src/styles.css index 76b803bf..c1ba5195 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,8 +1,8 @@ -/*body{ +body{ background: linear-gradient(180deg, rgb(39, 250, 127), rgb(208, 253, 228), rgb(9, 209, 162)); -mix-blend-mode: soft-light; +/*mix-blend-mode: soft-light;*/ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25); -}*/ +} * { @@ -14,7 +14,7 @@ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25); position: fixed; width: 200px; height: 100%; - background: #151719; + background: #FFC719; left: -200px; transition: all 500ms linear; } @@ -24,7 +24,7 @@ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25); } #sidebar ul li { - color: rgba(230, 230, 230, .9); + color: black; list-style: none; padding: 15px 10px; border-bottom: 1px solid rgba(100, 100, 100, .3); @@ -39,9 +39,32 @@ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25); } #sidebar .toggle-btn span { + background-color: #FFC719; display: block; width: 40px; text-align: center; font-size: 30px; border: 3px solid #000; + } + + #PostButton{ + padding: 2px; + background-color: #FFC719; + width: 180px; + position: relative; + + } + p { + text-align: center; + } + + #fichero{ + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + width: 100%; + height:100% ; + opacity:0 ; } \ No newline at end of file From d5b01a10334a3308f4a63304e624af645731b296 Mon Sep 17 00:00:00 2001 From: Oralia Date: Fri, 8 May 2020 00:51:58 -0500 Subject: [PATCH 15/15] se agrgan los modulos de authenticationy post --- algo.test.js | 0 ejemplo.js | 4 - src/authentication.js | 152 +++++++++++++++++++++++++++++++++++++ src/firebase.js | 115 ---------------------------- src/index.js | 172 ++---------------------------------------- src/post.js | 130 +++++++++++++++++++++++++++++++ src/styles.css | 4 +- 7 files changed, 289 insertions(+), 288 deletions(-) delete mode 100644 algo.test.js delete mode 100644 ejemplo.js create mode 100644 src/authentication.js create mode 100644 src/post.js diff --git a/algo.test.js b/algo.test.js deleted file mode 100644 index e69de29b..00000000 diff --git a/ejemplo.js b/ejemplo.js deleted file mode 100644 index 4df0f496..00000000 --- a/ejemplo.js +++ /dev/null @@ -1,4 +0,0 @@ -exports.generateAlgo=(post)=>{ - - return ("Oralia"); -} \ No newline at end of file diff --git a/src/authentication.js b/src/authentication.js new file mode 100644 index 00000000..25e267ed --- /dev/null +++ b/src/authentication.js @@ -0,0 +1,152 @@ +export {logIn,createAccount, checkIn, logInFacebook, logInGoogle}; +import {home} from './post.js'; +import {init} from './index.js'; + +const provider = new firebase.auth.GoogleAuthProvider();//proveedor del servicio + +function logIn(emailLogIn, passLogIn){ + + console.log(emailLogIn); + + console.log(passLogIn); + //home () + firebase.auth().signInWithEmailAndPassword(emailLogIn, passLogIn).catch(function(error) { + + // Handle Errors here. + var errorCode = error.code; + alert(errorCode); + var errorMessage = error.message; + alert(errorMessage); + // ... + + }); + + } + + //const createAccountButton = document.querySelector('#creatAccount'); + + function createAccount() { + + document.getElementById('logInUser').style.display = 'none'; + document.getElementById('init').style.display = 'none'; + document.getElementById('logInNetwoork').style.display = 'none'; + document.getElementById('LogInNewUser').style.display = 'none'; + const createAccountView = ` + ` + // primero se dibuja en el DOM + root.innerHTML = createAccountView + // escuchar primero hay que manipular + let checkInButton = document.querySelector('#checkIn') + let backButton = document.querySelector('#back') + let email = document.querySelector('#email') + let pass = document.querySelector('#pass') + checkInButton.onclick = e=>checkIn(email.value, pass.value) // listener que ejecuta la funcion de Firebase + backButton.onclick = e=> init() + } + +function checkIn(email, pass) { + + console.log(email); + console.log(pass); + firebase.auth().createUserWithEmailAndPassword(email, pass).catch(function (error) { + // Handle Errors here. + const errorCode = error.code; + const errorMessage = error.message; + // ... + alert(errorCode); + alert(errorMessage); + + }); + + +} + + +function logInFacebook () { + + const provider = new firebase.auth.FacebookAuthProvider(); + firebase.auth().signInWithPopup(provider).then(function(result) { + /// This gives you a Facebook Access Token. You can use it to access the Facebook API. + var token = result.credential.accessToken; + // The signed-in user info. + var user = result.user; + // ... + // console.log(user); + + }).catch(function(error) { + // Handle Errors here. + var errorCode = error.code; + var errorMessage = error.message; + // The email of the user's account used. + var email = error.email; + // The firebase.auth.AuthCredential type that was used. + var credential = error.credential; + // ... + }); + +} + + + +function logInGoogle (){ + firebase.auth().signInWithPopup(provider).then(function(result) { + // This gives you a Google Access Token. You can use it to access the Google API. + var token = result.credential.accessToken; + // The signed-in user info. + var user = result.user; + // ... + // console.log(user); + + // Cuando hacemos login con google ocultamos todos los input y los botones + document.getElementById('logInUser').style.display="none"; + document.getElementById('init').style.display="none"; + document.getElementById('logInNetwoork').style.display="none"; + document.getElementById('LogInNewUser').style.display="none"; + console.log(user); + // document.getElementById("root").innerHTML=""; + + }).catch(function(error) { + // Handle Errors here. + var errorCode = error.code; + var errorMessage = error.message; + // The email of the user's account used. + var email = error.email; + // The firebase.auth.AuthCredential type that was used. + var credential = error.credential; + // ... + }); + +} + + + +function observador () { + firebase.auth().onAuthStateChanged(function(user) { + if (user) { + console.log("Existe Usuario activo"); + home (); + var displayName = user.displayName; + var email = user.email; + var emailVerified = user.emailVerified; + var photoURL = user.photoURL; + var isAnonymous = user.isAnonymous; + var uid = user.uid; + var providerData = user.providerData; + // ... + } else { + // User is signed out. + console.log("No existe usuario activo"); + // ... + } + }); + +} + +observador (); diff --git a/src/firebase.js b/src/firebase.js index 0342c9eb..c7ff8794 100644 --- a/src/firebase.js +++ b/src/firebase.js @@ -1,119 +1,4 @@ -export { checkIn, logInFacebook, logInGoogle, close}; -import {home,init} from './index.js'; -const provider = new firebase.auth.GoogleAuthProvider();//proveedor del servicio -//const logInGoogleButton = document.querySelector('#logInGoogle'); - -//const logInFacebookButton = document.querySelector('#logInFacebook'); - - - -function checkIn(email, pass) { - - console.log(email); - console.log(pass); - firebase.auth().createUserWithEmailAndPassword(email, pass).catch(function (error) { - // Handle Errors here. - const errorCode = error.code; - const errorMessage = error.message; - // ... - alert(errorCode); - alert(errorMessage); - - }); - - home () -} - - -function logInFacebook () { - - const provider = new firebase.auth.FacebookAuthProvider(); - firebase.auth().signInWithPopup(provider).then(function(result) { - /// This gives you a Facebook Access Token. You can use it to access the Facebook API. - var token = result.credential.accessToken; - // The signed-in user info. - var user = result.user; - // ... - // console.log(user); - - }).catch(function(error) { - // Handle Errors here. - var errorCode = error.code; - var errorMessage = error.message; - // The email of the user's account used. - var email = error.email; - // The firebase.auth.AuthCredential type that was used. - var credential = error.credential; - // ... - }); - home () -} - - - -function logInGoogle (){ - firebase.auth().signInWithPopup(provider).then(function(result) { - // This gives you a Google Access Token. You can use it to access the Google API. - var token = result.credential.accessToken; - // The signed-in user info. - var user = result.user; - // ... - // console.log(user); - - // Cuando hacemos login con google ocultamos todos los input y los botones - document.getElementById('logInUser').style.display="none"; - document.getElementById('init').style.display="none"; - document.getElementById('logInNetwoork').style.display="none"; - document.getElementById('LogInNewUser').style.display="none"; - console.log(user); - // document.getElementById("root").innerHTML=""; - home () - }).catch(function(error) { - // Handle Errors here. - var errorCode = error.code; - var errorMessage = error.message; - // The email of the user's account used. - var email = error.email; - // The firebase.auth.AuthCredential type that was used. - var credential = error.credential; - // ... - }); - -} - - - - - - /*Verificando usuarios logeados - firebase.auth().onAuthStateChanged(function(user) { - if (user) { - // User is signed in. - var displayName = user.displayName; - var email = user.email; - var emailVerified = user.emailVerified; - var photoURL = user.photoURL; - var isAnonymous = user.isAnonymous; - var uid = user.uid; - var providerData = user.providerData; - //document.getElementById('home').innerHTML= - //`

Bienvenido `+user.email+`

- // - // `; - } else { - // User is signed out. - document.getElementById('home').innerHTML="Signed out"; - } - });*/ - - //Cerrando sesión - function close(){ - firebase.auth().signOut() - console.log("cerrado"); - init() - - }; \ No newline at end of file diff --git a/src/index.js b/src/index.js index b3370b4e..b2373cdc 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ -import { checkIn, logInFacebook, logInGoogle, close}from './firebase.js'; -export{home,init} +import {home, close} from './post.js' +import {logIn, createAccount, checkIn, logInFacebook, logInGoogle}from './authentication.js' +export {init}; window.onload= init(); @@ -41,174 +42,11 @@ window.onload= init(); logInFacebookButoon.onclick = e => logInFacebook () let logInGoogleButton = document.querySelector('#logInGoogle') logInGoogleButton.onclick = e => logInGoogle () + let creatAccountButton = document.querySelector('#creatAccount') + creatAccountButton.onclick= e => createAccount() } - function logIn(emailLogIn, passLogIn){ - - console.log(emailLogIn); - - console.log(passLogIn); - //home () - firebase.auth().signInWithEmailAndPassword(emailLogIn, passLogIn).catch(function(error) { - - // Handle Errors here. - var errorCode = error.code; - alert(errorCode); - var errorMessage = error.message; - alert(errorMessage); - // ... - - }); - - } - - const creatAccountButton = document.querySelector('#creatAccount'); - - function createAccount() { - - document.getElementById('logInUser').style.display = 'none'; - document.getElementById('init').style.display = 'none'; - document.getElementById('logInNetwoork').style.display = 'none'; - document.getElementById('LogInNewUser').style.display = 'none'; - const createAccountView = ` - ` - // primero se dibuja en el DOM - root.innerHTML = createAccountView - // escuchar primero hay que manipular - let checkInButton = document.querySelector('#checkIn') - let backButton = document.querySelector('#back') - let email = document.querySelector('#email') - let pass = document.querySelector('#pass') - checkInButton.onclick = e=>checkIn(email.value, pass.value) // listener que ejecuta la funcion de Firebase - backButton.onclick = e=> init() - } - creatAccountButton.onclick = createAccount; - - - //esta es la funcion donde se realizan las publicaciones - function home (){ - - let homeView = ` - - -

Healt & Fitness

-
- -
- -
- -
- ` - root.innerHTML = homeView - let toggleButton=document.querySelector('#toggle'); - - toggleButton.onclick= e=> menu() - - let homeButton = document.querySelector('#home'); - homeButton.onclick = e=> home() - - let closeButton = document.querySelector('#close'); - - closeButton.onclick = e=> close() - - let selectImagenButton = document.querySelector('#fichero') - - selectImagenButton.onclick = e=>selectImagen() - - } - - - let fichero; - let imagenStorageRef; - let imagenesRef; - - - - function selectImagen () { - fichero = document.getElementById("fichero"); - imagenStorageRef=firebase.storage().ref(); - imagenesRef=firebase.database().ref().child("publicaiones"); - - fichero.addEventListener("change",loadImagen,false); - - showImagenStorage (); - - } - function showImagenStorage () { - - imagenesRef.on("value",function (snapshot){ - let datos=snapshot.val(); - let result=""; - for (var key in datos){ - result += ''; - } - document.getElementById("root").innerHTML=result; - }) - - } - - - - function loadImagen(){ - let imagen = fichero.files[0]; - - var uploadTask = imagenStorageRef.child('publicaciones/' + imagen.name).put(imagen); - - uploadTask.on('state_changed', function(snapshot){ - var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; - console.log('Upload is ' + progress + '% done'); - switch (snapshot.state) { - case firebase.storage.TaskState.PAUSED: // or 'paused' - console.log('Upload is paused'); - break; - case firebase.storage.TaskState.RUNNING: // or 'running' - console.log('Upload is running'); - break; - } - }, function(error) { - alert("hubo un error"); - }, function() { - uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) { - console.log('File available at', downloadURL); - crearNodoBDFB(imagen.name,downloadURL); - }); - }); - - } - - - function crearNodoBDFB( nombreImagen, downloadURL){ - imagenesRef.push({nombre:nombreImagen, url:downloadURL}); - } - - -function menu (){ - document.getElementById('sidebar').classList.toggle('active'); - -} \ No newline at end of file diff --git a/src/post.js b/src/post.js new file mode 100644 index 00000000..c7037067 --- /dev/null +++ b/src/post.js @@ -0,0 +1,130 @@ +import {init}from './index.js' +export {home,close}; + + //esta es la funcion donde se realizan las publicaciones + function home (){ + + let homeView = ` + + +

Healt & Fitness

+
+ +
+ +
+ +
+ + ` + root.innerHTML = homeView + let toggleButton=document.querySelector('#toggle'); + + toggleButton.onclick= e=> menu() + + let homeButton = document.querySelector('#home'); + homeButton.onclick = e=> home() + + let closeButton = document.querySelector('#close'); + + closeButton.onclick = e=> close() + + let selectImagenButton = document.querySelector('#fichero') + + selectImagenButton.onclick = e=>selectImagen() + + } + + +let fichero; +let imagenStorageRef; +let imagenesRef; + + + +function selectImagen () { + fichero = document.getElementById("fichero"); + imagenStorageRef=firebase.storage().ref(); + imagenesRef=firebase.database().ref().child("publicaiones"); + + fichero.addEventListener("change",loadImagen,false); + + showImagenStorage (); + +} + function showImagenStorage () { + + imagenesRef.on("value",function (snapshot){ + let datos=snapshot.val(); + let result=""; + for (var key in datos){ + result += ''; + } + document.getElementById("root").innerHTML=result; + }) + + } + + + +function loadImagen(){ + + let imagen = fichero.files[0]; + + var uploadTask = imagenStorageRef.child('publicaciones/' + imagen.name).put(imagen); + + uploadTask.on('state_changed', function(snapshot){ + var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; + console.log('Upload is ' + progress + '% done'); + switch (snapshot.state) { + case firebase.storage.TaskState.PAUSED: // or 'paused' + console.log('Upload is paused'); + break; + case firebase.storage.TaskState.RUNNING: // or 'running' + console.log('Upload is running'); + break; + } +}, function(error) { + alert("hubo un error"); +}, function() { + uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) { + console.log('File available at', downloadURL); + crearNodoBDFB(imagen.name,downloadURL); + }); +}); + + } + + + function crearNodoBDFB( nombreImagen, downloadURL){ + imagenesRef.push({nombre:nombreImagen, url:downloadURL}); + } + + +function menu (){ + +document.getElementById('sidebar').classList.toggle('active'); + +} + + //Cerrando sesión +function close(){ + firebase.auth().signOut() + alert("Cerrando Sesion") + init() + +}; \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index c1ba5195..353f11b5 100644 --- a/src/styles.css +++ b/src/styles.css @@ -12,8 +12,8 @@ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25); #sidebar { position: fixed; - width: 200px; - height: 100%; + width: 150px; + height: 32%; background: #FFC719; left: -200px; transition: all 500ms linear;