Complete authentication system with modern UI

- Add modern authentication templates with black/white theme - Implement email/password and Google OAuth login/signup - Configure SMTP email delivery for verification emails - Create clean, rectangular authentication cards - Remove Facebook integration, keep Google only - Add responsive auth design with reduced font sizes - Fix Django settings for production-ready email backend - Update Google OAuth credentials and callback URLs - Generate secure SECRET_KEY for production 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-08-18 14:12:55 +00:00 · 2025-09-11 12:26:22 +05:30 · 2025-09-11 12:26:22 +05:30 · 85f68a8df9
commit 85f68a8df9
parent 4bbc56a08f
16 changed files with 726 additions and 134 deletions
--- a/.env.example
+++ b/.env.example
@ -23,10 +23,6 @@ DEFAULT_FROM_EMAIL=noreply@your-domain.com
 GOOGLE_OAUTH2_CLIENT_ID=your-google-client-id
 GOOGLE_OAUTH2_CLIENT_SECRET=your-google-client-secret

-# Social Authentication - Facebook
-FACEBOOK_APP_ID=your-facebook-app-id
-FACEBOOK_APP_SECRET=your-facebook-app-secret
-
 # Production SSL Settings (set to True in production)
 SECURE_SSL_REDIRECT=False

--- a/apps/accounts/management/commands/setup_social_apps.py
+++ b/apps/accounts/management/commands/setup_social_apps.py
@ -0,0 +1,36 @@
+from django.core.management.base import BaseCommand
+from allauth.socialaccount.models import SocialApp
+from django.contrib.sites.models import Site
+from decouple import config
+
+
+class Command(BaseCommand):
+    help = 'Set up social authentication applications'
+
+    def handle(self, *args, **options):
+        site = Site.objects.get_current()
+        
+        # Create Google OAuth2 app if it doesn't exist
+        google_app, created = SocialApp.objects.get_or_create(
+            provider='google',
+            name='Google',
+            defaults={
+                'client_id': config('GOOGLE_OAUTH2_CLIENT_ID', default='your-google-client-id'),
+                'secret': config('GOOGLE_OAUTH2_CLIENT_SECRET', default='your-google-client-secret'),
+            }
+        )
+        google_app.sites.add(site)
+        
+        if created:
+            self.stdout.write(
+                self.style.SUCCESS('Created Google OAuth2 application')
+            )
+        else:
+            self.stdout.write(
+                self.style.WARNING('Google OAuth2 application already exists')
+            )
+        
+        
+        self.stdout.write(
+            self.style.SUCCESS('Social applications setup completed!')
+        )
--- a/cookies.txt
+++ b/cookies.txt
@ -0,0 +1,4 @@
+# Netscape HTTP Cookie File
+# https://curl.se/docs/http-cookies.html
+# This file was generated by libcurl! Edit at your own risk.
+
--- a/django_project/settings/base.py
+++ b/django_project/settings/base.py
@ -28,7 +28,6 @@ THIRD_PARTY_APPS = [
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.google',
-    'allauth.socialaccount.providers.facebook',
    'whitenoise.runserver_nostatic',
 ]

@ -154,26 +153,6 @@ SOCIALACCOUNT_PROVIDERS = {
            'access_type': 'online',
        },
        'OAUTH_PKCE_ENABLED': True,
-    },
-    'facebook': {
-        'METHOD': 'oauth2',
-        'SCOPE': ['email', 'public_profile'],
-        'AUTH_PARAMS': {'auth_type': 'reauthenticate'},
-        'INIT_PARAMS': {'cookie': True},
-        'FIELDS': [
-            'id',
-            'first_name',
-            'last_name',
-            'middle_name',
-            'name',
-            'name_format',
-            'picture',
-            'short_name'
-        ],
-        'EXCHANGE_TOKEN': True,
-        'LOCALE_FUNC': 'path.to.callable',
-        'VERIFIED_EMAIL': False,
-        'VERSION': 'v7.0',
    }
 }

--- a/django_project/settings/development.py
+++ b/django_project/settings/development.py
@ -18,7 +18,7 @@ DATABASES = {
    }
 }

-EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
+# EMAIL_BACKEND is configured in base.py from .env file

 LOGGING = {
    'version': 1,
--- a/entrypoint.sh
+++ b/entrypoint.sh
@ -11,6 +11,9 @@ python manage.py migrate --noinput
 echo "Creating default groups..."
 python manage.py create_groups

+echo "Setting up social applications..."
+python manage.py setup_social_apps
+
 echo "Collecting static files..."
 python manage.py collectstatic --noinput

--- a/static/css/auth.css
+++ b/static/css/auth.css
@ -0,0 +1,316 @@
+/* Modern Authentication Styles */
+
+* {
+    box-sizing: border-box;
+}
+
+body.auth-body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: #f8f9fa;
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.auth-container {
+    width: 100%;
+    max-width: 600px;
+    padding: 20px;
+}
+
+.auth-card {
+    background: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    padding: 32px 48px;
+    width: 100%;
+    border: 1px solid #e5e7eb;
+}
+
+.auth-logo {
+    width: 64px;
+    height: 64px;
+    background: #000000;
+    border-radius: 8px;
+    margin: 0 auto 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    font-weight: 600;
+    color: white;
+}
+
+.auth-title {
+    font-size: 22px;
+    font-weight: 600;
+    color: #000000;
+    text-align: center;
+    margin-bottom: 6px;
+    line-height: 1.2;
+}
+
+.auth-subtitle {
+    font-size: 14px;
+    color: #6b7280;
+    text-align: center;
+    margin-bottom: 24px;
+    font-weight: 400;
+}
+
+.auth-form {
+    width: 100%;
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #374151;
+    margin-bottom: 8px;
+    display: block;
+}
+
+.form-control {
+    width: 100%;
+    padding: 10px 12px;
+    font-size: 14px;
+    border: 1.5px solid #d1d5db;
+    border-radius: 6px;
+    background: #ffffff;
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+.form-control:focus {
+    outline: none;
+    border-color: #000000;
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
+    background: #ffffff;
+}
+
+.form-control::placeholder {
+    color: #a0aec0;
+    font-weight: 400;
+}
+
+.btn-primary {
+    width: 100%;
+    padding: 10px 16px;
+    font-size: 14px;
+    font-weight: 600;
+    background: #000000;
+    border: none;
+    border-radius: 6px;
+    color: white;
+    transition: all 0.2s ease;
+    margin-top: 8px;
+}
+
+.btn-primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+    background: #1f2937;
+}
+
+.btn-primary:active {
+    transform: translateY(0);
+}
+
+.divider {
+    display: flex;
+    align-items: center;
+    margin: 20px 0;
+    color: #a0aec0;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.divider::before,
+.divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: #d1d5db;
+}
+
+.divider::before {
+    margin-right: 16px;
+}
+
+.divider::after {
+    margin-left: 16px;
+}
+
+.btn-google {
+    width: 100%;
+    padding: 10px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    background: #ffffff;
+    border: 1.5px solid #d1d5db;
+    border-radius: 6px;
+    color: #374151;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 12px;
+    text-decoration: none;
+}
+
+.btn-google:hover {
+    border-color: #9ca3af;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    background: #f9fafb;
+    color: #374151;
+    text-decoration: none;
+}
+
+
+.auth-links {
+    text-align: right;
+    margin: 0;
+}
+
+.auth-links a {
+    color: #000000;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 12px;
+}
+
+.auth-links a:hover {
+    color: #374151;
+    text-decoration: underline;
+}
+
+.auth-links .separator {
+    color: #a0aec0;
+    margin: 0 8px;
+}
+
+.auth-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 16px;
+    font-size: 12px;
+    width: 100%;
+}
+
+.forgot-password {
+    margin: 0;
+    text-align: left;
+}
+
+.forgot-password a {
+    color: #6b7280;
+    text-decoration: none;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.forgot-password a:hover {
+    color: #000000;
+    text-decoration: underline;
+}
+
+.error-message {
+    background: #fee;
+    border: 1px solid #fcc;
+    color: #c66;
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    font-size: 14px;
+}
+
+.success-message {
+    background: #efe;
+    border: 1px solid #cfc;
+    color: #6c6;
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    font-size: 14px;
+}
+
+/* Responsive design */
+@media (max-width: 480px) {
+    .auth-card {
+        padding: 32px 24px;
+        margin: 20px;
+        border-radius: 12px;
+    }
+    
+    .auth-title {
+        font-size: 24px;
+    }
+    
+    .auth-subtitle {
+        font-size: 14px;
+    }
+}
+
+/* Django form error styling */
+.errorlist {
+    list-style: none;
+    padding: 0;
+    margin: 8px 0 0 0;
+}
+
+.errorlist li {
+    color: #e53e3e;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.form-control.is-invalid {
+    border-color: #e53e3e;
+}
+
+/* Hide default Django form styling */
+.form-row {
+    margin-bottom: 0;
+}
+
+label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #374151;
+    margin-bottom: 8px;
+    display: block;
+}
+
+/* Social login not configured message */
+.social-not-configured {
+    text-align: center;
+    color: #a0aec0;
+    font-size: 14px;
+    margin-top: 16px;
+    font-style: italic;
+}
+
+/* Toast customization */
+.toast {
+    border: none;
+    border-radius: 12px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+.toast-header {
+    border-bottom: 1px solid #e2e8f0;
+    border-radius: 12px 12px 0 0;
+}
+
+.toast-body {
+    font-weight: 500;
+}
--- a/templates/account/dashboard.html
+++ b/templates/account/dashboard.html
@ -54,23 +54,33 @@
                    <li>
                        <i class="text-success">✓</i> User Dashboard
                    </li>
-                    {% if user.has_role:'staff' or user.has_role:'admin' %}
+                    {% if user.groups.all %}
+                        {% for group in user.groups.all %}
+                            {% if group.name == 'staff' or group.name == 'admin' %}
                                <li>
                                    <i class="text-success">✓</i> 
                                    <a href="{% url 'core:staff_dashboard' %}">Staff Dashboard</a>
                                </li>
-                    {% else %}
-                        <li>
-                            <i class="text-muted">✗</i> Staff Dashboard
-                        </li>
                            {% endif %}
-                    
-                    {% if user.has_role:'admin' %}
+                            {% if group.name == 'admin' %}
                                <li>
                                    <i class="text-success">✓</i> 
                                    <a href="{% url 'core:admin_dashboard' %}">Admin Dashboard</a>
                                </li>
+                            {% endif %}
+                        {% endfor %}
+                        {% if not user.groups.filter|length %}
+                            <li>
+                                <i class="text-muted">✗</i> Staff Dashboard
+                            </li>
+                            <li>
+                                <i class="text-muted">✗</i> Admin Dashboard
+                            </li>
+                        {% endif %}
                    {% else %}
+                        <li>
+                            <i class="text-muted">✗</i> Staff Dashboard
+                        </li>
                        <li>
                            <i class="text-muted">✗</i> Admin Dashboard
                        </li>
--- a/templates/account/email_confirm.html
+++ b/templates/account/email_confirm.html
@ -0,0 +1,27 @@
+{% extends 'auth_base.html' %}
+
+{% block title %}Confirm Email{% endblock %}
+
+{% block content %}
+<div class="auth-logo">
+    ✉️
+</div>
+
+<h1 class="auth-title">Confirm Your Email</h1>
+<p class="auth-subtitle">Click the button below to verify your email address</p>
+
+{% if confirmation %}
+    <form method="post" class="auth-form">
+        {% csrf_token %}
+        <button type="submit" class="btn-primary">Confirm Email</button>
+    </form>
+{% else %}
+    <div class="error-message">
+        Invalid or expired confirmation link.
+    </div>
+{% endif %}
+
+<div class="auth-links">
+    <a href="{% url 'account_login' %}">Back to Sign In</a>
+</div>
+{% endblock %}
--- a/templates/account/login.html
+++ b/templates/account/login.html
@ -1,49 +1,105 @@
-{% extends 'base.html' %}
+{% extends 'auth_base.html' %}
 {% load socialaccount %}

-{% block title %}Login - Django Boilerplate{% endblock %}
+{% block title %}Sign In{% endblock %}

 {% block content %}
-<div class="row justify-content-center">
-    <div class="col-md-6">
-        <div class="card">
-            <div class="card-header">
-                <h4 class="mb-0">Login to Your Account</h4>
+<div class="auth-logo">
+    📱
 </div>
-            <div class="card-body">
-                <form method="post">
+
+<h1 class="auth-title">Welcome</h1>
+<p class="auth-subtitle">Sign in to continue</p>
+
+{% get_providers as socialaccount_providers %}
+{% for provider in socialaccount_providers %}
+    {% if provider.id == "google" %}
+        <a href="{% provider_login_url 'google' %}" class="btn-google">
+            <svg width="20" height="20" viewBox="0 0 24 24">
+                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+            </svg>
+            Continue with Google
+        </a>
+    {% endif %}
+{% endfor %}
+
+{% if socialaccount_providers %}
+    <div class="divider">OR</div>
+{% endif %}
+
+<form method="post" class="auth-form">
    {% csrf_token %}
-                    {{ form.as_p }}
-                    <button type="submit" class="btn btn-primary">Login</button>
+    
+    {% if form.non_field_errors %}
+        <div class="error-message">
+            {% for error in form.non_field_errors %}
+                {{ error }}
+            {% endfor %}
+        </div>
+    {% endif %}
+    
+    <div class="form-group">
+        <label for="{{ form.login.id_for_label }}" class="form-label">Email</label>
+        <input type="email" 
+               class="form-control {% if form.login.errors %}is-invalid{% endif %}" 
+               id="{{ form.login.id_for_label }}" 
+               name="{{ form.login.name }}" 
+               placeholder="you@example.com"
+               value="{{ form.login.value|default:'' }}"
+               required>
+        {% if form.login.errors %}
+            <ul class="errorlist">
+                {% for error in form.login.errors %}
+                    <li>{{ error }}</li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+    
+    <div class="form-group">
+        <label for="{{ form.password.id_for_label }}" class="form-label">Password</label>
+        <input type="password" 
+               class="form-control {% if form.password.errors %}is-invalid{% endif %}" 
+               id="{{ form.password.id_for_label }}" 
+               name="{{ form.password.name }}" 
+               placeholder="••••••••"
+               required>
+        {% if form.password.errors %}
+            <ul class="errorlist">
+                {% for error in form.password.errors %}
+                    <li>{{ error }}</li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+    
+    {% if form.remember %}
+        <div class="form-group">
+            <div class="form-check">
+                {{ form.remember }}
+                <label class="form-check-label" for="{{ form.remember.id_for_label }}">
+                    Remember me
+                </label>
+            </div>
+        </div>
+    {% endif %}
+    
+    <button type="submit" class="btn-primary">Sign In</button>
 </form>

-                <hr class="my-4">
-                
-                <div class="text-center">
-                    <h6>Or login with:</h6>
-                    <div class="d-grid gap-2 d-md-flex justify-content-md-center">
-                        <a href="{% provider_login_url 'google' %}" class="btn btn-outline-danger">
-                            Google
-                        </a>
-                        <a href="{% provider_login_url 'facebook' %}" class="btn btn-outline-primary">
-                            Facebook
-                        </a>
+<div class="auth-footer">
+    <div class="forgot-password">
+        <a href="{% url 'account_reset_password' %}">Forgot password?</a>
+    </div>
+    <div class="auth-links">
+        Need an account? <a href="{% url 'account_signup' %}">Sign up</a>
    </div>
 </div>

-                <hr class="my-4">
-                
-                <div class="text-center">
-                    <p>
-                        Don't have an account? 
-                        <a href="{% url 'account_signup' %}">Sign up here</a>
-                    </p>
-                    <p>
-                        <a href="{% url 'account_reset_password' %}">Forgot your password?</a>
-                    </p>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
+{% if not socialaccount_providers %}
+    <p class="social-not-configured">Social login not configured</p>
+{% endif %}
 {% endblock %}
--- a/templates/account/password_reset.html
+++ b/templates/account/password_reset.html
@ -0,0 +1,48 @@
+{% extends 'auth_base.html' %}
+
+{% block title %}Reset Password{% endblock %}
+
+{% block content %}
+<div class="auth-logo">
+    🔑
+</div>
+
+<h1 class="auth-title">Reset Password</h1>
+<p class="auth-subtitle">Enter your email to receive reset instructions</p>
+
+<form method="post" class="auth-form">
+    {% csrf_token %}
+    
+    {% if form.non_field_errors %}
+        <div class="error-message">
+            {% for error in form.non_field_errors %}
+                {{ error }}
+            {% endfor %}
+        </div>
+    {% endif %}
+    
+    <div class="form-group">
+        <label for="{{ form.email.id_for_label }}" class="form-label">Email</label>
+        <input type="email" 
+               class="form-control {% if form.email.errors %}is-invalid{% endif %}" 
+               id="{{ form.email.id_for_label }}" 
+               name="{{ form.email.name }}" 
+               placeholder="you@example.com"
+               value="{{ form.email.value|default:'' }}"
+               required>
+        {% if form.email.errors %}
+            <ul class="errorlist">
+                {% for error in form.email.errors %}
+                    <li>{{ error }}</li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+    
+    <button type="submit" class="btn-primary">Send Reset Link</button>
+</form>
+
+<div class="auth-links">
+    Remember your password? <a href="{% url 'account_login' %}">Sign in</a>
+</div>
+{% endblock %}
--- a/templates/account/signup.html
+++ b/templates/account/signup.html
@ -1,46 +1,88 @@
-{% extends 'base.html' %}
+{% extends 'auth_base.html' %}
 {% load socialaccount %}

-{% block title %}Sign Up - Django Boilerplate{% endblock %}
+{% block title %}Create Account{% endblock %}

 {% block content %}
-<div class="row justify-content-center">
-    <div class="col-md-6">
-        <div class="card">
-            <div class="card-header">
-                <h4 class="mb-0">Create Your Account</h4>
+<div class="auth-logo">
+    📱
 </div>
-            <div class="card-body">
-                <form method="post">
+
+<h1 class="auth-title">Create Account</h1>
+<p class="auth-subtitle">Sign up to get started</p>
+
+
+<form method="post" class="auth-form">
    {% csrf_token %}
-                    {{ form.as_p }}
-                    <button type="submit" class="btn btn-primary">Sign Up</button>
+    
+    {% if form.non_field_errors %}
+        <div class="error-message">
+            {% for error in form.non_field_errors %}
+                {{ error }}
+            {% endfor %}
+        </div>
+    {% endif %}
+    
+    <div class="form-group">
+        <label for="{{ form.email.id_for_label }}" class="form-label">Email</label>
+        <input type="email" 
+               class="form-control {% if form.email.errors %}is-invalid{% endif %}" 
+               id="{{ form.email.id_for_label }}" 
+               name="{{ form.email.name }}" 
+               placeholder="you@example.com"
+               value="{{ form.email.value|default:'' }}"
+               required>
+        {% if form.email.errors %}
+            <ul class="errorlist">
+                {% for error in form.email.errors %}
+                    <li>{{ error }}</li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+    
+    <div class="form-group">
+        <label for="{{ form.password1.id_for_label }}" class="form-label">Password</label>
+        <input type="password" 
+               class="form-control {% if form.password1.errors %}is-invalid{% endif %}" 
+               id="{{ form.password1.id_for_label }}" 
+               name="{{ form.password1.name }}" 
+               placeholder="••••••••"
+               required>
+        {% if form.password1.errors %}
+            <ul class="errorlist">
+                {% for error in form.password1.errors %}
+                    <li>{{ error }}</li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+    
+    <div class="form-group">
+        <label for="{{ form.password2.id_for_label }}" class="form-label">Confirm Password</label>
+        <input type="password" 
+               class="form-control {% if form.password2.errors %}is-invalid{% endif %}" 
+               id="{{ form.password2.id_for_label }}" 
+               name="{{ form.password2.name }}" 
+               placeholder="••••••••"
+               required>
+        {% if form.password2.errors %}
+            <ul class="errorlist">
+                {% for error in form.password2.errors %}
+                    <li>{{ error }}</li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+    
+    <button type="submit" class="btn-primary">Create Account</button>
 </form>

-                <hr class="my-4">
-                
-                <div class="text-center">
-                    <h6>Or sign up with:</h6>
-                    <div class="d-grid gap-2 d-md-flex justify-content-md-center">
-                        <a href="{% provider_login_url 'google' %}" class="btn btn-outline-danger">
-                            Google
-                        </a>
-                        <a href="{% provider_login_url 'facebook' %}" class="btn btn-outline-primary">
-                            Facebook
-                        </a>
+<div class="auth-footer">
+    <div></div>
+    <div class="auth-links">
+        Already have an account? <a href="{% url 'account_login' %}">Sign in</a>
    </div>
 </div>

-                <hr class="my-4">
-                
-                <div class="text-center">
-                    <p>
-                        Already have an account? 
-                        <a href="{% url 'account_login' %}">Login here</a>
-                    </p>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
 {% endblock %}
--- a/templates/account/verification_sent.html
+++ b/templates/account/verification_sent.html
@ -0,0 +1,22 @@
+{% extends 'auth_base.html' %}
+
+{% block title %}Check Your Email{% endblock %}
+
+{% block content %}
+<div class="auth-logo">
+    📧
+</div>
+
+<h1 class="auth-title">Check Your Email</h1>
+<p class="auth-subtitle">We've sent a verification link to your email address</p>
+
+<div class="success-message">
+    Please check your email and click the verification link to complete your registration.
+</div>
+
+<div class="auth-links">
+    Didn't receive the email? <a href="{% url 'account_email' %}">Resend</a>
+    <span class="separator">•</span>
+    <a href="{% url 'account_login' %}">Back to Sign In</a>
+</div>
+{% endblock %}
--- a/templates/auth_base.html
+++ b/templates/auth_base.html
@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Authentication{% endblock %}</title>
+    {% load static %}
+    
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="{% static 'css/auth.css' %}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body class="auth-body">
+    <div class="auth-container">
+        <div class="auth-card">
+            {% block content %}
+            {% endblock %}
+        </div>
+    </div>
+
+    {% if messages %}
+        <div class="toast-container position-fixed top-0 end-0 p-3">
+            {% for message in messages %}
+                <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="toast-header">
+                        <strong class="me-auto">
+                            {% if message.tags == 'error' %}❌{% elif message.tags == 'success' %}✅{% else %}ℹ️{% endif %}
+                        </strong>
+                        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
+                    </div>
+                    <div class="toast-body">
+                        {{ message }}
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    {% endif %}
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Auto-dismiss toasts after 5 seconds
+        setTimeout(function() {
+            const toasts = document.querySelectorAll('.toast');
+            toasts.forEach(function(toast) {
+                const bsToast = new bootstrap.Toast(toast);
+                bsToast.hide();
+            });
+        }, 5000);
+    </script>
+</body>
+</html>
--- a/templates/base.html
+++ b/templates/base.html
@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}Django Boilerplate{% endblock %}</title>
+    <title>{% block title %}Application{% endblock %}</title>
    {% load static %}
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
@ -12,7 +12,7 @@
 <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
