feat: add password requirements (#988)

* feat: add password requirements

* fix: format issue

* fix: unexpected empty string in component jsx

* test: adjust unit test passwords

apps/nextjs/src/app/[locale]/manage/users/[userId]/security/_components/_change-password-form.tsx

@@ -8,6 +8,7 @@ import { useSession } from "@homarr/auth/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
+import { CustomPasswordInput } from "@homarr/ui";
 import { validation } from "@homarr/validation";
 
 import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
@@ -71,7 +72,12 @@ export const ChangePasswordForm = ({ user }: ChangePasswordFormProps) => {
               />
             )}
 
-            <PasswordInput withAsterisk label={t("user.field.password.label")} {...form.getInputProps("password")} />
+            <CustomPasswordInput
+              withPasswordRequirements
+              withAsterisk
+              label={t("user.field.password.label")}
+              {...form.getInputProps("password")}
+            />
 
             <PasswordInput
               withAsterisk

apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx

@@ -8,7 +8,7 @@ import { clientApi } from "@homarr/api/client";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import { UserAvatar } from "@homarr/ui";
+import { CustomPasswordInput, UserAvatar } from "@homarr/ui";
 import { validation, z } from "@homarr/validation";
 import { createCustomErrorParams } from "@homarr/validation/form";
 
@@ -124,7 +124,8 @@ export const UserCreateStepperComponent = () => {
           <form>
             <Card p="xl">
               <Stack gap="md">
-                <PasswordInput
+                <CustomPasswordInput
+                  withPasswordRequirements
                   label={tUserField("password.label")}
                   variant="filled"
                   withAsterisk