New login page style

3 files changed, 53 insertions, 16 deletions

diff --git a/server/src/routes/ui/account/mod.rs b/server/src/routes/ui/account/mod.rs
index 1d36cd8..c04e29a 100644
--- a/server/src/routes/ui/account/mod.rs
+++ b/server/src/routes/ui/account/mod.rs
@@ -11,7 +11,7 @@ use super::{error::MyError, layout::LayoutPage};
 use crate::{
     database::{Database, User},
     routes::ui::{error::MyResult, home::rocket_uri_macro_r_home, layout::DynLayoutPage},
-    CONF,
+    CONF, uri,
 };
 use anyhow::anyhow;
 use argon2::{password_hash::Salt, Argon2, PasswordHasher};
@@ -22,7 +22,7 @@ use rocket::{
     http::{Cookie, CookieJar},
     post,
     response::Redirect,
-    uri, FromForm, State,
+    FromForm, State,
 };
 use serde::{Deserialize, Serialize};
 
@@ -42,17 +42,19 @@ pub async fn r_account_register() -> DynLayoutPage<'static> {
         title: "Register".to_string(),
         content: markup::new! {
             form.account[method="POST", action=""] {
-                h1 { "Register for " @CONF.brand  }
+                h1 { "Register"  }
 
-                label[for="inp-invitation"] { "Invite Code: " }
+                label[for="inp-invitation"] { "Invite Code" }
                 input[type="text", id="inp-invitation", name="invitation"]; br;
 
-                label[for="inp-username"] { "Username: " }
+                label[for="inp-username"] { "Username" }
                 input[type="text", id="inp-username", name="username"]; br;
-                label[for="inp-password"] { "Password: " }
+                label[for="inp-password"] { "Password" }
                 input[type="password", id="inp-password", name="password"]; br;
 
                 input[type="submit", value="Register now!"];
+
+                p { "Already have an account? " a[href=uri!(r_account_login())] { "Login here" } }
             }
         },
         ..Default::default()
@@ -72,19 +74,20 @@ pub struct LoginForm {
 #[get("/account/login")]
 pub fn r_account_login() -> DynLayoutPage<'static> {
     LayoutPage {
-        title: "Log in".to_string(),
+        title: "Login".to_string(),
         content: markup::new! {
             form.account[method="POST", action=""] {
-                h1 { "Log in to your Account" }
+                h1 { "Login" }
 
-                label[for="inp-username"] { "Username: " }
+                label[for="inp-username"] { "Username" }
                 input[type="text", id="inp-username", name="username"]; br;
-                label[for="inp-password"] { "Password: " }
+                label[for="inp-password"] { "Password" }
                 input[type="password", id="inp-password", name="password"]; br;
 
                 input[type="submit", value="Login"];
 
                 p { "While logged in, a cookie will be used to identify you." }
+                p { "Don't have an account yet? " a[href=uri!(r_account_register())] { "Register here" } }
             }
         },
         ..Default::default()
@@ -162,13 +165,13 @@ pub fn r_account_login_post(
         .finish(),
     );
 
-    Ok(Redirect::found(uri!(r_home())))
+    Ok(Redirect::found(rocket::uri!(r_home())))
 }
 
 #[post("/account/logout")]
 pub fn r_account_logout_post(jar: &CookieJar) -> MyResult<Redirect> {
     jar.remove_private(Cookie::named("session"));
-    Ok(Redirect::found(uri!(r_home())))
+    Ok(Redirect::found(rocket::uri!(r_home())))
 }
 
 pub fn login_logic(database: &Database, username: &str, password: &str) -> MyResult<String> {
diff --git a/server/src/routes/ui/style/forms.css b/server/src/routes/ui/style/forms.css
index 82a6157..e629256 100644
--- a/server/src/routes/ui/style/forms.css
+++ b/server/src/routes/ui/style/forms.css
@@ -4,13 +4,22 @@
     Copyright (C) 2023 metamuffin <metamuffin.org>
     Copyright (C) 2023 tpart
 */
+input {
+    outline: none;
+    box-sizing: border-box;
+    height: 2.5em;
+}
 input[type="text"],
 input[type="password"] {
     border-radius: 7px;
     padding: 0.3em;
-    margin: 0.2em;
+    margin-top: 0.3em;
     border: 2px solid var(--accent-light);
 }
+input[type="text"]:focus,
+input[type="password"]:focus {
+    background-color: var(--background-light);
+}
 input[type="text"]:disabled,
 input[type="password"]:disabled {
     border: 2px solid grey;
@@ -18,18 +27,18 @@ input[type="password"]:disabled {
 
 input[type="submit"] {
     padding: 0.5em;
-    margin: 1em;
+    margin: 0.5em;
     justify-self: center;
     border: 0px solid transparent;
     background-color: var(--accent-dark);
     border-radius: 8px;
+    cursor: pointer;
 }
 input[type="submit"]:disabled {
     background-color: grey;
 }
-
 input[type="submit"]:hover {
-    filter: hue-rotate(-20deg);
+    filter: brightness(150%);
 }
 
 form.account {
@@ -37,11 +46,28 @@ form.account {
     border-radius: 1em;
     background-color: var(--background-light);
 
+    min-width: 25em;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
+form.account input {
+    width: 100%;
+    font-size: large;
+}
+form.account input, label {
+    display: block;
+}
+form.account input[type="submit"] {
+    margin: 0;
+    margin-top: 1em;
+    margin-bottom: 1.5em;
+    font-weight: bold;
+}
 form.account h1 {
     margin-top: 0px;
 }
+form.account p {
+    color: var(--font-dark);
+}
\ No newline at end of file
diff --git a/server/src/routes/ui/style/layout.css b/server/src/routes/ui/style/layout.css
index 2da6d97..09da718 100644
--- a/server/src/routes/ui/style/layout.css
+++ b/server/src/routes/ui/style/layout.css
@@ -20,8 +20,11 @@
     --backdrop-height: 24em;
     --background-dark: #070707;
     --background-light: #1c1c1c;
+    --background-very-light: #323232;
     --main-side-margin: 2em;
     --font: rgb(218, 218, 218);
+    --font-dark: rgb(148, 148, 148);
+    --font-highlight: white;
 }
 
 ::selection {
@@ -44,6 +47,11 @@ body {
     padding: 0px;
 }
 
+h1 {
+    font-weight: bold;
+    color: var(--font-highlight);
+}
+
 nav {
     user-select: none;
     z-index: 90;