feat: add password requirements (#988)

* feat: add password requirements

* fix: format issue

* fix: unexpected empty string in component jsx

* test: adjust unit test passwords

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

@@ -0,0 +1,35 @@
+"use client";
+
+import type { ChangeEvent } from "react";
+import { useState } from "react";
+import { PasswordInput } from "@mantine/core";
+import type { PasswordInputProps } from "@mantine/core";
+
+import { PasswordRequirementsPopover } from "./password-requirements-popover";
+
+interface CustomPasswordInputProps extends PasswordInputProps {
+  withPasswordRequirements?: boolean;
+}
+
+export const CustomPasswordInput = ({ withPasswordRequirements, ...props }: CustomPasswordInputProps) => {
+  if (withPasswordRequirements) {
+    return <WithPasswordRequirements {...props} />;
+  }
+
+  return <PasswordInput {...props} />;
+};
+
+const WithPasswordRequirements = (props: PasswordInputProps) => {
+  const [value, setValue] = useState("");
+
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setValue(event.currentTarget.value);
+    props.onChange?.(event);
+  };
+
+  return (
+    <PasswordRequirementsPopover password={value}>
+      <PasswordInput {...props} onChange={onChange} />
+    </PasswordRequirementsPopover>
+  );
+};