diff --git a/web/index.html b/web/index.html
index 90186f5..d1ceedd 100644
--- a/web/index.html
+++ b/web/index.html
@@ -288,6 +288,9 @@
Now Playing
placeholder="password" data-i18n-placeholder="password" aria-label="Password" data-i18n-aria-label="Password" />
+
+ Forgot password?
diff --git a/web/src/app.ts b/web/src/app.ts
index 2962bec..e0fd1d9 100644
--- a/web/src/app.ts
+++ b/web/src/app.ts
@@ -188,6 +188,7 @@ export function start(): void {
accountPassword: need("account-password"),
accountSubmit: need("account-submit"),
accountToggle: need("account-toggle"),
+ accountForgot: need("account-forgot"),
accountProviders: need("account-providers"),
accountPanel: need("account-panel"),
accountElsewhere: need("account-elsewhere"),
@@ -5580,6 +5581,10 @@ export function start(): void {
uiText(dom.accountSubmit, () => creating ? uiMessage("Create account") : uiMessage("Sign in"));
uiText(dom.accountToggle, () => creating ? "I have one" : uiMessage("Create one"));
dom.accountPassword.autocomplete = creating ? "new-password" : "current-password";
+ // Nothing to forget while making an account. Inside a classroom embed
+ // the page is somebody else's iframe, so recovery opens in its own tab.
+ dom.accountForgot.hidden = creating;
+ if (classroomEmbed) { dom.accountForgot.target = "_blank"; dom.accountForgot.rel = "noopener"; }
showWelcome();
};
diff --git a/web/src/styles.css b/web/src/styles.css
index 154346c..e6af70b 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -938,6 +938,9 @@ button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid
button.primary { color: var(--green); border-color: var(--green-dim); min-width: 64px; }
button.ghost { background: transparent; color: var(--muted); }
+/* A link dressed as a ghost button, so "Forgot password?" sits with "Create one". */
+a.ghost { color: var(--muted); font-size: 0.9em; text-decoration: none; padding: 6px 4px; }
+a.ghost:hover { color: var(--green); text-decoration: underline; }
/* Share, with the transport: the one button there that is for somebody else. */
button.share { color: var(--accent); border-color: var(--edge); letter-spacing: 0.04em; }
button.share:hover { background: #16241c; }