Clean up the authentication page CSS

Center the authentication field in the authentication page. Provide some padding within the card, and arrange the form itself.

file-service/src/html.rs

@@ -2,6 +2,7 @@ use build_html::{self, Html, HtmlContainer};
 
 #[derive(Clone, Debug)]
 pub struct Form {
+    classes: Option<String>,
     path: String,
     method: String,
     encoding: Option<String>,
@@ -11,6 +12,7 @@ pub struct Form {
 impl Form {
     pub fn new() -> Self {
         Self {
+            classes: None,
             path: "/".to_owned(),
             method: "get".to_owned(),
             encoding: None,
@@ -36,16 +38,21 @@ impl Form {
 
 impl Html for Form {
     fn to_html_string(&self) -> String {
+        let classes = match self.classes {
+            Some(ref classes) => format!("class=\"{}\"", classes),
+            None => "".to_owned(),
+        };
         let encoding = match self.encoding {
             Some(ref encoding) => format!("enctype=\"{encoding}\"", encoding = encoding),
             None => "".to_owned(),
         };
         format!(
-            "<form action=\"{path}\" method=\"{method}\" {encoding}>\n{elements}\n</form>\n",
+            "<form action=\"{path}\" method=\"{method}\" {encoding} {classes}>\n{elements}\n</form>\n",
             path = self.path,
             method = self.method,
             encoding = encoding,
-            elements = self.elements.to_html_string()
+            elements = self.elements.to_html_string(),
+            classes = classes,
         )
     }
 }
@@ -62,7 +69,7 @@ pub struct Input {
     name: String,
     id: Option<String>,
     value: Option<String>,
-    content: Option<String>,
+    attributes: Vec<(String, String)>,
 }
 
 impl Html for Input {
@@ -75,14 +82,20 @@ impl Html for Input {
             Some(ref value) => format!("value=\"{}\"", value),
             None => "".to_owned(),
         };
+        let attrs = self
+            .attributes
+            .iter()
+            .map(|(key, value)| format!("{}=\"{}\"", key, value))
+            .collect::<Vec<String>>()
+            .join(" ");
 
         format!(
-            "<input type=\"{ty}\" name=\"{name}\" {id} {value}>{content}</input>\n",
+            "<input type=\"{ty}\" name=\"{name}\" {id} {value} {attrs} />\n",
             ty = self.ty,
             name = self.name,
             id = id,
             value = value,
-            content = self.content.clone().unwrap_or("".to_owned()),
+            attrs = attrs,
         )
     }
 }
@@ -94,7 +107,7 @@ impl Input {
             name: name.to_owned(),
             id: None,
             value: None,
-            content: None,
+            attributes: vec![],
         }
     }
 
@@ -108,12 +121,16 @@ impl Input {
         self
     }
 
-    /*
+    pub fn with_attributes<'a>(
-    pub fn with_content(mut self, val: &str) -> Self {
+        mut self,
-        self.content = Some(val.to_owned());
+        values: impl IntoIterator<Item = (&'a str, &'a str)>,
+    ) -> Self {
+        self.attributes = values
+            .into_iter()
+            .map(|(a, b)| (a.to_owned(), b.to_owned()))
+            .collect::<Vec<(String, String)>>();
         self
     }
-    */
 }
 
 #[derive(Clone, Debug)]

file-service/src/pages.rs

@@ -5,14 +5,32 @@ use file_service::{FileHandle, FileId, ReadFileError};
 pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
     build_html::HtmlPage::new()
         .with_title("Authentication")
+        .with_stylesheet("/css")
+        .with_container(
+            Container::new(ContainerType::Div)
+                .with_attributes([("class", "authentication-page")])
+                .with_container(
+                    Container::new(ContainerType::Div)
+                        .with_attributes([("class", "authentication-form")])
                         .with_html(
                             Form::new()
                                 .with_path("/auth")
                                 .with_method("post")
                                 .with_container(
                                     Container::new(ContainerType::Div)
-                        .with_html(Input::new("token", "token").with_id("for-token-input"))
+                                        .with_attributes([("class", "authentication-form__label")])
-                        .with_html(Label::new("for-token-input", "Authentication Token")),
+                                        .with_html(Label::new("for-token-input", "Authentication")),
+                                )
+                                .with_container(
+                                    Container::new(ContainerType::Div)
+                                        .with_attributes([("class", "authentication-form__input")])
+                                        .with_html(
+                                            Input::new("token", "token")
+                                                .with_id("for-token-input")
+                                                .with_attributes([("size", "50")]),
+                                        ),
+                                ),
+                        ),
                 ),
         )
 }
@@ -20,6 +38,7 @@ pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
 pub fn gallery(handles: Vec<Result<FileHandle, ReadFileError>>) -> build_html::HtmlPage {
     let mut page = build_html::HtmlPage::new()
         .with_title("Admin list of files")
+        .with_stylesheet("/css")
         .with_header(1, "Admin list of files")
         .with_html(
             Form::new()

file-service/templates/style.css

@@ -1,5 +1,39 @@
+:root {
+    --main-bg-color: #e5f0fc;
+    --fg-color: #449dfc;
+
+    --px-4: 4px;
+    --px-8: 8px;
+    --px-12: 12px;
+
+    --hover-low: 4px 4px 4px gray;
+}
+
 body {
     font-family: 'Ariel', sans-serif;
+    background-color: var(--main-bg-color);
+}
+
+.authentication-page {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+}
+
+.authentication-form {
+    border: 1px solid black;
+    border-radius: 5px;
+    border-shadow: var(--hover-low);
+    padding: var(--px-12);
+}
+
+.authentication-form__label {
+    margin: var(--px-4);
+}
+
+.authentication-form__input {
+    margin: var(--px-4);
 }
 
 .files {
@@ -33,9 +67,6 @@ img {
 .uploadform {
     display: flex;
     margin: 1em;
-    background-color: #e5f0fc;
-    border: 1px solid #449dfc;
-    border-radius: 5px;
     padding: 1em;
 }
 
@@ -72,7 +103,8 @@ img {
     outline: -webkit-focus-ring-color auto 5px;
 }
 
-@media screen and (max-width: 980px) { /* This is the screen width of a OnePlus 5t */
+/*
+@media screen and (max-width: 980px) { /* This is the screen width of a OnePlus 5t
     body {
         font-size: xx-large;
     }
@@ -101,3 +133,4 @@ img {
         width: 100%;
     }
 }
+*/