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