diff --git a/package.json b/package.json index 0c72f6c8..5dcf81fa 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "stylelint": "stylelint --aei src/**/*.css", "pretest": "npm run htmlhint && npm run eslint && npm run stylelint", "test": "jest --coverage", - "start": "serve -s src/" + "start": "serve -s src/ -s" }, "devDependencies": { "@babel/core": "^7.11.4", diff --git a/src/components/Login.js b/src/components/Login.js new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Register.js b/src/components/Register.js new file mode 100644 index 00000000..9d1099db --- /dev/null +++ b/src/components/Register.js @@ -0,0 +1,81 @@ +import { register } from "../templates/viewRegister.js"; +import { auth } from "../firebase/index.js"; +import {createUserWithEmailAndPassword} from "https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js" + + +// let templateRegister = register(); + +// const nameRegister = templateRegister.querySelector("#nameRegister"); +// const emailRegister = container.querySelector("#emailRegister"); +// const passwordRegister = container.querySelector("#passwordRegister"); +// const passwordConfirm = container.querySelector("#passwordConfirm"); +// const buttonRegister = container.querySelector("#register"); +// const formRegister = container.querySelector("#formRegister"); +// const messageName = container.querySelector("#messageName"); +// const messageEmail = container.querySelector("#messageEmail"); +// const messagePassword = container.querySelector("#messagePassword"); +// const anotherMessageEmail = container.querySelector("#anotherMessageEmail"); +// const messagePasswordConfirm = container.querySelector("#messagePasswordConfirm"); + +// console.log(nameRegister); +// console.log(emailRegister) +// console.log(templateRegister) + +// formRegister.addEventListener('submit', (e) => { +// e.preventDefault(); +// console.log(nameRegister.value, emailRegister.value); + + +// const authFirebase = createUserWithEmailAndPassword(auth, emailRegister.value, passwordRegister.value) +// .then((authFirebase) => { +// // const user = authFirebase.user +// console.log(authFirebase) +// }) +// .catch((error) => { +// console.log(error.message) +// // identificardor unico para el error +// console.log(error.code) + +// if(error.code === "auth/invalid-email"){ +// messageEmail.innerHTML = "correo invalido" +// } else if (error.code === "auth/email-already-in-use"){ +// messageEmail.innerHTML = "el correo ya fue utilizado" +// } else if (error.code === "auth/weak-password"){ +// messagePassword.innerHTML = "la contrasena debe tener por lo menos 6 caracteres" +// } else if (error.code){ +// alert('algo salio mal') +// } + +// }) +// }); + +// nameRegister.addEventListener("input", () => { +// if (nameRegister.value !== "") { +// messageName.innerHTML = ""; +// } +// }); + +// buttonRegister.addEventListener("click", ()=> { +// if( passwordConfirm.value != passwordRegister.value){ +// messagePasswordConfirm.innerHTML = "la contraseña no es igual" +// } else if (nameRegister.value === '') { +// messageName.innerHTML = 'Debe ingresar su nombre'; +// } else if (passwordConfirm.value === passwordRegister.value){ +// messagePasswordConfirm.innerHTML = "" +// } +// }); + + // else if (emailRegister === ''){ + // messageEmail.innerHTML = "ingresa un correo" + // } + + + + + + + + + + + diff --git a/src/firebase/index.js b/src/firebase/index.js new file mode 100644 index 00000000..456b6347 --- /dev/null +++ b/src/firebase/index.js @@ -0,0 +1,27 @@ +// Import the functions you need from the SDKs you need +import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js"; + +// https://firebase.google.com/docs/web/setup#available-libraries +// Autentificacion +import {getAuth} from "https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js" + +// Your web app's Firebase configuration +// For Firebase JS SDK v7.20.0 and later, measurementId is optional +// Firebase, esta informacion la utiliza firebase para el uso de su servicio +const firebaseConfig = { + apiKey: "AIzaSyAQxr8QueNyoazFnT3cCFo4YeCEz7S4FaE", + authDomain: "social-network-dog.firebaseapp.com", + projectId: "social-network-dog", + storageBucket: "social-network-dog.appspot.com", + messagingSenderId: "1073529346267", + appId: "1:1073529346267:web:b2b1e7b435a9c16adc14fe", + measurementId: "G-5PBN6ZD4GQ" +}; + + + +// Initialize Firebase +const app = initializeApp(firebaseConfig); +// Initialize Firebase Authentication and get a reference to the service +export const auth = getAuth(app) + diff --git a/src/img/facebook.png b/src/img/facebook.png new file mode 100644 index 00000000..1eb64d2d Binary files /dev/null and b/src/img/facebook.png differ diff --git a/src/img/google.png b/src/img/google.png new file mode 100644 index 00000000..0200d2f6 Binary files /dev/null and b/src/img/google.png differ diff --git a/src/img/imgportada.jpg b/src/img/imgportada.jpg new file mode 100644 index 00000000..4b4d19c6 Binary files /dev/null and b/src/img/imgportada.jpg differ diff --git a/src/img/perro.png b/src/img/perro.png new file mode 100644 index 00000000..c4a5e4d0 Binary files /dev/null and b/src/img/perro.png differ diff --git a/src/index.html b/src/index.html index 0e62e217..d774d55f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,29 @@ + + + + + - Document + DoggoS + + +
+
+
+ +
+ + - + + \ No newline at end of file diff --git a/src/lib/index.js b/src/lib/index.js deleted file mode 100644 index d1930899..00000000 --- a/src/lib/index.js +++ /dev/null @@ -1,6 +0,0 @@ -// aqui exportaras las funciones que necesites - -export const myFunction = () => { - // aqui tu codigo - console.log('Hola mundo!'); -}; diff --git a/src/main.js b/src/main.js index ac27e91a..2c20be8f 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,42 @@ -// Este es el punto de entrada de tu aplicacion +import { register } from "./templates/viewRegister.js"; +import { login } from "./templates/viewLogin.js"; +// console.log(login()) + + +import './components/Register.js' +// console.log("loginn", login) + +const root = document.querySelector('#root'); + +const routes = { + '/': register, + '/login':login +} + +// console.log("ubicacion",window.location.pathname) + + +export const onNavigate = (pathname) => { + window.history.pushState( + {}, + pathname, + window.location.origin + pathname + ); + while(root.firstChild){ + root.removeChild(root.firstChild); + } + root.appendChild(routes[pathname]()); +}; + +const prints = routes[window.location.pathname]; + +window.onpopstate = () => { + root.appendChild(prints()); + +} +root.appendChild(prints()); + + + -import { myFunction } from './lib/index.js'; -myFunction(); diff --git a/src/style.css b/src/style.css new file mode 100644 index 00000000..0afb803b --- /dev/null +++ b/src/style.css @@ -0,0 +1,225 @@ +/* poppins */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); +* { + margin : 0; + padding: 0; + box-sizing: border-box; +} + +:root{ + --blue: #425A9A; + --pink: #FBCFDC; + --white: white; + --fontPoppins: 'Poppins', sans-serif; +} + +body{ + /* extraligth 200 */ + font-family: var(--fontPoppins); +} + +/* #root{ + width: 1680px; + height: 915px; + border: 3px solid red; +} */ + + /* padre de contenthome y sectionForm */ +.containerRegister, .containerLogin { + /* width: 100%; + height: 100%; */ + height: 915px; + display: flex; + text-align: center; + +} + +/* contenido de la portada de escritorio, imagen y parrafo */ + + .contentHome{ + width: 70%; + /* border: 3px solid blue; */ + } + + .imghome { + width: 100%; + height: 65%; + } + + .contentHome p{ + margin: 40px; + padding: 30px; + color: #425A9A; + font-size: 23px; + font-weight: medium; + } + +/* contenido de los formularios de register y login */ + .sectionForm{ + width: 40%; + /* border: 3px solid yellow; */ + background-color: #425A9A; + padding: 20px; + position: relative; + } + /* encabezado del formulario */ + .sectionForm img{ + width: 90px; + height: 90px; + position: absolute; + margin-top: 62px; + /* margin-right: auto; + margin-left: auto; */ + } + + .sectionForm h1{ + color: white; + font-size: 50px; + margin-top: 120px; + margin-bottom: 20px; + + } + + .sectionForm h2{ + color: white; + font-size: 20px; + + } + + .sectionForm h3{ + color: white; + font-size: 18px; + margin-top: 50px; + } + + /* formulario de registrarse y login */ + + #formRegister, #formLogin{ + padding: 50px; + display: flex; + flex-direction: column; + row-gap: 5px; + align-items: center; + + } + + /* inputs del formulario */ + #nameRegister, #emailRegister, #passwordRegister, #passwordConfirm, + #emailLogin, #passwordLogin{ + background-color: #C1E1FF; + height: 30px; + width: 200px; + border-radius: 15px; + text-align: center; + font-size: 14px; + color: #425A9A; + } + + .sectionForm input::placeholder { + color: #425A9A; + } + + #messageEmail, #messageName, #messagePassword, #messagePasswordConfirm { + color:#FBCFDC; + font-size: 12px; + font-weight: 600; + } + + /* botones para registrarse e iniciar sesión */ + #register, #login{ + background-color: #FBCFDC; + margin: 20px; + height: 40px; + width: 110px; + font-size: 12px; + border-radius: 20px; + border:0 solid transparent; + color: #425A9A; + font-family: 'Poppins', sans-serif; + } + + #register:hover, #login:hover { + /* Modificar el estilo del botón cuando el mouse esté sobre él */ + background-color: white; /* Color rosa */ + cursor: pointer; + } + + .question{ + margin: 0px; + color: white; + font-size: 15px; + } + + .question input{ + width: 93px; + border: transparent; + border-bottom: 2px solid #FBCFDC; + background-color: transparent; + color: #FBCFDC; + text-align: center; + } + + .question input:hover{ + color: var(--white); + border-bottom: 2px solid var(--white); + cursor: pointer; + } + + .terminos { + color: var(--white); + font-size: 13px; + display: inline-block; /* hacer que el texto ocupe el mismo espacio que el checkbox */ + vertical-align: middle; + /* alinear el texto con el checkbox */ + } + + .terminos span { + color: var(--pink); + /* font-size: 15px; */ + } + + .redes-sociales{ + display: flex; + width: 110px; + height: 50px; + position: relative; + text-align: center; + margin: 15px; + } + + #imggoogle { + width: 45px; + height: 45px; + position: absolute; + margin: 0; + left: 0; + + } + + #imgfacebook { + width: 45px; + height: 45px; + position: absolute; + margin: 0; + right: 0; + + } + + #imggoogle:hover, #imgfacebook:hover{ + cursor: pointer; + } + + + + + + +/* form input:focus:required:invalid{ + border:2px solid #FBCFDC; +} */ + + +/* */ + + + \ No newline at end of file diff --git a/src/templates/viewHome.js b/src/templates/viewHome.js new file mode 100644 index 00000000..99ae8416 --- /dev/null +++ b/src/templates/viewHome.js @@ -0,0 +1,16 @@ +export const home = () => { + const container = document.createElement('div'); + container.classList.add('containerHome'); + + const view = ` +
+

DoggoS es una app para dueños de perros, en el que podras encontrar y compartir recomendaciones sobre el cuidado de + tus engreidos. Te invitamos a unirte y ser parte de esta gran comunidad doglover. + ¿Qué esperas? ¡No te pierdas más novedades!

+
` + + + container.innerHTML = view; + + return container; +} \ No newline at end of file diff --git a/src/templates/viewLogin.js b/src/templates/viewLogin.js new file mode 100644 index 00000000..07dc3c6d --- /dev/null +++ b/src/templates/viewLogin.js @@ -0,0 +1,90 @@ +import { auth } from "../firebase/index.js"; +import { signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js" +import { onNavigate } from "../main.js"; + + +export const login = () => { + const container = document.createElement('div'); + container.classList.add('containerLogin'); + + const view = ` +
+ imagen de portada +

DoggoS es una app para dueños de perros, en el que podras encontrar y compartir recomendaciones sobre el cuidado de + tus engreidos. Te invitamos a unirte y ser parte de esta gran comunidad doglover. + ¿Qué esperas? ¡No te pierdas más novedades!

+
+
+ imagen de perrito del logo +

DoggoS

+

Bienvenido(a)

+

¡Inicia Sesión!

+
+ +
+ +
+
+ icono de google + icono de facebook +
+ +
+

¿NO tienes una cuenta? + +

+
` + + container.innerHTML = view; + + const registrate = container.querySelector("#registrate"); + + // console.log(registrate) + + registrate.addEventListener('click', () => onNavigate("/")) + +const emailLogin = container.querySelector('#emailLogin'); +const passwordLogin = container.querySelector('#passwordLogin'); +const formLogin= container.querySelector('#formLogin'); +const googleLogin = container.querySelector('#imggoogles'); +const messagePassword = container.querySelector('#messagePassword'); + + formLogin.addEventListener('submit', (e) => { + e.preventDefault(); + const email = emailLogin.value; + const password = passwordLogin.value; + + const signIn = signInWithEmailAndPassword(auth, email, password) + .then((signIn) => { + + console.log("iniciando secion exzfd") + }) + .catch((error) => { + console.log("errors",error.message) + // identificardor unico para el error + console.log(error.code) + + // Mostrar mensaje de error al usuario o realizar alguna otra acción + if(error.code === "auth/invalid-email"){ + messageEmail.innerHTML = "correo inválido" + } else if (error.code === "auth/user-not-found"){ + messageEmail.innerHTML = "no se ha registrado" + } else if (error.code === "auth/wrong-password"){ + messagePassword.innerHTML = "contraseña incorrecta" + }else if (error.code === "auth/user-disabled"){ + messageEmail.innerHTML = "suarioinhabilitado" + } else if (error.code){ + alert('algo salio mal') + } + + }); + + }); + + + return container; +} + + + + diff --git a/src/templates/viewRegister.js b/src/templates/viewRegister.js new file mode 100644 index 00000000..81cc705c --- /dev/null +++ b/src/templates/viewRegister.js @@ -0,0 +1,138 @@ +import { auth } from "../firebase/index.js"; +import {createUserWithEmailAndPassword, GoogleAuthProvider, signInWithPopup} from "https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js" + +import { onNavigate } from "../main.js"; + + +export const register = () => { + const container = document.createElement('div'); + container.classList.add('containerRegister'); + + const view = ` +
+ imagen de portada +

DoggoS es una app para dueños de perros, en el que podras encontrar y compartir recomendaciones sobre el cuidado de + tus engreidos. Te invitamos a unirte y ser parte de esta gran comunidad doglover. + ¿Qué esperas? ¡No te pierdas más novedades!

+
+
+ imagen de perrito del logo +

DoggoS

+

Bienvenido(a)

+

¡Regístrate!

+
+ +
+ +
+ +
+ +
+
+ icono de google + icono de facebook +
+ + + +
+

¿Ya tienes una cuenta? + +

+
` + + + container.innerHTML = view; + +const nameRegister = container.querySelector("#nameRegister"); +const emailRegister = container.querySelector("#emailRegister"); +const passwordRegister = container.querySelector("#passwordRegister"); +const passwordConfirm = container.querySelector("#passwordConfirm"); +const buttonRegister = container.querySelector("#register"); +const formRegister = container.querySelector("#formRegister"); +const messageName = container.querySelector("#messageName"); +const messageEmail = container.querySelector("#messageEmail"); +const messagePassword = container.querySelector("#messagePassword"); +const messagePasswordConfirm = container.querySelector("#messagePasswordConfirm"); +const iniciarSesion = container.querySelector("#iniciarSesion"); +const googleLogin = container.querySelector('#imggoogle'); + +iniciarSesion.addEventListener('click', () => onNavigate("/login")) + + + formRegister.addEventListener('submit', (e) => { + e.preventDefault(); + console.log(nameRegister.value, emailRegister.value); + + +const authFirebase = createUserWithEmailAndPassword(auth, emailRegister.value, passwordRegister.value) + .then((authFirebase) => { + // const user = authFirebase.user + console.log(authFirebase) + }) + .catch((error) => { + console.log(error.message) + // identificardor unico para el error + console.log(error.code) + + if(error.code === "auth/invalid-email"){ + messageEmail.innerHTML = "correo inválido" + } else if (error.code === "auth/email-already-in-use"){ + messageEmail.innerHTML = "el correo ya fue utilizado" + } else if (error.code === "auth/weak-password"){ + messagePassword.innerHTML = "la contraseña debe tener por lo menos 6 carácteres" + } else if (error.code){ + alert('algo salio mal') + } + + }) + }); + + nameRegister.addEventListener("input", () => { + if (nameRegister.value !== "") { + messageName.innerHTML = ""; + } + }); + + buttonRegister.addEventListener("click", ()=> { + if( passwordConfirm.value != passwordRegister.value){ + messagePasswordConfirm.innerHTML = "la contraseña no es igual" + } else if (nameRegister.value === '') { + messageName.innerHTML = 'Debe ingresar su nombre'; + } else if (passwordConfirm.value === passwordRegister.value){ + messagePasswordConfirm.innerHTML = "" + } + }); + + + const provider = new GoogleAuthProvider(); + + googleLogin.addEventListener('click', ()=> { + +signInWithPopup(auth, provider) + .then((result) => { + // This gives you a Google Access Token. You can use it to access the Google API. + const credential = GoogleAuthProvider.credentialFromResult(result); + const token = credential.accessToken; + // The signed-in user info. + const user = result.user; + // ... + }).catch((error) => { + // Handle Errors here. + const errorCode = error.code; + const errorMessage = error.message; + // The email of the user's account used. + const email = error.customData.email; + // The AuthCredential type that was used. + const credential = GoogleAuthProvider.credentialFromError(error); + // ... + }); + + + }) + return container; + +} +