- Add complete dark mode system with theme context and toggle - Implement dark mode toggle component in navigation menu - Add client-side routing with SSR-safe signal handling - Fix language selector styling for better dark mode compatibility - Add documentation system with mdBook integration - Improve navigation menu with proper external/internal link handling - Add comprehensive project documentation and configuration - Enhance theme system with localStorage persistence - Fix arena panic issues during server-side rendering - Add proper TypeScript configuration and build optimizations 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
648 lines
21 KiB
Markdown
648 lines
21 KiB
Markdown
# User Registration & Login Guide
|
|
|
|
<div align="center">
|
|
<img src="../logos/rustelo_dev-logo-h.svg" alt="RUSTELO" width="300" />
|
|
</div>
|
|
|
|
Welcome to the[Rustelo](/) Authentication Guide! This comprehensive guide will help you create your account, log in securely, and manage your authentication settings.
|
|
|
|
## 🎯 Overview
|
|
|
|
Rustelo provides a secure, user-friendly authentication system that protects your account while making it easy to access your content. Whether you're creating a new account or managing an existing one, this guide has you covered.
|
|
|
|
## 🚀 Getting Started
|
|
|
|
### Creating Your Account
|
|
|
|
#### Step 1: Navigate to Registration
|
|
1. Go to the[Rustelo](/) homepage
|
|
2. Click **"Sign Up"** or **"Create Account"**
|
|
3. You'll be taken to the registration page
|
|
|
|
#### Step 2: Fill Out Registration Form
|
|
|
|
```
|
|
┌─────────────────────────────────────┐
|
|
│ Create Your Account │
|
|
├─────────────────────────────────────┤
|
|
│ Full Name: [________________] │
|
|
│ Email: [________________] │
|
|
│ Username: [________________] │
|
|
│ Password: [________________] │
|
|
│ Confirm: [________________] │
|
|
│ │
|
|
│ □ I agree to the Terms of Service │
|
|
│ □ Subscribe to newsletter (optional) │
|
|
│ │
|
|
│ [ Create Account ] │
|
|
│ │
|
|
│ Already have an account? Sign in │
|
|
└─────────────────────────────────────┘
|
|
```
|
|
|
|
#### Registration Fields Explained
|
|
|
|
**Full Name**
|
|
- Your display name throughout the application
|
|
- Can be changed later in profile settings
|
|
- Used for personalization and greetings
|
|
|
|
**Email Address**
|
|
- Must be unique and valid
|
|
- Used for login and account recovery
|
|
- Will receive verification email
|
|
|
|
**Username**
|
|
- Must be unique across all users
|
|
- Used for mentions and public profile URLs
|
|
- Can only contain letters, numbers, and underscores
|
|
- Cannot be changed after registration
|
|
|
|
**Password**
|
|
- Must meet security requirements
|
|
- At least 8 characters long
|
|
- Include uppercase and lowercase letters
|
|
- Include at least one number
|
|
- Include at least one special character
|
|
|
|
**Confirm Password**
|
|
- Must match your password exactly
|
|
- Prevents typing errors
|
|
|
|
#### Step 3: Password Strength Indicator
|
|
|
|
As you type your password, you'll see a strength indicator:
|
|
|
|
```
|
|
Password: [weak____strong]
|
|
✗ At least 8 characters
|
|
✗ Contains uppercase letter
|
|
✓ Contains lowercase letter
|
|
✗ Contains number
|
|
✗ Contains special character
|
|
```
|
|
|
|
**Password Tips:**
|
|
- Use a unique password not used elsewhere
|
|
- Consider using a password manager
|
|
- Avoid common words or personal information
|
|
- Mix letters, numbers, and symbols
|
|
|
|
#### Step 4: Agree to Terms
|
|
- Read the Terms of Service
|
|
- Check the agreement box
|
|
- Newsletter subscription is optional
|
|
|
|
#### Step 5: Complete Registration
|
|
1. Click **"Create Account"**
|
|
2. Check your email for verification
|
|
3. Click the verification link
|
|
4. Your account is now active!
|
|
|
|
### Email Verification
|
|
|
|
After registration, you'll receive an email like this:
|
|
|
|
```
|
|
Subject: Verify Your[Rustelo](/) Account
|
|
|
|
Hello [Your Name],
|
|
|
|
Welcome to Rustelo! Please click the link below to verify your email address:
|
|
|
|
[Verify Email Address]
|
|
|
|
This link expires in 24 hours. If you didn't create this account, please ignore this email.
|
|
|
|
Thanks,
|
|
The[Rustelo](/) Team
|
|
```
|
|
|
|
**Important Notes:**
|
|
- Check your spam folder if you don't see the email
|
|
- The verification link expires in 24 hours
|
|
- You can request a new verification email from the login page
|
|
|
|
## 🔐 Logging In
|
|
|
|
### Standard Login Process
|
|
|
|
#### Step 1: Navigate to Login
|
|
1. Go to the[Rustelo](/) homepage
|
|
2. Click **"Sign In"** or **"Login"**
|
|
3. You'll see the login form
|
|
|
|
#### Step 2: Enter Credentials
|
|
|
|
```
|
|
┌─────────────────────────────────────┐
|
|
│ Welcome Back │
|
|
├─────────────────────────────────────┤
|
|
│ Email: [________________] │
|
|
│ Password: [________________] │
|
|
│ │
|
|
│ □ Remember me │
|
|
│ │
|
|
│ [ Sign In ] │
|
|
│ │
|
|
│ Forgot password? | Create account │
|
|
└─────────────────────────────────────┘
|
|
```
|
|
|
|
#### Login Options
|
|
|
|
**Email/Username**
|
|
- Enter your registered email address
|
|
- Or use your username
|
|
- Case-insensitive
|
|
|
|
**Password**
|
|
- Enter your account password
|
|
- Case-sensitive
|
|
- Use the exact password you created
|
|
|
|
**Remember Me**
|
|
- Stay logged in for 30 days
|
|
- Only use on trusted devices
|
|
- Automatically logs you out after inactivity
|
|
|
|
#### Step 3: Successful Login
|
|
After successful login, you'll be redirected to:
|
|
- Your dashboard (default)
|
|
- The page you were trying to access
|
|
- Your last visited page
|
|
|
|
### Login Troubleshooting
|
|
|
|
#### Common Login Issues
|
|
|
|
**"Invalid credentials" Error**
|
|
- Double-check email and password spelling
|
|
- Try typing instead of copy-pasting
|
|
- Check if Caps Lock is on
|
|
- Ensure you're using the correct email
|
|
|
|
**"Account not verified" Error**
|
|
- Check your email for verification link
|
|
- Click "Resend verification email"
|
|
- Check spam folder
|
|
- Contact support if still not received
|
|
|
|
**"Account locked" Error**
|
|
- Too many failed login attempts
|
|
- Account temporarily locked for security
|
|
- Wait 15 minutes and try again
|
|
- Use password reset if needed
|
|
|
|
**"Login session expired" Error**
|
|
- Your session timed out
|
|
- Click "Sign In" again
|
|
- Enter your credentials
|
|
- Check "Remember me" to stay logged in longer
|
|
|
|
## 🔑 Password Management
|
|
|
|
### Forgotten Password Recovery
|
|
|
|
#### Step 1: Request Password Reset
|
|
1. Go to the login page
|
|
2. Click **"Forgot password?"**
|
|
3. Enter your email address
|
|
4. Click **"Send Reset Link"**
|
|
|
|
#### Step 2: Check Your Email
|
|
|
|
```
|
|
Subject: Reset Your[Rustelo](/) Password
|
|
|
|
Hello [Your Name],
|
|
|
|
We received a request to reset your password. Click the link below to create a new password:
|
|
|
|
[Reset Password]
|
|
|
|
This link expires in 1 hour. If you didn't request this, please ignore this email.
|
|
|
|
Thanks,
|
|
The[Rustelo](/) Team
|
|
```
|
|
|
|
#### Step 3: Create New Password
|
|
1. Click the reset link in your email
|
|
2. Enter your new password
|
|
3. Confirm your new password
|
|
4. Click **"Update Password"**
|
|
5. You'll be automatically logged in
|
|
|
|
### Changing Your Password
|
|
|
|
#### While Logged In
|
|
1. Go to **Profile** > **Security Settings**
|
|
2. Click **"Change Password"**
|
|
3. Enter current password
|
|
4. Enter new password
|
|
5. Confirm new password
|
|
6. Click **"Update Password"**
|
|
|
|
#### Password Change Form
|
|
|
|
```
|
|
┌─────────────────────────────────────┐
|
|
│ Change Password │
|
|
├─────────────────────────────────────┤
|
|
│ Current: [________________] │
|
|
│ New: [________________] │
|
|
│ Confirm: [________________] │
|
|
│ │
|
|
│ Password Strength: [████████░░] 80% │
|
|
│ │
|
|
│ [ Update Password ] │
|
|
└─────────────────────────────────────┘
|
|
```
|
|
|
|
## 🛡️ Two-Factor Authentication (2FA)
|
|
|
|
### What is 2FA?
|
|
Two-Factor Authentication adds an extra layer of security by requiring:
|
|
1. Something you know (password)
|
|
2. Something you have (phone/authenticator app)
|
|
|
|
### Setting Up 2FA
|
|
|
|
#### Step 1: Enable 2FA
|
|
1. Go to **Profile** > **Security Settings**
|
|
2. Find **"Two-Factor Authentication"**
|
|
3. Click **"Enable 2FA"**
|
|
|
|
#### Step 2: Choose Authentication Method
|
|
|
|
**Authenticator App (Recommended)**
|
|
- Google Authenticator
|
|
- Authy
|
|
- Microsoft Authenticator
|
|
- 1Password
|
|
|
|
**SMS Text Messages**
|
|
- Receive codes via text
|
|
- Requires phone number
|
|
- Less secure than authenticator apps
|
|
|
|
#### Step 3: Set Up Authenticator App
|
|
1. Download an authenticator app
|
|
2. Scan the QR code with your app
|
|
3. Enter the 6-digit code from your app
|
|
4. Save your backup codes
|
|
5. Click **"Enable 2FA"**
|
|
|
|
#### Step 4: Save Backup Codes
|
|
```
|
|
Your 2FA Backup Codes
|
|
Save these codes in a safe place!
|
|
|
|
1. 123456
|
|
2. 789012
|
|
3. 345678
|
|
4. 901234
|
|
5. 567890
|
|
|
|
Each code can only be used once.
|
|
```
|
|
|
|
**Important:**
|
|
- Store backup codes securely
|
|
- Each code works only once
|
|
- Use if you lose your phone
|
|
- Generate new codes periodically
|
|
|
|
### Using 2FA Login
|
|
|
|
#### With 2FA Enabled
|
|
1. Enter email and password
|
|
2. You'll see the 2FA prompt
|
|
3. Open your authenticator app
|
|
4. Enter the 6-digit code
|
|
5. Click **"Verify"**
|
|
|
|
```
|
|
┌─────────────────────────────────────┐
|
|
│ Two-Factor Authentication │
|
|
├─────────────────────────────────────┤
|
|
│ Enter the code from your │
|
|
│ authenticator app: │
|
|
│ │
|
|
│ Code: [______] │
|
|
│ │
|
|
│ [ Verify ] │
|
|
│ │
|
|
│ Lost your device? Use backup code │
|
|
└─────────────────────────────────────┘
|
|
```
|
|
|
|
#### If You Lose Your Device
|
|
1. Click **"Lost your device?"**
|
|
2. Enter one of your backup codes
|
|
3. Click **"Verify"**
|
|
4. Set up 2FA again with new device
|
|
|
|
### Disabling 2FA
|
|
1. Go to **Profile** > **Security Settings**
|
|
2. Find **"Two-Factor Authentication"**
|
|
3. Click **"Disable 2FA"**
|
|
4. Enter your password to confirm
|
|
5. Enter 2FA code or backup code
|
|
6. Click **"Disable"**
|
|
|
|
## 📱 Device Management
|
|
|
|
### Viewing Connected Devices
|
|
|
|
Go to **Profile** > **Security Settings** > **Connected Devices**
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Connected Devices │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ 💻 Chrome on Windows │
|
|
│ Current session • Last used: Now │
|
|
│ IP: 192.168.1.100 • Location: San Francisco, CA │
|
|
│ │
|
|
│ 📱 Safari on iPhone │
|
|
│ Last used: 2 hours ago │
|
|
│ IP: 10.0.0.50 • Location: San Francisco, CA │
|
|
│ [Sign Out] │
|
|
│ │
|
|
│ 💻 Firefox on Mac │
|
|
│ Last used: 3 days ago │
|
|
│ IP: 192.168.1.102 • Location: San Francisco, CA │
|
|
│ [Sign Out] │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Managing Devices
|
|
- **Current Session** - The device you're using now
|
|
- **Sign Out** - Remotely log out from other devices
|
|
- **Sign Out All** - Log out from all devices except current
|
|
- **Device Information** - Browser, OS, location, IP address
|
|
|
|
### Suspicious Activity
|
|
If you see unfamiliar devices:
|
|
1. Click **"Sign Out"** immediately
|
|
2. Change your password
|
|
3. Enable 2FA if not already active
|
|
4. Review recent account activity
|
|
|
|
## 🔒 Security Best Practices
|
|
|
|
### Account Security Checklist
|
|
|
|
#### Strong Authentication
|
|
- [ ] Use a unique, strong password
|
|
- [ ] Enable two-factor authentication
|
|
- [ ] Regularly update your password
|
|
- [ ] Use a password manager
|
|
- [ ] Don't share your credentials
|
|
|
|
#### Device Security
|
|
- [ ] Log out from public computers
|
|
- [ ] Don't save passwords on shared devices
|
|
- [ ] Use "Remember me" only on trusted devices
|
|
- [ ] Regularly review connected devices
|
|
- [ ] Keep your devices updated
|
|
|
|
#### Email Security
|
|
- [ ] Use a secure email provider
|
|
- [ ] Enable 2FA on your email account
|
|
- [ ] Don't forward authentication emails
|
|
- [ ] Check email regularly for security notifications
|
|
- [ ] Report suspicious emails
|
|
|
|
### Recognizing Phishing Attempts
|
|
|
|
**Red Flags:**
|
|
- Urgent requests for password/login
|
|
- Generic greetings ("Dear User")
|
|
- Suspicious sender addresses
|
|
- Links to unfamiliar domains
|
|
- Spelling and grammar errors
|
|
- Requests for personal information
|
|
|
|
**Always:**
|
|
- Type the URL directly in your browser
|
|
- Check the sender's email address
|
|
- Hover over links to see destinations
|
|
- Contact support if unsure
|
|
- Report suspicious emails
|
|
|
|
### Account Recovery Tips
|
|
|
|
**Prepare for Recovery:**
|
|
- Keep email account secure
|
|
- Save backup codes safely
|
|
- Update recovery information
|
|
- Note down your username
|
|
- Keep contact information current
|
|
|
|
**If Locked Out:**
|
|
1. Try password reset first
|
|
2. Use backup codes if 2FA enabled
|
|
3. Contact support with account details
|
|
4. Provide proof of identity if required
|
|
|
|
## 🎯 Profile & Account Settings
|
|
|
|
### Account Information
|
|
- **Full Name** - Your display name
|
|
- **Email** - Login email (requires verification to change)
|
|
- **Username** - Unique identifier (cannot be changed)
|
|
- **Joined Date** - When you created your account
|
|
- **Last Login** - Your most recent login time
|
|
|
|
### Privacy Settings
|
|
- **Profile Visibility** - Who can see your profile
|
|
- **Email Visibility** - Show/hide email address
|
|
- **Activity Status** - Show when you're online
|
|
- **Search Visibility** - Allow others to find you
|
|
|
|
### Notification Preferences
|
|
- **Email Notifications** - Security alerts, updates
|
|
- **Login Notifications** - New device alerts
|
|
- **Security Notifications** - Suspicious activity alerts
|
|
- **Newsletter** - Product updates and news
|
|
|
|
## 🔍 Login History & Activity
|
|
|
|
### Viewing Login History
|
|
|
|
Go to **Profile** > **Security Settings** > **Login History**
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ Login History │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ ✅ Successful login │
|
|
│ Today at 2:30 PM • Chrome on Windows │
|
|
│ IP: 192.168.1.100 • San Francisco, CA │
|
|
│ │
|
|
│ ✅ Successful login │
|
|
│ Yesterday at 9:15 AM • Safari on iPhone │
|
|
│ IP: 10.0.0.50 • San Francisco, CA │
|
|
│ │
|
|
│ ❌ Failed login attempt │
|
|
│ 2 days ago at 3:45 AM • Unknown browser │
|
|
│ IP: 203.0.113.1 • Unknown location │
|
|
│ │
|
|
│ ✅ Password changed │
|
|
│ 1 week ago at 11:22 AM • Chrome on Windows │
|
|
│ IP: 192.168.1.100 • San Francisco, CA │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Activity Monitoring
|
|
- **Successful Logins** - Normal access to your account
|
|
- **Failed Attempts** - Someone tried to access your account
|
|
- **Password Changes** - When you updated your password
|
|
- **2FA Changes** - When you modified 2FA settings
|
|
- **Device Management** - Adding/removing devices
|
|
|
|
### Security Alerts
|
|
You'll receive emails for:
|
|
- New device logins
|
|
- Multiple failed login attempts
|
|
- Password changes
|
|
- 2FA modifications
|
|
- Suspicious activity
|
|
|
|
## 🛠️ Troubleshooting Authentication
|
|
|
|
### Common Issues & Solutions
|
|
|
|
#### Email Verification Problems
|
|
**Issue:** Verification email not received
|
|
**Solutions:**
|
|
1. Check spam/junk folders
|
|
2. Add noreply@rustelo.com to contacts
|
|
3. Wait 5-10 minutes for delivery
|
|
4. Request new verification email
|
|
5. Try different email address
|
|
|
|
#### 2FA Code Issues
|
|
**Issue:** 2FA codes not working
|
|
**Solutions:**
|
|
1. Check device time is correct
|
|
2. Try the next code generated
|
|
3. Use backup codes
|
|
4. Resync authenticator app
|
|
5. Disable and re-enable 2FA
|
|
|
|
#### Browser-Specific Issues
|
|
**Issue:** Login not working in browser
|
|
**Solutions:**
|
|
1. Clear browser cache and cookies
|
|
2. Disable browser extensions
|
|
3. Try incognito/private mode
|
|
4. Update browser to latest version
|
|
5. Try different browser
|
|
|
|
#### Mobile Login Issues
|
|
**Issue:** Can't login on mobile
|
|
**Solutions:**
|
|
1. Check internet connection
|
|
2. Update mobile browser
|
|
3. Try desktop site option
|
|
4. Clear browser data
|
|
5. Restart device
|
|
|
|
### Getting Help
|
|
|
|
#### Self-Service Options
|
|
- **Password Reset** - Reset forgotten passwords
|
|
- **Resend Verification** - Get new verification email
|
|
- **Backup Codes** - Access with 2FA backup codes
|
|
- **Device Logout** - Remove suspicious devices
|
|
|
|
#### Contact Support
|
|
If you can't resolve login issues:
|
|
1. Go to the help center
|
|
2. Submit a support ticket
|
|
3. Include your username/email
|
|
4. Describe the problem clearly
|
|
5. Mention steps you've tried
|
|
|
|
**Support will ask for:**
|
|
- Your username or email
|
|
- Description of the problem
|
|
- Browser and device information
|
|
- Error messages you see
|
|
- Steps you've already tried
|
|
|
|
## 🎓 Authentication Tips
|
|
|
|
### For New Users
|
|
1. **Choose a Strong Password** - Use password manager
|
|
2. **Verify Email Quickly** - Check spam folder
|
|
3. **Enable 2FA Early** - Set up before you need it
|
|
4. **Save Backup Codes** - Store them securely
|
|
5. **Complete Profile** - Add recovery information
|
|
|
|
### For Regular Users
|
|
1. **Review Login History** - Check monthly
|
|
2. **Update Passwords** - Every 3-6 months
|
|
3. **Manage Devices** - Remove old devices
|
|
4. **Monitor Activity** - Watch for suspicious logins
|
|
5. **Keep Email Secure** - Protect your email account
|
|
|
|
### For Advanced Users
|
|
1. **Use Hardware Keys** - If supported
|
|
2. **Monitor IP Addresses** - Check for unusual locations
|
|
3. **Set Strong Recovery** - Multiple recovery options
|
|
4. **Regular Security Audits** - Monthly reviews
|
|
5. **Stay Informed** - Follow security best practices
|
|
|
|
## 🚨 Security Incident Response
|
|
|
|
### If Your Account is Compromised
|
|
|
|
#### Immediate Actions
|
|
1. **Change Password** - Use different device if possible
|
|
2. **Enable 2FA** - If not already enabled
|
|
3. **Log Out All Devices** - Remove attacker access
|
|
4. **Check Account Activity** - Review recent changes
|
|
5. **Contact Support** - Report the incident
|
|
|
|
#### Recovery Steps
|
|
1. **Secure Email Account** - Change email password
|
|
2. **Review Account Settings** - Check for unauthorized changes
|
|
3. **Check Connected Apps** - Remove suspicious connections
|
|
4. **Update Recovery Info** - Ensure you control recovery methods
|
|
5. **Monitor Activity** - Watch for continued suspicious activity
|
|
|
|
### Prevention Tips
|
|
- Never share your login credentials
|
|
- Use strong, unique passwords
|
|
- Enable 2FA on all accounts
|
|
- Keep devices and browsers updated
|
|
- Be cautious on public WiFi
|
|
- Log out from public computers
|
|
|
|
## 📚 Next Steps
|
|
|
|
Now that you understand authentication, explore:
|
|
|
|
1. **[User Interface Guide](./interface.md)** - Navigate the application
|
|
2. **[Profile Management](./profile.md)** - Customize your account
|
|
3. **[Content Management](./content.md)** - Create and manage content
|
|
4. **[Media Management](./media.md)** - Handle files and images
|
|
5. **[Features Overview](./features/)** - Discover all features
|
|
|
|
## 🎉 Conclusion
|
|
|
|
Rustelo's authentication system is designed to keep your account secure while making it easy to access your content. By following the practices in this guide, you'll have a secure, well-managed account.
|
|
|
|
Remember to:
|
|
- Use strong, unique passwords
|
|
- Enable two-factor authentication
|
|
- Regularly review your account activity
|
|
- Keep your recovery information updated
|
|
- Contact support if you need help
|
|
|
|
**Stay secure and enjoy using Rustelo!** 🔐✨ |