T10.5: login becomes an Okta redirect, not a form
server/app.py: - okta_login(): validates and stashes ?next= (same-site path only) in the OAuth-state session before redirecting to Okta, so a deep link an assignment email carried (X1/CR-011/CR-014) survives the round trip instead of always landing on /index.html. - okta_callback(): reads that stashed next= back (re-validated on the way out too - belt and suspenders against a crafted value) and redirects there on success. The two failure paths that used to raise a raw HTTPException - OAuthError (sign-in cancelled/failed) and a locally-disabled account - now redirect to /login.html?error=... instead: this route is reached by a full page browser navigation from Okta, not a fetch() call, so a JSON error body just looks like a broken page to whoever is signing in. html/login.html + html/login.js: rebuilt as a single "Sign in with Okta" link, replacing the username/password form and the forgot/reset-password views (gone entirely - no local password exists to reset, per D15/D16/T10.4). Kept the accessible error/ok banner pattern (role=alert / role=status) byte-for- byte, since CLAUDE.md names this file as the reference other pages copy for that pattern. login.js reads ?next= off its own URL (auth-guard.js's goToLogin() already builds this, unchanged) and forwards it to /api/auth/okta/login, and shows a plain-language message for ?error=disabled / ?error=cancelled, clearing the code from the address bar once shown. Sign- out (auth-guard.js's wpLogout()) already redirected to login.html - untouched, already satisfied "lands back on the app's own login page." Uses a real <a href> rather than a JS-driven navigation, so it's a working link even before login.js runs, and needs no keyboard/touch handling beyond what a link gets for free (C1 accessibility). Also fixed in passing (not a separate commit - this is what exposed it): _safe_next_path() on the server and safeNext() in login.js enforce the exact same rule (same-site path only, reject '//' and scheme URLs) so a crafted ?next= can't become an open redirect through a real Okta sign-in. Verified: a fake-Okta-client round trip against the real app (SessionMiddleware fix from the prior commit) confirms next= is honored end to end, a malicious next= is rejected and falls back to /index.html, OAuthError redirects to ?error=cancelled, and a disabled account redirects to ?error=disabled. The JS-side safeNext() was checked against the same cases directly in Node and matches the server's validation exactly. login.js passes `node --check`; login.html parses cleanly. Live 390px/1440px screenshots were NOT captured this session - the environment's browser pane isn't signed in to view a published preview of it, so that check needs to happen when this branch is actually run and opened by a signed-in browser; the layout risk is low since .card/.brand/.error/.ok/.foot are unchanged from the already-shipped file and the only new CSS is one simple full-width block link. wave-10.md T10.5 / D15 / D16
This commit is contained in:
@@ -31,34 +31,23 @@
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.brand img { height: 36px; width: auto; }
|
||||
.brand .name { font-weight: 700; font-size: 0.95rem; color: var(--cds-text-primary); }
|
||||
h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
|
||||
.sub { color: var(--cds-text-secondary); font-size: 0.875rem; margin-bottom: 1.75rem; }
|
||||
label { display: block; font-size: 0.75rem; color: var(--cds-text-secondary); margin-bottom: 0.375rem; }
|
||||
.field { margin-bottom: 1.25rem; }
|
||||
input[type=text], input[type=password] {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
font-size: 1rem;
|
||||
background: var(--cds-field);
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--cds-border-strong);
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
input:focus { outline: 2px solid var(--cds-focus); background: var(--cds-field-hover); }
|
||||
button {
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--cds-text-on-color);
|
||||
background: var(--cds-button-primary);
|
||||
border: none;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
button:hover:not(:disabled) { background: var(--cds-hover-primary); }
|
||||
button:disabled { background: var(--cds-disabled-02); cursor: not-allowed; }
|
||||
.btn:hover { background: var(--cds-hover-primary); }
|
||||
.btn:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 2px; }
|
||||
.error {
|
||||
display: none;
|
||||
background: var(--wp-status-error-bg);
|
||||
@@ -69,7 +58,6 @@
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.error.show { display: block; }
|
||||
.foot { margin-top: 1.5rem; font-size: 0.75rem; color: var(--cds-text-helper); text-align: center; }
|
||||
.ok {
|
||||
display: none;
|
||||
background: var(--wp-status-success-bg);
|
||||
@@ -80,15 +68,7 @@
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.ok.show { display: block; }
|
||||
.note {
|
||||
font-size: 0.8125rem; color: var(--cds-text-secondary);
|
||||
background: var(--cds-layer-accent); border-left: 3px solid var(--cds-link-primary);
|
||||
padding: 0.75rem; margin-bottom: 1.25rem;
|
||||
}
|
||||
.hint { font-size: 0.75rem; color: var(--cds-text-helper); margin-top: -0.75rem; margin-bottom: 1.25rem; }
|
||||
a.link { color: var(--cds-link-primary); text-decoration: none; font-size: 0.8125rem; }
|
||||
a.link:hover { text-decoration: underline; }
|
||||
.center { text-align: center; margin-top: 1.25rem; }
|
||||
.foot { margin-top: 1.5rem; font-size: 0.75rem; color: var(--cds-text-helper); text-align: center; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -99,61 +79,10 @@
|
||||
<div id="error" class="error" role="alert"></div>
|
||||
<div id="ok" class="ok" role="status"></div>
|
||||
|
||||
<!-- SIGN IN -->
|
||||
<section id="view-login">
|
||||
<h1>Sign in</h1>
|
||||
<p class="sub">Work Package Suite</p>
|
||||
<form id="login-form" autocomplete="on">
|
||||
<div class="field">
|
||||
<label for="username">Username</label>
|
||||
<input id="username" name="username" type="text" autocomplete="username" autofocus required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<input id="password" name="password" type="password" autocomplete="current-password" required>
|
||||
</div>
|
||||
<button id="submit" type="submit">Sign in</button>
|
||||
</form>
|
||||
<p class="center"><a href="#" id="forgot-link" class="link">Forgot password?</a></p>
|
||||
</section>
|
||||
|
||||
<!-- FORGOT PASSWORD (email reset) -->
|
||||
<section id="view-forgot" style="display:none">
|
||||
<h1>Reset password</h1>
|
||||
<p class="sub">We'll email you a link to set a new one.</p>
|
||||
<div id="forgot-unavailable" class="note" style="display:none">
|
||||
Password reset by email isn't switched on yet. Contact your project admin and
|
||||
they'll set a new password for you. Once you're signed in you can change it
|
||||
yourself from the menu in the top-right corner.
|
||||
</div>
|
||||
<form id="forgot-form" autocomplete="on">
|
||||
<div class="field">
|
||||
<label for="forgot-username">Username or email</label>
|
||||
<input id="forgot-username" type="text" autocomplete="username" required>
|
||||
</div>
|
||||
<button id="forgot-submit" type="submit">Email me a reset link</button>
|
||||
</form>
|
||||
<p class="center"><a href="#" id="back-to-login" class="link">← Back to sign in</a></p>
|
||||
</section>
|
||||
|
||||
<!-- SET A NEW PASSWORD (arrived from the emailed link) -->
|
||||
<section id="view-reset" style="display:none">
|
||||
<h1>Set a new password</h1>
|
||||
<p class="sub">Choose a password you don't use anywhere else.</p>
|
||||
<form id="reset-form" autocomplete="on">
|
||||
<div class="field">
|
||||
<label for="new-password">New password</label>
|
||||
<input id="new-password" type="password" autocomplete="new-password" autofocus required>
|
||||
</div>
|
||||
<div class="hint">At least 12 characters.</div>
|
||||
<div class="field">
|
||||
<label for="new-password2">Confirm new password</label>
|
||||
<input id="new-password2" type="password" autocomplete="new-password" required>
|
||||
</div>
|
||||
<button id="reset-submit" type="submit">Set password & sign in</button>
|
||||
</form>
|
||||
<p class="center"><a href="#" id="reset-to-login" class="link">← Back to sign in</a></p>
|
||||
</section>
|
||||
<h1>Sign in</h1>
|
||||
<p class="sub">Work Package Suite uses your organization's Okta sign-in. Select the
|
||||
button below and follow the prompts there.</p>
|
||||
<a id="okta-signin" class="btn" href="/api/auth/okta/login" autofocus>Sign in with Okta</a>
|
||||
|
||||
<p class="foot">Authorized use only · BTG / Pilot</p>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user