dnoulet/go-guess
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: avatar, account menu, and single sign-on from Go Loose

Browse source 
Signing in now starts at the sign-in screen and one button that hands the
browser to Go Loose, which returns to the welcome page. Nothing redirects to the
identity provider on its own any more: that fired on every anonymous visit and
read as a redirect loop rather than as a choice to sign in. The password form
remains only where the API reports that Go Loose login is not configured for the
host, because otherwise the application is unreachable on a bare localhost.

A person's picture is carried through from the Go Loose identity and rendered in
the account menu and on the profile page, with their initials as the fallback.
Two things make that fallback necessary rather than decorative: Go Loose retires a
picture key when a picture is replaced, so a link cached in a browser can be dead,
and most people have not uploaded one. The URL is deliberately not persisted
locally, since a stored key would keep failing after the picture changed.

The account menu is a disclosure rather than a hover menu: a real button with
aria-expanded, Escape and outside clicks closing it, and focus returning to the
trigger. It is not an ARIA menu, because its actions are a link and a button and
menuitem roles would strip the link semantics from one of them for no gain.

The account URL of the Go Loose identity is resolved on each sign-in and is read
from the live identity provider every time, which is also what makes it correct
after a picture change.

Depends on the Go Loose revision that serves avatar_url through
/connect/userinfo, so the picture URL reaches this application at all.
This commit is contained in:
Daniel Noulet 2026-10-05 21:50:06 +02:00
parent 6be21597d5
commit 5449cd3d8d
52 changed files with 1927 additions and 434 deletions
Download patch file Download diff file Expand all files Collapse all files

87
frontend/src/features/login/LoginPage.tsx
View file

@ -1,20 +1,46 @@
import { ArrowRight, CircleHelp, Sparkles } from 'lucide-react'
import { ArrowRight, CircleHelp, KeyRound, Sparkles } from 'lucide-react'
import { SyntheticEvent, useState } from 'react'
import Logo from '../../components/layout/Logo'
import { FormField } from '../../components/form'
import { ErrorAlert, errorMessage } from '../../components/actions'
import { api, authStorage } from '../../api/client'
const LOGIN_PATH = '/api/auth/login'
/**
* The sign-in screen.
*
* Signing in happens at Go Loose, so the usual case is one button that hands the
* browser over to it and comes back to the welcome page. That also means a person
* who already signed in at another application passes straight through, because
* Go Loose recognises the session it already holds and issues a code without
* asking anything.
*
* The password form is only for a host where Go Loose login is not configured:
* the API answers /api/auth/session with 404 there, and without a fallback the
* application would be unreachable on a bare localhost. It is not offered where
* the identity provider is in charge.
*/
export function LoginPage({
onLogin,
sessionExpired,
ssoAvailable,
}: {
onLogin: () => void
sessionExpired: boolean
/** null until the API has said whether Go Loose login is configured here. */
ssoAvailable: boolean | null
}) {
const [loading, setLoading] = useState(false)
const [error, setError] = useState('')
function beginExternalLogin() {
setLoading(true)
// A full navigation, not a router push: Go Loose answers with a redirect
// chain across two origins that the router has no part in.
window.location.assign(LOGIN_PATH)
}
async function submit(event: SyntheticEvent<HTMLFormElement>) {
event.preventDefault()
setLoading(true)
@ -58,25 +84,46 @@ export function LoginPage({
Your session is no longer active. Sign in again to continue.
</div>
)}
<p className="muted">Use your work account to continue.</p>
<form onSubmit={submit} className="stack-form">
<FormField label="Email address" htmlFor="email">
<input id="email" name="email" type="email" autoComplete="email" required />
</FormField>
<FormField label="Password" htmlFor="password">
<input
id="password"
name="password"
type="password"
autoComplete="current-password"
required
/>
</FormField>
{error && <ErrorAlert message={error} />}
<button className="button primary wide" type="submit" disabled={loading}>
{loading ? 'Signing in…' : 'Sign in'} <ArrowRight size={18} />
</button>
</form>
<p className="muted">
Use your work account to continue. If you are already signed in elsewhere, this takes
you straight through.
</p>
{ssoAvailable === false ? (
<form onSubmit={submit} className="stack-form">
<p className="muted">
Single sign-on is not configured for this host. Sign in with a local account.
</p>
<FormField label="Email address" htmlFor="email">
<input id="email" name="email" type="email" autoComplete="email" required />
</FormField>
<FormField label="Password" htmlFor="password">
<input
id="password"
name="password"
type="password"
autoComplete="current-password"
required
/>
</FormField>
{error && <ErrorAlert message={error} />}
<button className="button primary wide" type="submit" disabled={loading}>
{loading ? 'Signing in…' : 'Sign in'} <ArrowRight size={18} />
</button>
</form>
) : (
<div className="stack-form">
<button
className="button primary wide"
type="button"
onClick={beginExternalLogin}
disabled={loading}
>
{loading ? 'Redirecting…' : 'Sign in with Go Loose'} <KeyRound size={18} />
</button>
</div>
)}
<p className="demo-note">
<CircleHelp size={16} /> Contact your administrator for access.
</p>