fix(app/users): password validation hint + missing message on empty teams list (#12231)

app/react/portainer/users/ListView/NewUserForm/NewUserForm.tsx

@@ -9,8 +9,6 @@ import { notifySuccess } from '@/portainer/services/notifications';
 
 import { Widget } from '@@/Widget';
 import { FormActions } from '@@/form-components/FormActions';
-import { PasswordCheckHint } from '@@/PasswordCheckHint';
-import { FormControl } from '@@/form-components/FormControl';
 
 import { useTeams } from '../../teams/queries';
 import { useCreateUserMutation } from '../../queries/useCreateUserMutation';
@@ -80,10 +78,6 @@ export function NewUserForm() {
                       <PasswordField />
 
                       <ConfirmPasswordField />
-
-                      <FormControl label="">
-                        <PasswordCheckHint passwordValid={!errors.password} />
-                      </FormControl>
                     </>
                   )}
 

app/react/portainer/users/ListView/NewUserForm/TeamsField.tsx

@@ -1,5 +1,6 @@
 import { useField } from 'formik';
 
+import { Link } from '@@/Link';
 import { TeamsSelector } from '@@/TeamsSelector';
 import { FormControl } from '@@/form-components/FormControl';
 
@@ -19,15 +20,26 @@ export function TeamsField({
 
   return (
     <FormControl label="Add to team(s)" inputId="teams-field" errors={error}>
-      <TeamsSelector
-        dataCy="user-teamSelect"
-        onChange={(value) => setValue(value)}
-        value={value}
-        name={name}
-        teams={teams}
-        inputId="teams-field"
-        disabled={disabled}
-      />
+      {teams.length > 0 ? (
+        <TeamsSelector
+          dataCy="user-teamSelect"
+          onChange={(value) => setValue(value)}
+          value={value}
+          name={name}
+          teams={teams}
+          inputId="teams-field"
+          disabled={disabled}
+        />
+      ) : (
+        <span className="small text-muted">
+          You don&apos;t seem to have any teams to add users into. Head over to
+          the{' '}
+          <Link to="portainer.teams" data-cy="teams-view-link">
+            Teams view
+          </Link>{' '}
+          to create some.
+        </span>
+      )}
     </FormControl>
   );
 }

app/react/portainer/users/ListView/NewUserForm/useValidation.tsx

@@ -43,7 +43,13 @@ export function useValidation(): SchemaOf<FormValues> {
 
 function passwordValidation(minLength: number | undefined = 12) {
   return object({
-    password: string().required('Password is required').min(minLength, ''),
+    password: string()
+      .required('Password is required')
+      .min(
+        minLength,
+        ({ value, min }) =>
+          `The password must be at least ${min} characters long. (${value.length}/${min})`
+      ),
     confirmPassword: string().oneOf(
       [ref('password'), null],
       'Passwords must match'