webui: Make user name input entry shorter

So that it indicates that the length of the name is limited to the user.
rhinstaller · Nov 23, 2023 · d96a7ec · d96a7ec
1 parent fa5a24f
commit d96a7ec
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/src/components/users/Accounts.jsx b/src/components/users/Accounts.jsx
@@ -24,6 +24,8 @@ import {
     FormGroup,
     FormHelperText,
     HelperText,
+    HelperTextItem,
+    InputGroup,
     TextInput,
     Title,
 } from "@patternfly/react-core";
@@ -146,6 +148,8 @@ const CreateAccount = ({
         setAccounts(ac => ({ ...ac, fullName, userAccount, password, confirmPassword }));
     }, [setAccounts, fullName, userAccount, password, confirmPassword]);
 
+    const userAccountValidated = isUserAccountValid === null ? "default" : isUserAccountValid ? "success" : "error";
+
     return (
         <Form
           isHorizontal
@@ -172,17 +176,22 @@ const CreateAccount = ({
               label={_("User account")}
               fieldId={idPrefix + "-user-account"}
             >
-                <TextInput
-                  id={idPrefix + "-user-account"}
-                  value={_userAccount}
-                  onChange={(_event, val) => _setUserAccount(val)}
-                  validated={isUserAccountValid === null ? "default" : isUserAccountValid ? "success" : "error"}
-                />
+                <InputGroup id={idPrefix + "-user-account-input-group"}>
+                    <TextInput
+                      id={idPrefix + "-user-account"}
+                      value={_userAccount}
+                      onChange={(_event, val) => _setUserAccount(val)}
+                      validated={userAccountValidated}
+                    />
+                </InputGroup>
+                {userAccountValidated === "error" &&
                 <FormHelperText>
-                    <HelperText component="ul" aria-live="polite" id={idPrefix + "-full-name-helper"}>
-                        {userAccountInvalidHint}
+                    <HelperText>
+                        <HelperTextItem variant={userAccountValidated}>
+                            {userAccountInvalidHint}
+                        </HelperTextItem>
                     </HelperText>
-                </FormHelperText>
+                </FormHelperText>}
             </FormGroup>
             {passphraseForm}
         </Form>

diff --git a/src/components/users/Accounts.scss b/src/components/users/Accounts.scss
@@ -8,3 +8,7 @@
   flex-direction: column;
   align-items: flex-start;
 }
+
+#accounts-create-account-user-account-input-group {
+  width: min(39ch, 100%);
+}