fancy login

3 files changed, 35 insertions, 9 deletions

diff --git a/server/src/routes/ui/account/mod.rs b/server/src/routes/ui/account/mod.rs
index e39ef6c..c1561e3 100644
--- a/server/src/routes/ui/account/mod.rs
+++ b/server/src/routes/ui/account/mod.rs
@@ -32,8 +32,9 @@ pub async fn r_account_register() -> DynLayoutPage<'static> {
     LayoutPage {
         title: "Register".to_string(),
         content: markup::new! {
-            h1 { "Register for " @CONF.brand  }
-            form[method="POST", action=""] {
+            form.account[method="POST", action=""] {
+                h1 { "Register for " @CONF.brand  }
+
                 label[for="inp-invitation"] { "Invite Code: " }
                 input[type="text", id="inp-invitation", name="invitation"]; br;
 
@@ -61,16 +62,18 @@ pub fn r_account_login() -> DynLayoutPage<'static> {
     LayoutPage {
         title: "Log in".to_string(),
         content: markup::new! {
-            h1 { "Log in to your Account" }
-            form[method="POST", action=""] {
+            form.account[method="POST", action=""] {
+                h1 { "Log in to your Account" }
+
                 label[for="inp-username"] { "Username: " }
                 input[type="text", id="inp-username", name="username"]; br;
                 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 { "While logged in, a cookie will be used to identify you." }
         },
     }
 }
@@ -80,8 +83,8 @@ pub fn r_account_logout() -> DynLayoutPage<'static> {
     LayoutPage {
         title: "Log out".to_string(),
         content: markup::new! {
-            h1 { "Log out" }
-            form[method="POST", action=""] {
+            form.account[method="POST", action=""] {
+                h1 { "Log out" }
                 input[type="submit", value="Log out."];
             }
         },
diff --git a/server/src/routes/ui/style/forms.css b/server/src/routes/ui/style/forms.css
new file mode 100644
index 0000000..959a62e
--- /dev/null
+++ b/server/src/routes/ui/style/forms.css
@@ -0,0 +1,21 @@
+input[type="text"],
+input[type="password"] {
+    border-radius: 7px;
+    padding: 0.3em;
+    margin: 0.2em;
+    border: 2px solid var(--accent-light);
+}
+
+form.account {
+    padding: 3em;
+    border-radius: 1em;
+    background-color: var(--background-light);
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+form.account h1 {
+    margin-top: 0px;
+}
diff --git a/server/src/routes/ui/style/mod.rs b/server/src/routes/ui/style/mod.rs
index 39e11af..0891d59 100644
--- a/server/src/routes/ui/style/mod.rs
+++ b/server/src/routes/ui/style/mod.rs
@@ -13,6 +13,7 @@ fn css_bundle() -> String {
             "player.css",
             "itempage.css",
             "directorypage.css",
+            "forms.css",
         ]
         .into_iter()
         .map(|n| {
@@ -32,7 +33,8 @@ fn css_bundle() -> String {
             include_str!("layout.css"),
             include_str!("player.css"),
             include_str!("itempage.css"),
-            include_str!("directorypage.css")
+            include_str!("directorypage.css"),
+            include_str!("forms.css")
         )
         .to_string()
     }