Styling

Copied Ninos styles with copilot

frontend/src/pages/user.rs

@@ -222,24 +222,29 @@ pub fn register_component() -> Html {
     };
 
     html! {
-        <form {onsubmit}>
-            <label>{ "Vorname:" }
-                <input type="text" value={(*first_name).clone()} oninput={fn_change}/>
-            </label>
-            <label>{ "Nachname:" }
-                <input type="text" value={(*last_name).clone()} oninput={ln_change}/>
-            </label>
-            <label>{ "Benutzername:" }
-                <input type="text" value={(*username).clone()} oninput={un_change}/>
-            </label>
-            <label>{ "Admin:" }
-                <input type="checkbox" checked={*is_admin} onchange={admin_change}/>
-            </label>
-            <label>{ "Password:" }
-                <input type="password" value={(*pwd).clone()} oninput={pwd_change}/>
-            </label>
-            <button type="submit">{ "Bestätigen" }</button>
-        </form>
+        <div class="form-container">
+            <div class="page-header">
+                <h1>{ "Register User" }</h1>
+            </div>
+            <form {onsubmit}>
+                <label>{ "Vorname:" }
+                    <input type="text" value={(*first_name).clone()} oninput={fn_change}/>
+                </label>
+                <label>{ "Nachname:" }
+                    <input type="text" value={(*last_name).clone()} oninput={ln_change}/>
+                </label>
+                <label>{ "Benutzername:" }
+                    <input type="text" value={(*username).clone()} oninput={un_change}/>
+                </label>
+                <label>{ "Admin:" }
+                    <input type="checkbox" checked={*is_admin} onchange={admin_change}/>
+                </label>
+                <label>{ "Password:" }
+                    <input type="password" value={(*pwd).clone()} oninput={pwd_change}/>
+                </label>
+                <button type="submit">{ "Bestätigen" }</button>
+            </form>
+        </div>
     }
 }
 
@@ -328,27 +333,32 @@ pub fn login_component() -> Html {
     };
 
     html! {
-        <form {onsubmit}>
-            <input
-                placeholder="username"
-                value={(*username).clone()}
-                oninput={Callback::from(move |e: InputEvent| {
-                    let input: web_sys::HtmlInputElement = e.target_unchecked_into();
-                    username.set(input.value());
-                })}
-            />
-            <input
-                type="password"
-                placeholder="password"
-                value={(*pwd).clone()}
-                oninput={Callback::from(move |e: InputEvent| {
-                    let input: web_sys::HtmlInputElement = e.target_unchecked_into();
-                    pwd.set(input.value());
-                })}
-            />
-            <button type="submit" disabled={*loading}>{ if *loading { "Logging in..." } else { "Login" } }</button>
-            if !error.is_empty() { <p style="color:red">{(*error).clone()}</p> }
-        </form>
+        <div class="form-container">
+            <div class="page-header">
+                <h1>{ "Login" }</h1>
+            </div>
+            <form {onsubmit}>
+                <input
+                    placeholder="username"
+                    value={(*username).clone()}
+                    oninput={Callback::from(move |e: InputEvent| {
+                        let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+                        username.set(input.value());
+                    })}
+                />
+                <input
+                    type="password"
+                    placeholder="password"
+                    value={(*pwd).clone()}
+                    oninput={Callback::from(move |e: InputEvent| {
+                        let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+                        pwd.set(input.value());
+                    })}
+                />
+                <button type="submit" disabled={*loading}>{ if *loading { "Logging in..." } else { "Login" } }</button>
+                if !error.is_empty() { <p class="alert error">{(*error).clone()}</p> }
+            </form>
+        </div>
     }
 }
 
@@ -417,18 +427,37 @@ pub fn all_users_component() -> Html {
     }
 
     if *loading {
-        html! {<p>{ "Loading" }</p>}
+        html! {
+            <div class="form-container">
+                <div class="page-header">
+                    <h1>{ "All Users" }</h1>
+                </div>
+                <p>{ "Loading..." }</p>
+            </div>
+        }
     } else if let Some(e) = &*error {
-        html! { <p>{ format!("Error: {}", e) }</p> }
+        html! {
+            <div class="form-container">
+                <div class="page-header">
+                    <h1>{ "All Users" }</h1>
+                </div>
+                <p class="alert error">{ format!("Error: {}", e) }</p>
+            </div>
+        }
     } else {
         html! {
-            <ul>
-            { for users.iter().map(|t| html! {
-                    <li key={t.id.to_string()}>
-                        <Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}- #{}", t.first_name, t.last_name, t.id) }</h3></Link<crate::Route>>
-                    </li>
-                })}
-            </ul>
+            <div class="form-container">
+                <div class="page-header">
+                    <h1>{ "All Users" }</h1>
+                </div>
+                <ul>
+                { for users.iter().map(|t| html! {
+                        <li key={t.id.to_string()}>
+                            <Link<crate::Route> to={crate::Route::UserByID{id: t.id}}><h3>{ format!("{} {}- #{}", t.first_name, t.last_name, t.id) }</h3></Link<crate::Route>>
+                        </li>
+                    })}
+                </ul>
+            </div>
         }
     }
 }