websites/Flask-Files
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
pika 2025-03-23 00:40:29 +01:00
parent eb93961967
commit ea3e92b8b7
10 changed files with 773 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

238
app/templates/auth/profile.html
View file

@ -2,33 +2,237 @@
{% block title %}Profile - Flask Files{% endblock %}
{% block extra_css %}
<style>
.profile-container {
max-width: 800px;
margin: 0 auto;
}
.profile-tabs {
display: flex;
border-bottom: 1px solid var(--border-color);
margin-bottom: 1.5rem;
}
.profile-tab {
padding: 0.75rem 1.5rem;
cursor: pointer;
background: none;
border: none;
font-weight: 500;
border-bottom: 2px solid transparent;
}
.profile-tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.setting-group {
margin-bottom: 2rem;
}
.setting-group h3 {
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
}
</style>
{% endblock %}
{% block content %}
<section class="profile-container">
<h2>User Profile</h2>
<div class="profile-card">
<div class="profile-header">
<div class="avatar">
{{ current_user.username[0].upper() }}
</div>
<h3>{{ current_user.username }}</h3>
</div>
<div class="profile-tabs">
<button class="profile-tab active" data-tab="profile">Profile</button>
<button class="profile-tab" data-tab="appearance">Appearance</button>
<button class="profile-tab" data-tab="security">Security</button>
</div>
<div class="profile-stats">
<div class="stat-item">
<span class="stat-value">{{ current_user.files.count() }}</span>
<span class="stat-label">Files</span>
<!-- Profile Tab -->
<div class="tab-content active" id="profile-tab">
<div class="profile-card">
<div class="profile-header">
<div class="avatar">
{{ current_user.username[0].upper() }}
</div>
<div class="user-info">
<h3>{{ current_user.username }}</h3>
<p>Member since {{ current_user.created_at.strftime('%B %Y') if current_user.created_at else
'Unknown' }}</p>
</div>
</div>
<div class="stat-item">
<span class="stat-value">{{ current_user.shares.count() }}</span>
<span class="stat-label">Shares</span>
<div class="profile-stats">
<div class="stat-item">
<span class="stat-value">{{ current_user.files.filter_by(is_folder=False).count() }}</span>
<span class="stat-label">Files</span>
</div>
<div class="stat-item">
<span class="stat-value">{{ current_user.files.filter_by(is_folder=True).count() }}</span>
<span class="stat-label">Folders</span>
</div>
<div class="stat-item">
<span class="stat-value">{{ current_user.shares.count() }}</span>
<span class="stat-label">Shares</span>
</div>
</div>
<div class="setting-group">
<h3>Edit Profile</h3>
<form id="username-form" method="POST" action="{{ url_for('auth.update_profile') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" class="form-control"
value="{{ current_user.username }}">
</div>
<div class="form-actions">
<button type="submit" class="btn primary">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
<div class="profile-actions">
<a href="#" class="btn">Change Password</a>
<a href="{{ url_for('files.browser') }}" class="btn primary">Manage Files</a>
<!-- Appearance Tab -->
<div class="tab-content" id="appearance-tab">
<div class="setting-group">
<h3>Theme Settings</h3>
<form id="theme-form" method="POST" action="{{ url_for('auth.update_preferences') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="form-group">
<label>Default Theme</label>
<div class="theme-options">
<label class="radio-container">
<input type="radio" name="theme_preference" value="light" {% if theme_preference=='light'
%}checked{% endif %}>
<span class="radio-label">Light</span>
</label>
<label class="radio-container">
<input type="radio" name="theme_preference" value="dark" {% if theme_preference=='dark'
%}checked{% endif %}>
<span class="radio-label">Dark</span>
</label>
<label class="radio-container">
<input type="radio" name="theme_preference" value="system" {% if theme_preference=='system'
or not theme_preference %}checked{% endif %}>
<span class="radio-label">Use System Preference</span>
</label>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn primary">Save Preferences</button>
</div>
</form>
</div>
</div>
<!-- Security Tab -->
<div class="tab-content" id="security-tab">
<div class="setting-group">
<h3>Change Password</h3>
<form id="password-form" method="POST" action="{{ url_for('auth.change_password') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="form-group">
<label for="current_password">Current Password</label>
<input type="password" id="current_password" name="current_password" class="form-control" required>
</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>
<div class="password-strength" id="password-strength"></div>
</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>
</div>
<div class="form-actions">
<button type="submit" class="btn primary">Change Password</button>
</div>
</form>
</div>
</div>
</section>
{% endblock %}
{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function () {
// Tab switching
const tabs = document.querySelectorAll('.profile-tab');
const tabContents = document.querySelectorAll('.tab-content');
tabs.forEach(tab => {
tab.addEventListener('click', function () {
const tabId = this.getAttribute('data-tab');
// Update active tab
tabs.forEach(t => t.classList.remove('active'));
this.classList.add('active');
// Update active content
tabContents.forEach(content => {
content.classList.remove('active');
if (content.id === `${tabId}-tab`) {
content.classList.add('active');
}
});
});
});
// Password strength meter
const passwordInput = document.getElementById('new_password');
const strengthIndicator = document.getElementById('password-strength');
if (passwordInput && strengthIndicator) {
passwordInput.addEventListener('input', function () {
const password = this.value;
let strength = 0;
if (password.length >= 8) strength += 1;
if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength += 1;
if (password.match(/\d/)) strength += 1;
if (password.match(/[^a-zA-Z\d]/)) strength += 1;
// Update the strength indicator
strengthIndicator.className = 'password-strength';
if (password.length === 0) {
strengthIndicator.textContent = '';
} else if (strength < 2) {
strengthIndicator.textContent = 'Weak';
strengthIndicator.classList.add('weak');
} else if (strength < 4) {
strengthIndicator.textContent = 'Moderate';
strengthIndicator.classList.add('moderate');
} else {
strengthIndicator.textContent = 'Strong';
strengthIndicator.classList.add('strong');
}
});
}
// Password confirmation matching
const confirmInput = document.getElementById('confirm_password');
if (passwordInput && confirmInput) {
confirmInput.addEventListener('input', function () {
if (passwordInput.value !== this.value) {
this.setCustomValidity('Passwords must match');
} else {
this.setCustomValidity('');
}
});
}
});
</script>
{% endblock %}