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>
</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] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Miodec <13181393+Miodec@users.noreply.github.com>
Co-authored-by: Jack <jack@monkeytype.com>
Switching the screenshot library from html2canvas to modern-screenshot.
for both visual for users and some technical/codebase benefits.
### Visual Improvements :
* Background css filters now shows in the screenshot.
fix: #6862 ,
#1613 ,
https://github.com/monkeytypegame/monkeytype/issues/6249#issuecomment-2651215569
* Sharper, higher-quality screenshots noticeably especially on high-DPI
screens.
* Backgrounds now render correctly on small screens that were previously
missing on mobile or small viewports, now included and properly scaled.
* Previously, with extra height e.g input history opened, the background
failed to cover everything even when it should have.
* The screenshot now more closely matches what users actually see across
devices and layouts.
### Non-Visual (Technical/Codebase) Improvements :
* Supporting modern css makes us now able to use css for the heatmap
instead of the JS.
#5892 ,
#5879
* Reduced bundle size: Dropping html2canvas and its dependencies.
* Up-to-date library, easier future improvements.
---------
Co-authored-by: Samuel Hautamäki <70753342+SirObby@users.noreply.github.com>
Co-authored-by: samuelhautamaki <samuelhautamaki@noreply.codeberg.org>
Co-authored-by: Miodec <jack@monkeytype.com>
fixes#6279
- store the last use "remember login" state in localstorage
- initialize firebase auth with correct persistence (LOCAL if "remember
me" is set, SESSION otherwise)
initialization of `Auth` needs to by awaited. This required some
refactoring. During debugging it was useful to have easier control over
the `Auth` object.
Summary of the refactoring:
- don't expose firebase `App` or `Auth` (except for email-handler)
- initialise firebase in async method that can be awaited to ensure
setup is done before any call to firebase
- move `authStateChanged` handling from account-controller to our
firebase module which then calls `account-controller.readyFunction`.
- update all direct calls to `Auth` to use functions of our firebase
module
- move error handling and interpretation of `FirebaseError` to our
module and removed duplicate code
- use tryCatch helper on refactored code instead of native `try...
catch`
---------
Co-authored-by: Miodec <jack@monkeytype.com>
Co-authored-by: Lukas <dev@mardybum.de>
Co-authored-by: Seif Soliman <byseif21@gmail.com>
Allow the user to use a local file as custom background without
uploading it to the server.
Based on @byseif21 work in #6630, thanks!
---------
Co-authored-by: Miodec <jack@monkeytype.com>
Co-authored-by: Lukas <dev@mardybum.de>
Co-authored-by: Seif Soliman <byseif21@gmail.com>
### Description
This PR updates oxlint to 1.8.0 and fixes the resulting errors in order
to keep oxlint's ecosystem CI green.
Thanks for using oxlint
---------
Co-authored-by: Miodec <jack@monkeytype.com>
If frontend and backend are deployed with a new COMPATABILITY_CHECK
header frontend might show the backend version is lower because of the
http header of a cached response.
Adding the COMPATABILITY_CHECK version as part of the etag fixes this.
- bump the `vite` version that `vitest` uses from 5.2.14 to 5.4.17 to
get the fix vitejs/vite@14b5ced for this warning when running multiple
tests simultaneously (as in `pnpm test-pkg` or `pnpm test`):
> WebSocket server error: Port is already in use
Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite)
from 6.0.11 to 6.0.12.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/vitejs/vite/releases">vite's
releases</a>.</em></p>
<blockquote>
<h2>v6.0.12</h2>
<p>Please refer to <a
href="https://github.com/vitejs/vite/blob/v6.0.12/packages/vite/CHANGELOG.md">CHANGELOG.md</a>
for details.</p>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/vitejs/vite/blob/v6.0.12/packages/vite/CHANGELOG.md">vite's
changelog</a>.</em></p>
<blockquote>
<h2><!-- raw HTML omitted -->6.0.12 (2025-03-24)<!-- raw HTML omitted
--></h2>
<ul>
<li>fix: fs raw query with query separators (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/19702">#19702</a>)
(<a
href="92ca12dc79">92ca12d</a>),
closes <a
href="https://redirect.github.com/vitejs/vite/issues/19702">#19702</a></li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="9d981f9d38"><code>9d981f9</code></a>
release: v6.0.12</li>
<li><a
href="92ca12dc79"><code>92ca12d</code></a>
fix: fs raw query with query separators (<a
href="https://github.com/vitejs/vite/tree/HEAD/packages/vite/issues/19702">#19702</a>)</li>
<li>See full diff in <a
href="https://github.com/vitejs/vite/commits/v6.0.12/packages/vite">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/monkeytypegame/monkeytype/network/alerts).
</details>
---------
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Miodec <jack@monkeytype.com>
Bumps [esbuild](https://github.com/evanw/esbuild) from 0.23.0 to 0.25.0.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/evanw/esbuild/releases">esbuild's
releases</a>.</em></p>
<blockquote>
<h2>v0.25.0</h2>
<p><strong>This release deliberately contains backwards-incompatible
changes.</strong> To avoid automatically picking up releases like this,
you should either be pinning the exact version of <code>esbuild</code>
in your <code>package.json</code> file (recommended) or be using a
version range syntax that only accepts patch upgrades such as
<code>^0.24.0</code> or <code>~0.24.0</code>. See npm's documentation
about <a
href="https://docs.npmjs.com/cli/v6/using-npm/semver/">semver</a> for
more information.</p>
<ul>
<li>
<p>Restrict access to esbuild's development server (<a
href="https://github.com/evanw/esbuild/security/advisories/GHSA-67mh-4wv8-2f99">GHSA-67mh-4wv8-2f99</a>)</p>
<p>This change addresses esbuild's first security vulnerability report.
Previously esbuild set the <code>Access-Control-Allow-Origin</code>
header to <code>*</code> to allow esbuild's development server to be
flexible in how it's used for development. However, this allows the
websites you visit to make HTTP requests to esbuild's local development
server, which gives read-only access to your source code if the website
were to fetch your source code's specific URL. You can read more
information in <a
href="https://github.com/evanw/esbuild/security/advisories/GHSA-67mh-4wv8-2f99">the
report</a>.</p>
<p>Starting with this release, <a
href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>
will now be disabled, and requests will now be denied if the host does
not match the one provided to <code>--serve=</code>. The default host is
<code>0.0.0.0</code>, which refers to all of the IP addresses that
represent the local machine (e.g. both <code>127.0.0.1</code> and
<code>192.168.0.1</code>). If you want to customize anything about
esbuild's development server, you can <a
href="https://esbuild.github.io/api/#serve-proxy">put a proxy in front
of esbuild</a> and modify the incoming and/or outgoing requests.</p>
<p>In addition, the <code>serve()</code> API call has been changed to
return an array of <code>hosts</code> instead of a single
<code>host</code> string. This makes it possible to determine all of the
hosts that esbuild's development server will accept.</p>
<p>Thanks to <a
href="https://github.com/sapphi-red"><code>@sapphi-red</code></a> for
reporting this issue.</p>
</li>
<li>
<p>Delete output files when a build fails in watch mode (<a
href="https://redirect.github.com/evanw/esbuild/issues/3643">#3643</a>)</p>
<p>It has been requested for esbuild to delete files when a build fails
in watch mode. Previously esbuild left the old files in place, which
could cause people to not immediately realize that the most recent build
failed. With this release, esbuild will now delete all output files if a
rebuild fails. Fixing the build error and triggering another rebuild
will restore all output files again.</p>
</li>
<li>
<p>Fix correctness issues with the CSS nesting transform (<a
href="https://redirect.github.com/evanw/esbuild/issues/3620">#3620</a>,
<a
href="https://redirect.github.com/evanw/esbuild/issues/3877">#3877</a>,
<a
href="https://redirect.github.com/evanw/esbuild/issues/3933">#3933</a>,
<a
href="https://redirect.github.com/evanw/esbuild/issues/3997">#3997</a>,
<a
href="https://redirect.github.com/evanw/esbuild/issues/4005">#4005</a>,
<a href="https://redirect.github.com/evanw/esbuild/pull/4037">#4037</a>,
<a
href="https://redirect.github.com/evanw/esbuild/pull/4038">#4038</a>)</p>
<p>This release fixes the following problems:</p>
<ul>
<li>
<p>Naive expansion of CSS nesting can result in an exponential blow-up
of generated CSS if each nesting level has multiple selectors.
Previously esbuild sometimes collapsed individual nesting levels using
<code>:is()</code> to limit expansion. However, this collapsing wasn't
correct in some cases, so it has been removed to fix correctness
issues.</p>
<pre lang="css"><code>/* Original code */
.parent {
> .a,
> .b1 > .b2 {
color: red;
}
}
<p>/* Old output (with --supported:nesting=false) */<br />
.parent > :is(.a, .b1 > .b2) {<br />
color: red;<br />
}</p>
<p>/* New output (with --supported:nesting=false) */<br />
.parent > .a,<br />
.parent > .b1 > .b2 {<br />
color: red;<br />
}<br />
</code></pre></p>
<p>Thanks to <a
href="https://github.com/tim-we"><code>@tim-we</code></a> for working
on a fix.</p>
</li>
<li>
<p>The <code>&</code> CSS nesting selector can be repeated multiple
times to increase CSS specificity. Previously esbuild ignored this
possibility and incorrectly considered <code>&&</code> to have
the same specificity as <code>&</code>. With this release, this
should now work correctly:</p>
<pre lang="css"><code>/* Original code (color should be red) */
</code></pre>
</li>
</ul>
</li>
</ul>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/evanw/esbuild/blob/main/CHANGELOG-2024.md">esbuild's
changelog</a>.</em></p>
<blockquote>
<h1>Changelog: 2024</h1>
<p>This changelog documents all esbuild versions published in the year
2024 (versions 0.19.12 through 0.24.2).</p>
<h2>0.24.2</h2>
<ul>
<li>
<p>Fix regression with <code>--define</code> and
<code>import.meta</code> (<a
href="https://redirect.github.com/evanw/esbuild/issues/4010">#4010</a>,
<a
href="https://redirect.github.com/evanw/esbuild/issues/4012">#4012</a>,
<a
href="https://redirect.github.com/evanw/esbuild/pull/4013">#4013</a>)</p>
<p>The previous change in version 0.24.1 to use a more expression-like
parser for <code>define</code> values to allow quoted property names
introduced a regression that removed the ability to use
<code>--define:import.meta=...</code>. Even though <code>import</code>
is normally a keyword that can't be used as an identifier, ES modules
special-case the <code>import.meta</code> expression to behave like an
identifier anyway. This change fixes the regression.</p>
<p>This fix was contributed by <a
href="https://github.com/sapphi-red"><code>@sapphi-red</code></a>.</p>
</li>
</ul>
<h2>0.24.1</h2>
<ul>
<li>
<p>Allow <code>es2024</code> as a target in <code>tsconfig.json</code>
(<a
href="https://redirect.github.com/evanw/esbuild/issues/4004">#4004</a>)</p>
<p>TypeScript recently <a
href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-7/#support-for---target-es2024-and---lib-es2024">added
<code>es2024</code></a> as a compilation target, so esbuild now supports
this in the <code>target</code> field of <code>tsconfig.json</code>
files, such as in the following configuration file:</p>
<pre lang="json"><code>{
"compilerOptions": {
"target": "ES2024"
}
}
</code></pre>
<p>As a reminder, the only thing that esbuild uses this field for is
determining whether or not to use legacy TypeScript behavior for class
fields. You can read more in <a
href="https://esbuild.github.io/content-types/#tsconfig-json">the
documentation</a>.</p>
<p>This fix was contributed by <a
href="https://github.com/billyjanitsch"><code>@billyjanitsch</code></a>.</p>
</li>
<li>
<p>Allow automatic semicolon insertion after
<code>get</code>/<code>set</code></p>
<p>This change fixes a grammar bug in the parser that incorrectly
treated the following code as a syntax error:</p>
<pre lang="ts"><code>class Foo {
get
*x() {}
set
*y() {}
}
</code></pre>
<p>The above code will be considered valid starting with this release.
This change to esbuild follows a <a
href="https://redirect.github.com/microsoft/TypeScript/pull/60225">similar
change to TypeScript</a> which will allow this syntax starting with
TypeScript 5.7.</p>
</li>
<li>
<p>Allow quoted property names in <code>--define</code> and
<code>--pure</code> (<a
href="https://redirect.github.com/evanw/esbuild/issues/4008">#4008</a>)</p>
<p>The <code>define</code> and <code>pure</code> API options now accept
identifier expressions containing quoted property names. Previously all
identifiers in the identifier expression had to be bare identifiers.
This change now makes <code>--define</code> and <code>--pure</code>
consistent with <code>--global-name</code>, which already supported
quoted property names. For example, the following is now possible:</p>
<pre lang="js"><code></code></pre>
</li>
</ul>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="e9174d671b"><code>e9174d6</code></a>
publish 0.25.0 to npm</li>
<li><a
href="c27dbebb9e"><code>c27dbeb</code></a>
fix <code>hosts</code> in <code>plugin-tests.js</code></li>
<li><a
href="6794f602a4"><code>6794f60</code></a>
fix <code>hosts</code> in <code>node-unref-tests.js</code></li>
<li><a
href="de85afd65e"><code>de85afd</code></a>
Merge commit from fork</li>
<li><a
href="da1de1bf77"><code>da1de1b</code></a>
fix <a
href="https://redirect.github.com/evanw/esbuild/issues/4065">#4065</a>:
bitwise operators can return bigints</li>
<li><a
href="f4e9d19fb2"><code>f4e9d19</code></a>
switch case liveness: <code>default</code> is always last</li>
<li><a
href="7aa47c3e77"><code>7aa47c3</code></a>
fix <a
href="https://redirect.github.com/evanw/esbuild/issues/4028">#4028</a>:
minify live/dead <code>switch</code> cases better</li>
<li><a
href="22ecd30619"><code>22ecd30</code></a>
minify: more constant folding for strict equality</li>
<li><a
href="4cdf03c036"><code>4cdf03c</code></a>
fix <a
href="https://redirect.github.com/evanw/esbuild/issues/4053">#4053</a>:
reordering of <code>.tsx</code> in <code>node_modules</code></li>
<li><a
href="dc719775b7"><code>dc71977</code></a>
fix <a
href="https://redirect.github.com/evanw/esbuild/issues/3692">#3692</a>:
<code>0</code> now picks a random ephemeral port</li>
<li>Additional commits viewable in <a
href="https://github.com/evanw/esbuild/compare/v0.23.0...v0.25.0">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/monkeytypegame/monkeytype/network/alerts).
</details>
---------
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Miodec <jack@monkeytype.com>
This PR removes the remaining "vendor" css files copied into
`static/css` and pick them from npm packages instead.
For the slimselect the css should match the version of the js. Since we
use the slimselect `js` file from the npm package we should use the
`css` file from the package as well.
For the balloon.css the file was copied into the project. Adding it as a
dependency makes sure we know the version of it and we don't modify it
in the project leading to problems when we try to update it later.
Similar to the vendor `js` files (js dependencies from packages) extract
the vendor `css` files into a separate `css` file as well.
