file-service/src/html.rs

@@ -236,3 +236,92 @@ impl Html for Button {
         )
     }
 }
+
+#[derive(Clone, Debug)]
+pub struct Image {
+    path: String,
+    attributes: Attributes,
+}
+
+impl Image {
+    pub fn new(path: &str) -> Self {
+        Self {
+            path: path.to_owned(),
+            attributes: Attributes::default(),
+        }
+    }
+
+    pub fn with_attributes<'a>(
+        mut self,
+        values: impl IntoIterator<Item = (&'a str, &'a str)>,
+    ) -> Self {
+        self.attributes = Attributes(
+            values
+                .into_iter()
+                .map(|(a, b)| (a.to_owned(), b.to_owned()))
+                .collect::<Vec<(String, String)>>(),
+        );
+        self
+    }
+}
+
+impl Html for Image {
+    fn to_html_string(&self) -> String {
+        format!(
+            "<img src={path} {attrs} />",
+            path = self.path,
+            attrs = self.attributes.to_string()
+        )
+    }
+}
+
+#[derive(Debug)]
+pub struct UnorderedList {
+    children: Vec<String>,
+    attributes: Attributes,
+}
+
+impl UnorderedList {
+    pub fn new() -> Self {
+        Self {
+            children: vec![],
+            attributes: Attributes::default(),
+        }
+    }
+
+    pub fn with_attributes<'a>(
+        mut self,
+        values: impl IntoIterator<Item = (&'a str, &'a str)>,
+    ) -> Self {
+        self.attributes = Attributes(
+            values
+                .into_iter()
+                .map(|(a, b)| (a.to_owned(), b.to_owned()))
+                .collect::<Vec<(String, String)>>(),
+        );
+        self
+    }
+}
+
+impl Html for UnorderedList {
+    fn to_html_string(&self) -> String {
+        let children = self
+            .children
+            .iter()
+            .map(|item| format!("<li>{}</li>", item.to_html_string()))
+            .collect::<Vec<String>>();
+        format!(
+            "<ul {attrs}>
+    {children}
+            </ul>",
+            attrs = self.attributes.to_string(),
+            children = children.join("\n")
+        )
+    }
+}
+
+impl HtmlContainer for UnorderedList {
+    fn add_html<H: Html>(&mut self, html: H) {
+        self.children.push(html.to_html_string())
+    }
+}

file-service/src/pages.rs

@@ -4,35 +4,32 @@ use file_service::{FileHandle, FileInfo, ReadFileError};
 
 pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
     build_html::HtmlPage::new()
-        .with_title("Sign In")
+        .with_title("Authentication")
         .with_stylesheet("/css")
         .with_container(
             Container::new(ContainerType::Div)
                 .with_attributes([("class", "authentication-page")])
-                .with_container(auth_form()),
-        )
-}
-
-fn auth_form() -> Container {
-    Container::default()
-        .with_attributes([("class", "card authentication-form")])
-        .with_html(
-            Form::new()
-                .with_path("/auth")
-                .with_method("post")
                 .with_container(
                     Container::new(ContainerType::Div)
+                        .with_attributes([("class", "card authentication-form")])
                         .with_html(
-                            Input::new("password", "password")
-                                .with_id("for-token-input")
-                                .with_attributes([
-                                    ("size", "50"),
-                                    ("class", "authentication-form__input"),
-                                ]),
-                        )
-                        .with_html(
-                            Button::new("Sign In")
-                                .with_attributes([("class", "authentication-form__button")]),
+                            Form::new()
+                                .with_path("/auth")
+                                .with_method("post")
+                                .with_container(
+                                    Container::new(ContainerType::Div)
+                                        .with_attributes([("class", "authentication-form__label")])
+                                        .with_html(Label::new("for-token-input", "Authentication")),
+                                )
+                                .with_container(
+                                    Container::new(ContainerType::Div)
+                                        .with_attributes([("class", "authentication-form__input")])
+                                        .with_html(
+                                            Input::new("password", "password")
+                                                .with_id("for-token-input")
+                                                .with_attributes([("size", "50")]),
+                                        ),
+                                ),
                         ),
                 ),
         )
@@ -90,16 +87,15 @@ pub fn thumbnail(info: &FileInfo) -> Container {
         .with_html(
             Container::new(ContainerType::Div).with_link(
                 format!("/{}", *info.id),
-                Container::default()
-                    .with_attributes([("class", "thumbnail")])
-                    .with_image(&format!("{}/tn", *info.id), "test data")
+                Image::new(&format!("{}/tn", *info.id))
+                    .with_attributes([("class", "thumbnail__image")])
                     .to_html_string(),
             ),
         )
         .with_html(
             Container::new(ContainerType::Div)
                 .with_html(
-                    Container::new(ContainerType::UnorderedList)
+                    UnorderedList::new()
                         .with_attributes(vec![("class", "thumbnail__metadata")])
                         .with_html(info.name.clone())
                         .with_html(format!("{}", info.created.format("%Y-%m-%d"))),

file-service/templates/style.css

@@ -29,7 +29,6 @@ body {
     justify-content: center;
     align-items: center;
     height: 200px;
-    margin: 8px;
 }
 
 .authentication-form {
@@ -134,16 +133,6 @@ body {
 
     .authentication-form {
         width: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .authentication-form__input {
-        font-size: x-large;
-    }
-
-    .authentication-form__button {
-        font-size: x-large;
     }
 
     .upload-form__selector {