From b3f88a49aae43a6add7be552d5eeb86111eaf99e Mon Sep 17 00:00:00 2001 From: Savanni D'Gerinel Date: Fri, 6 Oct 2023 19:04:31 -0400 Subject: [PATCH] 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 | 37 ++++++++++++++++++++-------- file-service/src/pages.rs | 31 +++++++++++++++++++----- file-service/templates/style.css | 41 ++++++++++++++++++++++++++++---- 3 files changed, 89 insertions(+), 20 deletions(-) diff --git a/file-service/src/html.rs b/file-service/src/html.rs index 1d2199a..c545e6a 100644 --- a/file-service/src/html.rs +++ b/file-service/src/html.rs @@ -2,6 +2,7 @@ use build_html::{self, Html, HtmlContainer}; #[derive(Clone, Debug)] pub struct Form { + classes: Option, path: String, method: String, encoding: Option, @@ -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!( - "
\n{elements}\n
\n", + "
\n{elements}\n
\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, value: Option, - content: Option, + 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::>() + .join(" "); format!( - "{content}\n", + "\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_content(mut self, val: &str) -> Self { - self.content = Some(val.to_owned()); + pub fn with_attributes<'a>( + mut self, + values: impl IntoIterator, + ) -> Self { + self.attributes = values + .into_iter() + .map(|(a, b)| (a.to_owned(), b.to_owned())) + .collect::>(); self } - */ } #[derive(Clone, Debug)] diff --git a/file-service/src/pages.rs b/file-service/src/pages.rs index ba1b586..a5cceb5 100644 --- a/file-service/src/pages.rs +++ b/file-service/src/pages.rs @@ -5,14 +5,32 @@ use file_service::{FileHandle, FileId, ReadFileError}; pub fn auth(_message: Option) -> build_html::HtmlPage { build_html::HtmlPage::new() .with_title("Authentication") - .with_html( - Form::new() - .with_path("/auth") - .with_method("post") + .with_stylesheet("/css") + .with_container( + Container::new(ContainerType::Div) + .with_attributes([("class", "authentication-page")]) .with_container( Container::new(ContainerType::Div) - .with_html(Input::new("token", "token").with_id("for-token-input")) - .with_html(Label::new("for-token-input", "Authentication Token")), + .with_attributes([("class", "authentication-form")]) + .with_html( + 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("token", "token") + .with_id("for-token-input") + .with_attributes([("size", "50")]), + ), + ), + ), ), ) } @@ -20,6 +38,7 @@ pub fn auth(_message: Option) -> build_html::HtmlPage { pub fn gallery(handles: Vec>) -> 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() diff --git a/file-service/templates/style.css b/file-service/templates/style.css index eeb6f8b..5e7265b 100644 --- a/file-service/templates/style.css +++ b/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%; } } +*/