sloth-manager/frontend/src/components/LoginPage.js

import { useState, useEffect } from 'react';
import { login, setToken, getOidcConfig, oidcCallback } from '../api/dns';

const OIDC_STATE_KEY = 'sloth_oidc_state';

function getRedirectUri() {
  // Strip any existing query/hash — the redirect_uri must be the clean app URL
  return `${window.location.origin}${window.location.pathname}`;
}

export default function LoginPage({ onLogin }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading]   = useState(false);
  const [error, setError]       = useState('');

  // OIDC state
  const [oidc, setOidc]               = useState(null);   // null = loading, false = disabled
  const [oidcLoading, setOidcLoading] = useState(false);

  // 1. Fetch OIDC config on mount
  useEffect(() => {
    getOidcConfig()
      .then(cfg => setOidc(cfg.enabled ? cfg : false))
      .catch(() => setOidc(false));
  }, []);

  // 2. Handle redirect back from Authentik (?code=...&state=...)
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const code   = params.get('code');
    const state  = params.get('state');
    if (!code) return;

    // Verify state to prevent CSRF
    const savedState = sessionStorage.getItem(OIDC_STATE_KEY);
    sessionStorage.removeItem(OIDC_STATE_KEY);
    if (state && savedState && state !== savedState) {
      setError('SSO state mismatch — please try again');
      // Remove code from URL
      window.history.replaceState({}, '', window.location.pathname);
      return;
    }

    // Exchange code for JWT
    setOidcLoading(true);
    setError('');
    const redirectUri = getRedirectUri();
    // Clean URL before async work so a page refresh won't re-attempt
    window.history.replaceState({}, '', window.location.pathname);

    oidcCallback(code, redirectUri)
      .then(data => {
        setToken(data.token);
        onLogin(data.user);
      })
      .catch(err => {
        setError(err.message);
        setOidcLoading(false);
      });
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  // 3. Initiate Authentik redirect
  function handleSsoClick() {
    if (!oidc) return;
    const state = crypto.randomUUID();
    sessionStorage.setItem(OIDC_STATE_KEY, state);

    const params = new URLSearchParams({
      response_type: 'code',
      client_id:     oidc.clientId,
      redirect_uri:  getRedirectUri(),
      scope:         oidc.scope,
      state,
    });
    window.location.href = `${oidc.authorizationEndpoint}?${params}`;
  }

  // 4. Local login
  async function handleSubmit(e) {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      const data = await login(username, password);
      setToken(data.token);
      onLogin(data.user);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  // While exchanging an OIDC code, show a minimal loading screen
  if (oidcLoading) {
    return (
      <div className="login-wrapper">
        <div className="login-box">
          <div className="login-logo">🦥</div>
          <h1 className="login-title">Sloth Manager</h1>
          <p style={{ textAlign: 'center', marginTop: '1rem' }}>Signing in with Authentik…</p>
        </div>
      </div>
    );
  }

  return (
    <div className="login-wrapper">
      <div className="login-box">
        <div className="login-logo">🦥</div>
        <h1 className="login-title">Sloth Manager</h1>

        {/* SSO button — shown only when Authentik is configured */}
        {oidc && (
          <>
            <button
              type="button"
              className="btn-sso"
              onClick={handleSsoClick}
            >
              Sign in with Authentik
            </button>
            <div className="login-divider"><span>or</span></div>
          </>
        )}

        <form onSubmit={handleSubmit} className="login-form">
          <label>
            Username
            <input
              type="text"
              value={username}
              onChange={e => setUsername(e.target.value)}
              autoFocus={!oidc}
              autoComplete="username"
              required
            />
          </label>
          <label>
            Password
            <input
              type="password"
              value={password}
              onChange={e => setPassword(e.target.value)}
              autoComplete="current-password"
              required
            />
          </label>
          {error && <p className="error">{error}</p>}
          <button type="submit" className="btn-primary login-btn" disabled={loading}>
            {loading ? 'Signing in…' : 'Sign in'}
          </button>
        </form>
        <p className="login-footer">By <a href="https://bobbantech.com" target="_blank" rel="noreferrer">bobbantech</a></p>
      </div>
    </div>
  );
}