@authagonal/login 0.1.97

package/src/pages/ResetPasswordPage.tsx

@@ -0,0 +1,219 @@
+import { useState, useEffect } from 'react';
+import { useSearchParams, Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { resetPassword, ApiRequestError } from '../api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Alert } from '@/components/ui/alert';
+import { CardTitle, CardFooter } from '@/components/ui/card';
+import { Check, X } from 'lucide-react';
+
+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>
+        <CardTitle>{t('passwordResetSuccess')}</CardTitle>
+        <Alert variant="success">{t('passwordResetSuccessMessage')}</Alert>
+        <CardFooter>
+          <Link to="/login" className="text-sm font-medium text-primary hover:underline no-underline">
+            {t('signIn')}
+          </Link>
+        </CardFooter>
+      </div>
+    );
+  }
+
+  if (!token) {
+    return (
+      <div>
+        <CardTitle>{t('invalidLink')}</CardTitle>
+        <Alert variant="error">{t('invalidOrExpiredLink')}</Alert>
+        <CardFooter>
+          <Link to="/forgot-password" className="text-sm font-medium text-primary hover:underline no-underline">
+            {t('requestNewResetLink')}
+          </Link>
+        </CardFooter>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <CardTitle>{t('setNewPassword')}</CardTitle>
+
+      {error && <Alert variant="error">{error}</Alert>}
+      {validationError && <Alert variant="error">{validationError}</Alert>}
+
+      <form onSubmit={handleSubmit}>
+        <div className="mb-4">
+          <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="list-none mb-4 p-3 bg-gray-50 dark:bg-gray-800/60 rounded-md">
+            {requirements.map((req) => (
+              <li key={req.label} className={`text-[13px] py-0.5 flex items-center gap-1.5 ${req.met ? 'text-green-800 dark:text-green-400' : 'text-red-800 dark:text-red-400'}`}>
+                {req.met ? <Check className="h-3.5 w-3.5 shrink-0" /> : <X className="h-3.5 w-3.5 shrink-0" />}
+                {req.label}
+              </li>
+            ))}
+          </ul>
+        )}
+
+        <div className="mb-4">
+          <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" loading={loading} disabled={!allRequirementsMet}>
+          {loading ? t('resetting') : t('resetPassword')}
+        </Button>
+
+        <CardFooter>
+          <Link to="/login" className="text-sm font-medium text-primary hover:underline no-underline">
+            {t('backToSignIn')}
+          </Link>
+        </CardFooter>
+      </form>
+    </div>
+  );
+}

package/src/styles.css

@@ -0,0 +1,33 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-primary: var(--brand-primary, #2563eb);
+}
+
+/*
+ * Default auth surface vars. Tenants can override any of these via
+ * branding.customCssUrl. Light values are declared at :root; dark-mode
+ * overrides are scoped to .dark so tenant CSS still wins when provided.
+ */
+:root {
+  --brand-primary: #2563eb;
+  --auth-bg: #f3f4f6;
+  --auth-card-bg: #ffffff;
+  --auth-heading: #111827;
+}
+
+.dark {
+  color-scheme: dark;
+  --auth-bg: #030712;
+  --auth-card-bg: #111827;
+  --auth-heading: #f9fafb;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/src/types.ts

@@ -0,0 +1,112 @@
+export interface LoginResponse {
+  userId: string;
+  email: string;
+  name: string;
+}
+
+export interface ApiError {
+  error: string;
+  message?: string;
+  retryAfter?: number;
+  redirectUrl?: string;
+}
+
+export interface SessionResponse {
+  authenticated: boolean;
+  userId: string;
+  email: string;
+  name: string;
+}
+
+export interface SsoCheckResponse {
+  ssoRequired: boolean;
+  providerType?: string;
+  connectionId?: string;
+  redirectUrl?: string;
+}
+
+export interface ExternalProvider {
+  connectionId: string;
+  name: string;
+  loginUrl: string;
+}
+
+export interface ProvidersResponse {
+  providers: ExternalProvider[];
+}
+
+export interface PasswordPolicyRule {
+  rule: string;
+  value: number | null;
+  label: string;
+}
+
+export interface PasswordPolicyResponse {
+  rules: PasswordPolicyRule[];
+}
+
+// MFA types
+export interface MfaLoginResponse {
+  mfaRequired?: boolean;
+  mfaSetupRequired?: boolean;
+  mfaAvailable?: boolean;
+  clientId?: string;
+  challengeId?: string;
+  setupToken?: string;
+  methods?: string[];
+  webAuthn?: PublicKeyCredentialRequestOptionsJSON;
+  userId?: string;
+  email?: string;
+  name?: string;
+}
+
+// WebAuthn types (simplified from WebAuthn L2 spec)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type PublicKeyCredentialRequestOptionsJSON = any;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type PublicKeyCredentialCreationOptionsJSON = any;
+
+export interface MfaVerifyResponse {
+  userId: string;
+  email: string;
+  name: string;
+}
+
+export interface MfaStatusResponse {
+  enabled: boolean;
+  methods: MfaMethod[];
+}
+
+export interface MfaMethod {
+  id: string;
+  type: string;
+  name: string;
+  createdAt: string;
+  lastUsedAt: string | null;
+  isConsumed?: boolean | null;
+}
+
+export interface MfaTotpSetupResponse {
+  setupToken: string;
+  qrCodeDataUri: string;
+  manualKey: string;
+}
+
+export interface MfaRecoveryGenerateResponse {
+  codes: string[];
+}
+
+export interface MfaWebAuthnSetupResponse {
+  setupToken: string;
+  options: PublicKeyCredentialCreationOptionsJSON;
+}
+
+export interface MfaWebAuthnConfirmResponse {
+  success: boolean;
+  credentialId: string;
+}
+
+export interface RegisterResponse {
+  success: boolean;
+  userId: string;
+}

package/tsconfig.app.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "declarationDir": "./dist",
+    "noEmit": false,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,54 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      formats: ['es'],
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react/jsx-runtime', 'react-router-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+    cssCodeSplit: false,
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+      },
+      '/saml': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+      },
+      '/oidc': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+      },
+      '/connect': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+      },
+    },
+  },
+})