fix(auth): relax password complexity requirements to suggestions-only (#5764)

packages/ui/src/components/password-input/password-input.tsx

@@ -20,15 +20,15 @@ export const CustomPasswordInput = ({ withPasswordRequirements, ...props }: Cust
 };
 
 const WithPasswordRequirements = (props: PasswordInputProps) => {
-  const [value, setValue] = useState("");
+  const [password, setPassword] = useState("");
 
   const onChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setValue(event.currentTarget.value);
+    setPassword(event.currentTarget.value);
     props.onChange?.(event);
   };
 
   return (
-    <PasswordRequirementsPopover password={value}>
+    <PasswordRequirementsPopover password={password}>
       <PasswordInput {...props} onChange={onChange} />
     </PasswordRequirementsPopover>
   );

packages/ui/src/components/password-input/password-requirement.tsx

@@ -1,14 +1,19 @@
 import { rem, Text } from "@mantine/core";
-import { IconCheck, IconX } from "@tabler/icons-react";
+import { IconCheck, IconPoint } from "@tabler/icons-react";
+
+const getRequirementDisplay = (meets: boolean) =>
+  ({
+    true: { color: "teal", Icon: IconCheck },
+    false: { color: "dimmed", Icon: IconPoint },
+  })[String(meets) as "true" | "false"];
 
 export function PasswordRequirement({ meets, label }: { meets: boolean; label: string }) {
+  const display = getRequirementDisplay(meets);
+  const Icon = display.Icon;
+
   return (
-    <Text c={meets ? "teal" : "red"} display="flex" style={{ alignItems: "center" }} size="sm">
-      {meets ? (
-        <IconCheck style={{ width: rem(14), height: rem(14) }} />
-      ) : (
-        <IconX style={{ width: rem(14), height: rem(14) }} />
-      )}
+    <Text c={display.color} display="flex" style={{ alignItems: "center" }} size="sm">
+      <Icon style={{ width: rem(14), height: rem(14) }} />
       <Text span ml={10}>
         {label}
       </Text>

packages/ui/src/components/password-input/password-requirements-popover.tsx

@@ -1,16 +1,24 @@
 import type { PropsWithChildren } from "react";
 import { useState } from "react";
-import { Popover, Progress } from "@mantine/core";
+import { Popover, Progress, Text } from "@mantine/core";
 
 import { useScopedI18n } from "@homarr/translation/client";
 import { passwordRequirements } from "@homarr/validation/user";
 
 import { PasswordRequirement } from "./password-requirement";
 
+const strengthColorMap = [
+  { min: 100, color: "teal" },
+  { min: 51, color: "yellow" },
+  { min: 0, color: "dimmed" },
+] as const;
+
 export const PasswordRequirementsPopover = ({ password, children }: PropsWithChildren<{ password: string }>) => {
+  const tPassword = useScopedI18n("user.field.password");
   const requirements = useRequirements();
   const strength = useStrength(password);
   const [popoverOpened, setPopoverOpened] = useState(false);
+  const strengthColor = strengthColorMap.find(({ min }) => strength >= min)?.color ?? "dimmed";
   const checks = (
     <>
       {requirements.map((requirement) => (
@@ -19,8 +27,6 @@ export const PasswordRequirementsPopover = ({ password, children }: PropsWithChi
     </>
   );
 
-  const color = strength === 100 ? "teal" : strength > 50 ? "yellow" : "red";
-
   return (
     <Popover opened={popoverOpened} position="bottom" width="target" transitionProps={{ transition: "pop" }}>
       <Popover.Target>
@@ -29,7 +35,10 @@ export const PasswordRequirementsPopover = ({ password, children }: PropsWithChi
         </div>
       </Popover.Target>
       <Popover.Dropdown>
-        <Progress color={color} value={strength} size={5} mb="xs" />
+        <Progress color={strengthColor} value={strength} size={5} mb="xs" />
+        <Text size="sm" c="dimmed" mb="xs">
+          {tPassword("suggestionsTitle")}
+        </Text>
         {checks}
       </Popover.Dropdown>
     </Popover>
@@ -37,7 +46,7 @@ export const PasswordRequirementsPopover = ({ password, children }: PropsWithChi
 };
 
 const useRequirements = () => {
-  const t = useScopedI18n("user.field.password.requirement");
+  const t = useScopedI18n("user.field.password.suggestion");
 
   return passwordRequirements.map(({ check, value }) => ({ check, label: t(value) }));
 };