From 348d37d26e7b21e94425c9bb5b462c63033ab7c6 Mon Sep 17 00:00:00 2001 From: Greg Shuflin Date: Sat, 1 Feb 2025 16:53:58 -0800 Subject: [PATCH] Login page --- src/main.rs | 7 +++- static/css/style.css | 70 ++++++++++++++++++++++++++++++++++++++- templates/base.html.tera | 12 +++++++ templates/index.html.tera | 8 ++++- templates/login.html.tera | 18 ++++++++++ 5 files changed, 112 insertions(+), 3 deletions(-) create mode 100644 templates/base.html.tera create mode 100644 templates/login.html.tera diff --git a/src/main.rs b/src/main.rs index b9721e8..20fe02c 100644 --- a/src/main.rs +++ b/src/main.rs @@ -155,12 +155,17 @@ async fn delete_user(mut db: Connection, user_id: &str) -> Status { } } +#[get("/login")] +fn login() -> Template { + Template::render("login", context! {}) +} + #[launch] fn rocket() -> _ { rocket::build() .mount( "/", - routes![index, message, create_user, get_users, delete_user], + routes![index, message, create_user, get_users, delete_user, login], ) .mount("/static", FileServer::from("static")) .attach(Template::fairing()) diff --git a/static/css/style.css b/static/css/style.css index 9178b01..982aede 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -10,11 +10,14 @@ body { margin: 0; padding: 0; font-family: Arial, sans-serif; - display: flex; background-color: var(--dark-bg); color: var(--text-color); } +body.with-sidebar { + display: flex; +} + .sidebar { width: 250px; background-color: var(--sidebar-bg); @@ -62,4 +65,69 @@ body { line-height: 1.6; color: var(--text-muted); margin-bottom: 1.5em; +} + +.login-container { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + width: 100%; + background-color: var(--dark-bg); +} + +.login-form { + background-color: var(--sidebar-bg); + padding: 2rem; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); + width: 100%; + max-width: 400px; +} + +.login-form h1 { + color: var(--primary-red); + text-align: center; + margin-bottom: 1.5rem; +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + color: var(--text-color); +} + +.form-group input { + width: 100%; + padding: 0.75rem; + border: 1px solid var(--text-muted); + border-radius: 4px; + background-color: var(--dark-bg); + color: var(--text-color); + font-size: 1rem; +} + +.form-group input:focus { + outline: none; + border-color: var(--primary-red); +} + +.login-form button { + width: 100%; + padding: 0.75rem; + background-color: var(--primary-red); + color: var(--text-color); + border: none; + border-radius: 4px; + font-size: 1rem; + cursor: pointer; + transition: opacity 0.2s ease; +} + +.login-form button:hover { + opacity: 0.9; } \ No newline at end of file diff --git a/templates/base.html.tera b/templates/base.html.tera new file mode 100644 index 0000000..97309bb --- /dev/null +++ b/templates/base.html.tera @@ -0,0 +1,12 @@ + + + + + + RSS Reader Login + + + + {% block content %}{% endblock %} + + diff --git a/templates/index.html.tera b/templates/index.html.tera index 5eeabd1..a3122f0 100644 --- a/templates/index.html.tera +++ b/templates/index.html.tera @@ -1,3 +1,8 @@ +{% extends "base" %} + +{% block body_class %}with-sidebar{% endblock %} + +{% block content %} @@ -20,4 +25,5 @@

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- \ No newline at end of file + +{% endblock %} \ No newline at end of file diff --git a/templates/login.html.tera b/templates/login.html.tera new file mode 100644 index 0000000..200de5b --- /dev/null +++ b/templates/login.html.tera @@ -0,0 +1,18 @@ +{% extends "base" %} + +{% block content %} + +{% endblock %} \ No newline at end of file