diff --git a/Cargo.lock b/Cargo.lock index fe306e47e..0f4fa00ad 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -391,6 +391,7 @@ dependencies = [ "multer", "pin-project-lite", "serde", + "serde_html_form", "tower 0.5.2", "tower-layer", "tower-service", @@ -5136,6 +5137,19 @@ dependencies = [ "syn 2.0.100", ] +[[package]] +name = "serde_html_form" +version = "0.2.7" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "9d2de91cf02bbc07cde38891769ccd5d4f073d22a40683aa4bc7a95781aaa2c4" +dependencies = [ + "form_urlencoded", + "indexmap 2.7.1", + "itoa", + "ryu", + "serde", +] + [[package]] name = "serde_json" version = "1.0.140" diff --git a/server/core/Cargo.toml b/server/core/Cargo.toml index 1c753cb44..b7ab2004c 100644 --- a/server/core/Cargo.toml +++ b/server/core/Cargo.toml @@ -24,7 +24,7 @@ askama = { workspace = true, features = ["with-axum"] } askama_axum = { workspace = true } axum = { workspace = true } axum-htmx = { workspace = true } -axum-extra = { version = "0.9.6", features = ["cookie"] } +axum-extra = { version = "0.9.6", features = ["cookie", "form"] } axum-macros = "0.4.2" axum-server = { version = "0.7.1", default-features = false } bytes = { workspace = true } diff --git a/server/core/src/https/views/admin/mod.rs b/server/core/src/https/views/admin/mod.rs index e728e33b0..a0c826942 100644 --- a/server/core/src/https/views/admin/mod.rs +++ b/server/core/src/https/views/admin/mod.rs @@ -3,7 +3,7 @@ use axum::routing::get; use axum::Router; use axum_htmx::HxRequestGuardLayer; -mod persons; +pub(crate) mod persons; pub fn admin_router() -> Router<ServerState> { let unguarded_router = Router::new() diff --git a/server/core/src/https/views/admin/persons.rs b/server/core/src/https/views/admin/persons.rs index e1a2d723f..385e7b0f0 100644 --- a/server/core/src/https/views/admin/persons.rs +++ b/server/core/src/https/views/admin/persons.rs @@ -1,3 +1,4 @@ +use crate::https::errors::WebError; use crate::https::extractors::{DomainInfo, VerifiedClientInformation}; use crate::https::middleware::KOpId; use crate::https::views::errors::HtmxError; @@ -7,17 +8,15 @@ use crate::https::ServerState; use askama::Template; use axum::extract::{Path, State}; use axum::http::Uri; -use axum::response::{ErrorResponse, IntoResponse, Response}; +use axum::response::{IntoResponse, Response}; use axum::Extension; use axum_htmx::{HxPushUrl, HxRequest}; -use futures_util::TryFutureExt; use kanidm_proto::attribute::Attribute; use kanidm_proto::internal::OperationError; use kanidm_proto::scim_v1::client::ScimFilter; use kanidm_proto::scim_v1::server::{ScimEffectiveAccess, ScimEntryKanidm, ScimPerson}; use kanidm_proto::scim_v1::ScimEntryGetQuery; use kanidmd_lib::constants::EntryClass; -use kanidmd_lib::idm::server::DomainInfoRead; use kanidmd_lib::idm::ClientAuthInfo; use std::str::FromStr; use uuid::Uuid; @@ -70,7 +69,7 @@ pub(crate) async fn view_person_view_get( DomainInfo(domain_info): DomainInfo, ) -> axum::response::Result<Response> { let (person, scim_effective_access) = - get_person_info(uuid, state, &kopid, client_auth_info, domain_info.clone()).await?; + get_person_info(uuid, state, &kopid, client_auth_info).await?; let person_partial = PersonViewPartial { person, scim_effective_access, @@ -101,7 +100,7 @@ pub(crate) async fn view_persons_get( DomainInfo(domain_info): DomainInfo, VerifiedClientInformation(client_auth_info): VerifiedClientInformation, ) -> axum::response::Result<Response> { - let persons = get_persons_info(state, &kopid, client_auth_info, domain_info.clone()).await?; + let persons = get_persons_info(state, &kopid, client_auth_info).await?; let persons_partial = PersonsPartialView { persons }; let push_url = HxPushUrl(Uri::from_static("/ui/admin/persons")); @@ -119,13 +118,12 @@ pub(crate) async fn view_persons_get( }) } -async fn get_person_info( +pub async fn get_person_info( uuid: Uuid, state: ServerState, kopid: &KOpId, client_auth_info: ClientAuthInfo, - domain_info: DomainInfoRead, -) -> Result<(ScimPerson, ScimEffectiveAccess), ErrorResponse> { +) -> Result<(ScimPerson, ScimEffectiveAccess), WebError> { let scim_entry: ScimEntryKanidm = state .qe_r_ref .scim_entry_id_get( @@ -138,13 +136,12 @@ async fn get_person_info( ext_access_check: true, }, ) - .map_err(|op_err| HtmxError::new(kopid, op_err, domain_info.clone())) .await?; if let Some(personinfo_info) = scimentry_into_personinfo(scim_entry) { Ok(personinfo_info) } else { - Err(HtmxError::new(kopid, OperationError::InvalidState, domain_info.clone()).into()) + Err(WebError::from(OperationError::InvalidState)) } } @@ -152,8 +149,7 @@ async fn get_persons_info( state: ServerState, kopid: &KOpId, client_auth_info: ClientAuthInfo, - domain_info: DomainInfoRead, -) -> Result<Vec<(ScimPerson, ScimEffectiveAccess)>, ErrorResponse> { +) -> Result<Vec<(ScimPerson, ScimEffectiveAccess)>, WebError> { let filter = ScimFilter::Equal(Attribute::Class.into(), EntryClass::Person.into()); let base: Vec<ScimEntryKanidm> = state @@ -167,7 +163,6 @@ async fn get_persons_info( ext_access_check: true, }, ) - .map_err(|op_err| HtmxError::new(kopid, op_err, domain_info.clone())) .await?; // TODO: inefficient to sort here diff --git a/server/core/src/https/views/constants.rs b/server/core/src/https/views/constants.rs index 8e4167941..7276e8c2f 100644 --- a/server/core/src/https/views/constants.rs +++ b/server/core/src/https/views/constants.rs @@ -9,17 +9,17 @@ pub(crate) enum ProfileMenuItems { UnixPassword, } -pub(crate) enum UiMessage { - UnlockEdit, -} - -impl std::fmt::Display for UiMessage { - fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result { - match self { - UiMessage::UnlockEdit => write!(f, "Unlock Edit 🔒"), - } - } -} +// pub(crate) enum UiMessage { +// UnlockEdit, +// } +// +// impl std::fmt::Display for UiMessage { +// fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result { +// match self { +// UiMessage::UnlockEdit => write!(f, "Unlock Edit 🔒"), +// } +// } +// } pub(crate) enum Urls { Apps, diff --git a/server/core/src/https/views/mod.rs b/server/core/src/https/views/mod.rs index b52546180..ffc74c916 100644 --- a/server/core/src/https/views/mod.rs +++ b/server/core/src/https/views/mod.rs @@ -56,6 +56,7 @@ pub fn view_router() -> Router<ServerState> { .route("/reset", get(reset::view_reset_get)) .route("/update_credentials", get(reset::view_self_reset_get)) .route("/profile", get(profile::view_profile_get)) + .route("/profile/diff", get(profile::view_profile_get)) .route("/profile/unlock", get(profile::view_profile_unlock_get)) .route("/logout", get(login::view_logout_get)) .route("/oauth2", get(oauth2::view_index_get)); @@ -129,6 +130,18 @@ pub fn view_router() -> Router<ServerState> { ) .route("/api/cu_cancel", post(reset::cancel_cred_update)) .route("/api/cu_commit", post(reset::commit)) + .route( + "/api/user_settings/add_email", + post(profile::view_new_email_entry_partial), + ) + .route( + "/api/user_settings/edit_profile", + post(profile::view_profile_diff_start_save_post), + ) + .route( + "/api/user_settings/confirm_profile", + post(profile::view_profile_diff_confirm_save_post), + ) .layer(HxRequestGuardLayer::new("/ui")); let admin_router = admin_router(); diff --git a/server/core/src/https/views/profile.rs b/server/core/src/https/views/profile.rs index 9d00bbe1c..fbfa0c581 100644 --- a/server/core/src/https/views/profile.rs +++ b/server/core/src/https/views/profile.rs @@ -1,18 +1,33 @@ +use kanidm_proto::attribute::Attribute; +use super::constants::{ProfileMenuItems, Urls}; +use super::errors::HtmxError; +use super::login::{LoginDisplayCtx, Reauth, ReauthPurpose}; +use super::navbar::NavbarCtx; use crate::https::errors::WebError; use crate::https::extractors::{DomainInfo, VerifiedClientInformation}; use crate::https::middleware::KOpId; use crate::https::ServerState; use askama::Template; +use askama_axum::IntoResponse; use axum::extract::State; +use axum::http::Uri; use axum::response::Response; use axum::Extension; use axum_extra::extract::cookie::CookieJar; +use axum_extra::extract::Form; +use axum_htmx::{HxEvent, HxPushUrl, HxResponseTrigger}; +use futures_util::TryFutureExt; +use kanidm_proto::constants::{ATTR_DISPLAYNAME, ATTR_MAIL}; use kanidm_proto::internal::UserAuthToken; - -use super::constants::{ProfileMenuItems, UiMessage, Urls}; -use super::errors::HtmxError; -use super::login::{LoginDisplayCtx, Reauth, ReauthPurpose}; -use super::navbar::NavbarCtx; +use kanidm_proto::scim_v1::server::{ScimEffectiveAccess, ScimPerson}; +use kanidmd_lib::filter::{f_id, Filter}; +use kanidmd_lib::prelude::f_and; +use kanidmd_lib::prelude::FC; +use serde::Deserialize; +use serde::Serialize; +use std::fmt; +use std::fmt::Display; +use std::fmt::Formatter; #[derive(Template)] #[template(path = "user_settings.html")] @@ -26,9 +41,46 @@ pub(crate) struct ProfileView { struct ProfilePartialView { menu_active_item: ProfileMenuItems, can_rw: bool, + person: ScimPerson, + scim_effective_access: ScimEffectiveAccess, +} + +#[derive(Clone, Debug, Serialize, Deserialize)] +pub(crate) struct ProfileAttributes { + #[serde(rename = "name")] account_name: String, + #[serde(rename = "displayname")] display_name: String, - email: Option<String>, + #[serde(rename = "emails[]")] + emails: Vec<String>, + // radio buttons are used to pick a primary index + primary_email_index: u16, +} + +#[derive(Template, Clone)] +#[template(path = "user_settings/profile_changes_partial.html")] +struct ProfileChangesPartialView { + menu_active_item: ProfileMenuItems, + can_rw: bool, + person: ScimPerson, + new_attrs: ProfileAttributes, +} + +#[derive(Template, Clone)] +#[template(path = "user_settings/form_modifiable_entry_modifiable_list_partial.html")] +// Modifiable entry in a modifiable list partial +pub(crate) struct FormModEntryModListPartial { + can_rw: bool, + r#type: String, + name: String, + value: String, + invalid_feedback: String, +} + +impl Display for ProfileAttributes { + fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result { + write!(f, "{self:?}") + } } pub(crate) async fn view_profile_get( @@ -39,9 +91,16 @@ pub(crate) async fn view_profile_get( ) -> Result<ProfileView, WebError> { let uat: UserAuthToken = state .qe_r_ref - .handle_whoami_uat(client_auth_info, kopid.eventid) + .handle_whoami_uat(client_auth_info.clone(), kopid.eventid) .await?; + let (scim_person, scim_effective_access) = crate::https::views::admin::persons::get_person_info( + uat.uuid, + state, + &kopid, + client_auth_info.clone()).await?; + + let time = time::OffsetDateTime::now_utc() + time::Duration::new(60, 0); let can_rw = uat.purpose_readwrite_active(time); @@ -52,13 +111,152 @@ pub(crate) async fn view_profile_get( profile_partial: ProfilePartialView { menu_active_item: ProfileMenuItems::UserProfile, can_rw, - account_name: uat.name().to_string(), - display_name: uat.displayname.clone(), - email: uat.mail_primary.clone(), + person: scim_person, + scim_effective_access }, }) } +pub(crate) async fn view_profile_diff_start_save_post( + State(state): State<ServerState>, + Extension(kopid): Extension<KOpId>, + VerifiedClientInformation(client_auth_info): VerifiedClientInformation, + DomainInfo(domain_info): DomainInfo, + // Form must be the last parameter because it consumes the request body + Form(new_attrs): Form<ProfileAttributes>, +) -> axum::response::Result<Response> { + let uat: UserAuthToken = state + .qe_r_ref + .handle_whoami_uat(client_auth_info.clone(), kopid.eventid) + .map_err(|op_err| HtmxError::new(&kopid, op_err, domain_info.clone())) + .await?; + + let time = time::OffsetDateTime::now_utc() + time::Duration::new(60, 0); + let can_rw = uat.purpose_readwrite_active(time); + // TODO: A bit overkill to request scimEffectiveAccess here. + let (scim_person, _) = crate::https::views::admin::persons::get_person_info( + uat.uuid, + state, + &kopid, + client_auth_info.clone()).await?; + + let profile_view = ProfileChangesPartialView { + menu_active_item: ProfileMenuItems::UserProfile, + can_rw, + person: scim_person, + new_attrs + }; + + Ok(( + HxPushUrl(Uri::from_static("/ui/profile/diff")), + profile_view, + ) + .into_response()) +} + +pub(crate) async fn view_profile_diff_confirm_save_post( + State(state): State<ServerState>, + Extension(kopid): Extension<KOpId>, + VerifiedClientInformation(client_auth_info): VerifiedClientInformation, + DomainInfo(domain_info): DomainInfo, + // Form must be the last parameter because it consumes the request body + Form(new_attrs): Form<ProfileAttributes>, +) -> axum::response::Result<Response> { + let uat: UserAuthToken = state + .qe_r_ref + .handle_whoami_uat(client_auth_info.clone(), kopid.eventid) + .map_err(|op_err| HtmxError::new(&kopid, op_err, domain_info.clone())) + .await?; + dbg!(&new_attrs); + + let filter = filter_all!(f_and!([f_id(uat.uuid.to_string().as_str())])); + + state + .qe_w_ref + .handle_setattribute( + client_auth_info.clone(), + uat.uuid.to_string(), + ATTR_DISPLAYNAME.to_string(), + vec![new_attrs.display_name], + filter.clone(), + kopid.eventid, + ) + .map_err(|op_err| HtmxError::new(&kopid, op_err, domain_info.clone())) + .await?; + + state + .qe_w_ref + .handle_setattribute( + client_auth_info.clone(), + uat.uuid.to_string(), + ATTR_MAIL.to_string(), + new_attrs.emails, + filter.clone(), + kopid.eventid, + ) + .map_err(|op_err| HtmxError::new(&kopid, op_err, domain_info.clone())) + .await?; + + // TODO: These are normally not permitted, user should be prevented from changing non modifiable fields in the UI though + // state + // .qe_w_ref + // .handle_setattribute( + // client_auth_info.clone(), + // uat.uuid.to_string(), + // ATTR_EMAIL.to_string(), + // vec![new_attrs.email.unwrap_or("".to_string())], + // filter.clone(), + // kopid.eventid, + // ) + // .map_err(|op_err| HtmxError::new(&kopid, op_err)) + // .await?; + // + // state + // .qe_w_ref + // .handle_setattribute( + // client_auth_info.clone(), + // uat.uuid.to_string(), + // ATTR_NAME.to_string(), + // vec![new_attrs.account_name], + // filter.clone(), + // kopid.eventid, + // ) + // .map_err(|op_err| HtmxError::new(&kopid, op_err)) + // .await?; + + // TODO: Calling this here returns the old attributes + match view_profile_get( + State(state), + Extension(kopid), + VerifiedClientInformation(client_auth_info), + DomainInfo(domain_info) + ).await { + Ok(pv) => Ok(pv.into_response()), + Err(e) => Ok(e.into_response()), + } +} + +// Sends the user a new email input to fill in :) +pub(crate) async fn view_new_email_entry_partial( + State(_state): State<ServerState>, + VerifiedClientInformation(_client_auth_info): VerifiedClientInformation, + Extension(_kopid): Extension<KOpId>, +) -> axum::response::Result<Response> { + let add_email_trigger = + HxResponseTrigger::after_swap([HxEvent::new("addEmailSwapped".to_string())]); + Ok(( + add_email_trigger, + FormModEntryModListPartial { + can_rw: true, + r#type: "email".to_string(), + name: "emails[]".to_string(), + value: "".to_string(), + invalid_feedback: "Please enter a valid email address.".to_string(), + }, + ) + .into_response()) +} + pub(crate) async fn view_profile_unlock_get( State(state): State<ServerState>, VerifiedClientInformation(client_auth_info): VerifiedClientInformation, diff --git a/server/core/static/external/forms.js b/server/core/static/external/forms.js new file mode 100644 index 000000000..7e5bfe74c --- /dev/null +++ b/server/core/static/external/forms.js @@ -0,0 +1,25 @@ +// This file will contain js helpers to have some interactivity on forms that we can't achieve with pure html. +function rehook_string_list_removers() { + const buttons = document.getElementsByClassName("kanidm-remove-list-entry"); + for (let i = 0; i < buttons.length; i++) { + const button = buttons.item(i) + if (button.getAttribute("kanidm_hooked") !== null) continue + + button.addEventListener("click", (e) => { + // Expected html nesting: li > div.input-group > button.kanidm-remove-list-entry + let li = button.parentElement?.parentElement; + if (li && li.tagName === "LI") { + li.remove(); + } + }) + button.setAttribute("kanidm_hooked", "") + } +} + +window.onload = function () { + rehook_string_list_removers(); + document.body.addEventListener("addEmailSwapped", () => { + rehook_string_list_removers(); + }) +}; + diff --git a/server/core/static/external/htmx_bs_validation.js b/server/core/static/external/htmx_bs_validation.js new file mode 100644 index 000000000..e5bbb2142 --- /dev/null +++ b/server/core/static/external/htmx_bs_validation.js @@ -0,0 +1,34 @@ +htmx.defineExtension("bs-validation", { + onEvent: function (name, evt) { + let form = evt.detail.elt; + // Htmx propagates attributes onto children like button, which would break those buttons, so we return if not a form. + if (form.tagName !== "FORM") return; + + // check if trigger attribute and submit event exists + // for the form + if (!form.hasAttribute("hx-trigger")) { + // set trigger for custom event bs-send + form.setAttribute("hx-trigger", "bs-send"); + + // and attach the event only once + form.addEventListener("submit", function (event) { + if (form.checkValidity()) { + // trigger custom event hx-trigger="bs-send" + htmx.trigger(form, "bsSend"); + } + + // focus the first :invalid field + let invalidField = form.querySelector(":invalid"); + if (invalidField) { + invalidField.focus(); + } + + console.log("prevented htmx send, form was invalid") + event.preventDefault() + event.stopPropagation() + + form.classList.add("was-validated") + }, false) + } + } +}); \ No newline at end of file diff --git a/server/core/static/style.css b/server/core/static/style.css index a2dc18278..3566d8f3f 100644 --- a/server/core/static/style.css +++ b/server/core/static/style.css @@ -29,6 +29,7 @@ body { display: block !important; } + /* * Sidebar */ @@ -206,3 +207,7 @@ footer { height: var(--icon-size); transform: rotate(35deg); } + +.cursor-pointer:hover { + cursor: pointer; +} \ No newline at end of file diff --git a/server/core/templates/user_settings.html b/server/core/templates/user_settings.html index 636af5b63..811652f23 100644 --- a/server/core/templates/user_settings.html +++ b/server/core/templates/user_settings.html @@ -3,6 +3,8 @@ (% block title %)Profile(% endblock %) (% block head %) +<script src="/pkg/external/forms.js"></script> +<script src="/pkg/external/htmx_bs_validation.js"></script> (% endblock %) (% block main %) diff --git a/server/core/templates/user_settings/form_modifiable_entry_modifiable_list_partial.html b/server/core/templates/user_settings/form_modifiable_entry_modifiable_list_partial.html new file mode 100644 index 000000000..df035e3ec --- /dev/null +++ b/server/core/templates/user_settings/form_modifiable_entry_modifiable_list_partial.html @@ -0,0 +1,7 @@ +<li class="mb-2"> + <div class="input-group"> + <input type="(( type ))" class="form-control" name="(( name ))" value="(( value ))" hx-validate="true" required> + (% if can_rw %)<button type="button" class="btn btn-secondary kanidm-remove-list-entry">Remove</button>(% endif %) + </div> + <div class="invalid-feedback">(( invalid_feedback ))</div> +</li> \ No newline at end of file diff --git a/server/core/templates/user_settings/profile_changes_partial.html b/server/core/templates/user_settings/profile_changes_partial.html new file mode 100644 index 000000000..6288868aa --- /dev/null +++ b/server/core/templates/user_settings/profile_changes_partial.html @@ -0,0 +1,79 @@ +(% extends "user_settings_partial_base.html" %) + +(% block selected_setting_group %) +Profile Difference +(% endblock %) + +(% block settings_vertical_point %)lg(% endblock %) + +(% block settings_window %) + +<form> + <input type="hidden" name="account_name" value="(( new_attrs.account_name ))"/> + <input type="hidden" name="display_name" value="(( new_attrs.display_name ))"/> +<!-- <input type="hidden" name="legal_name" value=" new_attrs.legal_name "/>--> + (% for email in new_attrs.emails %) + <input type="hidden" name="emails[]" value="(( email ))"/> + (% endfor %) + + <table class="table table-bordered table-responsive"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Old value</th> + <th scope="col">New value</th> + </tr> + </thead> + (% if person.name != new_attrs.account_name %) + <tr> + <th scope="row">Username</th> + <td class="text-break">(( person.name ))</td> + <td class="text-break">(( new_attrs.account_name ))</td> + </tr> + (% endif %) + + (% if person.displayname != new_attrs.display_name %) + <tr> + <th scope="row">Display name</th> + <td class="text-break">(( person.displayname ))</td> + <td class="text-break">(( new_attrs.display_name ))</td> + </tr> + (% endif %) + + + <!-- TODO: List new items with +, same items with . --> + <tr> + <th scope="row">Emails</th> + <td class="text-break"> + <ul> + (% for email in person.mails %) + <li>(( email.value ))</li> + (% endfor %) + </ul> + </td> + <td class="text-break"> + <ul> + (% for email in new_attrs.emails %) + <li>(( email ))</li> + (% endfor %) + </ul> + </td> + </tr> + </table> + <!-- Edit button --> + <div class="pt-4" hx-target="#user_settings_container" hx-swap="outerHTML"> + (% if can_rw %) + <button class="btn btn-danger" type="button" hx-get="/ui/profile" hx-target="#user_settings_container" hx-swap="outerHTML">Discard Changes</button> + <button class="btn btn-primary" type="button" hx-post="/ui/api/user_settings/confirm_profile" hx-target="#user_settings_container" hx-swap="outerHTML">Confirm Changes</button> + (% else %) + <a href="/ui/profile/unlock" hx-boost="false"> + <!-- TODO: at the moment, session expiring here means progress is lost. Do we just show an error screen ? We can't pass the update state through the reauth session, and we don't have profile update sessions like cred update. --> + <button class="btn btn-primary" type="button">Unlock Confirm 🔓</button> + </a> + (% endif %) + </div> + +</form> + +(% endblock %) + diff --git a/server/core/templates/user_settings_profile_partial.html b/server/core/templates/user_settings_profile_partial.html index 7d29d5bda..2ab46ff69 100644 --- a/server/core/templates/user_settings_profile_partial.html +++ b/server/core/templates/user_settings_profile_partial.html @@ -4,40 +4,81 @@ Profile (% endblock %) +(% macro string_attr(dispname, name, value, editable, attribute) %) +(% if scim_effective_access.search.check(attribute|as_ref) %) +<div class="row g-0 mt-3"> + <label for="person(( name ))" class="col-12 col-md-3 col-lg-2 col-form-label fw-bold py-0">(( dispname ))</label> + <div class="col-12 col-md-8 col-lg-6"> + (% if scim_effective_access.modify_present.check(attribute|as_ref) %) + <input class="form-control py-0" id="person(( name ))" name="(( name ))" value="(( value ))"> + (% else %) + <input readonly class="form-control-plaintext py-0" id="person(( name ))" name="(( name ))" value="(( value ))"> + (% endif %) + </div> +</div> +(% endif %) +(% endmacro %) + (% block settings_window %) -<form> - <div class="mb-2 row"> - <label for="profileUserName" class="col-12 col-md-3 col-xl-2 col-form-label">User name</label> - <div class="col-12 col-md-6 col-lg-5"> - <input type="text" readonly class="form-control-plaintext" id="profileUserName" value="(( account_name ))"> - </div> - </div> +<form id="user_settings_container" class="needs-validation" hx-post="/ui/api/user_settings/edit_profile" + hx-target="#user_settings_container" hx-swap="outerHTML" hx-validate="true" hx-ext="bs-validation" novalidate> + (% call string_attr("Name", "name", person.name, true, Attribute::Name) %) - <div class="mb-2 row"> - <label for="profileDisplayName" class="col-12 col-md-3 col-xl-2 col-form-label">Display name</label> - <div class="col-12 col-md-6 col-lg-5"> - <input type="text" class="form-control-plaintext" id="profileDisplayName" value="(( display_name ))" disabled> + (% call string_attr("Displayname", "displayname", person.displayname, true, Attribute::DisplayName) %) + + <div class="mb-2"> + <div class="mt-3 mb-2 col-12 col-md-11 col-lg-8"> + <label for="profileEmail" class="fw-bold">Email addresses (select primary)</label> + (% if can_rw %) + <a class="cursor-pointer float-end" hx-boost="true" hx-post="/ui/api/user_settings/add_email" hx-target="#emailAddresses" + hx-swap="beforeend"> + <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-plus-square" + viewBox="0 0 16 16" width="20" height="20"> + <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"></path> + <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"></path> + </svg> + </a> </div> - </div> - - <div class="mb-2 row"> - <label for="profileEmail" class="col-12 col-md-3 col-xl-2 col-form-label">Email</label> - <div class="col-12 col-md-6 col-lg-5"> - <input type="email" disabled class="form-control-plaintext" id="profileEmail" value="(( email.clone().unwrap_or("None configured".to_string())))"> + (% endif %) + <div> + <div class="row g-0"> + <div class="col-12 col-md-11 col-lg-8" id="emailAddresses"> + (% for (i, email) in person.mails.iter().enumerate() %) + (% let type = "email" %) + (% let name = "emails[]" %) + (% let value = email.value.clone() %) + (% let invalid_feedback = "Please enter a valid email address." %) + + <div class="input-group mb-1"> + <div class="input-group-text"> + <input class="form-check-input mt-0" name="primary_email_index" type="radio" value="((i))" aria-label="Primary email radio button for following text input"> + </div> + + <input type="(( type ))" class="form-control" name="(( name ))" value="(( value ))" hx-validate="true" required> + (% if can_rw %) + <button type="button" class="btn btn-secondary kanidm-remove-list-entry">Remove</button> + (% endif %) + + </div> + <div class="invalid-feedback">(( invalid_feedback ))</div> + + (% endfor %) + </div> + </div> </div> </div> <!-- Edit button --> - <!-- <div class="pt-4"> + <div class="pt-4"> (% if can_rw %) - <button class="btn btn-primary" type="button" hx-post="/ui/api/user_settings/edit_profile" disabled>Edit (Currently Not Working!)</button> + <button class="btn btn-primary" type="submit">Save</button> (% else %) - <a href=(Urls::ProfileUnlock) hx-boost="false"> - <button class="btn btn-primary" type="button">((UiMessage::UnlockEdit))</button> - </a> + <a href="/ui/profile/unlock" hx-boost="false"> + <button class="btn btn-primary" type="button">Unlock Edit 🔒</button> + </a> (% endif %) - </div> --> + </div> </form> (% endblock %)