Settings page
This commit is contained in:
Greg Shuflin
parent
d3ebd66c9a
commit
9f3f5c28be
@ -71,6 +71,11 @@ fn login(demo_mode: &State<bool>) -> Template {
|
||||
Template::render("login", context! { demo_mode: **demo_mode })
|
||||
}
|
||||
|
||||
#[get("/settings")]
|
||||
fn settings(_user: AuthenticatedUser) -> Template {
|
||||
Template::render("settings", context! {})
|
||||
}
|
||||
|
||||
// Run migrations and setup demo data if needed
|
||||
async fn setup_database(demo: bool, rocket: Rocket<Build>) -> fairing::Result {
|
||||
let db = match Db::fetch(&rocket) {
|
||||
@ -150,6 +155,7 @@ fn rocket() -> _ {
|
||||
index,
|
||||
index_redirect,
|
||||
login,
|
||||
settings,
|
||||
user::create_user,
|
||||
user::get_users,
|
||||
user::delete_user,
|
||||
|
||||
163
static/css/components/settings.css
Normal file
163
static/css/components/settings.css
Normal file
@ -0,0 +1,163 @@
|
||||
.settings-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
background-color: var(--dark-bg);
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.settings-header h1 {
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
background-color: var(--sidebar-bg);
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.settings-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.settings-section h2 {
|
||||
color: var(--text-color);
|
||||
font-size: 1.4rem;
|
||||
margin: 0 0 1.5rem 0;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.settings-section h2 i {
|
||||
color: var(--primary-red);
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background-color: var(--dark-bg);
|
||||
border-radius: 6px;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.setting-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.setting-info h3 {
|
||||
color: var(--text-color);
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.setting-info p {
|
||||
color: var(--text-muted);
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.setting-control {
|
||||
position: relative;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.setting-control select,
|
||||
.setting-control input {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--sidebar-bg);
|
||||
border: 1px solid var(--text-muted);
|
||||
border-radius: 4px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.setting-control select:disabled,
|
||||
.setting-control input:disabled,
|
||||
.setting-control button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.btn-danger {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
font-size: 0.9rem;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--sidebar-bg);
|
||||
border: 1px solid var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-secondary:not(:disabled):hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: var(--primary-red);
|
||||
}
|
||||
|
||||
.btn-danger:not(:disabled):hover {
|
||||
background-color: #d63030;
|
||||
}
|
||||
|
||||
.coming-soon {
|
||||
position: absolute;
|
||||
right: -90px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.danger-zone {
|
||||
border: 1px solid rgba(244, 63, 63, 0.3);
|
||||
}
|
||||
@ -7,6 +7,7 @@
|
||||
@import 'components/feed-entries.css';
|
||||
@import 'components/dropdown.css';
|
||||
@import 'components/scrollbar.css';
|
||||
@import 'components/settings.css';
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
@ -89,6 +89,11 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
userMenuDropdown.classList.remove('show');
|
||||
});
|
||||
|
||||
document.getElementById('settingsButton').addEventListener('click', () => {
|
||||
window.location.href = '/settings';
|
||||
userMenuDropdown.classList.remove('show');
|
||||
});
|
||||
|
||||
document.getElementById('logoutButton').addEventListener('click', async () => {
|
||||
try {
|
||||
const response = await fetch('/logout', {
|
||||
|
||||
@ -61,6 +61,7 @@
|
||||
</button>
|
||||
<div class="user-menu-dropdown" id="userMenuDropdown">
|
||||
<button class="user-menu-item" id="importOpmlButton">Import OPML</button>
|
||||
<button class="user-menu-item" id="settingsButton">Settings</button>
|
||||
<button class="user-menu-item" id="logoutButton">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
94
templates/settings.html.tera
Normal file
94
templates/settings.html.tera
Normal file
@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Settings - RSS Reader</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="settings-container">
|
||||
<header class="settings-header">
|
||||
<a href="/" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
Back to Feeds
|
||||
</a>
|
||||
<h1>Settings</h1>
|
||||
</header>
|
||||
<main class="settings-content">
|
||||
<section class="settings-section">
|
||||
<h2>
|
||||
<i class="fas fa-rss"></i>
|
||||
Feed Management
|
||||
</h2>
|
||||
<div class="settings-group">
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h3>Feed Refresh Interval</h3>
|
||||
<p>How often to check feeds for new content</p>
|
||||
</div>
|
||||
<div class="setting-control">
|
||||
<select disabled>
|
||||
<option>Every 15 minutes</option>
|
||||
<option>Every 30 minutes</option>
|
||||
<option>Every hour</option>
|
||||
</select>
|
||||
<span class="coming-soon">Coming soon</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h3>Default Feed Category</h3>
|
||||
<p>Category to assign to new feeds when none is specified</p>
|
||||
</div>
|
||||
<div class="setting-control">
|
||||
<input type="text" placeholder="Uncategorized" disabled>
|
||||
<span class="coming-soon">Coming soon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="settings-section">
|
||||
<h2>
|
||||
<i class="fas fa-user-gear"></i>
|
||||
User Management
|
||||
</h2>
|
||||
<div class="settings-group">
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h3>Change Password</h3>
|
||||
<p>Update your login password</p>
|
||||
</div>
|
||||
<div class="setting-control">
|
||||
<button class="btn-secondary" disabled>Change Password</button>
|
||||
<span class="coming-soon">Coming soon</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h3>Export Data</h3>
|
||||
<p>Export your feeds and settings</p>
|
||||
</div>
|
||||
<div class="setting-control">
|
||||
<button class="btn-secondary" disabled>Export</button>
|
||||
<span class="coming-soon">Coming soon</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item danger-zone">
|
||||
<div class="setting-info">
|
||||
<h3>Delete Account</h3>
|
||||
<p>Permanently delete your account and all associated data</p>
|
||||
</div>
|
||||
<div class="setting-control">
|
||||
<button class="btn-danger" disabled>Delete Account</button>
|
||||
<span class="coming-soon">Coming soon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user