Account panel: "Forgot password?" links to the reset page nixamp.com already serves

web/index.html

@@ -288,6 +288,9 @@ <h2 class="panel-heading" data-i18n="Now Playing">Now Playing</h2>
                    placeholder="password" data-i18n-placeholder="password" aria-label="Password" data-i18n-aria-label="Password" />
             <button type="submit" class="button" id="account-submit" data-i18n="Sign in">Sign in</button>
             <button id="account-toggle" type="button" class="ghost" data-i18n="Create one">Create one</button>
+            <!-- The recovery page nixamp.com already serves; a password that
+                 no longer matches is otherwise a dead end here. -->
+            <a id="account-forgot" class="ghost" href="/reset-password" data-i18n="Forgot password?">Forgot password?</a>
           </form>
           <!-- Outside the form, because signing out is the one thing you can do
                once the form is gone. -->

web/src/app.ts

@@ -188,6 +188,7 @@ export function start(): void {
     accountPassword: need<HTMLInputElement>("account-password"),
     accountSubmit: need<HTMLButtonElement>("account-submit"),
     accountToggle: need<HTMLButtonElement>("account-toggle"),
+    accountForgot: need<HTMLAnchorElement>("account-forgot"),
     accountProviders: need<HTMLDivElement>("account-providers"),
     accountPanel: need<HTMLElement>("account-panel"),
     accountElsewhere: need<HTMLParagraphElement>("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();
   };
 

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; }