TimeTrack/templates/profile.html

{% extends "layout.html" %}

{% block content %}
<div class="profile-container">
    <h1>My Profile</h1>
    
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}
    
    <div class="profile-info">
        <p><strong>Username:</strong> {{ user.username }}</p>
        <p><strong>Account Type:</strong> {{ user.role.value if user.role else 'Team Member' }}</p>
        <p><strong>Member Since:</strong> {{ user.created_at.strftime('%Y-%m-%d') }}</p>
        <p><strong>Two-Factor Authentication:</strong> 
            {% if user.two_factor_enabled %}
                <span class="status enabled">✅ Enabled</span>
            {% else %}
                <span class="status disabled">❌ Disabled</span>
            {% endif %}
        </p>
    </div>
    
    <h2>Profile Settings</h2>
    
    <div class="profile-card">
        <h3>Basic Information</h3>
        <form method="POST" action="{{ url_for('profile') }}" class="profile-form">
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" class="form-control" value="{{ user.email }}" required>
                <small>This email address is used for account verification and notifications.</small>
            </div>
            
            <div class="form-group">
                <button type="submit" class="btn btn-primary">Update Email</button>
            </div>
        </form>
    </div>
    
    <div class="profile-card">
        <h3>Change Password</h3>
        <p>Update your account password to keep your account secure.</p>
        <form method="POST" action="{{ url_for('profile') }}" class="password-form">
            <!-- Hidden email field to maintain current email -->
            <input type="hidden" name="email" value="{{ user.email }}">
            
            <div class="form-group">
                <label for="current_password">Current Password</label>
                <input type="password" id="current_password" name="current_password" class="form-control" required>
                <small>Enter your current password to verify your identity.</small>
            </div>
            
            <div class="form-group">
                <label for="new_password">New Password</label>
                <input type="password" id="new_password" name="new_password" class="form-control" required>
                <small>Choose a strong password with at least 8 characters.</small>
            </div>
            
            <div class="form-group">
                <label for="confirm_password">Confirm New Password</label>
                <input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
                <small>Re-enter your new password to confirm.</small>
            </div>
            
            <div class="form-group">
                <button type="submit" class="btn btn-warning">Change Password</button>
            </div>
        </form>
    </div>
    
    <div class="security-section">
        <h2>Security Settings</h2>
        
        <div class="security-card">
            <h3>Two-Factor Authentication</h3>
            {% if user.two_factor_enabled %}
                <p>Two-factor authentication is <strong>enabled</strong> for your account. This adds an extra layer of security by requiring a code from your authenticator app when logging in.</p>
                
                <form method="POST" action="{{ url_for('disable_2fa') }}" class="disable-2fa-form" onsubmit="return confirm('Are you sure you want to disable two-factor authentication? This will make your account less secure.');">
                    <div class="form-group">
                        <label for="password_disable">Enter your password to disable 2FA:</label>
                        <input type="password" id="password_disable" name="password" class="form-control" required>
                    </div>
                    <button type="submit" class="btn btn-danger">Disable Two-Factor Authentication</button>
                </form>
            {% else %}
                <p>Two-factor authentication is <strong>not enabled</strong> for your account. We strongly recommend enabling it to protect your account.</p>
                <p>With 2FA enabled, you'll need both your password and a code from your phone to log in.</p>
                
                <a href="{{ url_for('setup_2fa') }}" class="btn btn-success">Enable Two-Factor Authentication</a>
            {% endif %}
        </div>
    </div>
</div>

<style>
.status.enabled {
    color: #28a745;
    font-weight: bold;
}

.status.disabled {
    color: #dc3545;
    font-weight: bold;
}

.profile-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.profile-card h3 {
    color: #007bff;
    margin-bottom: 1rem;
}

.profile-card p {
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.security-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
}

.security-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 1rem 0;
}

.security-card h3 {
    color: #007bff;
    margin-bottom: 1rem;
}

.disable-2fa-form {
    margin-top: 1rem;
    padding: 1rem;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 0.25rem;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    margin: 0.5rem 0;
    border: none;
    border-radius: 0.25rem;
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
}

/* Button styles now centralized in main style.css */

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-group small {
    display: block;
    margin-top: 0.25rem;
    color: #6c757d;
    font-size: 0.875rem;
}
</style>
{% endblock %}