76 lines
3.5 KiB
Markdown
76 lines
3.5 KiB
Markdown
# 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`
|