Skip to content

Commit 44ceb71

Browse files
CopilotMiodec
andauthored
impr(sign up): add temporary email detection to registration form (@copilot) (monkeytypegame#6912)
Implements temporary email detection for the registration email input field on the login page. When users focus on the email input, the system dynamically imports the `disposable-email-domains-js` package to check for temporary/disposable email addresses. ## Changes Made - **Dynamic Import**: Added lazy loading of `disposable-email-domains-js` package that triggers on email input focus - **Email Validation Enhancement**: Extended the existing email validation in `login.ts` to include temporary email detection - **User Warning**: Shows warning message "Be careful when using temporary emails - you will need it to log into your account" for detected temporary emails - **Graceful Degradation**: Handles module import failures silently without breaking existing functionality - **Dependency Management**: Added `disposable-email-domains-js` to frontend package dependencies ## Technical Implementation The implementation integrates seamlessly with the existing `validateWithIndicator` system: ```typescript // Dynamic import on focus emailInputEl.addEventListener("focus", async () => { if (!moduleLoadAttempted) { moduleLoadAttempted = true; try { disposableEmailModule = await import("disposable-email-domains-js"); } catch (e) { // Silent failure - continues without temp email detection } } }); // Validation check if (disposableEmailModule && disposableEmailModule.isDisposableEmail) { if (disposableEmailModule.isDisposableEmail(email)) { return { warning: "Be careful when using temporary emails - you will need it to log into your account" }; } } ``` ## Key Features - **Non-blocking**: Module only loads when needed and failures don't interrupt the user experience - **Warning Level**: Uses the existing warning system, allowing users to continue with registration - **Preserved Functionality**: All existing email validation (education emails, typos) continues to work unchanged - **Performance Optimized**: Lazy loading prevents unnecessary network requests until the feature is actually used ## Testing Verified that: - Temporary emails (e.g., mailinator.com, 10minutemail.com) show appropriate warnings - Regular emails (e.g., gmail.com, outlook.com) pass validation normally - Education emails continue to show existing warnings - Module import failures are handled gracefully - All existing validation behavior is preserved <screenshot> ![Education email validation still works](https://github.com/user-attachments/assets/c035e0f8-df39-407b-95aa-85abc4409f38) ![Regular emails pass validation](https://github.com/user-attachments/assets/f1925ecc-e81e-4dec-867c-a2bc0c19b469) </screenshot> Resolves the requirement to detect temporary emails while maintaining a smooth user experience and backward compatibility. > [!WARNING] > > <details> > <summary>Firewall rules blocked me from connecting to one or more addresses (expand for details)</summary> > > #### I tried to connect to the following addresses, but was blocked by firewall rules: > > - `https://api.github.com/repos/mziyut/disposable-email-domains-js/contents/package.json` > - Triggering command: `curl -s REDACTED` (http block) > > If you need me to access, download, or install something from one of these locations, you can either: > > - Configure [Actions setup steps](https://gh.io/copilot/actions-setup-steps) to set up my environment, which run before the firewall is enabled > - Add the appropriate URLs or hosts to the custom allowlist in this repository's [Copilot coding agent settings](https://github.com/monkeytypegame/monkeytype/settings/copilot/coding_agent) (admins only) > > </details> <!-- START COPILOT CODING AGENT TIPS --> --- ✨ Let Copilot coding agent [set things up for you](https://github.com/monkeytypegame/monkeytype/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo. --------- Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: Miodec <[email protected]> Co-authored-by: Jack <[email protected]>
1 parent b9feaf5 commit 44ceb71

File tree

3 files changed

+42
-0
lines changed

3 files changed

+42
-0
lines changed

frontend/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@
9494
"color-blend": "4.0.0",
9595
"damerau-levenshtein": "1.0.8",
9696
"date-fns": "3.6.0",
97+
"disposable-email-domains-js": "^1.0.35",
9798
"firebase": "12.0.0",
9899
"hangul-js": "0.2.6",
99100
"howler": "2.2.3",

frontend/src/ts/pages/login.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,25 @@ validateWithIndicator(nameInputEl, {
8080
},
8181
});
8282

83+
let disposableEmailModule: typeof import("disposable-email-domains-js") | null =
84+
null;
85+
let moduleLoadAttempted = false;
86+
8387
const emailInputEl = document.querySelector(
8488
".page.pageLogin .register.side input.emailInput"
8589
) as HTMLInputElement;
90+
91+
emailInputEl.addEventListener("focus", async () => {
92+
if (!moduleLoadAttempted) {
93+
moduleLoadAttempted = true;
94+
try {
95+
disposableEmailModule = await import("disposable-email-domains-js");
96+
} catch (e) {
97+
// Silent failure
98+
}
99+
}
100+
});
101+
86102
validateWithIndicator(emailInputEl, {
87103
schema: UserEmailSchema,
88104
isValid: async (email: string) => {
@@ -103,6 +119,23 @@ validateWithIndicator(emailInputEl, {
103119
warning: "Please check your email address, it may contain a typo.",
104120
};
105121
}
122+
123+
if (
124+
disposableEmailModule &&
125+
disposableEmailModule.isDisposableEmail !== undefined
126+
) {
127+
try {
128+
if (disposableEmailModule.isDisposableEmail(email)) {
129+
return {
130+
warning:
131+
"Using a temporary email may cause issues with logging in, password resets and support. Consider using a permanent email address. Don't worry, we don't send spam.",
132+
};
133+
}
134+
} catch (e) {
135+
// Silent failure
136+
}
137+
}
138+
106139
return true;
107140
},
108141
debounceDelay: 0,

pnpm-lock.yaml

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)