@drawboard/authagonal-login 0.1.1

package/src/pages/LoginPage.tsx

@@ -0,0 +1,308 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useSearchParams, Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { login, ssoCheck, getProviders, getSession, ApiRequestError } from '../api';
+import { useBranding } from '../branding';
+import type { ExternalProvider } from '../types';
+
+const API_URL = import.meta.env.VITE_API_URL || '';
+
+function isSafeReturnUrl(url: string): boolean {
+  if (!url) return false;
+  // Only allow relative paths (starting with /) that don't escape to another host
+  try {
+    const parsed = new URL(url, window.location.origin);
+    return parsed.origin === window.location.origin && url.startsWith('/');
+  } catch {
+    return false;
+  }
+}
+
+export default function LoginPage() {
+  const { t } = useTranslation();
+  const branding = useBranding();
+  const [searchParams] = useSearchParams();
+  const returnUrl = searchParams.get('returnUrl') || '';
+  const loginHint = searchParams.get('login_hint') || '';
+  const oidcError = searchParams.get('error_description') || searchParams.get('error') || '';
+
+  const [email, setEmail] = useState(loginHint);
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState(oidcError);
+  const [loading, setLoading] = useState(false);
+  const [ssoInfo, setSsoInfo] = useState<{ redirectUrl: string } | null>(null);
+  const [ssoChecked, setSsoChecked] = useState(false);
+  const [ssoChecking, setSsoChecking] = useState(false);
+  const [providers, setProviders] = useState<ExternalProvider[]>([]);
+  const [session, setSession] = useState<{ name: string; email: string } | null>(null);
+
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastCheckedEmailRef = useRef('');
+
+  const performSsoCheck = useCallback(async (emailToCheck: string) => {
+    if (!emailToCheck.includes('@') || emailToCheck === lastCheckedEmailRef.current) {
+      return;
+    }
+
+    lastCheckedEmailRef.current = emailToCheck;
+    setSsoChecking(true);
+    setError('');
+
+    try {
+      const result = await ssoCheck(emailToCheck);
+      if (result.ssoRequired && result.redirectUrl) {
+        setSsoInfo({ redirectUrl: result.redirectUrl });
+      } else {
+        setSsoInfo(null);
+      }
+      setSsoChecked(true);
+    } catch {
+      // If SSO check fails, allow normal login
+      setSsoInfo(null);
+      setSsoChecked(true);
+    } finally {
+      setSsoChecking(false);
+    }
+  }, []);
+
+  // Check for existing session (e.g. after OIDC callback with no returnUrl)
+  useEffect(() => {
+    if (returnUrl && isSafeReturnUrl(returnUrl)) return; // OAuth flow — don't check session
+    getSession()
+      .then((s) => {
+        if (s.authenticated) {
+          setSession({ name: s.name, email: s.email });
+        }
+      })
+      .catch(() => {});
+  }, [returnUrl]);
+
+  // Fetch available external providers
+  useEffect(() => {
+    getProviders()
+      .then((res) => setProviders(res.providers ?? []))
+      .catch(() => {});
+  }, []);
+
+  // Auto-trigger SSO check if login_hint is provided
+  useEffect(() => {
+    if (loginHint && loginHint.includes('@')) {
+      performSsoCheck(loginHint);
+    }
+  }, [loginHint, performSsoCheck]);
+
+  function handleEmailBlur() {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+    debounceTimerRef.current = setTimeout(() => {
+      performSsoCheck(email);
+    }, 300);
+  }
+
+  function handleEmailChange(value: string) {
+    setEmail(value);
+    // Reset SSO state when email changes
+    if (value !== lastCheckedEmailRef.current) {
+      setSsoChecked(false);
+      setSsoInfo(null);
+    }
+  }
+
+  function handleProviderLogin(provider: ExternalProvider) {
+    const url = new URL(`${API_URL}${provider.loginUrl}`, window.location.origin);
+    if (returnUrl && isSafeReturnUrl(returnUrl)) {
+      url.searchParams.set('returnUrl', returnUrl);
+    }
+    window.location.href = url.toString();
+  }
+
+  function handleSsoRedirect() {
+    if (ssoInfo) {
+      const ssoUrl = new URL(`${API_URL}${ssoInfo.redirectUrl}`, window.location.origin);
+      if (returnUrl && isSafeReturnUrl(returnUrl)) {
+        ssoUrl.searchParams.set('returnUrl', returnUrl);
+      }
+      window.location.href = ssoUrl.toString();
+    }
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      await login(email, password);
+      // On success, redirect to returnUrl (validated) using window.location.href
+      if (returnUrl && isSafeReturnUrl(returnUrl)) {
+        window.location.href = returnUrl;
+      } else {
+        window.location.href = '/';
+      }
+    } catch (err) {
+      if (err instanceof ApiRequestError) {
+        switch (err.error) {
+          case 'invalid_credentials':
+            setError(t('errorInvalidCredentials'));
+            break;
+          case 'locked_out':
+            setError(t('errorLockedOut', { seconds: err.retryAfter ?? '?' }));
+            break;
+          case 'email_not_confirmed':
+            setError(t('errorEmailNotConfirmed'));
+            break;
+          case 'sso_required':
+            if (err.redirectUrl) {
+              const ssoUrl = new URL(`${API_URL}${err.redirectUrl}`, window.location.origin);
+              if (returnUrl && isSafeReturnUrl(returnUrl)) {
+                ssoUrl.searchParams.set('returnUrl', returnUrl);
+              }
+              window.location.href = ssoUrl.toString();
+              return;
+            }
+            setError(t('errorSsoRequired'));
+            break;
+          case 'email_required':
+            setError(t('errorEmailRequired'));
+            break;
+          case 'password_required':
+            setError(t('errorPasswordRequired'));
+            break;
+          default:
+            setError(err.message || t('errorUnexpected'));
+        }
+      } else {
+        setError(t('errorUnexpected'));
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const forgotPasswordLink = returnUrl && isSafeReturnUrl(returnUrl)
+    ? `/forgot-password?returnUrl=${encodeURIComponent(returnUrl)}`
+    : '/forgot-password';
+
+  const showPasswordField = ssoChecked && !ssoInfo;
+
+  if (session) {
+    return (
+      <div>
+        <h2 className="auth-title">{t('signedInAs', { name: session.name || session.email })}</h2>
+        <p style={{ textAlign: 'center', color: '#6b7280' }}>{t('signedInMessage')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h2 className="auth-title">{t('signIn')}</h2>
+
+      {providers.length > 0 && (
+        <div className="external-providers">
+          {providers.map((p) => (
+            <button
+              key={p.connectionId}
+              type="button"
+              className={`btn-provider btn-provider-${p.connectionId}`}
+              onClick={() => handleProviderLogin(p)}
+            >
+              {p.connectionId === 'google' && (
+                <svg className="provider-icon" viewBox="0 0 24 24" width="20" height="20">
+                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/>
+                  <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+                  <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+                  <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+                </svg>
+              )}
+              {t('continueWith', { provider: p.name })}
+            </button>
+          ))}
+          <div className="divider">
+            <span>{t('or')}</span>
+          </div>
+        </div>
+      )}
+
+      {error && <div className="alert-error">{error}</div>}
+
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="email">{t('email')}</label>
+          <input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(e) => handleEmailChange(e.target.value)}
+            onBlur={handleEmailBlur}
+            placeholder={t('emailPlaceholder')}
+            autoComplete="email"
+            autoFocus={!loginHint}
+            maxLength={256}
+            required
+          />
+        </div>
+
+        {ssoChecking && (
+          <div className="sso-checking">{t('ssoChecking')}</div>
+        )}
+
+        {ssoInfo && (
+          <div className="sso-notice">
+            <p>{t('ssoNotice')}</p>
+            <button
+              type="button"
+              className="btn-secondary"
+              onClick={handleSsoRedirect}
+            >
+              {t('continueWithSso')}
+            </button>
+          </div>
+        )}
+
+        {showPasswordField && (
+          <>
+            <div className="form-group">
+              <label htmlFor="password">{t('password')}</label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder={t('passwordPlaceholder')}
+                autoComplete="current-password"
+                autoFocus
+                maxLength={256}
+                required
+              />
+            </div>
+
+            <button
+              type="submit"
+              className="btn-primary"
+              disabled={loading}
+            >
+              {loading ? (
+                <span className="btn-loading">
+                  <span className="spinner" />
+                  {t('signingIn')}
+                </span>
+              ) : (
+                t('signIn')
+              )}
+            </button>
+
+            {branding.showForgotPassword && (
+              <div className="form-footer">
+                <Link to={forgotPasswordLink} className="link">
+                  {t('forgotPassword')}
+                </Link>
+              </div>
+            )}
+          </>
+        )}
+      </form>
+    </div>
+  );
+}

package/src/pages/ResetPasswordPage.tsx

@@ -0,0 +1,228 @@
+import { useState, useEffect } from 'react';
+import { useSearchParams, Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { resetPassword, ApiRequestError } from '../api';
+
+interface PasswordRule {
+  rule: string;
+  value: number | null;
+  label: string;
+}
+
+interface PasswordRequirement {
+  label: string;
+  met: boolean;
+}
+
+const API_URL = import.meta.env.VITE_API_URL || '';
+
+const defaultRules: PasswordRule[] = [
+  { rule: 'minLength', value: 8, label: 'At least 8 characters' },
+  { rule: 'uppercase', value: null, label: 'Uppercase letter' },
+  { rule: 'lowercase', value: null, label: 'Lowercase letter' },
+  { rule: 'digit', value: null, label: 'Number' },
+  { rule: 'specialChar', value: null, label: 'Special character' },
+];
+
+function evaluateRequirements(password: string, rules: PasswordRule[]): PasswordRequirement[] {
+  return rules.map((r) => {
+    let met = false;
+    switch (r.rule) {
+      case 'minLength': met = password.length >= (r.value ?? 8); break;
+      case 'uppercase': met = /[A-Z]/.test(password); break;
+      case 'lowercase': met = /[a-z]/.test(password); break;
+      case 'digit': met = /[0-9]/.test(password); break;
+      case 'specialChar': met = /[^A-Za-z0-9]/.test(password); break;
+      default: met = true;
+    }
+    return { label: r.label, met };
+  });
+}
+
+export default function ResetPasswordPage() {
+  const { t } = useTranslation();
+  const [searchParams] = useSearchParams();
+  const token = searchParams.get('p') || '';
+
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [validationError, setValidationError] = useState('');
+  const [rules, setRules] = useState<PasswordRule[]>(defaultRules);
+
+  useEffect(() => {
+    fetch(`${API_URL}/api/auth/password-policy`)
+      .then((r) => r.ok ? r.json() : null)
+      .then((data) => { if (data?.rules) setRules(data.rules); })
+      .catch(() => { /* use defaults */ });
+  }, []);
+
+  function getRuleLabel(rule: PasswordRule): string {
+    switch (rule.rule) {
+      case 'minLength': return t('ruleMinLength', { count: rule.value ?? 8 });
+      case 'uppercase': return t('ruleUppercase');
+      case 'lowercase': return t('ruleLowercase');
+      case 'digit': return t('ruleDigit');
+      case 'specialChar': return t('ruleSpecialChar');
+      default: return rule.label;
+    }
+  }
+
+  const localizedRules: PasswordRule[] = rules.map(r => ({
+    ...r,
+    label: getRuleLabel(r),
+  }));
+
+  const requirements = evaluateRequirements(newPassword, localizedRules);
+  const allRequirementsMet = requirements.every((r) => r.met);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    setValidationError('');
+
+    if (!allRequirementsMet) {
+      setValidationError(t('passwordNotMeetRequirements'));
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      setValidationError(t('passwordsDoNotMatch'));
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await resetPassword(token, newPassword);
+      setSuccess(true);
+    } catch (err) {
+      if (err instanceof ApiRequestError) {
+        switch (err.error) {
+          case 'weak_password':
+            setError(err.message || t('passwordWeakError'));
+            break;
+          case 'invalid_token':
+          case 'token_expired':
+            setError(t('invalidOrExpiredLink'));
+            break;
+          case 'password_required':
+            setError(t('errorPasswordRequired'));
+            break;
+          default:
+            setError(err.message || t('errorUnexpected'));
+        }
+      } else {
+        setError(t('errorUnexpected'));
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (success) {
+    return (
+      <div>
+        <h2 className="auth-title">{t('passwordResetSuccess')}</h2>
+        <div className="alert-success">
+          {t('passwordResetSuccessMessage')}
+        </div>
+        <div className="form-footer">
+          <Link to="/login" className="link">
+            {t('signIn')}
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (!token) {
+    return (
+      <div>
+        <h2 className="auth-title">{t('invalidLink')}</h2>
+        <div className="alert-error">
+          {t('invalidOrExpiredLink')}
+        </div>
+        <div className="form-footer">
+          <Link to="/forgot-password" className="link">
+            {t('requestNewResetLink')}
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h2 className="auth-title">{t('setNewPassword')}</h2>
+
+      {error && <div className="alert-error">{error}</div>}
+      {validationError && <div className="alert-error">{validationError}</div>}
+
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="newPassword">{t('newPassword')}</label>
+          <input
+            id="newPassword"
+            type="password"
+            value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
+            placeholder={t('newPasswordPlaceholder')}
+            autoComplete="new-password"
+            autoFocus
+            maxLength={256}
+            required
+          />
+        </div>
+
+        {newPassword.length > 0 && (
+          <ul className="password-requirements">
+            {requirements.map((req) => (
+              <li key={req.label} className={req.met ? 'met' : 'unmet'}>
+                <span className="req-icon">{req.met ? '\u2713' : '\u2717'}</span>
+                {req.label}
+              </li>
+            ))}
+          </ul>
+        )}
+
+        <div className="form-group">
+          <label htmlFor="confirmPassword">{t('confirmPassword')}</label>
+          <input
+            id="confirmPassword"
+            type="password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            placeholder={t('confirmPasswordPlaceholder')}
+            autoComplete="new-password"
+            maxLength={256}
+            required
+          />
+        </div>
+
+        <button
+          type="submit"
+          className="btn-primary"
+          disabled={loading || !allRequirementsMet}
+        >
+          {loading ? (
+            <span className="btn-loading">
+              <span className="spinner" />
+              {t('resetting')}
+            </span>
+          ) : (
+            t('resetPassword')
+          )}
+        </button>
+
+        <div className="form-footer">
+          <Link to="/login" className="link">
+            {t('backToSignIn')}
+          </Link>
+        </div>
+      </form>
+    </div>
+  );
+}