From 9f3f5c28be95a0561628cc8a9f9d31ea9f27107e Mon Sep 17 00:00:00 2001 From: Greg Shuflin Date: Sun, 16 Feb 2025 00:42:02 -0800 Subject: [PATCH] Settings page --- src/main.rs | 6 ++ static/css/components/settings.css | 163 +++++++++++++++++++++++++++++ static/css/style.css | 1 + static/js/app.js | 5 + templates/index.html.tera | 1 + templates/settings.html.tera | 94 +++++++++++++++++ 6 files changed, 270 insertions(+) create mode 100644 static/css/components/settings.css create mode 100644 templates/settings.html.tera diff --git a/src/main.rs b/src/main.rs index 354cefb..99d8aaf 100644 --- a/src/main.rs +++ b/src/main.rs @@ -71,6 +71,11 @@ fn login(demo_mode: &State) -> 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) -> 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, diff --git a/static/css/components/settings.css b/static/css/components/settings.css new file mode 100644 index 0000000..3b5e1b2 --- /dev/null +++ b/static/css/components/settings.css @@ -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); +} \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index e9d7fa1..5c8736c 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -7,6 +7,7 @@ @import 'components/feed-entries.css'; @import 'components/dropdown.css'; @import 'components/scrollbar.css'; +@import 'components/settings.css'; body { margin: 0; diff --git a/static/js/app.js b/static/js/app.js index d0be6a3..0aab649 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -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', { diff --git a/templates/index.html.tera b/templates/index.html.tera index 52bb3f6..44578ad 100644 --- a/templates/index.html.tera +++ b/templates/index.html.tera @@ -61,6 +61,7 @@
+
diff --git a/templates/settings.html.tera b/templates/settings.html.tera new file mode 100644 index 0000000..8f0297b --- /dev/null +++ b/templates/settings.html.tera @@ -0,0 +1,94 @@ + + + + + + Settings - RSS Reader + + + + +
+
+ + + Back to Feeds + +

Settings

+
+
+
+

+ + Feed Management +

+
+
+
+

Feed Refresh Interval

+

How often to check feeds for new content

+
+
+ + Coming soon +
+
+
+
+

Default Feed Category

+

Category to assign to new feeds when none is specified

+
+
+ + Coming soon +
+
+
+
+ +
+

+ + User Management +

+
+
+
+

Change Password

+

Update your login password

+
+
+ + Coming soon +
+
+
+
+

Export Data

+

Export your feeds and settings

+
+
+ + Coming soon +
+
+
+
+

Delete Account

+

Permanently delete your account and all associated data

+
+
+ + Coming soon +
+
+
+
+
+
+ + \ No newline at end of file