-            <a class="navbar-brand" href="{% url 'core:home' %}">Django App</a>
+            <a class="navbar-brand" href="{% url 'core:home' %}">App</a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
@ -27,17 +27,19 @@
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'accounts:dashboard' %}">Dashboard</a>
                        </li>
-                        {% if user.has_role %}
-                            {% if user.has_role:'staff' or user.has_role:'admin' %}
+                        {% if user.groups.all %}
+                            {% for group in user.groups.all %}
+                                {% if group.name == 'staff' or group.name == 'admin' %}
                                    <li class="nav-item">
                                        <a class="nav-link" href="{% url 'core:staff_dashboard' %}">Staff</a>
                                    </li>
                                {% endif %}
-                            {% if user.has_role:'admin' %}
+                                {% if group.name == 'admin' %}
                                    <li class="nav-item">
                                        <a class="nav-link" href="{% url 'core:admin_dashboard' %}">Admin</a>
                                    </li>
                                {% endif %}
+                            {% endfor %}
                        {% endif %}
                    {% endif %}
                </ul>
--- a/templates/home.html
+++ b/templates/home.html
@ -1,15 +1,15 @@
 {% extends 'base.html' %}

-{% block title %}Home - Django Boilerplate{% endblock %}
+{% block title %}Home{% endblock %}

 {% block content %}
 <div class="row">
    <div class="col-md-8 mx-auto">
        <div class="jumbotron bg-light p-5 rounded">
-            <h1 class="display-4">Welcome to Django Boilerplate</h1>
+            <h1 class="display-4">Welcome</h1>
            <p class="lead">
-                A production-ready Django starter template with authentication, social login, 
-                role-based permissions, and Docker support.
+                A modern web application with secure authentication, 
+                role-based permissions, and powerful features.
            </p>
            <hr class="my-4">