[HTMX] small profile improvements (#2974)

CONTRIBUTORS.md

@@ -40,6 +40,7 @@
 - Daniil Egortsev (playhardgopro)
 - Anton Loukianov (antonl)
 - fossdd
+- Wei Jian Gan (weijiangan)
 
 ## Acknowledgements
 

server/core/src/https/views/apps.rs

@@ -5,7 +5,6 @@ use axum::{
     response::{IntoResponse, Response},
     Extension,
 };
-use axum_htmx::extractors::HxRequest;
 use axum_htmx::HxPushUrl;
 
 use kanidm_proto::internal::AppLink;
@@ -29,7 +28,6 @@ struct AppsPartialView {
 pub(crate) async fn view_apps_get(
     State(state): State<ServerState>,
     Extension(kopid): Extension<KOpId>,
-    HxRequest(hx_request): HxRequest,
     VerifiedClientInformation(client_auth_info): VerifiedClientInformation,
 ) -> axum::response::Result<Response> {
     // Because this is the route where the login page can land, we need to actually alter
@@ -44,16 +42,12 @@ pub(crate) async fn view_apps_get(
 
     let apps_partial = AppsPartialView { apps: app_links };
 
-    Ok(if hx_request {
+    Ok({
+        let apps_view = AppsView { apps_partial };
         (
-            // On the redirect during a login we don't push urls. We set these headers
-            // so that the url is updated, and we swap the correct element.
             HxPushUrl(Uri::from_static("/ui/apps")),
-            HtmlTemplate(apps_partial),
+            HtmlTemplate(apps_view).into_response(),
         )
             .into_response()
-    } else {
-        let apps_view = AppsView { apps_partial };
-        HtmlTemplate(apps_view).into_response()
     })
 }

server/core/templates/cred_update/add_password_partial.html

@@ -50,7 +50,7 @@
         </div>
     </form>
     <div class="g-3 d-flex justify-content-end" hx-target="#credentialUpdateDynamicSection">
-        <button id="password-cancel" type="button" class="btn btn-danger me-2" hx-get="/ui/reset">Cancel</button>
+        <button id="password-cancel" type="button" class="btn btn-danger me-2" hx-get="/ui/reset" hx-target="body">Cancel</button>
         <button id="password-submit" type="button" class="btn btn-primary"
                 hx-post="/ui/reset/add_password"
                 hx-include="#newPasswordForm"

server/core/templates/credentials_reset_form.html

@@ -33,8 +33,7 @@
         </div>
     </form>
     <p class="d-flex flex-row flex-wrap justify-content-between">
-        <button class="btn btn-secondary" aria-label="Return home"
-                hx-get="/ui/apps" hx-target="#cred-reset-form" hx-select="#cred-reset-form" hx-swap="outerHTML">
+        <button class="btn btn-secondary" aria-label="Return home" hx-get="/ui" hx-target="body">
             Return to the home page
         </button>
         <button class="btn btn-primary"

server/core/templates/credentials_update_partial.html

@@ -90,7 +90,7 @@
         <hr class="my-4"/>
 
         <div class="d-flex flex-row flex-wrap justify-content-between">
-            <button class="btn btn-danger btn-lg" hx-post="/ui/api/cu_cancel">Cancel</button>
+            <button class="btn btn-danger btn-lg" hx-post="/ui/api/cu_cancel" hx-target="body">Cancel</button>
             <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Resolve the warnings at the top.">
                 <button
                         class="btn btn-success btn-lg"

server/core/templates/user_settings_partial_base.html

@@ -1,4 +1,4 @@
-<main class="p-3 x-auto">
+<main class="container-xxl pb-5">
     <div class="d-flex flex-sm-row flex-column">
         <div class="list-group side-menu">
             <a href="#" class="list-group-item list-group-item-action active">
@@ -19,7 +19,7 @@
                 <path fill-rule="evenodd" d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 63 63 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m-.5 5a.5.5 0 0 1 1 0v1.5H10a.5.5 0 0 1 0 1H8.5V9a.5.5 0 0 1-1 0V7.5H6a.5.5 0 0 1 0-1h1.5z"/>
             </svg>Add another device</a>
         </div>
-        <div id="settings-window" class="px-3">
+        <div id="settings-window" class="flex-grow-1 ps-sm-4 pt-sm-0 pt-4">
             <div class="(( crate::https::ui::CSS_PAGE_HEADER ))">
                 <h2>(% block selected_setting_group %)(% endblock %)</h2>
             </div>

server/core/templates/user_settings_profile_partial.html

@@ -6,22 +6,46 @@ Profile
 
 (% block settings_window %)
 
-    <h3>Account name: (( account_name ))</h3>
-    <h3>Display name: (( display_name ))</h3>
-    <h3>Legal name: (( legal_name ))</h3>
-    (% if let Some(email) = email %)
-        <h3>Email: (( email ))</h3>
-    (% else %)
-        <h3>Email is not set</h3>
-    (% endif %)
+<form>
+    <div class="mb-2 row">
+        <label for="profileUserName" class="col-12 col-md-3 col-lg-2 col-form-label">User name</label>
+        <div class="col-12 col-md-6 col-lg-4">
+            <input type="text" readonly class="form-control-plaintext" id="profileUserName" value="(( account_name ))">
+        </div>
+    </div>
+    
+    <div class="mb-2 row">
+        <label for="profileDisplayName" class="col-12 col-md-3 col-lg-2 col-form-label">Display name</label>
+        <div class="col-12 col-md-6 col-lg-4">
+            <input type="text" class="form-control" id="profileDisplayName" value="(( display_name ))">
+        </div>
+    </div>
+
+    <div class="mb-2 row">
+        <label for="profileLegalName" class="col-12 col-md-3 col-lg-2 col-form-label">Legal name</label>
+        <div class="col-12 col-md-6 col-lg-4">
+            <input type="text" class="form-control" id="profileLegalName" value="(( legal_name ))">
+        </div>
+    </div>
+    
+    <div class="mb-2 row">
+        <label for="profileEmail" class="col-12 col-md-3 col-lg-2 col-form-label">Email</label>
+        <div class="col-12 col-md-6 col-lg-4">
+            <input type="email" class="form-control" id="profileEmail" (% if let Some(email) = email %)value="(( email ))"(% endif %)>
+        </div>
+    </div>
 
     <!-- Edit button -->
-    (% if can_rw %)
-        <button class="btn btn-primary" type="button" hx-post="/ui/api/user_settings/edit_profile">Edit</button>
-    (% else %)
-        <a href="/ui/profile/unlock" hx-boost="false">
-            <button class="btn btn-primary" type="button">Unlock Edit 🔒</button>
-        </a>
-    (% endif %)
+    <div class="pt-4">
+        (% if can_rw %)
+            <button class="btn btn-primary" type="button" hx-post="/ui/api/user_settings/edit_profile">Edit</button>
+        (% else %)
+            <a href="/ui/profile/unlock" hx-boost="false">
+                <button class="btn btn-primary" type="button">Unlock Edit 🔒</button>
+            </a>
+        (% endif %)
+    </div>
+</form>
+
 (% endblock %)