diff --git a/package.json b/package.json index 50b3d0d..2673366 100644 --- a/package.json +++ b/package.json @@ -41,5 +41,8 @@ "createdAt": "2023-06-06T21:37:46.504Z", "version": "6.3.0", "commit": "a942adeb868f1fe54b86e34cc4fc4ddb0601700d" + }, + "dependencies": { + "firebase": "^9.20.0" } } diff --git a/src/home.js b/src/home.js index f58c7ae..731ea3c 100644 --- a/src/home.js +++ b/src/home.js @@ -1,10 +1,42 @@ /* eslint-disable semi */ export default () => { const viewHome = ` -

Bienvenido a LabsConnect

-
- -
`; +
+

LabsConnect

+ +
+
+

Start by creating your account

+ + + + + + + + + +
+ + + `; + + const divElem = document.createElement('div'); divElem.innerHTML = viewHome; return divElem; diff --git a/src/imagenes/fondo.jpg b/src/imagenes/fondo.jpg new file mode 100644 index 0000000..55a7cc9 Binary files /dev/null and b/src/imagenes/fondo.jpg differ diff --git a/src/imagenes/fondoPeque.jpg b/src/imagenes/fondoPeque.jpg new file mode 100644 index 0000000..f5fb2a8 Binary files /dev/null and b/src/imagenes/fondoPeque.jpg differ diff --git a/src/index.html b/src/index.html index e220040..de0ab8f 100644 --- a/src/index.html +++ b/src/index.html @@ -3,20 +3,23 @@ - Document + LabsConnect + + -
+ +
\ No newline at end of file diff --git a/src/inicioSesion.js b/src/inicioSesion.js index 1fec82b..f8262a7 100644 --- a/src/inicioSesion.js +++ b/src/inicioSesion.js @@ -1,6 +1,8 @@ -import logo from "./imagenes/elq.png" +import logo from "./imagenes/elq.png"; + export default () => { const viewiniciodeSesion = ` +

Inicio de sesión

@@ -9,3 +11,15 @@ export default () => { divElem.innerHTML = viewiniciodeSesion; return divElem; }; +//const nombreRed = document.createElement('h1'); +//const textoLabsConnect = document.createTextNode('LabsConnect'); + +//seleccionar elemento padre + +//const container = document.querySelector('padre'); +// agregamos Nodos +//container.appendChild(nombreRed); +//nombreRed.appendChild(textoLabsConnect); +//const imagen = document.createElement('img'); +//imagen.src = logo; +//container.appendChild(imagen); diff --git a/src/init-firebase.js b/src/init-firebase.js new file mode 100644 index 0000000..4da7e23 --- /dev/null +++ b/src/init-firebase.js @@ -0,0 +1,50 @@ +// Import the functions you need from the SDKs you need +import { initializeApp } from "firebase/app"; +import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, reauthenticateWithRedirect, } from "firebase/auth"; +import { getFirestore, collection, addDoc, onSnapshot, getDocs, deleteDoc, doc } from "firebase/firestore"; + +// TODO: Add SDKs for Firebase products that you want to use +// https://firebase.google.com/docs/web/setup#available-libraries + +// Your web app's Firebase configuration +// For Firebase JS SDK v7.20.0 and later, measurementId is optional +const firebaseConfig = { + apiKey: "AIzaSyCwiC-udkA0cxSXnG-4HsCOkG0ND8Wh8Gs", + authDomain: "labsconnect-af7fc.firebaseapp.com", + projectId: "labsconnect-af7fc", + storageBucket: "labsconnect-af7fc.appspot.com", + messagingSenderId: "15071454950", + appId: "1:15071454950:web:bfba5781d2daee928b7d27", + measurementId: "G-D78E3JTRSC" +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); +const auth = getAuth(app); + +export const registrarUsuario = (email, password) => createUserWithEmailAndPassword(auth, email, password); + +export const loginUsuario = (email, password) => signInWithEmailAndPassword(auth, email, password); + +//Inicia Firestore +const firestore = getFirestore(app); + +export function crearPublicacion(actividad, descripcion) { + const direccionColeccion = collection(firestore, 'post'); + + const publicacion = { + actividad, + publicacion: descripcion, + }; + return addDoc(direccionColeccion, publicacion); +} +const db = getFirestore(); + +export function juntarPublis() { + const lugarDeColeccion = collection(db, 'post'); + + return getDocs(lugarDeColeccion); +} +export function eliminarPublicacion(id) { + return deleteDoc(doc(db, 'post', id)); +}; \ No newline at end of file diff --git a/src/lib/rutas.js b/src/lib/rutas.js new file mode 100644 index 0000000..ec9698e --- /dev/null +++ b/src/lib/rutas.js @@ -0,0 +1,27 @@ +import {login} from '../vistas/login.js'; +import {registro} from '../vistas/registro.js'; +import {muro, muroComportamiento} from '../vistas/muro.js'; + +export const changeView = (route) => { + const root = document.getElementById("root"); + root.innerHTML = ''; + switch (route) { + case '#/': + { + return root.appendChild(login()); + } + case '#/muro': + { + root.appendChild(muro()); + muroComportamiento(); + return; + } + case '#/registro': + { return root.appendChild(registro()); } + default: + break; + } + console.log(route); +}; + +//export { changeView }; \ No newline at end of file diff --git a/src/style.css b/src/style.css index 9e8673d..6e8c7ca 100644 --- a/src/style.css +++ b/src/style.css @@ -1,48 +1,240 @@ -body { - display: grid; - grid-template-columns: 1fr 1fr; - place-items: center; - height: 100vh; - margin: 0; - } - header { - text-align: center; - padding: 10px; - grid-column: 1 / 3; - } - nav { - padding: 0px; - } - nav img { - width: 125%; - height: 125%; - } - main { - display: grid; - grid-template-columns: 1fr; - gap: 20px; - width: 80%; - } - .login { - background-color: #DADADA; - padding: 20px; - } - .login h2 { - text-align: center; - } - .login label { - display: block; - margin-bottom: 5px; - } - .login input { - width: 100%; - margin-bottom: 10px; - padding: 10px; - } - .login button { - width: 100%; - padding: 10px; - background-color: #F45AEE; - color: #fff; - border: none; - } \ No newline at end of file + +.body { + margin: 100%; + display: flex; + align-content: center; + justify-content: center; + +} +.fondo { + margin: top; + width: 23em; + background-position: center; + background-size: over; + display: flex; + + +} +.fondoreg { + width: 120%; + display: flex; + background-position: center; + background-size: over; +} +.fondoMuro { + margin: top; + width: 23em; + background-position: center; + background-size: over; + display: flex; +} +.labs { + color: #e2e047; + font-weight: normal; + font-size: 70px; + font-family:Verdana; + text-transform: uppercase; +} +.modal { + align-content: center; + position: absolute; + width: 6em; + display: flex; + width: 100%; + background-color: #ffffff; +} +.modalreg { + align-content: center; + position: absolute; + width: 6em; + display: flex; + width: 100%; + background-color: #ffffff; +} +.signin { + position: absolute; + bottom: 9em; + padding: 3px 6em; + color: #e51495; + font-size: 40px; + font-family:Verdana; + text-transform: uppercase; + +} +.registro { + position: absolute; + bottom: 15em; + padding: 2px 3em; + display:flex ; + color: #e51495; + font-size: 40px; + font-family:Verdana; + text-transform: uppercase; + bottom: 9em; +} +.tituloRed { + position: absolute; + bottom: 15em; + padding: 2px 3em; + display:flex ; + color: #e51495; + font-size: 40px; + font-family:Verdana; + text-transform: uppercase; + bottom: 9em; +} + +.signinForm { + background-color: #ffffff; + opacity: .7; + display: inline-flex ; + width: 7em; + height: 8em; + border-radius: 5px; + flex-direction: column; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + font-size: 1em; + /* centrar vertical y horizontalmente */ + position: absolute; + top: 25em; + left: 2em; + margin: -25px 0 0 -25px; +} +.registerForm{ + background-color: #ffffff; + opacity: .7; + display: inline-flex ; + width: 7em; + height: 70em; + border-radius: 5px; + flex-direction: column; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + font-size: 1em; + /* centrar vertical y horizontalmente */ + position: absolute; + top: 25em; + left: 2em; + margin: -25px 0 0 -25px; +} + +.btn-submit { + background-color: #e51495; + position: relative; + color: #f6eeee; + border:0; + border-radius: 25px; + display: flex; + margin: 1em; + padding: 1em; + width: 3em; + font-size: 20px; + font-weight: bold; + cursor: pointer; + left: 10em; + top: 16em; + + +} +.btn{ + background-color: #e51495; + position: relative; + color: #f6eeee; + border:0; + border-radius: 15px; + display: flex; + margin: 1em; + padding: 1em; + width: 4em; + font-size: 20px; + font-weight: bold; + cursor: pointer; + left: 5em; + top: 20em; +} +.button{ + background-color: #e51495; + position: relative; + color: #f6eeee; + border:0; + border-radius: 15px; + display: flex; + margin: 1em; + padding: 1em; + width: 4em; + font-size: 20px; + font-weight: bold; + cursor: pointer; + left: 5em; + top: 20em; + +} +.row { + display: flex; + border: #e51495; + align-content: center; + justify-content: center; + margin: 7em; + + +} + +.card-body { + position: relative; + width: 4em; + bottom: 3em; +} +.form-control { + font-family: sans-serif; + font-size: 25px; + width: 290px; +} +.form-group { +display: contents; +cursor: alias; +} +.btnMuro { + font-family: sans-serif; + font-size: 1em; + background-color: #e51495; + border: #e51495; +} +.div { + position: relative; + display: flex; + padding: 35px; + border: 2px solid rgb(238, 19, 180); + text-decoration: none; + padding: 25px; + background:fixed; + width: 20em; + border-radius: 20px; + box-shadow:rgb(189, 41, 142) 1px 2px 6px 1px ; + transition: .25; + margin-top: 20px; + top: 15em; + + +} +.actividad { + padding: 12px; + border: 0px solid rgb(238, 223, 19); + border-radius: 5px; + width: 50%; + display:flex; + margin-bottom: 15px; + text-align: right; + font-family: Comic Sans MS; + font-weight:bold; + font-size: 30px; + color: #EBD758; + text-shadow: -1px 0 #414D68, 0 1px #414D68, 1px 0 #414D68, 0 -1px #414D68, -2px 2px 0 #414D68, 2px 2px 0 #414D68, 1px 1px #414D68, 2px 2px #414D68, 3px 3px #414D68, 4px 4px #414D68, 5px 5px #414D68; +} +.publi { + padding: 30px; + border: 2px solid palevioletred; + border-radius: 5px; + width: 10em; + font-family:'Arial Narrow'; + font-size: 20px; +} + diff --git a/src/view-controler/index.js b/src/view-controler/index.js index 858b7ca..77685d3 100644 --- a/src/view-controler/index.js +++ b/src/view-controler/index.js @@ -3,7 +3,7 @@ import { components } from '../view/index.js'; const changeView = (route) => { const container = document.getElementById("container"); switch (route) { - case '#/': + case '#/Home': { return container.appendChild(components.home()); } case '#/iniciodeSesion': { return container.appendChild(components.iniciodeSesion()); } diff --git a/src/vistas/login.js b/src/vistas/login.js new file mode 100644 index 0000000..5bc72fa --- /dev/null +++ b/src/vistas/login.js @@ -0,0 +1,38 @@ +import { loginUsuario } from '../init-firebase'; + +export const login = () => { + const viewLogin = document.createElement('div'); + viewLogin.innerHTML = `
+
+
+
+ +
+ + +
+

Password:

+ +
+
+ Register + +
+
`; + const loginButton = document.createElement('button'); + loginButton.innerText = 'login'; + loginButton.addEventListener('click', () => { + const email = document.getElementById('login-email').value; + const password = document.getElementById('login-password').value; + loginUsuario(email, password).then(() => { + window.location.href = '#/muro'; + console.log('correcto'); + }).catch((error) => { + console.log(error); + }); + console.log('Lista para logear'); + }); + + viewLogin.appendChild(loginButton); + return viewLogin; +}; diff --git a/src/vistas/muro.js b/src/vistas/muro.js new file mode 100644 index 0000000..dd84080 --- /dev/null +++ b/src/vistas/muro.js @@ -0,0 +1,103 @@ +import { crearPublicacion } from '../init-firebase'; +import { juntarPublis } from '../init-firebase'; +//import { eliminarPublicacion } from '../init-firebase'; + +export const muro = () => { + const viewMuro = document.createElement('div'); + viewMuro.innerHTML = ` +
+

LabsConnect

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



+
+
+
+ `; + + return viewMuro; +}; +export function muroComportamiento() { + const btnForma = document.getElementById('btnForma'); + const contenedorPublicaciones = document.getElementById('contenedorPublicaciones'); + document.getElementById('Actividad'); + + const $select = document.querySelector('#Actividad'); + const opcionCambiar = () => { + console.log('Cambio'); + + $select.addEventListener('change', opcionCambiar); + }; + btnForma.addEventListener('click', (e) => { + e.preventDefault(); + const actividad = document.getElementById('actividad').value; + const descripcion = document.getElementById('descripcion').value; + console.log(actividad, descripcion); + crearPublicacion(actividad, descripcion).then(() => { + console.log('correcto'); + }).catch((error) => { + console.log(error); + }); + console.log('Lista para conectar'); + }); + // eslint-disable-next-line no-shadow + //eliminarPublicacion.addEventListener('click', (e) => { + //e.preventDefault(); + //eliminarPublicacion(actividad, descripcion).then(() => { + //console.log('50%'); + //}).catch(() => { + //console.log('error'); + //}); + //console.log('100%'); + //}); + juntarPublis().then((publis) => { + console.log('correcto'); + publis.forEach((doc) => { + const actividadPublicacion = document.createElement('div'); + actividadPublicacion.classList.add('div'); + contenedorPublicaciones.appendChild(actividadPublicacion); + const publi = document.createElement('p'); + publi.classList.add('publi'); + publi.textContent = doc.data().publicacion; + actividadPublicacion.appendChild(publi); + const actividad = document.createElement('p'); + actividad.classList.add('actividad'); + actividad.textContent = doc.data().actividad; + actividadPublicacion.appendChild(actividad); + /*const eliminarBoton = document.createElement('eliminarBoton'); + eliminarBoton.classList.add('eliminarBoton'); + contenedorPublicaciones.appendChild(eliminarBoton); + console.log(doc.id, ' => ', doc.data()); + */}); + }).catch((error) => { + console.log(error); + }); + console.log('muestra mis publicaciones'); +} diff --git a/src/vistas/registro.js b/src/vistas/registro.js new file mode 100644 index 0000000..47d9cfc --- /dev/null +++ b/src/vistas/registro.js @@ -0,0 +1,36 @@ +import { registrarUsuario } from '../init-firebase'; + +export const registro = () => { + const viewRegistro = document.createElement('div'); + viewRegistro.innerHTML = ` +
+
+
+
+

Registro

+
+ + + + + +
+ Login + +
+
`; + const registerButton = document.createElement('button'); + registerButton.innerText = 'registro'; + registerButton.addEventListener('click', () => { + const email = document.getElementById('signup-email').value; + const password = document.getElementById('signup-password').value; + registrarUsuario(email, password).then(() => { + console.log('correcto'); + }).catch((error) => { + console.log(error); + }); + console.log('Lista para registrar'); + }); + viewRegistro.appendChild(registerButton); + return viewRegistro; +};