improve login flow from command

Author: AmyJeanes

OpenVoting.Client/src/app.css

@@ -423,10 +423,37 @@ button.ghost {
     color: var(--banner-warning-text);
 }
 
+.banner code,
+.muted code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-weight: 700;
+    font-size: 1em;
+    background: color-mix(in srgb, var(--surface) 70%, transparent);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 1px 6px;
+}
+
 .muted {
     color: var(--text-muted);
 }
 
+.command-block {
+    margin: 8px 0 0;
+    padding: 10px 12px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    background: var(--surface-alt);
+    color: var(--text-primary);
+    display: inline-block;
+    font-size: 0.95rem;
+}
+
+.command-block code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-weight: 700;
+}
+
 .byline {
     display: inline-flex;
     align-items: baseline;

OpenVoting.Client/src/components/AuthPrompt.tsx

@@ -10,6 +10,7 @@ export function AuthPrompt({ onLogin, loginCta = 'Sign in', loginDisabled = fals
       <p className="eyebrow">Sign-in required</p>
       <h2>Please log in to continue</h2>
       <p className="muted">You need to be a member of the Discord server to view polls and vote. Sign in with Discord to continue</p>
+      <p className="muted">You can also run <code>/voting</code> anywhere in the server to get a one-time login link</p>
       {onLogin && (
         <div className="actions">
           <button className="primary" disabled={loginDisabled} onClick={onLogin}>{loginCta}</button>

OpenVoting.Client/src/components/DiscordLinkPage.tsx

@@ -1,6 +1,6 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import type { OneTimeDiscordLinkAuthResponse } from '../types';
+import type { FlashMessage, OneTimeDiscordLinkAuthResponse, OneTimeDiscordLinkStatusResponse } from '../types';
 
 const tokenStorageKey = 'ov_token';
 
@@ -10,18 +10,91 @@ export function DiscordLinkPage() {
   const token = params.get('token') ?? '';
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [statusLoading, setStatusLoading] = useState(false);
+  const [status, setStatus] = useState<OneTimeDiscordLinkStatusResponse | null>(null);
 
   const hasToken = token.trim().length > 0;
-  const description = useMemo(() => {
+  const canContinue = hasToken && status?.status === 'valid';
+
+  useEffect(() => {
+    if (!hasToken) {
+      setStatus({ status: 'invalid', message: 'Missing login token' });
+      return;
+    }
+
+    let cancelled = false;
+    const fetchStatus = async () => {
+      setStatusLoading(true);
+      try {
+        const response = await fetch(`/api/auth/discord-link/status?token=${encodeURIComponent(token)}`);
+        if (!response.ok) {
+          const text = await response.text();
+          throw new Error(text || 'Unable to verify login link');
+        }
+
+        const payload: OneTimeDiscordLinkStatusResponse = await response.json();
+        if (!cancelled) {
+          setStatus(payload);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          const message = err instanceof Error ? err.message : 'Unable to verify login link';
+          setStatus({ status: 'invalid', message });
+        }
+      } finally {
+        if (!cancelled) {
+          setStatusLoading(false);
+        }
+      }
+    };
+
+    fetchStatus();
+    return () => {
+      cancelled = true;
+    };
+  }, [hasToken, token]);
+
+  const title = useMemo(() => {
     if (!hasToken) {
-      return 'This login link is missing a token';
+      return 'Do you want to log in?';
+    }
+
+    if (statusLoading) {
+      return 'Checking login link…';
+    }
+
+    if (status?.displayName) {
+      return `Do you want to log in as ${status.displayName}?`;
+    }
+
+    return 'Do you want to log in?';
+  }, [hasToken, statusLoading, status]);
+
+  const warningMessage = useMemo<FlashMessage | null>(() => {
+    if (status?.status === 'used') {
+      return {
+        text: `${status.message ?? 'This login link has already been used'}. Run this in the Discord server for a new link:`,
+        code: '/voting'
+      };
+    }
+
+    if (status && status.status !== 'valid' && status.message) {
+      return status.message;
     }
 
-    return 'This one-time link signs you in to OpenVoting';
-  }, [hasToken]);
+    return null;
+  }, [status]);
+
+  useEffect(() => {
+    window.dispatchEvent(new CustomEvent<FlashMessage | null>('ov-flash', { detail: warningMessage }));
+
+    return () => {
+      window.dispatchEvent(new CustomEvent<FlashMessage | null>('ov-flash', { detail: null }));
+    };
+  }, [warningMessage]);
 
   const handleContinue = async () => {
-    if (!hasToken || submitting) {
+    if (!canContinue || submitting) {
       return;
     }
 
@@ -56,11 +129,10 @@ export function DiscordLinkPage() {
   return (
     <section className="card splash">
       <p className="eyebrow">Discord sign in</p>
-      <h2>Continue sign in</h2>
-      <p className="muted">{description}</p>
+      <h2>{title}</h2>
       {error && <p className="error" role="alert">{error}</p>}
       <div className="actions">
-        <button className="primary" type="button" onClick={handleContinue} disabled={!hasToken || submitting}>
+        <button className="primary" type="button" onClick={handleContinue} disabled={!canContinue || statusLoading || submitting}>
           {submitting ? 'Signing in…' : 'Continue'}
         </button>
         <button className="ghost" type="button" onClick={() => navigate('/', { replace: true })}>

OpenVoting.Client/src/components/PageShell.tsx

@@ -1,19 +1,37 @@
 import type { ReactNode } from 'react';
+import type { FlashMessage } from '../types';
 
 export type PageShellProps = {
   topbar: ReactNode;
-  flash: string | null;
+  flash: FlashMessage | null;
   configError: string | null;
   children: ReactNode;
 };
 
 export function PageShell({ topbar, flash, configError, children }: PageShellProps) {
-  const flashText = flash?.trim();
+  const flashText = typeof flash === 'string' ? flash.trim() : flash?.text.trim();
+
+  const flashContent = typeof flash === 'string'
+    ? flashText
+    : flash && flashText
+      ? (
+        <>
+          {flashText}
+          {flash.code && (
+            <>
+              {' '}
+              <code>{flash.code}</code>
+            </>
+          )}
+        </>
+      )
+      : null;
+
   return (
     <div className="page">
       {topbar}
       {configError && <div className="banner error">{configError}</div>}
-      {flashText && !configError && <div className="banner warning">{flashText}</div>}
+      {flashContent && !configError && <div className="banner warning">{flashContent}</div>}
       <main className="content">{children}</main>
       <footer className="footer">
         <span>Powered by OpenVoting · <a href="https://github.com/AmyJeanes/OpenVoting" target="_blank" rel="noreferrer">GitHub</a></span>

OpenVoting.Client/src/hooks/useVotingApp.ts

@@ -12,7 +12,8 @@ import type {
   CreatePollForm,
   SessionState,
   VoteResponse,
-  VotingBreakdownEntry
+  VotingBreakdownEntry,
+  FlashMessage
 } from '../types';
 import { useToast } from '../components';
 
@@ -39,7 +40,7 @@ export function useVotingApp() {
   const [me, setMe] = useState<MeResponse | null>(null);
   const [config, setConfig] = useState<ConfigResponse | null>(null);
   const [configError, setConfigError] = useState<string | null>(null);
-  const [flash, setFlash] = useState<string | null>(null);
+  const [flash, setFlash] = useState<FlashMessage | null>(null);
 
   const [poll, setPoll] = useState<PollResponse | null>(null);
   const [pollError, setPollError] = useState<string | null>(null);
@@ -100,6 +101,30 @@ export function useVotingApp() {
     }
   }, []);
 
+  useEffect(() => {
+    const handleFlashEvent = (event: Event) => {
+      const customEvent = event as CustomEvent<FlashMessage | null>;
+      const message = customEvent.detail;
+
+      if (typeof message === 'string') {
+        setFlash(message.trim().length > 0 ? message : null);
+        return;
+      }
+
+      if (message && message.text.trim().length > 0) {
+        setFlash(message);
+        return;
+      }
+
+      setFlash(null);
+    };
+
+    window.addEventListener('ov-flash', handleFlashEvent);
+    return () => {
+      window.removeEventListener('ov-flash', handleFlashEvent);
+    };
+  }, []);
+
   useEffect(() => {
     if (!token) {
       setSessionState('anonymous');

OpenVoting.Client/src/types.ts

@@ -157,4 +157,17 @@ export type OneTimeDiscordLinkAuthResponse = {
   token: string;
 };
 
+export type OneTimeDiscordLinkStatus = 'valid' | 'used' | 'expired' | 'revoked' | 'banned' | 'invalid';
+
+export type OneTimeDiscordLinkStatusResponse = {
+  status: OneTimeDiscordLinkStatus;
+  displayName?: string;
+  message?: string;
+};
+
+export type FlashMessage = string | {
+  text: string;
+  code?: string;
+};
+
 export type SessionState = 'idle' | 'loading' | 'authenticated' | 'anonymous';

OpenVoting.Server.Tests/OneTimeLoginLinkServiceTests.cs

@@ -112,6 +112,54 @@ public async Task Consume_BannedMember_ReturnsForbiddenError()
 		});
 	}
 
+	[Test]
+	public async Task GetStatusAsync_UsedToken_ReturnsUsed()
+	{
+		using var db = TestDbContextFactory.CreateContext(useSqlite: true);
+		var service = CreateService(db);
+
+		var issue = await service.IssueForDiscordUserAsync(
+			new DiscordInteractionUserContext("user-5", "UserFive", "User Five", [], null),
+			"https://vote.example.com",
+			CancellationToken.None);
+
+		var token = ExtractToken(issue.LoginLink);
+		_ = await service.ConsumeAsync(token, CancellationToken.None);
+
+		var status = await service.GetStatusAsync(token, CancellationToken.None);
+		Assert.Multiple(() =>
+		{
+			Assert.That(status.Status, Is.EqualTo(OneTimeLoginLinkStatus.Used));
+			Assert.That(status.DisplayName, Is.EqualTo("User Five"));
+		});
+	}
+
+	[Test]
+	public async Task CleanupStaleAsync_RemovesOldExpiredRows()
+	{
+		using var db = TestDbContextFactory.CreateContext(useSqlite: true);
+		var service = CreateService(db);
+
+		var issue = await service.IssueForDiscordUserAsync(
+			new DiscordInteractionUserContext("user-6", "UserSix", null, [], null),
+			"https://vote.example.com",
+			CancellationToken.None);
+
+		var tokenHash = GetTokenHash(db);
+		var entity = await db.OneTimeLoginTokens.SingleAsync(t => t.TokenHash == tokenHash, CancellationToken.None);
+		entity.ExpiresAt = DateTimeOffset.UtcNow.AddDays(-2);
+		await db.SaveChangesAsync(CancellationToken.None);
+
+		var deletedCount = await service.CleanupStaleAsync(CancellationToken.None);
+		var remaining = await db.OneTimeLoginTokens.CountAsync(CancellationToken.None);
+
+		Assert.Multiple(() =>
+		{
+			Assert.That(deletedCount, Is.EqualTo(1));
+			Assert.That(remaining, Is.EqualTo(0));
+		});
+	}
+
 	private static OneTimeLoginLinkService CreateService(ApplicationDbContext db, string[]? adminRoleIds = null)
 	{
 		var settings = Options.Create(new Settings