Style the authentication page for mobile

file-service/src/pages.rs

@@ -4,32 +4,35 @@ use file_service::{FileHandle, FileInfo, ReadFileError};
 
 pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
     build_html::HtmlPage::new()
-        .with_title("Authentication")
+        .with_title("Sign In")
         .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(
-                            Form::new()
+                            Input::new("password", "password")
-                                .with_path("/auth")
+                                .with_id("for-token-input")
-                                .with_method("post")
+                                .with_attributes([
-                                .with_container(
+                                    ("size", "50"),
-                                    Container::new(ContainerType::Div)
+                                    ("class", "authentication-form__input"),
-                                        .with_attributes([("class", "authentication-form__label")])
+                                ]),
-                                        .with_html(Label::new("for-token-input", "Authentication")),
+                        )
-                                )
+                        .with_html(
-                                .with_container(
+                            Button::new("Sign In")
-                                    Container::new(ContainerType::Div)
+                                .with_attributes([("class", "authentication-form__button")]),
-                                        .with_attributes([("class", "authentication-form__input")])
-                                        .with_html(
-                                            Input::new("password", "password")
-                                                .with_id("for-token-input")
-                                                .with_attributes([("size", "50")]),
-                                        ),
-                                ),
                         ),
                 ),
         )

file-service/templates/style.css

@@ -29,6 +29,7 @@ body {
     justify-content: center;
     align-items: center;
     height: 200px;
+    margin: 8px;
 }
 
 .authentication-form {
@@ -133,6 +134,16 @@ 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 {