emaui/libs/ui/src/lib/input/PasswordRequirements.tsx

import { Stack, Text, Group } from '@mantine/core';
import { IconCheck, IconX } from '@tabler/icons-react';
import { z } from 'zod';

export function passwordRules(minLength: number) {
  return [
    { label: `At least ${minLength} characters`, test: (p: string) => p.length >= minLength },
    { label: 'One lowercase letter', test: (p: string) => /[a-z]/.test(p) },
    { label: 'One uppercase letter', test: (p: string) => /[A-Z]/.test(p) },
    { label: 'One number', test: (p: string) => /\d/.test(p) },
    { label: 'One special character', test: (p: string) => /[^A-Za-z0-9]/.test(p) },
  ];
}

/** Zod field schema enforcing every rule; unmet rules surface as separate issues. */
export const passwordSchema = (minLength: number) =>
  z.string().superRefine((val, ctx) => {
    for (const rule of passwordRules(minLength)) {
      if (!rule.test(val)) {
        ctx.addIssue({ code: 'custom', message: rule.label });
      }
    }
  });

export const passwordMeetsAll = (password: string, minLength: number) =>
  passwordRules(minLength).every((rule) => rule.test(password));

interface PasswordRequirementsProps {
  password: string;
  minLength: number;
  labels?: string[];
}

/** Live checklist of password requirements, ticking off as the user types. Hidden until the user starts typing. */
export function PasswordRequirements({ password, minLength, labels }: PasswordRequirementsProps) {
  if (!password) return null;
  const rules = passwordRules(minLength);
  return (
    <Stack gap={6} mt={6}>
      {rules.map((rule, i) => {
        const met = rule.test(password);
        return (
          <Group key={rule.label} gap={6} wrap="nowrap">
            {met ? (
              <IconCheck size={14} color="var(--mantine-color-teal-6)" />
            ) : (
              <IconX size={14} color="var(--mantine-color-gray-5)" />
            )}
            <Text fz="xs" c={met ? 'teal' : 'dimmed'}>
              {labels?.[i] ?? rule.label}
            </Text>
          </Group>
        );
      })}
    </Stack>
  );
}