Visually rearranged login and registration pages.

SquireTournamentServices · Dec 1, 2023 · 999ad2a · 999ad2a
1 parent b8424d9
commit 999ad2a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 33 deletions.
diff --git a/squire_web/src/account/login.rs b/squire_web/src/account/login.rs
@@ -75,27 +75,28 @@ impl Component for Login {
         let submit_callback = ctx.link().callback(|_| LoginMessage::SubmitLogin);
         let name_callback = ctx.link().callback(LoginMessage::NameInput);
         let password_callback = ctx.link().callback(LoginMessage::PasswordInput);
-        let form = html! {
+        html! {
             <>
             <>
-                <dialog id="errormessage">
-                    <p>{self.error_message.clone()}</p>
-                    <form method="dialog">
-                    <button>{"OK"}</button>
-                    </form>
-                </dialog>
+            <dialog id="errormessage">
+                <p>{self.error_message.clone()}</p>
+                <form method="dialog">
+                <button>{"OK"}</button>
+                </form>
+            </dialog>
             </>
-            <div>
-                <TextInput label = {Cow::from("Username")} process = { name_callback } />
-                <TextInput label = {Cow::from("Password")} process = { password_callback } />
+            <div class="m-lg-0 m-md-4 my-3">
+                <div class="p-5 bg-light rounded-3">
+                    <div class="container-fluid p-md-5">
+                        <h1 class="display-5 fw-bold">{ "Login" }</h1>
+                        <hr class="my-4"/>
+                        <TextInput label = {Cow::from("Username ")} process = { name_callback } /><br class="my-2"/>
+                        <TextInput label = {Cow::from("Password ")} process = { password_callback } /><br class="my-2"/>
+                        <button onclick={submit_callback}>{ "Log in" }</button>
+                    </div>
+                </div>
             </div>
             </>
-        };
-        html! {
-            <div>
-                { form }
-                <button onclick={submit_callback}>{ "Log in" }</button>
-            </div>
         }
     }
 }
diff --git a/squire_web/src/account/register.rs b/squire_web/src/account/register.rs
@@ -118,27 +118,28 @@ impl Component for Register {
         let display_callback = ctx.link().callback(RegisterMessage::DisplayInput);
         let password_callback = ctx.link().callback(RegisterMessage::PasswordInput);
         let repassword_callback = ctx.link().callback(RegisterMessage::RePasswordInput);
-        let form = html! {
-            <div>
-                <TextInput label = {Cow::from("Username")} process = { name_callback } />
-                <TextInput label = {Cow::from("Display name")} process = { display_callback } />
-                <TextInput label = {Cow::from("Password")} process = { password_callback } />
-                <TextInput label = {Cow::from("Re-Type Password")} process = { repassword_callback } />
-            </div>
-        };
         html! {
             <>
             <>
-                <dialog id="errormessage">
-                    <p>{self.error_message.clone()}</p>
-                    <form method="dialog">
-                    <button>{"OK"}</button>
-                    </form>
-                </dialog>
+            <dialog id="errormessage">
+                <p>{self.error_message.clone()}</p>
+                <form method="dialog">
+                <button>{"OK"}</button>
+                </form>
+            </dialog>
             </>
-            <div>
-                { form }
-                <button onclick={submit_callback}>{ "Register" }</button>
+            <div class="m-lg-0 m-md-4 my-3">
+                <div class="p-5 bg-light rounded-3">
+                    <div class="container-fluid p-md-5">
+                        <h1 class="display-5 fw-bold">{ "Register" }</h1>
+                        <hr class="my-4"/>
+                        <TextInput label = {Cow::from("Username ")} process = { name_callback } /><br class="my-2"/>
+                        <TextInput label = {Cow::from("Display name ")} process = { display_callback } /><br class="my-2"/>
+                        <TextInput label = {Cow::from("Password ")} process = { password_callback } /><br class="my-2"/>
+                        <TextInput label = {Cow::from("Re-Type Password ")} process = { repassword_callback } /><br class="my-2"/>
+                        <button onclick={submit_callback}>{ "Register" }</button>
+                    </div>
+                </div>
             </div>
             </>
         }