Responsive h1

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"
   }
-}
+}

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");
+// })

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);

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,
+};

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');
+  }
+};

src/index.html

@@ -1,12 +1,103 @@
+
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Document</title>
-</head>
-<body>
-  <script type="module" src="main.js"></script>
-</body>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>PETBLR</title>
+    <link rel="stylesheet" href="style.css"/>
+    <script type="module" src="main.js"></script>
+    <script src="./js/router.js"></script>
+    <script src="./js/routes.js"></script>
+    <script type="module" src="./lib/index.js"></script>
+  </head>
+  <body>
+    <main>
+
+      <!--main logo-->
+      <section class="main-logo" id="mainLogo">
+        <div class="main-logo-div">
+        <img src="./Assets/logo.png"  alt="logo" class="main-logo-img" id="mainLogoImg" >
+        </div>
+      </section>
+
+      <!--email/Facebook LogIn-->
+      <section class="email-facebook-page hidden" id="emailFacebookPage">
+        <div class="email-facebook-div" id="emailFacebookDiv">
+          <button class="email-btn" id="emailBtn">CORREO </button>
+          <button class="facebook-btn" id="facebookBtn">FACEBOoOK</button>
+        </div>
+      </section>
+
+      <!--log in form-->
+      <section class="login-section hidden" id="loginSection">
+        <form class="login-form" id="loginForm">
+          <label for="email" class="login-form-email" > Correo:</label>
+          <input type="email" class="login-form-email-input" placeholder="Correo" required>
+          <label for="password" class="login-form-password">Contraseña:</label>
+          <input type="password" class="login-form-password-input" placeholder="********" required>
+          <button>INGRESAR</button>
+        </form>
+      </section>
+
+      <!--Register section-->
+      <!-- <section class="register hidden" id="register">
+        <form class="register-form" id="registerForm">
+          <div class="register-form-background">
+          <input type="name" class="register-form-pet-name-input" id="registerFormPetNameInput" placeholder="Nombre de la mascota" required>
+          <input type="email" class="register-form-pet-email-input" id="registerFormPetEmailInput" placeholder="Correo electronico" required>
+          <input type="name" class="register-form-user-name-input" id="registerFormUserNameInput" placeholder="Nombre del usuario" required>
+          <input type="password" class="register-form-password-input" id="registerFormPasswordInput" placeholder="Contraseña" required>
+          <label class="register-form-psw-recomendation" id="registerFormPswRecomendation"> DEBE TENER MÍNIMO 6 CARÁTERES, UNA MAYÚSCULA Y UN NÚMERO</label>
+          <input type="password" class="register-form-repeat-password-input" id="registerFormRepeatPasswordInput" placeholder="Repetir contraseña" required>
+          <label class="register-form-repeat-psw hidden" id="registerFormRepeatPsw">
+            LAS CONTRASEÑAS DEBEN COINCIDIR
+          </label><br>
+          <button class="register-div-btn" id="registerDivBtn">REGISTRARSE</button>
+        </div>
+        </form>
+      </section> -->
+
+      <!--auth error-->
+      <!-- <section class="auth-error hidden" id="authError">
+        <div class="auth-error-div">
+          <h1 class="auth-error-text">Lo sentimos, correo en uso.</h1>
+        </div>
+      </section> -->
+
+      <!--auth funciona-->
+      <section class="auth-funciona hidden" id="authFunciona">
+        <div class="auth-error-div">
+          <h1 class="auth-funciona-text">Funciona!</h1>
+        </div>
+      </section>
+
+      <!--Log In/Sign Up-->
+      <section class="log-in-sign-up hidden" id="logInSignUp">
+        <div class="log-in-sign-up-div" id="logInSignUpDiv">
+          <button class="nav-link-log-in" id="navLinkLogIn">INGRESAR</button>
+          <button class="nav-link-sign-up" id="navLinkSignUp">REGISTRARSE</button>
+        </div>
+      </section>
+
+      <!--Otra pag-->
+      <section>
+      </section>
+
+      <!--Otra pag-->
+      <section>
+      </section>
+
+      <!--Otra pag-->
+      <section>
+      </section>
+
+      <!--Otra pag-->
+      <section>
+      </section>
+
+      <div id="content"></div>
+    </main>
+  </body>
 </html>

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);
+  }
+}