Skip to content

refactor: remove jQuery from email-handler (@Leonabcd123) #7304

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

Open
Leonabcd123 wants to merge 9 commits into
base: master
Choose a base branch
from
Open

refactor: remove jQuery from email-handler (@Leonabcd123) #7304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8d6a51c
Remove jQuery from email-handler
Leonabcd123 Jan 2, 2026
dc2c98d
Fix path
Leonabcd123 Jan 2, 2026
63fe494
Use setText
Leonabcd123 Jan 2, 2026
73595c4
Add docs for scrollIntoView function
Leonabcd123 Jan 2, 2026
afaf665
Merge branch 'master' into bye-jquery-email-handler
Leonabcd123 Jan 2, 2026
85b1fea
use focus()
Leonabcd123 Jan 2, 2026
6ff0e9c
Merge branch 'master' into bye-jquery-email-handler
Leonabcd123 Jan 2, 2026
0ff5a29
Remove spaces
Leonabcd123 Jan 3, 2026
e7266ae
Unindent
Leonabcd123 Jan 3, 2026
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
96 changes: 47 additions & 49 deletions frontend/src/email-handler.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,6 @@
</div>
</body>
<script type="module">
import $ from "jquery";
import {
applyActionCode,
verifyPasswordResetCode,
Expand All @@ -179,6 +178,7 @@
} from "firebase/auth";
import { initializeApp } from "firebase/app";
import { firebaseConfig } from "./ts/constants/firebase-config";
import { qs, onDOMReady } from "./ts/utils/dom";

