[pmg-devel] [PATCH yew-comp 1/1] login panel: make realm selector optional

[Dominik Csapak <d.csapak@proxmox.com>]

in some cases, we don't want to have a realm selector because the user
has to enter e.g. an e-mail address instead (like the PMG mobile
quarantine gui).

Add a property for that that defaults to the current behavior and add a
validator for the username field that checks for an '@' in the middle.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/login_panel.rs | 52 +++++++++++++++++++++++++++++++++++++---------
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/login_panel.rs b/src/login_panel.rs
index f958871..8e6caa2 100644
--- a/src/login_panel.rs
+++ b/src/login_panel.rs
@@ -1,5 +1,7 @@
 use std::rc::Rc;
 
+use anyhow::bail;
+
 use pwt::props::PwtSpace;
 use pwt::state::PersistentState;
 use pwt::touch::{SnackBar, SnackBarContextExt};
@@ -33,6 +35,11 @@ pub struct LoginPanel {
     #[builder]
     pub default_realm: AttrValue,
 
+    /// Determines if the realm box is shown/used
+    #[prop_or(true)]
+    #[builder]
+    pub realm_selectable: bool,
+
     /// Mobile Layout
     ///
     /// Use special layout for mobile apps. For example shows error in a [SnackBar]
@@ -176,6 +183,18 @@ impl ProxmoxLoginPanel {
                     .label_id(username_label_id)
                     .default(default_username)
                     .required(true)
+                    .validate({
+                        let realm_selectable = props.realm_selectable;
+                        move |value: &String| {
+                        if realm_selectable {
+                            return Ok(());
+                        } else if let Some((user, realm)) = value.rsplit_once('@') {
+                            if !user.is_empty() && !realm.is_empty() {
+                                return Ok(());
+                            }
+                        }
+                        bail!("{}", tr!("invalid username"));
+                    }})
                     .autofocus(true),
             )
             .with_child(
@@ -191,19 +210,19 @@ impl ProxmoxLoginPanel {
                     .required(true)
                     .input_type(InputType::Password),
             )
-            .with_child(
+            .with_optional_child(props.realm_selectable.then_some(
                 FieldLabel::new(tr!("Realm"))
                     .id(realm_label_id.clone())
                     .padding_top(1)
                     .padding_bottom(PwtSpace::Em(0.25)),
-            )
-            .with_child(
+            ))
+            .with_optional_child(props.realm_selectable.then_some(
                 RealmSelector::new()
                     .name("realm")
                     .label_id(realm_label_id)
                     .path(props.domain_path.clone())
-                    .default(default_realm),
-            )
+                    .default(default_realm)
+            ))
             .with_child(
                 SubmitButton::new()
                     .class("pwt-scheme-primary")
@@ -244,7 +263,7 @@ impl ProxmoxLoginPanel {
 
         let (default_username, default_realm) = self.get_defaults(props);
 
-        let input_panel = InputPanel::new()
+        let mut input_panel = InputPanel::new()
             .class(pwt::css::Overflow::Auto)
             .width("initial") // don't try to minimize size
             .padding(4)
@@ -262,14 +281,17 @@ impl ProxmoxLoginPanel {
                     .name("password")
                     .required(true)
                     .input_type(InputType::Password),
-            )
-            .with_field(
+            );
+
+        if props.realm_selectable {
+            input_panel.add_field(
                 tr!("Realm"),
                 RealmSelector::new()
                     .name("realm")
                     .path(props.domain_path.clone())
                     .default(default_realm),
             );
+        }
 
         let tfa_dialog = self.challenge.as_ref().map(|challenge| {
             TfaDialog::new(challenge.clone())
@@ -450,9 +472,19 @@ impl Component for ProxmoxLoginPanel {
             Msg::Submit => {
                 self.loading = true;
 
-                let username = self.form_ctx.read().get_field_text("username");
                 let password = self.form_ctx.read().get_field_text("password");
-                let realm = self.form_ctx.read().get_field_text("realm");
+                let (username, realm) = if props.realm_selectable {
+                    let username = self.form_ctx.read().get_field_text("username");
+                    let realm = self.form_ctx.read().get_field_text("realm");
+                    (username, realm)
+                } else {
+                    self.form_ctx
+                        .read()
+                        .get_field_text("username")
+                        .rsplit_once('@')
+                        .map(|(user, realm)| (user.to_string(), realm.to_string()))
+                        .unwrap_or_default()
+                };
 
                 self.send_login(ctx, username, password, realm);
                 if let (true, Some(controller)) = (props.mobile, ctx.link().snackbar_controller()) {
-- 
2.47.3



_______________________________________________
pmg-devel mailing list
pmg-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pmg-devel