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..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"
}
-}
\ 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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
\ No newline at end of file
+
+
diff --git a/src/index.js b/src/index.js
index 35868bab..85315b02 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,240 @@
-import { example } from './example.js';
+import { root } from "../main.js";
+import { viewLogin } from '/main.js'
+import { viewSign } from '/main.js'
+import { showPosts } from "./views/home.js"
+import { renderPostView } from "./views/post.js"
+import { renderProfileView } from "./views/profile.js"
+import { userObserverProfile } from "./views/profile.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();
+
+//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)
+ saveDataG(result.user)//Se le manda a la func guardDatos para hacer uns BD
+ renderPostView();
+ //userObserverProfile()
+
+
+ })
+ .catch(function (error) {
+ errorGooFbkModal.classList.add('is-active');
+ console.log('error:', error);
+ })
+ });
+}
+
+//Guardar datos gmail en BD
+function saveDataG(user) {
+ //console.log(user);
+ 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);
+ })
+
+ }
+ })
+ /* const docRef = db.collection('datausers/').doc(user.uid);//la / y el + user.uid hace que no se duplique el usuario */
+
+ updateData(docRef)
+}
+
+//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}` */
+ })
+}
+
+
+//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);
+ saveDataF(result.user)//Se le manda a la func guardDatos para hacer una BD
+ //userObserverProfile()
+ renderPostView();
+
+ //div.innerHTML = `
`
+
+ })
+ .catch(function (error) {
+ errorGooFbkModal.classList.add('is-active');
+ console.log('Hubo en error:', error);
+ })
+ });
+}
+
+//Guardar datos Fb en BD
+function saveDataF(user) {
+ //console.log(user);
+ 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);
+ })
+
+ }
+ })
+ updateDataFb(docRef)
+}
+
+//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} ` */
+ })
+}
+
+
+//Crear cuenta con email
+//Registrarse:
+export function createUser(newName, newEmail, newPassword, registryModal, alreadyExistModal) {
+ //console.log(user);
+ 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(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);
+ saveEmailBD(newName, newEmail, newPassword, user)
+ renderPostView();
+ })
+ .catch(function (error) {//Si la cuenta se ha creado se muestra el error
+ alreadyExistModal.classList.add('is-active');
+ console.log(error.message);
+ })
+ } else {
+ 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).')
+ }
+}
+
+//: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,
+ interests: 'Interés',
+ photo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS_nu03Fphc39lFDYvqsGjluX8keorjzG79akJclhK2fS2SwLKo&usqp=CAU',
+ uid: user.user.uid
+
+ })
+ .then(function () {
+ console.log('Los datos se guardaron');
+ })
+ .catch(function (error) {
+ console.log('Hubo en error:', error);
+ })
+}
+
+
+//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);
+ renderPostView()
+ })
+ .catch(function (error) {
+ 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 = 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)
+ })
+ } else {
+ // No user is signed in.
+ console.log('No user');
+ }
+ });
+}
+userObserver()
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 00000000..6723ad4c
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,138 @@
+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'
+
+// 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');
+const exitButton = document.querySelector('#exit');
+
+// listeners
+homeButton.addEventListener("click", showPosts)
+postButton.addEventListener("click", renderPostView)
+profileButton.addEventListener('click', userObserverProfile);
+exitButton.addEventListener("click", signoutUser)
+
+window.onload = principalView();
+
+export function principalView() {
+ root.innerHTML = principal();
+ let goLogin = document.querySelector('#goLogin')
+ goLogin.addEventListener('click', viewLogin)
+}
+
+// Mostrar vista iniciar sesión
+export function viewLogin() {
+ root.innerHTML = login()
+ let goSignIn = document.querySelector('#goSignIn');
+
+ //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)
+ }
+ //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()
+ })
+ }
+}
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 = `
+
+
+
+
+
+
Estás seguro que quieres eliminar el elemento?
+
+
+
+
+
+
+`
+
+
+const saveChange = `
+