funciones userObserver, password hiden, background changes

src/components/Login.js

@@ -1,5 +1,6 @@
 /* eslint-disable max-len */
 import { onNavigate } from '../main.js';
+import { signWithEmailPassword } from '../firebase/auth.js';
 
 
 export const Login = () => {
@@ -11,11 +12,12 @@ export const Login = () => {
   const inputEmail = document.createElement('input');
   const inputPassword = document.createElement('input');
   const recuerdame = document.createElement('p');
-  const buttongoogle = document.createElement('button');
+
   const forgotpassword = document.createElement('p');
   const line = document.createElement('hr');
   const notienescuenta = document.createElement('p');
   const buttonnuevacuenta = document.createElement('button');
+  const imageGoogletwo = document.createElement('img');
 
   titlepost.textContent = 'Postalk';
   titlepost.classList = ('postalklog');
@@ -30,10 +32,10 @@ export const Login = () => {
   inputEmail.classList = ('emaillogin');
   inputPassword.placeholder = 'Contraseña';
   inputPassword.classList = ('passwordlogin');
+  inputPassword.setAttribute('type', 'password');
   recuerdame.textContent = 'Recordarme';
   recuerdame.classList = ('recuerdame');
-  buttongoogle.textContent = '';
-  buttongoogle.classList = ('buttongoogle');
+
   forgotpassword.textContent = '¿Olvisdaste la constraseña?';
   forgotpassword.classList = ('forgotpassword');
   line.classList = ('line');
@@ -42,12 +44,22 @@ export const Login = () => {
   buttonnuevacuenta.textContent = 'Registrar';
   buttonnuevacuenta.classList = ('buttonnuevacuenta');
 
+  imageGoogletwo.classList = ('buttongoogle');
+  imageGoogletwo.setAttribute('src', 'https://i.postimg.cc/tJh7mK8T/google.png');
+
+  /*botonparaacceder.addEventListener('click', () => {
+    let mail = inputEmail.value
+    let password = inputPassword.value
+    signWithEmailPassword(mail, password);
+  });*/
+
+
   buttonBack.addEventListener('click', () => {
     onNavigate('/');
   });
 
 
-  div.append(titlepost, recuerdame, notienescuenta, line, forgotpassword, buttongoogle, title, inputEmail, inputPassword, button, buttonBack, buttonnuevacuenta);
+  div.append(titlepost, imageGoogletwo, recuerdame, notienescuenta, line, forgotpassword, title, inputEmail, inputPassword, button, buttonBack, buttonnuevacuenta);
 
   return div;
 };

src/components/Register.js

@@ -25,6 +25,7 @@ export const Register = () => {
   inputEmail.classList = ('inputEmail');
   inputPass.textContent = ('input');
   inputPass.classList = ('inputPass');
+  inputPass.setAttribute('type', 'password');
   inputConfirm.textContent = ('input');
   inputConfirm.classList = ('inputConfirm');
   inputEmail.placeholder = 'Email';

src/components/ejemplo.js

@@ -1,27 +1,22 @@
-const div = document.createElement('div');
-const title = document.createElement('h2');
-const descriptionRegister = document.createElement('h3');
-const button = document.createElement('button');
-const buttonBack = document.createElement('button');
-const buttonG = document.createElement('button');
-const inputEmail = document.createElement('input');
-const inputPass = document.createElement('input');
-const inputConfirm = document.createElement('input');
-button.textContent = 'Registrar';
-button.classList = ('button');
-buttonBack.textContent = 'Menu de inicio';
-buttonBack.classList = ('buttonBack');
-buttonG.textContent = 'google';
-buttonG.classList = ('buttonGoogle');
-button.classList = ('button');
+AUTH  
+// entrar con email y password
+/* export const signWithEmailPassword = (email, password) => {
+  signInWithEmailAndPassword(auth, email, password)
+    .then((userCredential) => {
+    // Signed in
+      const user = userCredential.user;
+      console.log(user);
+    // ...
+    })
+    .catch((error) => {
+      const errorCode = error.code;
+      const errorMessage = error.message;
+      console.log(error);
+    });
+};
 
-inputEmail.textContent = ('input');
-inputEmail.classList = ('inputEmail');
-inputPass.textContent = ('input');
-inputPass.classList = ('inputPass');
-inputConfirm.textContent = ('input');
-inputConfirm.classList = ('inputConfirm');
+// login cuando ya esten registrados
+//
+*/
 
-inputEmail.placeholder = 'Email';
-inputPass.placeholder = 'Contraseña';
-inputConfirm.placeholder = 'Confirmar contraseña';
+//funcion log out

src/components/wall.js

@@ -0,0 +1,14 @@
+export const Wall = () => {
+  const div = document.createElement('div');
+  const title = document.createElement('h2');
+
+  div.classList.add('container-register');
+
+  title.textContent = 'Wall';
+  title.classList = ('postalkr');
+
+  // eslint-disable-next-line max-len
+  div.append(title);
+
+  return div;
+};

src/firebase/auth.js

@@ -1,37 +1,55 @@
 /* eslint-disable max-len */
-import { getAuth, createUserWithEmailAndPassword, signInWithPopup, GoogleAuthProvider } from 'https://www.gstatic.com/firebasejs/9.9.4/firebase-auth.js';
+import {
+  getAuth, onAuthStateChanged, signInWithEmailAndPassword, createUserWithEmailAndPassword, signInWithPopup, GoogleAuthProvider,
+} from 'https://www.gstatic.com/firebasejs/9.9.4/firebase-auth.js';
 import { app } from './config.js';
 
 const auth = getAuth();
 
 export const guardarUssuario = (email, password) => createUserWithEmailAndPassword(auth, email, password);
 
-
 export const providerGoogle = new GoogleAuthProvider();
 
-
-export const loginGoogle = ()=> {
-
+export const loginGoogle = () => {
   signInWithPopup(auth, providerGoogle)
 
-  .then((result) => {
+    .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;
-    console.log(user.email);
+      const credential = GoogleAuthProvider.credentialFromResult(result);
+      const token = credential.accessToken;
+      // The signed-in user info.
+      const user = result.user;
+      console.log(user.email);
     // ...
-  }).catch((error) => {
+    }).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);
+    // ...
+    });
+};
+
+export const userObserver = (callBack) => {
+  const authObserver = getAuth();
+  onAuthStateChanged(authObserver, callBack);
+};
+
+export const signWithEmailPassword = (email, password) => {
+
+  signInWithEmailAndPassword(auth, email, password)
+  .then((userCredential) => {
+    // Signed in
+    const user = userCredential.user;
+    // ...
+  })
+  .catch((error) => {
     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);
-    // ...
   });
 }
 

src/firebase/login.js

@@ -0,0 +1,15 @@
+import { getAuth, signInWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/9.9.4/firebase-auth.js';
+
+const auth = getAuth();
+signInWithEmailAndPassword(auth, email, password)
+  .then((userCredential) => {
+    // Signed in
+    const user = userCredential.user;
+    // ...
+  })
+  .catch((error) => {
+    const errorCode = error.code;
+    const errorMessage = error.message;
+  });
+
+  //video 24:30

src/main.js

@@ -1,12 +1,15 @@
 import { Welcome } from './components/Welcome.js';
 import { Login } from './components/Login.js';
 import { Register } from './components/Register.js';
+import { Wall } from './components/wall.js';
+import {userObserver} from './firebase/auth.js';
 
 const root = document.getElementById('root');
 const routes = {
-  '/': Welcome,
+  '/': Welcome,     //solo / para welcome
   '/login': Login,
   '/register': Register,
+  '/wall': Wall,
 };
 
 export const onNavigate = (pathname) => {
@@ -15,15 +18,29 @@ export const onNavigate = (pathname) => {
     pathname,
     window.location.origin + pathname,
   );
-  root.removeChild(root.firstChild)
+  root.removeChild(root.firstChild);
   root.appendChild(routes[pathname]());
 };
 
 const component = routes[window.location.pathname];
 
 window.onpopstate = () => {
-  root.removeChild(root.firstChild)
+  root.removeChild(root.firstChild);
   root.append(component());
 };
 
-root.appendChild(component());
+root.appendChild(component());
+
+userObserver ((user)=> {
+  console.log (user)
+  if (user) {
+
+ onNavigate ('/wall')
+  } else {
+    onNavigate ('/')
+  }
+
+});
+
+
+//hacer parte de login