Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement Email/Password Authentication with Email Verification for Manga Reader #9

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Implement Email/Password Authentication with Email Verification for Manga Reader #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9875795
Update signin.html with new forms and buttons
duckie-ai-helper[bot] Aug 24, 2023
65e3fff
Implement sign-in, sign-up, and password reset functionality in signi…
duckie-ai-helper[bot] Aug 24, 2023
a380aa3
Update options.js to handle user authentication state changes
duckie-ai-helper[bot] Aug 24, 2023
f466ffd
Style the new forms and buttons in signin.css
duckie-ai-helper[bot] Aug 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions css/signin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,3 +88,37 @@ h1 {
color: #333;
border: 1px solid #333;
}

/* New Code Changes */

#email-signin-form,
#email-signup-form {
margin-bottom: 20px;
}

#email-signin-form input,
#email-signup-form input {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 10px;
font-size: 16px;
}

#email-signin-form button,
#email-signup-form button,
#forgot-password {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #4285F4;
color: #fff;
border: none;
cursor: pointer;
}

#forgot-password {
margin-bottom: 20px;
background-color: #333;
}
7 changes: 6 additions & 1 deletion options/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ const auth = getAuth(firebaseApp);

onAuthStateChanged(auth, user => {
if (user != null) {
if (!user.emailVerified) {
console.log('Email not verified!');
auth.signOut();
return;
}
console.log('User is logged in!');
chrome.storage.sync.set({idToken: user.accessToken})
fetchUserLimit();
Expand Down Expand Up @@ -274,4 +279,4 @@ function fetchUserLimit() {
})
.catch(error => console.error('Error:', error));
});
}
}
17 changes: 13 additions & 4 deletions options/signin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,19 @@
<body>
<div class="container">
<h1>Manga Reader</h1>
<form>
<div class="social__login">
<a href="#" class="btn btn__google"><i class="fa fa-google"></i>GOOGLE</a>
</div>
<form id="email-signin-form">
<input type="email" id="email-input" placeholder="Email">
<input type="password" id="password-input" placeholder="Password">
<button type="submit">Sign In</button>
</form>
<button id="forgot-password">Forgot Password</button>
<form id="email-signup-form">
<input type="email" id="signup-email-input" placeholder="Email">
<input type="password" id="signup-password-input" placeholder="Password">
<button type="submit">Sign Up</button>
</form>
<div class="social__login">
<a href="#" class="btn btn__google"><i class="fa fa-google"></i>GOOGLE</a>
</div>
</div>
</body>
Expand Down
44 changes: 41 additions & 3 deletions options/signin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@ import {
signInWithCredential,
GoogleAuthProvider,
setPersistence,
browserLocalPersistence
browserLocalPersistence,
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
sendPasswordResetEmail,
sendEmailVerification
} from 'firebase/auth';

// Auth instance for the current firebaseApp
Expand All @@ -30,6 +34,41 @@ document.querySelector('.btn__google').addEventListener('click', () => {
initFirebaseApp()
});

document.querySelector('#email-signin-form').addEventListener('submit', (event) => {
event.preventDefault();
const email = document.querySelector('#email-input').value;
const password = document.querySelector('#password-input').value;
signInWithEmailAndPassword(auth, email, password).catch((error) => {
console.error(error);
alert(error.message);
});
});

document.querySelector('#forgot-password').addEventListener('click', () => {
const email = document.querySelector('#email-input').value;
sendPasswordResetEmail(auth, email).catch((error) => {
console.error(error);
alert(error.message);
});
});

document.querySelector('#email-signup-form').addEventListener('submit', (event) => {
event.preventDefault();
const email = document.querySelector('#signup-email-input').value;
const password = document.querySelector('#signup-password-input').value;
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
sendEmailVerification(userCredential.user).catch((error) => {
console.error(error);
alert(error.message);
});
})
.catch((error) => {
console.error(error);
alert(error.message);
});
});

function initFirebaseApp() {
// Detect auth state
onAuthStateChanged(auth, user => {
Expand Down Expand Up @@ -92,5 +131,4 @@ function startAuth(interactive) {
console.error('The OAuth token was null');
}
});
}

}