From c5334d48aa4329b975b98d6ad3fafe856bffce91 Mon Sep 17 00:00:00 2001
From: armanddidierjean <95971503+armanddidierjean@users.noreply.github.com>
Date: Wed, 10 Jul 2024 12:19:04 +0200
Subject: [PATCH] fix: remove password strength indicator for login

---
 src/app/activate/page.tsx                     |  4 +-
 src/app/reset-password/page.tsx               |  4 +-
 src/components/custom/PasswordInput.tsx       | 68 ++++---------------
 .../custom/PasswordInputWithStrength.tsx      | 55 +++++++++++++++
 4 files changed, 73 insertions(+), 58 deletions(-)
 create mode 100644 src/components/custom/PasswordInputWithStrength.tsx

diff --git a/src/app/activate/page.tsx b/src/app/activate/page.tsx
index 067fe9e..0a501fb 100644
--- a/src/app/activate/page.tsx
+++ b/src/app/activate/page.tsx
@@ -5,7 +5,7 @@ import { CenteredCard } from "@/components/custom/CenteredCard";
 import { CustomFormField } from "@/components/custom/CustomFormField";
 import { DatePicker } from "@/components/custom/DatePicker";
 import { LoadingButton } from "@/components/custom/LoadingButton";
-import { PasswordInput } from "@/components/custom/PasswordInput";
+import { PasswordInputWithStrength } from "@/components/custom/PasswordInputWithStrength";
 import { PhoneCustomInput } from "@/components/custom/PhoneCustomInput";
 import { CustomSelectTrigger } from "@/components/custom/SelectInput";
 import { SuspenseConditional } from "@/components/custom/SuspenseConditional";
@@ -268,7 +268,7 @@ const RegisterPage = () => {
               form={form}
               name="password"
               label="Mot de passe"
-              render={(field) => <PasswordInput {...field} />}
+              render={(field) => <PasswordInputWithStrength {...field} />}
             />
             <LoadingButton
               type="submit"
diff --git a/src/app/reset-password/page.tsx b/src/app/reset-password/page.tsx
index 8d89eb4..6b0287f 100644
--- a/src/app/reset-password/page.tsx
+++ b/src/app/reset-password/page.tsx
@@ -4,7 +4,7 @@ import { postUsersResetPassword } from "@/api";
 import { CenteredCard } from "@/components/custom/CenteredCard";
 import { CustomFormField } from "@/components/custom/CustomFormField";
 import { LoadingButton } from "@/components/custom/LoadingButton";
-import { PasswordInput } from "@/components/custom/PasswordInput";
+import { PasswordInputWithStrength } from "@/components/custom/PasswordInputWithStrength";
 import { SuspenseHiddenField } from "@/components/custom/SuspenseHiddenField";
 import { Form } from "@/components/ui/form";
 import { toast } from "@/components/ui/use-toast";
@@ -78,7 +78,7 @@ const ResetPasswordPage = () => {
               name="password"
               label="Mot de passe"
               render={(field) => {
-                return <PasswordInput {...field} />;
+                return <PasswordInputWithStrength {...field} />;
               }}
             />
             <LoadingButton
diff --git a/src/components/custom/PasswordInput.tsx b/src/components/custom/PasswordInput.tsx
index 760cf8b..ed9ff0c 100644
--- a/src/components/custom/PasswordInput.tsx
+++ b/src/components/custom/PasswordInput.tsx
@@ -2,70 +2,30 @@
 
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
-import { zxcvbn } from "@zxcvbn-ts/core";
 import * as React from "react";
 import { HiEye, HiEyeOff } from "react-icons/hi";
 
-
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, ...props }, ref) => {
     const [showPassword, setShowPassword] = React.useState(false);
-    const [score, setScore] = React.useState(0);
     const togglePasswordVisibility = () => setShowPassword(!showPassword);
 
-    const previousChange = props.onChange;
-
-    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (previousChange) {
-        const zxcvbnResult = zxcvbn(e.target.value);
-        setScore(zxcvbnResult.score);
-        previousChange(e);
-      }
-    };
-
-    props.onChange = onChange;
-
-    function color(strength: number, index: number, length: number): string {
-      if (!length) return "bg-gray-200";
-      if (strength < index) return "bg-gray-200";
-      return [
-        "bg-red-500",
-        "bg-orange-500",
-        "bg-amber-500",
-        "bg-yellow-400",
-        "bg-green-400",
-      ][strength];
-    }
-
     return (
-      <div>
-        <div className="relative">
-          <Input
-            type={showPassword ? "text" : "password"}
-            className={cn(className)}
-            ref={ref}
-            {...props}
-          />
-          <div className="absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-400 hover:text-[hsl(var(--ring))]">
-            {showPassword ? (
-              <HiEye className="h-4 w-4" onClick={togglePasswordVisibility} />
-            ) : (
-              <HiEyeOff
-                className="h-4 w-4"
-                onClick={togglePasswordVisibility}
-              />
-            )}
-          </div>
-        </div>
-        <div className="grid grid-flow-col justify-stretch gap-4 mt-4 px-1">
-          {[...Array(5)].map((_, index) => (
-            <div
-              key={index}
-              className={`px-1 h-2 rounded-xl transition-colors ${color(score, index, props.value?.toString()?.length || 0)}`}
-            />
-          ))}
+      <div className="relative">
+        <Input
+          type={showPassword ? "text" : "password"}
+          className={cn(className)}
+          ref={ref}
+          {...props}
+        />
+        <div className="absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-400 hover:text-[hsl(var(--ring))]">
+          {showPassword ? (
+            <HiEye className="h-4 w-4" onClick={togglePasswordVisibility} />
+          ) : (
+            <HiEyeOff className="h-4 w-4" onClick={togglePasswordVisibility} />
+          )}
         </div>
       </div>
     );
