# React-Allauth Components Requiring Styling

## Overview

This file lists all authentication components that require styling. These components are functional but use minimal styling from the django-allauth example repository. Apply consistent design using a styling skill (e.g., `apply-shadcn`).

## Components Requiring Styling

### Account Files (15 files)

1. `frontend/src/user_management/account/Login.jsx`
2. `frontend/src/user_management/account/RequestLoginCode.jsx`
3. `frontend/src/user_management/account/ConfirmLoginCode.jsx`
4. `frontend/src/user_management/account/Logout.jsx`
5. `frontend/src/user_management/account/Signup.jsx`
6. `frontend/src/user_management/account/ChangeEmail.jsx`
7. `frontend/src/user_management/account/VerifyEmail.jsx`
8. `frontend/src/user_management/account/VerifyEmailByCode.jsx`
9. `frontend/src/user_management/account/VerificationEmailSent.jsx`
10. `frontend/src/user_management/account/RequestPasswordReset.jsx`
11. `frontend/src/user_management/account/ConfirmPasswordResetCode.jsx`
12. `frontend/src/user_management/account/ChangePassword.jsx`
13. `frontend/src/user_management/account/ResetPassword.jsx`
14. `frontend/src/user_management/account/Reauthenticate.jsx`

### Social Account Files (3 files)

1. `frontend/src/user_management/socialaccount/ProviderSignup.jsx`
2. `frontend/src/user_management/socialaccount/ProviderCallback.jsx`
3. `frontend/src/user_management/socialaccount/ManageProviders.jsx`

### MFA Files (15 files)

1. `frontend/src/user_management/mfa/MFAOverview.jsx`
2. `frontend/src/user_management/mfa/ActivateTOTP.jsx`
3. `frontend/src/user_management/mfa/DeactivateTOTP.jsx`
4. `frontend/src/user_management/mfa/AuthenticateTOTP.jsx`
5. `frontend/src/user_management/mfa/ReauthenticateTOTP.jsx`
6. `frontend/src/user_management/mfa/RecoveryCodes.jsx`
7. `frontend/src/user_management/mfa/GenerateRecoveryCodes.jsx`
8. `frontend/src/user_management/mfa/AuthenticateRecoveryCodes.jsx`
9. `frontend/src/user_management/mfa/ReauthenticateRecoveryCodes.jsx`
10. `frontend/src/user_management/mfa/AddWebAuthn.jsx`
11. `frontend/src/user_management/mfa/ListWebAuthn.jsx`
12. `frontend/src/user_management/mfa/AuthenticateWebAuthn.jsx`
13. `frontend/src/user_management/mfa/ReauthenticateWebAuthn.jsx`
14. `frontend/src/user_management/mfa/SignupByPasskey.jsx`
15. `frontend/src/user_management/mfa/CreateSignupPasskey.jsx`
16. `frontend/src/user_management/mfa/Trust.jsx`

### Component Files (2 files)

1. `frontend/src/user_management/components/Button.jsx`
2. `frontend/src/user_management/mfa/WebAuthnLoginButton.jsx`

**Total:** 35 files requiring styling

## Button Component Duplication Issue

Two Button.jsx files exist in the project:

1. **`frontend/src/components/ui/button.jsx`** - shadcn/ui Button component with full styling variants
2. **`frontend/src/user_management/components/Button.jsx`** - Wrapper component that uses shadcn/ui Button

**Recommended approach:** Keep both files as they serve different purposes:

- **`frontend/src/components/ui/button.jsx`** - Core shadcn/ui component with styling system
- **`frontend/src/user_management/components/Button.jsx`** - Wrapper that ensures authentication components use consistent button styling

## Notes

- All components use React Router for navigation
- Components expect shadcn/ui components to be available via `@/components/ui/` imports
- The authentication context (`AuthContextProvider`) must wrap all components
- Components use the allauth API client from `user_management/lib/allauth.jsx`