const app = initializeApp(firebaseConfig);
const Auth = getAuth(app);
Expand All @@ -199,16 +199,16 @@
.then((resp) => {
// Email address has been verified.

$("main .preloader .icon").html(`<i class="fas fa-fw fa-check"></i>`);
$("main .preloader .text").text(
qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-check"></i>`);
qs("main .preloader .text")?.setText(
`Your email address has been verified`,
);
$("main .preloader .subText").text(`You can now close this tab`);
qs("main .preloader .subText")?.setText(`You can now close this tab`);
})
.catch((error) => {
console.error(error);
$("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
$("main .preloader .text").text(
qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
qs("main .preloader .text")?.setText(
`Fatal error: ${error.message}. If this issue persists, please report it.`,
);
// Code is invalid or expired. Ask the user to verify their email address
Expand All @@ -217,14 +217,14 @@
}

function showResetPassword() {
$("main .preloader").addClass("hidden");
$("main .resetPassword").removeClass("hidden");
$("main .resetPassword input").trigger("focus");
qs("main .preloader")?.hide();
qs("main .resetPassword")?.show();
qs("main .resetPassword input")?.focus();
}

function hideResetPassword() {
$("main .preloader").removeClass("hidden");
$("main .resetPassword").addClass("hidden");
qs("main .preloader")?.show();
qs("main .resetPassword")?.hide();
}

function handleResetPassword(actionCode, continueUrl) {
Expand All @@ -234,8 +234,8 @@
.then((email) => {
var accountEmail = email;

var newPassword = $("main .resetPassword .pwd").val();
var newPasswordConfirm = $("main .resetPassword .pwd-confirm").val();
var newPassword = qs<HTMLInputElement>("main .resetPassword .pwd")?.getValue();
var newPasswordConfirm = qs<HTMLInputElement>("main .resetPassword .pwd-confirm")?.getValue();

if (newPassword !== newPasswordConfirm) {
alert("Passwords do not match");
Expand All @@ -255,20 +255,20 @@
confirmPasswordReset(Auth, actionCode, newPassword)
.then((resp) => {
// Password reset has been confirmed and new password updated.
$("main .preloader .icon").html(
qs("main .preloader .icon")?.setHtml(
`<i class="fas fa-fw fa-check"></i>`,
);
$("main .preloader .text").text(`Your password has been changed`);
$("main .preloader .subText").text(`You can now close this tab`);
qs("main .preloader .text")?.setText(`Your password has been changed`);
qs("main .preloader .subText")?.setText(`You can now close this tab`);

signInWithEmailAndPassword(Auth, accountEmail, newPassword);
})
.catch((error) => {
console.error(error);
$("main .preloader .icon").html(
qs("main .preloader .icon")?.setHtml(
`<i class="fas fa-fw fa-times"></i>`,
);
$("main .preloader .text").text(
qs("main .preloader .text")?.setText(
`Fatal error: ${error.message}. If this issue persists, please report it.`,
);
// Error occurred during confirmation. The code might have expired or the
Expand All @@ -277,12 +277,12 @@
})
.catch((error) => {
console.error(error);
$("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
$("main .preloader .text").text(
qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
qs("main .preloader .text")?.setText(
`Fatal error: ${error.message}. If this issue persists, please report it.`,
);

// $("main .preloader .subText").text(error);
// qs("main .preloader .subText")?.setText(error);

// Invalid or expired action code. Ask user to try to reset the password
// again.
Expand All @@ -303,15 +303,15 @@
return applyActionCode(Auth, actionCode);
})
.then(() => {
$("main .preloader .icon").html(`<i class="fas fa-fw fa-check"></i>`);
$("main .preloader .text").text(`Your account email was reverted.`);
$("main .preloader .subText").text(``);
qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-check"></i>`);
qs("main .preloader .text")?.setText(`Your account email was reverted.`);
qs("main .preloader .subText")?.setText(``);

$("main .preloader").append(`
qs("main .preloader").appendHtml(`
<br>
In case you believe your account was compromised, please request a password reset email:
`);
$("main .preloader").append(`
qs("main .preloader")?.appendHtml(`
<br>
<div class="button" onclick="sendPasswordReset('${restoredEmail}')">Send Password Reset Email</div>
`);
Expand All @@ -325,22 +325,22 @@
})
.catch((error) => {
console.error(error);
$("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
$("main .preloader .text").text(error.message);
qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
qs("main .preloader .text")?.setText(error.message);
});
}

function sendPasswordReset(email) {
sendPasswordResetEmail(Auth, email)
.then(() => {
$("main .preloader .icon").html(`<i class="fas fa-fw fa-check"></i>`);
$("main .preloader .text").text(`Password reset email sent`);
$("main .preloader .subText").text(`Please check your inbox`);
qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-check"></i>`);
qs("main .preloader .text")?.setText(`Password reset email sent`);
qs("main .preloader .subText")?.setText(`Please check your inbox`);
})
.catch((error) => {
console.error(error);
$("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
$("main .preloader .text").text(error.message);
qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
qs("main .preloader .text")?.setText(error.message);
});
}

Expand All @@ -353,9 +353,7 @@
return decodeURIComponent(results[2].replace(/\+/g, " "));
}

document.addEventListener(
"DOMContentLoaded",
() => {
onDOMReady(() => {
try {
// Get the action to complete.
var mode = getParameterByName("mode");
Expand All @@ -376,26 +374,26 @@
// var auth = firebase.auth();

if (!mode) {
$("main .preloader .icon").html(
qs("main .preloader .icon")?.setHtml(
`<i class="fas fa-fw fa-times"></i>`,
);
$("main .preloader .text").text(`Mode parameter not found`);
qs("main .preloader .text")?.setText(`Mode parameter not found`);
return;
}

if (!actionCode) {
$("main .preloader .icon").html(
qs("main .preloader .icon")?.setHtml(
`<i class="fas fa-fw fa-times"></i>`,
);
$("main .preloader .text").text(`Action code parameter not found`);
qs("main .preloader .text")?.setText(`Action code parameter not found`);
return;
}

// Handle the user management action.
switch (mode) {
case "resetPassword":
// Display reset password handler and UI.
$("#logo .text span").text("Reset Password");
qs("#logo .text span")?.setText("Reset Password");
document.title = "Reset Password | Monkeytype";
showResetPassword();
break;
Expand All @@ -404,38 +402,38 @@
handleRecoverEmail(actionCode);
break;
case "verifyEmail":
$("#logo .text span").text("Verify Email");
qs("#logo .text span")?.setText("Verify Email");
document.title = "Verify Email | Monkeytype";
// Display email verification handler and UI.
handleVerifyEmail(actionCode, continueUrl);
break;
default:
$("main .preloader .icon").html(
qs("main .preloader .icon")?.setHtml(
`<i class="fas fa-fw fa-times"></i>`,
);
$("main .preloader .text").text(`Invalid mode`);
qs("main .preloader .text")?.setText(`Invalid mode`);
console.error("no mode found");
// Error: invalid mode.
}

$("main .resetPassword .button").on("click", () => {
qs("main .resetPassword .button")?.on("click", () => {
handleResetPassword(actionCode, continueUrl);
});

$("main .resetPassword input").on("keypress", (e) => {
qs("main .resetPassword input")?.on("keypress", (e) => {
if (e.key === "Enter") handleResetPassword(actionCode, continueUrl);
});
} catch (e) {
$("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
$("main .preloader .text").text(
qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
qs("main .preloader .text")?.setText(
`Fatal error: ${e.message}. If this issue persists, please report it.`,
);
}
},
false,
);

document.querySelector("header").addEventListener("click", () => {
qs("header")?.on("click", () => {
window.location = "/";
});
</script>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/ts/pages/profile-search.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export const page = new Page({
disableButton();
},
afterShow: async (): Promise<void> => {
qs(".page.pageProfileSearch input")?.dispatch("focus");
qs(".page.pageProfileSearch input")?.focus();
},
});

Expand Down
4 changes: 3 additions & 1 deletion frontend/src/ts/utils/dom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,11 +212,13 @@ export class ElementWithUtils<T extends HTMLElement = HTMLElement> {
/**
* Check if element is visible
*/

isVisible(): boolean {
return this.native.offsetWidth > 0 || this.native.offsetHeight > 0;
}

/**
* Make element visible by scrolling the element's ancestor containers
*/
scrollIntoView(options: ScrollIntoViewOptions): this {
this.native.scrollIntoView(options);

Expand Down