checkbox, complexity policy

apps/login/ui/PasswordComplexity.tsx

@@ -0,0 +1,98 @@
+import {
+  lowerCaseValidator,
+  numberValidator,
+  symbolValidator,
+  upperCaseValidator,
+} from "#/utils/validators";
+import { PasswordComplexityPolicy } from "@zitadel/server";
+
+type Props = {
+  passwordComplexityPolicy: PasswordComplexityPolicy;
+  password: string;
+  equals: boolean;
+};
+
+const check = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className="w-6 h-6 las la-check text-state-success-light-color dark:text-state-success-dark-color mr-2 text-lg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M4.5 12.75l6 6 9-13.5"
+    />
+  </svg>
+);
+const cross = (
+  <svg
+    className="w-6 h-6 las la-times text-warn-light-500 dark:text-warn-dark-500 mr-2 text-lg"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6 18L18 6M6 6l12 12"
+    />
+  </svg>
+);
+const desc =
+  "text-14px leading-4 text-input-light-label dark:text-input-dark-label";
+
+export default function PasswordComplexity({
+  passwordComplexityPolicy,
+  password,
+  equals,
+}: Props) {
+  const hasMinLength = password?.length >= passwordComplexityPolicy.minLength;
+  const hasSymbol = symbolValidator(password);
+  const hasNumber = numberValidator(password);
+  const hasUppercase = upperCaseValidator(password);
+  const hasLowercase = lowerCaseValidator(password);
+
+  const policyIsValid =
+    (passwordComplexityPolicy.hasLowercase ? hasLowercase : true) &&
+    (passwordComplexityPolicy.hasNumber ? hasNumber : true) &&
+    (passwordComplexityPolicy.hasUppercase ? hasUppercase : true) &&
+    (passwordComplexityPolicy.hasSymbol ? hasSymbol : true) &&
+    hasMinLength;
+
+  return (
+    <div className="mb-4 grid grid-cols-2 gap-x-8 gap-y-2">
+      <div className="flex flex-row items-center">
+        {hasMinLength ? check : cross}
+        <span className={desc}>
+          Password length {passwordComplexityPolicy.minLength}
+        </span>
+      </div>
+      <div className="flex flex-row items-center">
+        {hasSymbol ? check : cross}
+        <span className={desc}>has Symbol</span>
+      </div>
+      <div className="flex flex-row items-center">
+        {hasNumber ? check : cross}
+        <span className={desc}>has Number</span>
+      </div>
+      <div className="flex flex-row items-center">
+        {hasUppercase ? check : cross}
+        <span className={desc}>has uppercase</span>
+      </div>
+      <div className="flex flex-row items-center">
+        {hasLowercase ? check : cross}
+        <span className={desc}>has lowercase</span>
+      </div>
+      <div className="flex flex-row items-center">
+        {equals ? check : cross}
+        <span className={desc}>equals</span>
+      </div>
+    </div>
+  );
+}