Skip to content

Commit 8c9ca7d

Browse files
Leonabcd123Miodec
Leonabcd123
and
Miodec
authored
refactor: remove jQuery from email-handler (@Leonabcd123) (#7304)
Co-authored-by: Jack <[email protected]>
1 parent fe2f151 commit 8c9ca7d

File tree

3 files changed

+52
-54
lines changed

3 files changed

+52
-54
lines changed

‎frontend/src/email-handler.html‎

Lines changed: 48 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,6 @@
167167
</div>
168168
</body>
169169
<script type="module">
170-
import $ from "jquery";
171170
import {
172171
applyActionCode,
173172
verifyPasswordResetCode,
@@ -179,6 +178,7 @@
179178
} from "firebase/auth";
180179
import { initializeApp } from "firebase/app";
181180
import { firebaseConfig } from "./ts/constants/firebase-config";
181+
import { qs, onDOMReady } from "./ts/utils/dom";
182182

183183
const app = initializeApp(firebaseConfig);
184184
const Auth = getAuth(app);
@@ -199,16 +199,16 @@
199199
.then((resp) => {
200200
// Email address has been verified.
201201

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

219219
function showResetPassword() {
220-
$("main .preloader").addClass("hidden");
221-
$("main .resetPassword").removeClass("hidden");
222-
$("main .resetPassword input").trigger("focus");
220+
qs("main .preloader")?.hide();
221+
qs("main .resetPassword")?.show();
222+
qs("main .resetPassword input")?.focus();
223223
}
224224

225225
function hideResetPassword() {
226-
$("main .preloader").removeClass("hidden");
227-
$("main .resetPassword").addClass("hidden");
226+
qs("main .preloader")?.show();
227+
qs("main .resetPassword")?.hide();
228228
}
229229

230230
function handleResetPassword(actionCode, continueUrl) {
@@ -234,8 +234,8 @@
234234
.then((email) => {
235235
var accountEmail = email;
236236

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

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

264264
signInWithEmailAndPassword(Auth, accountEmail, newPassword);
265265
})
266266
.catch((error) => {
267267
console.error(error);
268-
$("main .preloader .icon").html(
268+
qs("main .preloader .icon")?.setHtml(
269269
`<i class="fas fa-fw fa-times"></i>`,
270270
);
271-
$("main .preloader .text").text(
271+
qs("main .preloader .text")?.setText(
272272
`Fatal error: ${error.message}. If this issue persists, please report it.`,
273273
);
274274
// Error occurred during confirmation. The code might have expired or the
@@ -277,12 +277,12 @@
277277
})
278278
.catch((error) => {
279279
console.error(error);
280-
$("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
281-
$("main .preloader .text").text(
280+
qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
281+
qs("main .preloader .text")?.setText(
282282
`Fatal error: ${error.message}. If this issue persists, please report it.`,
283283
);
284284

285-
// $("main .preloader .subText").text(error);
285+
// qs("main .preloader .subText")?.setText(error);
286286

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

310-
$("main .preloader").append(`
310+
qs("main .preloader")?.appendHtml(`
311311
<br>
312312
In case you believe your account was compromised, please request a password reset email:
313313
`);
314-
$("main .preloader").append(`
314+
qs("main .preloader")?.appendHtml(`
315315
<br>
316316
<div class="button" onclick="sendPasswordReset('${restoredEmail}')">Send Password Reset Email</div>
317317
`);
@@ -325,22 +325,22 @@
325325
})
326326
.catch((error) => {
327327
console.error(error);
328-
$("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
329-
$("main .preloader .text").text(error.message);
328+
qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
329+
qs("main .preloader .text")?.setText(error.message);
330330
});
331331
}
332332

333333
function sendPasswordReset(email) {
334334
sendPasswordResetEmail(Auth, email)
335335
.then(() => {
336-
$("main .preloader .icon").html(`<i class="fas fa-fw fa-check"></i>`);
337-
$("main .preloader .text").text(`Password reset email sent`);
338-
$("main .preloader .subText").text(`Please check your inbox`);
336+
qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-check"></i>`);
337+
qs("main .preloader .text")?.setText(`Password reset email sent`);
338+
qs("main .preloader .subText")?.setText(`Please check your inbox`);
339339
})
340340
.catch((error) => {
341341
console.error(error);
342-
$("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
343-
$("main .preloader .text").text(error.message);
342+
qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
343+
qs("main .preloader .text")?.setText(error.message);
344344
});
345345
}
346346

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

356-
document.addEventListener(
357-
"DOMContentLoaded",
358-
() => {
356+
onDOMReady(() => {
359357
try {
360358
// Get the action to complete.
361359
var mode = getParameterByName("mode");
@@ -376,26 +374,26 @@
376374
// var auth = firebase.auth();
377375

378376
if (!mode) {
379-
$("main .preloader .icon").html(
377+
qs("main .preloader .icon")?.setHtml(
380378
`<i class="fas fa-fw fa-times"></i>`,
381379
);
382-
$("main .preloader .text").text(`Mode parameter not found`);
380+
qs("main .preloader .text")?.setText(`Mode parameter not found`);
383381
return;
384382
}
385383

386384
if (!actionCode) {
387-
$("main .preloader .icon").html(
385+
qs("main .preloader .icon")?.setHtml(
388386
`<i class="fas fa-fw fa-times"></i>`,
389387
);
390-
$("main .preloader .text").text(`Action code parameter not found`);
388+
qs("main .preloader .text")?.setText(`Action code parameter not found`);
391389
return;
392390
}
393391

394392
// Handle the user management action.
395393
switch (mode) {
396394
case "resetPassword":
397395
// Display reset password handler and UI.
398-
$("#logo .text span").text("Reset Password");
396+
qs("#logo .text span")?.setText("Reset Password");
399397
document.title = "Reset Password | Monkeytype";
400398
showResetPassword();
401399
break;
@@ -404,38 +402,36 @@
404402
handleRecoverEmail(actionCode);
405403
break;
406404
case "verifyEmail":
407-
$("#logo .text span").text("Verify Email");
405+
qs("#logo .text span")?.setText("Verify Email");
408406
document.title = "Verify Email | Monkeytype";
409407
// Display email verification handler and UI.
410408
handleVerifyEmail(actionCode, continueUrl);
411409
break;
412410
default:
413-
$("main .preloader .icon").html(
411+
qs("main .preloader .icon")?.setHtml(
414412
`<i class="fas fa-fw fa-times"></i>`,
415413
);
416-
$("main .preloader .text").text(`Invalid mode`);
414+
qs("main .preloader .text")?.setText(`Invalid mode`);
417415
console.error("no mode found");
418416
// Error: invalid mode.
419417
}
420418

421-
$("main .resetPassword .button").on("click", () => {
419+
qs("main .resetPassword .button")?.on("click", () => {
422420
handleResetPassword(actionCode, continueUrl);
423421
});
424422

425-
$("main .resetPassword input").on("keypress", (e) => {
423+
qs("main .resetPassword input")?.on("keypress", (e) => {
426424
if (e.key === "Enter") handleResetPassword(actionCode, continueUrl);
427425
});
428426
} catch (e) {
429-
$("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
430-
$("main .preloader .text").text(
427+
qs("main .preloader .icon")?.setHtml(`<i class="fas fa-fw fa-times"></i>`);
428+
qs("main .preloader .text")?.setText(
431429
`Fatal error: ${e.message}. If this issue persists, please report it.`,
432430
);
433431
}
434-
},
435-
false,
436-
);
432+
});
437433

438-
document.querySelector("header").addEventListener("click", () => {
434+
qs("header")?.on("click", () => {
439435
window.location = "/";
440436
});
441437
</script>

‎frontend/src/ts/pages/profile-search.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export const page = new Page({
5757
disableButton();
5858
},
5959
afterShow: async (): Promise<void> => {
60-
qs(".page.pageProfileSearch input")?.dispatch("focus");
60+
qs(".page.pageProfileSearch input")?.focus();
6161
},
6262
});
6363

‎frontend/src/ts/utils/dom.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,11 +212,13 @@ export class ElementWithUtils<T extends HTMLElement = HTMLElement> {
212212
/**
213213
* Check if element is visible
214214
*/
215-
216215
isVisible(): boolean {
217216
return this.native.offsetWidth > 0 || this.native.offsetHeight > 0;
218217
}
219218

219+
/**
220+
* Make element visible by scrolling the element's ancestor containers
221+
*/
220222
scrollIntoView(options: ScrollIntoViewOptions): this {
221223
this.native.scrollIntoView(options);
222224

0 commit comments

Comments
 (0)