@@ -73,4 +33,4 @@ const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
 );
 PasswordInput.displayName = "PasswordInput";
 
-export { PasswordInput };
\ No newline at end of file
+export { PasswordInput };
diff --git a/src/components/custom/PasswordInputWithStrength.tsx b/src/components/custom/PasswordInputWithStrength.tsx
new file mode 100644
index 0000000..b11f111
--- /dev/null
+++ b/src/components/custom/PasswordInputWithStrength.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { PasswordInput } from "./PasswordInput";
+import { zxcvbn } from "@zxcvbn-ts/core";
+import * as React from "react";
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const PasswordInputWithStrength = React.forwardRef<
+  HTMLInputElement,
+  InputProps
+>(({ ...props }, ref) => {
+  const [score, setScore] = React.useState(0);
+
+  const previousChange = props.onChange;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (previousChange) {
+      const zxcvbnResult = zxcvbn(e.target.value);
+      setScore(zxcvbnResult.score);
+      previousChange(e);
+    }
+  };
+
+  props.onChange = onChange;
+
+  function color(strength: number, index: number, length: number): string {
+    if (!length) return "bg-gray-200";
+    if (strength < index) return "bg-gray-200";
+    return [
+      "bg-red-500",
+      "bg-orange-500",
+      "bg-amber-500",
+      "bg-yellow-400",
+      "bg-green-400",
+    ][strength];
+  }
+
+  return (
+    <div>
+      <PasswordInput {...props} ref={ref} />
+      <div className="grid grid-flow-col justify-stretch gap-4 mt-4 px-1">
+        {[...Array(5)].map((_, index) => (
+          <div
+            key={index}
+            className={`px-1 h-2 rounded-xl transition-colors ${color(score, index, props.value?.toString()?.length || 0)}`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+});
+PasswordInputWithStrength.displayName = "PasswordInputWithStrength";
+
+export { PasswordInputWithStrength };