From a5d4230c6d97ca11499e00a9b88e101db9dc05c8 Mon Sep 17 00:00:00 2001
From: mmpotulo28 <mpotulom28@gmail.com>
Date: Mon, 25 Mar 2024 21:09:56 +0200
Subject: [PATCH] fix login and register authentication issue

---
 package.json                               |   1 +
 public/v.3.0/assets/css/style.css          |  36 +++-
 public/v.3.0/assets/js/login.js            | 211 ++++++++++++++-------
 public/v.3.0/login.html                    |   6 +-
 public/v.3.0/login/auth_signin_password.js |  21 --
 public/v.3.0/login/auth_signup_password.js |  22 ---
 6 files changed, 177 insertions(+), 120 deletions(-)
 delete mode 100644 public/v.3.0/login/auth_signin_password.js
 delete mode 100644 public/v.3.0/login/auth_signup_password.js

diff --git a/package.json b/package.json
index 416d187..0c13398 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "description": "Digitalism Web App",
   "license": "MIT",
   "private": false,
+  "type": "module",
   "scripts": {
     "main": "index.js",
     "start": "node index.js",
diff --git a/public/v.3.0/assets/css/style.css b/public/v.3.0/assets/css/style.css
index e232838..dca92bd 100644
--- a/public/v.3.0/assets/css/style.css
+++ b/public/v.3.0/assets/css/style.css
@@ -410,31 +410,40 @@ canvas {
 }
 
 .login_cont {
- display: block;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
  width: fit-content;
  max-width: 300px;
  margin: auto;
  text-align: center;
  background-color: var(--theme-black);
  border-radius: 10px;
- padding: 20px 30px;
+ padding: 10px 20px;
  box-shadow: var(--theme-color) 5px 5px 10px 0px;
+ overflow: hidden;
 }
 
 .login_cont h1 {
+ display: block;
  color: var(--font-color);
  font-size: 30px;
  font-weight: bold;
- padding-bottom: 10px;
- margin-bottom: 25px;
- width: 100%;
+ padding: 5px 20px;
+ margin: 20px auto;
+ width: fit-content;
  border-radius: 10px;
  box-shadow: 4px 4px 8px -3px grey;
+ justify-content: center;
 }
 
 .login_form {
- display: block;
+ display: flex;
  width: fit-content;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ width: 100%;
 }
 
 .login_cont .login_input {
@@ -452,6 +461,7 @@ canvas {
 .login_input input {
  display: block;
  width: 100%;
+ max-width: calc(100% - 25px);
  margin-top: 5px;
  padding: 10px;
  border-radius: 5px;
@@ -488,3 +498,17 @@ canvas {
  box-shadow: var(--theme-color) 0px 0px 5px 5px;
  transition: ease-out 0.3s;
 }
+
+#register-btn {
+ display: inline-block;
+ margin: auto;
+ padding: 5px;
+ border-radius: 5px;
+ border: none;
+ background-color: transparent;
+ color: var(--theme-color);
+ font-size: 16px;
+ font-weight: bold;
+ transition: ease-in-out 1s;
+ cursor: pointer;
+}
diff --git a/public/v.3.0/assets/js/login.js b/public/v.3.0/assets/js/login.js
index ec74cb4..df8a059 100644
--- a/public/v.3.0/assets/js/login.js
+++ b/public/v.3.0/assets/js/login.js
@@ -1,83 +1,158 @@
-import { initializeApp } from "firebase/app";
-import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
-import { getDatabase } from "firebase/database";
+import {
+ getApp,
+ initializeApp,
+} from 'https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js';
 
-const login_form = document.querySelector( ".login_form" );
-const login_user = document.querySelector( "#login_user" );
-const login_pass = document.querySelector( "#login_pass" );
-const login_status = document.querySelector( "#login_status" );
+import {
+ getAuth,
+ createUserWithEmailAndPassword,
+ signInWithEmailAndPassword,
+} from 'https://www.gstatic.com/firebasejs/9.6.1/firebase-auth.js';
+
+import { getDatabase } from 'https://www.gstatic.com/firebasejs/9.6.1/firebase-database.js';
+
+const login_form = document.querySelector('.login_form');
+const login_user = document.querySelector('#login_user');
+const login_pass = document.querySelector('#login_pass');
+const login_status = document.querySelector('#login_status');
+const registerBtn = document.querySelector('#register-btn');
 
 const firebaseConfig = {
-    apiKey: "AIzaSyB1PW1bEv2Ks4FZFWGYJ8btpKelaLpFTDg",
-    authDomain: "digitalisim.firebaseapp.com",
-    projectId: "digitalisim",
-    storageBucket: "digitalisim.appspot.com",
-    messagingSenderId: "236908555465",
-    appId: "1:236908555465:web:133c7b9bd5f436e00bb118",
-    measurementId: "G-TY251NQVE1"
+ apiKey: 'AIzaSyB1PW1bEv2Ks4FZFWGYJ8btpKelaLpFTDg',
+ authDomain: 'digitalisim.firebaseapp.com',
+ projectId: 'digitalisim',
+ storageBucket: 'digitalisim.appspot.com',
+ messagingSenderId: '236908555465',
+ appId: '1:236908555465:web:133c7b9bd5f436e00bb118',
+ measurementId: 'G-TY251NQVE1',
 };
 
-const app = initializeApp( firebaseConfig );
-const database = getDatabase( app );
+const app = initializeApp(firebaseConfig);
 const auth = getAuth();
+const Database = getDatabase(app);
+
+const rdUrl = new URL(window.location.href);
+const rdf = rdUrl.searchParams.get('rdf');
+
+// check if user is already logged in
+if (!sessionStorage.getItem('loggedIn') === 'true') {
+ if (rdf) {
+  window.location.href = rdf;
+ } else {
+  window.location.href = '../../';
+ }
+}
+
+login_form.addEventListener('submit', function (e) {
+ e.preventDefault();
+ console.log('submit');
+ login();
+});
+
+registerBtn.addEventListener('click', function (e) {
+ e.preventDefault();
+ register();
+});
+
+async function login() {
+ console.log('logging in');
+ const username = login_user.value;
+ const password = login_pass.value;
+
+ if (!validateEmail(username) || !validatePassword(password)) {
+  return;
+ }
+
+ try {
+  await signInWithEmailAndPassword(auth, username, password);
+  login_status.innerHTML = 'Logged in successfully';
+  login_status.style.color = 'green';
+
+  setLoginSessionCookie(username);
+ } catch (error) {
+  login_status.innerHTML = error.message;
+  login_status.style.color = 'red';
+  login_pass.value = '';
+
+  if (error.code === 'auth/invalid-login-credentials') {
+   login_status.innerHTML = 'Invalid email or password';
+   throw new Error('Invalid email or password');
+  }
+
+  login_status.innerHTML = 'An error occurred';
+  throw new Error(`An error occurred:\n${error}`);
+ }
+}
 
-login_form.addEventListener( "submit", function ( e ) {
-    e.preventDefault();
-    console.log('submit')
-    register();
-} );
-
-
-function register () {
-    const username = login_user;
-    const password = login_pass;
-    const auth = getAuth();
-
-    if ( !validateEmail( username ) || !validatePassword( password ) ) {
-        login_status.innerHTML = "Invalid email or password";
-        return;
-    }
-
-    createUserWithEmailAndPassword( auth, email, password )
-        .then( ( userCredential ) => {
-            // Signed up 
-            const user = userCredential.user;
-            var ref = database.ref( 'users/' + user.uid );
-
-            const userData = {
-                email: user.email,
-                uid: user.uid,
-                last_login: Date.now()
-            };
-
-            ref.set( userData );
-
-            login_status.innerHTML = "User created";
-            alert( "User created" );
-        } )
-        .catch( ( error ) => {
-            const errorCode = error.code;
-            const errorMessage = error.message;
-            login_status.innerHTML = errorMessage;
-        } );
+async function register() {
+ console.log('registering');
+ const username = login_user.value;
+ const password = login_pass.value;
+
+ if (!validateEmail(username) || !validatePassword(password)) {
+  //   login_status.innerHTML = 'Invalid email or password';
+  return;
+ }
+
+ try {
+  await createUserWithEmailAndPassword(auth, username, password);
+  login_status.innerHTML = 'User created successfully';
+  login_status.style.color = 'green';
+ } catch (error) {
+  login_status.innerHTML = error.message;
+  login_status.style.color = 'red';
+  login_pass.value = '';
+
+  if (error.code === 'auth/email-already-in-use') {
+   login_status.innerHTML = 'Email already in use';
+   throw new Error('Email already in use');
+  }
+
+  if (error.code === 'auth/weak-password') {
+   login_status.innerHTML = 'Password is too weak';
+   throw new Error('Password is too weak');
+  }
+
+  if (error.code === 'auth/invalid-email') {
+   login_status.innerHTML = 'Invalid email';
+   throw new Error('Invalid email');
+  }
+
+  login_status.innerHTML = 'An error occurred';
+  throw new Error('An error occurred');
+ }
 }
 
-function validatePassword ( pass ) {
-    if ( pass.length < 8 ) {
-        login_status.innerHTML = "invalid password";
-        return false;
-    }
+function validatePassword(pass) {
+ if (pass.length < 8) {
+  login_status.innerHTML = 'invalid password';
+  login_status.style.color = 'red';
+  return false;
+ }
 
-    return true;
+ return true;
 }
 
-function validateEmail ( email ) {
-    const emailExpression = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function validateEmail(email) {
+ const emailExpression = /^[a-zA-Z0-9._%+-]+@gmail\.com$/;
+
+ if (!emailExpression.test(email)) {
+  login_status.innerHTML = 'Invalid email';
+  login_status.style.color = 'red';
+  return false;
+ }
+
+ return true;
+}
 
-    if ( !emailExpression.test( email ) ) {
-        login_status.innerHTML = "Invalid email";
-        return false;
-    }
+function setLoginSessionCookie(email) {
+ sessionStorage.setItem('loggedIn', 'true');
 
-    return true;
+ setTimeout(() => {
+  if (rdf) {
+   window.location.href = rdf;
+  } else {
+   window.location.href = '../../';
+  }
+ }, 500);
 }
diff --git a/public/v.3.0/login.html b/public/v.3.0/login.html
index b4e5401..923062e 100644
--- a/public/v.3.0/login.html
+++ b/public/v.3.0/login.html
@@ -145,12 +145,12 @@ <h1>Login</h1>
      <p id="login_status"></p>
      <form class="login_form">
       <div class="login_input">
-       <label for="username">Username</label>
+       <label for="username">Email</label>
        <input
         type="text"
         name="username"
         id="login_user"
-        placeholder="Enter your username"
+        placeholder="Enter your email"
         required
        />
       </div>
@@ -168,7 +168,7 @@ <h1>Login</h1>
       <button type="submit" class="login_btn">Login</button>
      </form>
 
-     <p>Don't have an account? <a href="./register.html">Register</a></p>
+     <p>Don't have an account? <button id="register-btn">Register</button></p>
     </div>
    </section>
   </container>
diff --git a/public/v.3.0/login/auth_signin_password.js b/public/v.3.0/login/auth_signin_password.js
deleted file mode 100644
index f0a211d..0000000
--- a/public/v.3.0/login/auth_signin_password.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// This snippet file was generated by processing the source file:
-// ./auth-next/email.js
-//
-// To update the snippets in this file, edit the source and then run
-// 'npm run snippets'.
-
-// [START auth_signin_password_modular]
-import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
-
-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;
-  });
-// [END auth_signin_password_modular]
\ No newline at end of file
diff --git a/public/v.3.0/login/auth_signup_password.js b/public/v.3.0/login/auth_signup_password.js
deleted file mode 100644
index 936b64c..0000000
--- a/public/v.3.0/login/auth_signup_password.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// This snippet file was generated by processing the source file:
-// ./auth-next/email.js
-//
-// To update the snippets in this file, edit the source and then run
-// 'npm run snippets'.
-
-// [START auth_signup_password_modular]
-import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
-
-const auth = getAuth();
-createUserWithEmailAndPassword(auth, email, password)
-  .then((userCredential) => {
-    // Signed up 
-    const user = userCredential.user;
-    // ...
-  })
-  .catch((error) => {
-    const errorCode = error.code;
-    const errorMessage = error.message;
-    // ..
-  });
-// [END auth_signup_password_modular]
\ No newline at end of file