@payez/next-mvp 3.0.0

package/src/pages/recovery/page.tsx

@@ -0,0 +1,234 @@
+'use client';
+
+import { useState, useEffect, Suspense } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { RecoveryStep, RecoverySession, PasswordResetToken } from '../../types/recovery';
+import { accountApi } from '../../utils/api';
+import { InitiateRecoveryStep } from '../../components/recovery/InitiateRecoveryStep';
+import { SelectMethodStep } from '../../components/recovery/SelectMethodStep';
+import { VerifyCodeStep } from '../../components/recovery/VerifyCodeStep';
+import { SetPasswordStep } from '../../components/recovery/SetPasswordStep';
+import { CompleteStep } from '../../components/recovery/CompleteStep';
+import { useColors } from '../../theme/useTheme';
+
+function RecoveryContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const prefilledEmail = searchParams?.get('email') || '';
+  const colors = useColors();
+
+  const [currentStep, setCurrentStep] = useState<RecoveryStep>('initiate');
+  const [email, setEmail] = useState(prefilledEmail);
+  const [recoverySession, setRecoverySession] = useState<RecoverySession | null>(null);
+  const [selectedMethod, setSelectedMethod] = useState<'email' | 'sms' | 'authenticator' | null>(null);
+  const [verificationCode, setVerificationCode] = useState('');
+  const [passwordResetToken, setPasswordResetToken] = useState<PasswordResetToken | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleInitiateRecovery = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await accountApi.initiateRecovery(email);
+
+      if (response.success && response.data.recovery_session_token) {
+        setRecoverySession({
+          recoveryToken: response.data.recovery_session_token,
+          email: email,
+          maskedEmail: response.data.masked_email,
+          maskedPhone: response.data.masked_phone,
+          hasAuthenticator: response.data.has_authenticator,
+          availableMethods: response.data.available_methods || [],
+          expiresAt: response.data.expires_at || ''
+        });
+        setCurrentStep('select-method');
+      } else {
+        setCurrentStep('complete');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to initiate recovery. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSendCode = async (method: 'email' | 'sms' | 'authenticator') => {
+    if (!recoverySession) return;
+
+    setLoading(true);
+    setError(null);
+    setSelectedMethod(method);
+
+    try {
+      const response = await accountApi.sendRecoveryCode(recoverySession.recoveryToken, method);
+
+      if (response.success) {
+        setCurrentStep('verify-code');
+      } else {
+        setError('Failed to send verification code. Please try again.');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to send verification code.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleVerifyCode = async () => {
+    if (!recoverySession || !selectedMethod) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await accountApi.verifyRecoveryCode(
+        recoverySession.recoveryToken,
+        verificationCode,
+        selectedMethod
+      );
+
+      if (response.success && response.data) {
+        setPasswordResetToken({
+          token: response.data.password_reset_token,
+          expiresAt: response.data.expires_at
+        });
+        setCurrentStep('set-password');
+      } else {
+        setError(response.error?.message || 'Invalid verification code');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to verify code.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleResetPassword = async (password: string, confirmPassword: string) => {
+    if (!passwordResetToken || !recoverySession) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await accountApi.resetPasswordWithToken(
+        recoverySession.email,
+        passwordResetToken.token,
+        password,
+        confirmPassword
+      );
+
+      if (response.success) {
+        setCurrentStep('complete');
+      } else {
+        setError('Failed to reset password. Please try again.');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to reset password.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGoBack = () => {
+    if (currentStep === 'select-method') setCurrentStep('initiate');
+    else if (currentStep === 'verify-code') setCurrentStep('select-method');
+    else if (currentStep === 'set-password') setCurrentStep('verify-code');
+  };
+
+  return (
+    <div className="w-full flex items-center justify-center p-6" style={{ background: 'var(--bg-default)' }}>
+      <div className="max-w-md w-full">
+        {error && (
+          <div className="mb-4 bg-red-50 border border-red-200 rounded-2xl p-3">
+            <p className="text-red-700 text-sm">{error}</p>
+          </div>
+        )}
+
+        {loading && (
+          <div className="mb-4 rounded-2xl p-3" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-default)' }}>
+            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>Processing...</p>
+          </div>
+        )}
+
+        {currentStep === 'initiate' && (
+          <InitiateRecoveryStep
+            email={email}
+            setEmail={setEmail}
+            onSubmit={handleInitiateRecovery}
+            loading={loading}
+          />
+        )}
+
+        {currentStep === 'select-method' && recoverySession && (
+          <SelectMethodStep
+            session={recoverySession}
+            onSelectMethod={handleSendCode}
+            loading={loading}
+          />
+        )}
+
+        {currentStep === 'verify-code' && (
+          <VerifyCodeStep
+            code={verificationCode}
+            setCode={setVerificationCode}
+            onSubmit={handleVerifyCode}
+            onResend={() => selectedMethod && handleSendCode(selectedMethod)}
+            loading={loading}
+            maskedDestination={
+              selectedMethod === 'sms'
+                ? recoverySession?.maskedPhone
+                : recoverySession?.maskedEmail
+            }
+          />
+        )}
+
+        {currentStep === 'set-password' && (
+          <SetPasswordStep
+            onSubmit={handleResetPassword}
+            loading={loading}
+          />
+        )}
+
+        {currentStep === 'complete' && (
+          <CompleteStep
+            onGoToLogin={() => router.push('/account-auth/login')}
+          />
+        )}
+
+        {currentStep !== 'complete' && currentStep !== 'initiate' && !loading && (
+          <div className="mt-6 text-center">
+            <button
+              type="button"
+              onClick={handleGoBack}
+              className="text-sm hover:underline font-medium"
+              style={{ color: 'var(--text-primary)' }}
+            >
+              ← Go Back
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function LoadingFallback() {
+  const colors = useColors();
+  return (
+    <div className="w-full flex items-center justify-center" style={{ background: 'var(--bg-default)' }}>
+      <div className="border rounded-2xl p-8" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-default)' }}>
+        <p style={{ color: 'var(--text-muted)' }}>Loading...</p>
+      </div>
+    </div>
+  );
+}
+
+export default function RecoveryPage() {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <RecoveryContent />
+    </Suspense>
+  );
+}

package/src/pages/roles/MyRolesPage.tsx

@@ -0,0 +1,211 @@
+/**
+ * My Roles Page for @payez/next-mvp
+ *
+ * User view of their assigned roles (/account/roles).
+ * Shows roles from both IDP and app sources with expandable permissions.
+ * Read-only - users cannot self-assign roles.
+ *
+ * @see docs/specs/ROLES_MANAGEMENT_SPEC.md
+ */
+
+'use client';
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { useLayout, useColors } from '../../theme/useTheme';
+import { Role, RoleCard, RoleSourceHeader } from './components';
+
+// API response types
+interface MyRolesResponse {
+  summary: {
+    total_roles: number;
+    sources: string[];
+  };
+  idp_roles: Role[];
+  app_roles: Role[];
+}
+
+interface MyRolesPageProps {
+  // Optional initial data (for SSR)
+  initialData?: MyRolesResponse;
+  // API endpoint
+  rolesEndpoint?: string;
+}
+
+export default function MyRolesPage({
+  initialData,
+  rolesEndpoint = '/api/account/my-roles',
+}: MyRolesPageProps) {
+  const layout = useLayout();
+  const colors = useColors();
+
+  // Determine dark mode
+  const isDark = colors?.background?.includes('slate-9') ||
+                 colors?.background?.includes('gray-9') ||
+                 colors?.card?.includes('slate-8');
+
+  // State
+  const [data, setData] = useState<MyRolesResponse | null>(initialData || null);
+  const [loading, setLoading] = useState(!initialData);
+  const [error, setError] = useState<string | null>(null);
+
+  // Theme colors
+  const bgColor = isDark ? 'bg-slate-900' : 'bg-gray-50';
+  const cardBg = isDark ? 'bg-slate-800' : 'bg-white';
+  const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
+
+  // Fetch roles
+  const fetchRoles = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch(rolesEndpoint, { credentials: 'include' });
+      if (!response.ok) {
+        throw new Error('Failed to load roles');
+      }
+
+      const result = await response.json();
+      setData(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load roles');
+    } finally {
+      setLoading(false);
+    }
+  }, [rolesEndpoint]);
+
+  useEffect(() => {
+    if (!initialData) {
+      fetchRoles();
+    }
+  }, [initialData, fetchRoles]);
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className={`min-h-screen ${bgColor} flex items-center justify-center`}>
+        <div className="flex flex-col items-center space-y-4">
+          <svg className="animate-spin h-8 w-8 text-blue-500" viewBox="0 0 24 24" fill="none">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+          </svg>
+          <p className={textMuted}>Loading roles...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className={`min-h-screen ${bgColor} flex items-center justify-center`}>
+        <div className={`${cardBg} border ${borderColor} rounded-lg p-8 text-center max-w-md`}>
+          <svg className="w-12 h-12 text-red-500 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <h2 className={`text-lg font-semibold ${textPrimary} mb-2`}>Failed to Load Roles</h2>
+          <p className={`${textMuted} mb-4`}>{error}</p>
+          <button
+            onClick={fetchRoles}
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const idpRoles = data?.idp_roles || [];
+  const appRoles = data?.app_roles || [];
+  const totalRoles = idpRoles.length + appRoles.length;
+
+  return (
+    <div className={`min-h-screen ${bgColor}`}>
+      <div className={`max-w-2xl mx-auto ${layout?.padding || 'p-6'}`}>
+        {/* Page Header */}
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h1 className={`text-3xl font-bold ${textPrimary}`}>My Roles</h1>
+            {totalRoles > 0 && (
+              <p className={`mt-1 ${textMuted}`}>
+                You have {totalRoles} role{totalRoles !== 1 ? 's' : ''} across {data?.summary?.sources?.length || 0} source{(data?.summary?.sources?.length || 0) !== 1 ? 's' : ''}.
+              </p>
+            )}
+          </div>
+          <a
+            href="/account/profile"
+            className={`text-sm hover:underline ${textMuted}`}
+          >
+            Back to Profile
+          </a>
+        </div>
+
+        {/* Empty state */}
+        {totalRoles === 0 && (
+          <div className={`${cardBg} border ${borderColor} rounded-lg p-8 text-center`}>
+            <svg className={`w-12 h-12 mx-auto mb-4 ${textMuted}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+            <h2 className={`text-lg font-semibold ${textPrimary} mb-2`}>No Roles Assigned</h2>
+            <p className={textMuted}>You don't have any roles assigned yet. Contact your administrator for access.</p>
+          </div>
+        )}
+
+        {/* IDP Roles */}
+        {idpRoles.length > 0 && (
+          <div className="mb-6">
+            <RoleSourceHeader source="idp" count={idpRoles.length} isDark={isDark} />
+            <div className="mt-3 space-y-3">
+              {idpRoles.map((role) => (
+                <RoleCard
+                  key={role.role_name}
+                  role={role}
+                  source="idp"
+                  isDark={isDark}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* App Roles */}
+        {appRoles.length > 0 && (
+          <div className="mb-6">
+            <RoleSourceHeader source="app" count={appRoles.length} isDark={isDark} />
+            <div className="mt-3 space-y-3">
+              {appRoles.map((role) => (
+                <RoleCard
+                  key={role.role_name}
+                  role={role}
+                  source="app"
+                  isDark={isDark}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Footer */}
+        {totalRoles > 0 && (
+          <div className={`border-t ${borderColor} pt-4 mt-6`}>
+            <p className={`text-sm ${textMuted}`}>
+              Need additional access? Contact your administrator.
+            </p>
+          </div>
+        )}
+
+        {/* Navigation */}
+        <div className="mt-6 flex justify-between">
+          <a href="/account/security" className={`text-sm hover:underline ${textMuted}`}>
+            &larr; Security Settings
+          </a>
+          <a href="/account/settings" className={`text-sm hover:underline ${textMuted}`}>
+            Settings &rarr;
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}