diff --git a/package.json b/package.json index 0c72f6c8..958c0a22 100644 --- a/package.json +++ b/package.json @@ -1,20 +1,23 @@ { - "name": "social-network", + "name": "petblr", "version": "1.0.0", - "description": "Social Network @ Laboratoria", + "description": "Tumblr para mascotas", "main": "src/index.html", "keywords": [ "javascript", "firebase", - "jest" + "jest", + "Petblr", + "petblr" ], "license": "MIT", "scripts": { "htmlhint": "htmlhint dist/*.html ", "eslint": "eslint --ext .js src/ test/", + "eslintFix": "eslint --ext .js src/ test/ --fix", "stylelint": "stylelint --aei src/**/*.css", - "pretest": "npm run htmlhint && npm run eslint && npm run stylelint", - "test": "jest --coverage", + "precommit": "npm run htmlhint && npm run eslint && npm run stylelint", + "test": "jest --coverage --env=jsdom", "start": "serve -s src/" }, "devDependencies": { @@ -26,9 +29,11 @@ "eslint-plugin-import": "^2.18.2", "eslint-plugin-jest": "^25.3.0", "htmlhint": "^1.0.0", - "jest": "^27.0.1", + "jest": "^29.3.1", + "jest-environment-jsdom": "^29.3.1", + "jsdom": "^20.0.3", "regenerator-runtime": "^0.13.1", - "serve": "^13.0.2", + "serve": "^14.1.2", "stylelint": "^14.1.0", "stylelint-config-recommended": "^6.0.0" }, @@ -39,5 +44,9 @@ "createdAt": "2022-11-30T16:52:37.204Z", "version": "5.5.0", "commit": "51e941edf1cc991930aefd7dd9c406a7c43741c1" + }, + "dependencies": { + "@firebase/auth": "^0.21.0", + "firebase": "^9.15.0" } -} \ No newline at end of file +} diff --git a/src/Assets/add-image-blanco.png b/src/Assets/add-image-blanco.png new file mode 100644 index 00000000..9a0b5f48 Binary files /dev/null and b/src/Assets/add-image-blanco.png differ diff --git a/src/Assets/add-image-negro.png b/src/Assets/add-image-negro.png new file mode 100644 index 00000000..e511ff22 Binary files /dev/null and b/src/Assets/add-image-negro.png differ diff --git a/src/Assets/chat-blanco.png b/src/Assets/chat-blanco.png new file mode 100644 index 00000000..4f2b82ec Binary files /dev/null and b/src/Assets/chat-blanco.png differ diff --git a/src/Assets/chat-negro.png b/src/Assets/chat-negro.png new file mode 100644 index 00000000..93c32563 Binary files /dev/null and b/src/Assets/chat-negro.png differ diff --git a/src/Assets/logo.png b/src/Assets/logo.png new file mode 100644 index 00000000..38370ee2 Binary files /dev/null and b/src/Assets/logo.png differ diff --git a/src/Assets/mas-blanco.png b/src/Assets/mas-blanco.png new file mode 100644 index 00000000..9ed41821 Binary files /dev/null and b/src/Assets/mas-blanco.png differ diff --git a/src/Assets/mas-negro.png b/src/Assets/mas-negro.png new file mode 100644 index 00000000..b0ae97f2 Binary files /dev/null and b/src/Assets/mas-negro.png differ diff --git a/src/Assets/pata-blanca.png b/src/Assets/pata-blanca.png new file mode 100644 index 00000000..3bc4b5a7 Binary files /dev/null and b/src/Assets/pata-blanca.png differ diff --git a/src/Assets/pata-negra.png b/src/Assets/pata-negra.png new file mode 100644 index 00000000..1c3a3082 Binary files /dev/null and b/src/Assets/pata-negra.png differ diff --git a/src/addEventListener.js b/src/addEventListener.js new file mode 100644 index 00000000..04703d38 --- /dev/null +++ b/src/addEventListener.js @@ -0,0 +1,12 @@ +// const homeSignInBtn = document.getElementById("navLinkCreateAccount"); +// const facebookBtn = document.getElementById("facebookBtn"); + +// homeSignInBtn.addEventListener("click", () => { +// document.getElementById("home").hidden = true; +// document.getElementById("emailFacebookPage").classList.remove("hidden"); +// }); + +// emailBtn.addEventListener("click", () => { +// document.getElementById("emailFacebookPage").hidden = true; +// document.getElementById("register").classList.remove("hidden"); +// }) diff --git a/src/app/facebookrg.js b/src/app/facebookrg.js new file mode 100644 index 00000000..103fb46b --- /dev/null +++ b/src/app/facebookrg.js @@ -0,0 +1,54 @@ +/* eslint-disable no-console */ +import { + providerFacebookAuth, signInWithPopup, getAuth, FacebookAuthProvider, +} from './firebase.js'; + +const facebookBtn = document.getElementById('facebookBtn'); + +function AuthAccountFacebook() { + const auth = getAuth(); + signInWithPopup(auth, providerFacebookAuth) + .then((result) => { + // The signed-in user info. + const user = result.user; + console.log(`user${user}`); + + // This gives you a Facebook Access Token. You can use it to access the Facebook API. + const credential = FacebookAuthProvider.credentialFromResult(result); + console.log(`credential${credential}`); + + const accessToken = credential.accessToken; + console.log(`accessToken${accessToken}`); + + // PLANTEAMINETO ORIGINAL, CAMBIAR CUANDO TENGA LA FUNCIONALIDAD QUE NECESITAN + document.getElementById('emailFacebookPage').hidden = true; + document.getElementById('register').classList.remove('hidden'); + document.getElementById('registerFormRepeatPsw').classList.add('hidden'); + document.getElementById('registerFormRepeatPasswordInput').classList.remove('wrongAlert'); + document.getElementById('authFunciona').classList.remove('hidden'); + }) + .catch((error) => { + // Handle Errors here. + const errorCode = error.code; + console.log(`errorCode${errorCode}`); + + const errorMessage = error.message; + console.log(`errorMessage${errorMessage}`); + + // The email of the user's account used. + const email = error.customData.email; + console.log(`email${email}`); + + // The AuthCredential type that was used. + const credential = FacebookAuthProvider.credentialFromError(error); + console.log(`credential${credential}`); + + // PLANTEAMINETO ORIGINAL, CAMBIAR CUANDO TENGA LA FUNCIONALIDAD QUE NECESITAN + document.getElementById('emailFacebookPage').hidden = true; + document.getElementById('register').classList.remove('hidden'); + document.getElementById('authError').classList.remove('hidden'); + console.log(error); + }); +} + +export const registerFormFace = facebookBtn.addEventListener('click', AuthAccountFacebook); diff --git a/src/app/firebase.js b/src/app/firebase.js new file mode 100644 index 00000000..40468994 --- /dev/null +++ b/src/app/firebase.js @@ -0,0 +1,33 @@ +/* eslint-disable import/no-unresolved */ +// como utilizamos CDN, en lugar de utilizar "from "firebase/auth"" se utiliza el link +// https://firebase.google.com/docs/web/learn-more#available-libraries +// link que lleva al link anterior +// https://firebase.google.com/docs/web/setup#available-libraries + +import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js'; +import { + getAuth, createUserWithEmailAndPassword, FacebookAuthProvider, signInWithPopup, +} from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js'; + +// configuración de la app de firebase +const firebaseConfig = { + apiKey: 'AIzaSyCVFwSqmwf3nPLqyBd-_SrnWdKfmv8kRVc', + authDomain: 'petblr-74086.firebaseapp.com', + projectId: 'petblr-74086', + storageBucket: 'petblr-74086.appspot.com', + messagingSenderId: '431725901053', + appId: '1:431725901053:web:0804da9ec879761fd6ba94', +}; + +// inicialización de firebase +const firebaseApp = initializeApp(firebaseConfig); + +// uso de firebase auth +const firebaseAuth = getAuth(firebaseApp); + +const providerFacebookAuth = new FacebookAuthProvider(); + +export { + firebaseApp, firebaseAuth, createUserWithEmailAndPassword, + providerFacebookAuth, signInWithPopup, getAuth, FacebookAuthProvider, +}; diff --git a/src/app/register.js b/src/app/register.js new file mode 100644 index 00000000..619d24bf --- /dev/null +++ b/src/app/register.js @@ -0,0 +1,27 @@ +/* eslint-disable no-unused-expressions */ +/* eslint-disable import/no-unresolved */ +import { createUserWithEmailAndPassword, sendEmailVerification } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js'; +import { firebaseAuth } from './firebase.js'; + +export const registrar = async (e) => { + e.preventDefault(); + const registerForm = document.getElementById('registerForm'); + const email = registerForm.registerFormPetEmailInput.value; + const psw = registerForm.registerFormPasswordInput.value; + const repeatPsw = registerForm.registerFormRepeatPasswordInput.value; + try { + if (psw.length > 6 && psw === repeatPsw) { + /[A-Z]/.test(psw) && /[a-z]/.test(psw) && /[0-9]/.test(psw); + await createUserWithEmailAndPassword(firebaseAuth, email, psw); + await sendEmailVerification(firebaseAuth.currentUser); + document.getElementById('registerFormRepeatPsw').classList.add('hidden'); + document.getElementById('registerFormRepeatPasswordInput').classList.remove('wrongAlert'); + document.getElementById('authFunciona').classList.remove('hidden'); + } else if (psw !== repeatPsw) { + document.getElementById('registerFormRepeatPsw').classList.remove('hidden'); + document.getElementById('registerFormRepeatPasswordInput').classList.add('wrongAlert'); + } + } catch (error) { + document.getElementById('authError').classList.remove('hidden'); + } +}; diff --git a/src/index.html b/src/index.html index 788db3c9..e537408b 100644 --- a/src/index.html +++ b/src/index.html @@ -1,12 +1,103 @@ + - - - - - Document - - - - + + + + + PETBLR + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ \ No newline at end of file diff --git a/src/js/router.js b/src/js/router.js new file mode 100644 index 00000000..7436eb47 --- /dev/null +++ b/src/js/router.js @@ -0,0 +1,42 @@ +/* eslint-disable no-unused-vars */ +class Router { + /** + * Metodo inicial. + * + * @return {void}. + */ + constructor(paths) { + // console.log(`entro a constructor con ${paths}`); + this.paths = paths; + // console.log(`ahora va con ${this.paths}`); + this.initRouter(); + } + + /** + * Permite inicializar el router + * + * @return {void}. + */ + initRouter() { + const { + location: { + pathname = '/', + }, + } = window; + const URI = pathname === '/' ? 'home' : pathname.replace('/', ''); + this.load(URI); + } + + /** + * Permite iniciar la carga de paginas. + * + * @return {void}. + */ + load(page = 'home') { + const { paths } = this; + const { path, template } = paths[page] || paths.error; + const $CONTAINER = document.querySelector('#content'); + $CONTAINER.innerHTML = template; + window.history.pushState({}, 'Genial', path); + } +} diff --git a/src/js/routes.js b/src/js/routes.js new file mode 100644 index 00000000..53872749 --- /dev/null +++ b/src/js/routes.js @@ -0,0 +1,65 @@ +/* eslint-disable no-unused-vars */ +const PATHS = { + home: { + path: '/', + template: ` +
+
+ + ¿Qué quieres hacer hoy? + + +
+
+ `, + }, + signup: { + path: '/signup', + template: ` +
+
+
+ + + + + + + + +
+
+
+ + + + `, + }, + login: { + path: '/login', + template: ` +
+
+ + +
+
+ `, + }, +}; diff --git a/src/lib/index.js b/src/lib/index.js index d1930899..91fe147e 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -1,6 +1,22 @@ -// aqui exportaras las funciones que necesites +/* eslint-disable no-undef */ +import { registrar } from '../app/register.js'; +const ROUTER = new Router(PATHS); -export const myFunction = () => { - // aqui tu codigo - console.log('Hola mundo!'); +export const loadRegister = () => { + ROUTER.load('signup'); + const registerForm = document.getElementById('registerDivBtn'); + registerForm.addEventListener('click', registrar); +}; + +export const loadLogin = () => { + ROUTER.load('login'); + // darle función a botón facebook y correo (HU2) +}; + +export const loadHome = () => { + ROUTER.load('home'); + const homeSignInBtn = document.getElementById('navLinkCreateAccount'); + homeSignInBtn.addEventListener('click', loadRegister); + const loginSection = document.getElementById('navLinkLogin'); + loginSection.addEventListener('click', loadLogin); }; diff --git a/src/main.js b/src/main.js index ac27e91a..500741f3 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,11 @@ -// Este es el punto de entrada de tu aplicacion +import './app/firebase.js'; +import './app/register.js'; +import './addEventListener.js'; +import './app/facebookrg.js'; +import './js/router.js'; +import './js/routes.js'; -import { myFunction } from './lib/index.js'; +// Este es el punto de entrada de tu aplicacion +import { loadHome } from './lib/index.js'; -myFunction(); +loadHome(); diff --git a/src/style.css b/src/style.css new file mode 100644 index 00000000..9a726f32 --- /dev/null +++ b/src/style.css @@ -0,0 +1,530 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + background-color: var(--lightIvory); +} + +:root{ +/* creamos "constantes" con colores, tipografia, etc. que utilizaremos en el proyecto */ +--lightIvory:#F8EDE4; +--dogBrown: #563c2e; +--palePink: #dcc5b6; +--lightPink: #d7a799; +--redCollar: #a91918; +--blue: #086680; +--chocolate: #492319; +--fallOrange: #a24c33; +--fairIvory:#F7DFD3; +--ivory: #dfcfab; +--pigPink: #e5a5a4; +--cherryRed: #901921; +--black: #000000; +--font-family: Arial, Helvetica, sans-serif; +} + +/* Placeholder */ +::placeholder{ + color: var(--dogBrown); + font-family: Arial, Helvetica, sans-serif; + } + +/* inactive components */ +.hidden { + display: none; +} + +/* alert wrong psw */ +.wrongAlert { + color: var(--redCollar); + border-color: var(--redCollar); +} + +/* para utilizar rem = 1, ayuda para responsive */ +html{ + font-size: 62.5%; +} + +main{ + width: 100%; +} + + +/* main logo/ */ +main .main-logo .main-logo-img { + /* width: 85%; */ + margin-top: 10%; + +} + +main .hello-home{ + background: none; + margin-bottom: 1em; + font-size: 2em; +} + +/* div main */ +main .main-div{ + + font-size: 2rem; + text-align: center; + margin: 4rem; +} + +/* Home */ +main .home{ + width: 75%; +} + +main .home .home-div { + display: flex; + flex-direction: column; + align-items: center; + background-color: var(--fairIvory); + padding: 3em; + margin-left: 30%; +} + +main .home .home-div .home-create-account-intro { + width: 90%; + text-align: justify; + margin-bottom: 3.5rem; + font-family: Arial, Helvetica, sans-serif; + background: none; + color: var(--dogBrown); + +} + +main .home-background{ + background-color: #f7e0d4; +} + +main .home .home-question { + /* font-size: 2rem; */ + background: none; + font-family: Arial, Helvetica, sans-serif; + font-weight: 600; + color: var(--dogBrown); +} + +/* color boton main */ +.home-div button { + color: var(--lightIvory); + font-size: 1.5rem; +} + +main .home .home-div button{ + cursor: pointer; + border: none; + font-size: 1.9rem; + border-radius: 1rem; + width: 20rem; + height: 4rem; + background-color: var(--pigPink); +} + +main .home .home-div .home-create-account { + margin-top: 3rem; + font-size: 1.9rem; + color: var(var(--lightIvory)); + font-weight: 500; +} + +/* email/Facebook LogIn */ +main .email-facebook-page .email-facebook-div { + display: flex; + flex-direction: column; + align-items: center; + margin: 10%; +} + +main .email-facebook-page .email-facebook-div label { + font-size: 2rem; + margin-top:11rem; + +} +/* boton email/facebook*/ +main .email-facebook-page .email-facebook-div button { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + background: none; + cursor: pointer; + font-size: 2rem ; + border-radius: 1rem; + width: 40rem; + height: 5rem; + background-color: var(--pigPink); + border: none; + padding: 1.2rem; +} + +main .email-facebook-page .email-facebook-div .email-btn { + color: var(--lightIvory); + margin-top: 5rem ; + font-size: 1.9rem; + +} + +main .email-facebook-page .email-facebook-div .facebook-btn { + color: var(--lightIvory); + margin-top: 2rem; + background-color: var(--blue); + font-size: 1.9rem; + +} + +/* log in form */ +main .login-section .login-form { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + text-align: center; +} + +main .login-section .login-form input { + outline: none; + background: none; + border: none; + font-size: 2.5rem; + text-indent: 1rem; + margin-top: 0.5rem; + color: var(--dogBrown); + font-family: 'Merriweather', serif; +} + +main .login-section .login-form label { + font-size: 2rem; +} + +main .login-section .login-form .login-form-email { + font-size: 2rem; + margin-top: 9rem; +} + +main .login-section .login-form .login-form-password { + font-size: 2rem; + margin-top: 0.5rem; +} +/* boton */ +main .login-section .login-form button { + display: flex; + flex-direction: column; + align-items: center; + background: none; + cursor: pointer; + border: 1px solid #000000; + font-size: 1.5rem; + border-radius: 1rem; + width: 13rem; + margin-top: 1rem; +} + +/* Register section */ +main .register .register-form { + display: flex; + flex-direction: column; + align-items: center; +} + +main .register .register-form label { + font-size: 1.5rem; + margin-top: 1rem; +} + +main .register-form-background { + background-color: var(--fairIvory); + height: 30%; + display: flex; + flex-direction: column; + align-items: center; + padding: 3%; +} + +main .register .register-form .register-form-psw-recomendation { + font-size: 1.3rem; + width: 80%; + text-align: center; + color: var(--redCollar); + background: none; + font-family: Arial, Helvetica, sans-serif; +} + +main .register .register-form .register-form-repeat-psw { + font-size: 1rem; + color: var(--redCollar); + background: none; + font-family: Arial, Helvetica, sans-serif; +} + +main .register .register-form ::placeholder{ + font-size: 2rem; +} + +main .register .register-form input{ + outline: none; + background: none; + border: none; + border-bottom: 2px solid black; + /* font-size: 2rem; */ + text-indent: 1rem; + margin-top: 1.5rem; + color: var(--dogBrown); + font-family: Arial, Helvetica, sans-serif; + font: 2em sans-serif; + /* width: 60rem; + height: 5rem; */ +} + +main .register .register-form button{ + background: none; + cursor: pointer; + border: none; + font-size: 1.9rem; + margin-top: 3rem; + color: var(--lightIvory); + border-radius: 1rem; + width: 20rem; + height: 4rem; + background-color: var(--pigPink); + +} + +/* auth error */ +main .auth-error .auth-error-div{ + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +main .auth-error .auth-error-div .auth-error-text{ + font-size: 2rem; + margin-top: 2rem; +} + +/* auth funciona */ +main .auth-funciona .auth-error-div{ + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +main .auth-funciona .auth-error-div .auth-funciona-text{ + font-size: 2rem; + margin-top: 2rem; +} + +/* Log In/Sign Up */ +main .log-in-sign-up .log-in-sign-up-div { + display: flex; + flex-direction: column; + align-items: center; +} + +main .log-in-sign-up .log-in-sign-up-div button{ + display: flex; + flex-direction: column; + align-items: center; + background: none; + cursor: pointer; + border: 1px solid #000000; + font-size: 1.5rem; + border-radius: 1rem; + width: 13rem; +} + +main .log-in-sign-up .log-in-sign-up-div .nav-link-log-in { + margin-top: 16rem; +} + +main .log-in-sign-up .log-in-sign-up-div .nav-link-sign-up { + margin-top: 1rem; +} + +/* responsive */ +/* 1rem=16px 16x5=80px */ +/* 5rem = 80 px */ +@media screen and (min-width: 5rem){ + .main-logo-img{ + width: 50%; + } +} +/* 2rem = 320 px */ +@media screen and (min-width: 20rem){ + .main-logo-img{ + margin-left: 5%; + width: 50%; + } + + main .home .home-div .home-create-account-intro { + font-size: 1.5rem + } + + main .home .home-div { + width: 100%; + margin: 18%; + } + + main .home .home-question { + font-size: 1.5rem; + } + + main .email-facebook-page .email-facebook-div button{ + width: 25rem; + height: 4rem; + border-radius: 0.8rem; + font-size: 1.4rem; + } + main .register .register-form input{ + width: 20rem; + height: 3rem; + border-bottom: 2px solid black; + /* font: 1em sans-serif; */ + } + + main .register-form-background{ + width: 30em; + display: flex; + flex-direction: column; + align-items: center; + background-color: var(--fairIvory); + padding: 3em; + } + + ::placeholder{ + font-size: 1rem; + } + + main .register .register-form .register-form-psw-recomendation{ + font-size: 1rem; + font-style: italic; + } +} +/* 30rem = 480 px */ +@media screen and (min-width: 30rem){ + .main-logo-img { + width: 53%; + } + + main .home .home-div .home-create-account-intro { + font-size: 1.9rem; + } + + main .home .home-question { + font-size: 1.9rem; + } + + main .register .register-form input{ + width: 30rem; + height: 3rem; + border-bottom: 2px solid black; + font: 1em sans-serif; + } + + main .register-form-background { + width: 70%; + } +} +/* 40rem = 640 px */ +@media screen and (min-width: 40rem){ + .main-logo-img { + width: 57%; + } + + main .home .home-div { + width: 100%; + margin-left: 20%; + } + + main .home .home-div .home-create-account-intro { + font-size: 2.3rem; + } + + main .home .home-question { + font-size: 2.3rem; + } + + main .home .home-div button { + width: 25rem; + height: 4rem; + border-radius: 0.8rem; + font-size: 1.4rem; + } + + main .register .register-form input{ + font: 2rem sans-serif; + width: 80%; + height: 3rem; + border-bottom: 2px solid black; + } + + main .register-form-background{ + width: 70%em; + } +} +/* 62rem = 992px */ +@media screen and (min-width: 62rem){ + .main-logo-img{ + width: 60%; + } + main .home .home-div { + width: 100%; + margin-left: 20%; + } + + main .register-form-background { + width: 70%; + } + + main .home .home-div .home-create-account-intro { + font-size: 2.5rem; + } + + main .home .home-question { + font-size: 2.5rem; + } + + main .register .register-form input{ + width: 80%; + height: 3rem; + border-bottom: 2px solid black; + } +} +/* 87rem = 1392px */ +@media screen and (min-width: 87rem){ + main .main-logo-img{ + width: 57%; + + } + main .register-form-background { + width: 70em; + } + + main .home .home-div .home-create-account-intro { + font-size: 3rem; + } + + main .home .home-question { + font-size: 3rem; + } + + main .home .home-div { + width: 70%; + margin-left: 30%; + margin-top: 20em; + } + + main .register .register-form input{ + width: 65rem; + height: 3rem; + border-bottom: 2px solid black; + } +} + + + + diff --git a/test/index.spec.js b/test/index.spec.js index 91f11a33..2b360d2b 100644 --- a/test/index.spec.js +++ b/test/index.spec.js @@ -1,8 +1,51 @@ -// importamos la funcion que vamos a testear -import { myFunction } from '../src/lib/index'; +//npm test index.spec.js -describe('myFunction', () => { - it('debería ser una función', () => { - expect(typeof myFunction).toBe('function'); - }); +test("hace click en loadRegister", () => { + document.body.innerHTML = + `
+
+ + ¿Qué quieres hacer hoy? + + +
+
+
+
+ + + + + + + + +
+
+ + ` + require("../src/js/routes"); + + const homeSignInBtn = document.getElementById('navLinkCreateAccount'); + homeSignInBtn.dispatchEvent(new Event("click")) + const registerSection = document.getElementById('register'); + + expect(registerSection).toBeDefined(); + // https://jestjs.io/docs/expect#tobedefined }); diff --git a/thumb.png b/thumb.png deleted file mode 100644 index 0828f34c..00000000 Binary files a/thumb.png and /dev/null differ