Skip to content

Commit

Permalink
fix login and register authentication issue
Browse files Browse the repository at this point in the history
  • Loading branch information
mmpotulo28 committed Mar 25, 2024
1 parent 1b0e883 commit a5d4230
Show file tree
Hide file tree
Showing 6 changed files with 177 additions and 120 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"description": "Digitalism Web App",
"license": "MIT",
"private": false,
"type": "module",
"scripts": {
"main": "index.js",
"start": "node index.js",
Expand Down
36 changes: 30 additions & 6 deletions public/v.3.0/assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
211 changes: 143 additions & 68 deletions public/v.3.0/assets/js/login.js
Original file line number Diff line number Diff line change
@@ -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);
}
6 changes: 3 additions & 3 deletions public/v.3.0/login.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
21 changes: 0 additions & 21 deletions public/v.3.0/login/auth_signin_password.js

This file was deleted.

22 changes: 0 additions & 22 deletions public/v.3.0/login/auth_signup_password.js

This file was deleted.

0 comments on commit a5d4230

Please sign in to comment.