improvement: add hide/ unhide icon for all password field in the platform. (#3513)

web/components/account/sign-in-forms/optional-set-password.tsx

@@ -8,6 +8,8 @@ import useToast from "hooks/use-toast";
 import { Button, Input } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
+// icons
+import { Eye, EyeOff } from "lucide-react";
 
 type Props = {
   email: string;
@@ -31,6 +33,7 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
   const { email, handleSignInRedirection } = props;
   // states
   const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
   // form info
@@ -114,8 +117,9 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
               required: "Password is required",
             }}
             render={({ field: { value, onChange, ref } }) => (
+              <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                 <Input
-                type="password"
+                  type={showPassword ? "text" : "password"}
                   value={value}
                   onChange={onChange}
                   ref={ref}
@@ -125,6 +129,18 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
                   minLength={8}
                   autoFocus
                 />
+                {showPassword ? (
+                  <EyeOff
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => setShowPassword(false)}
+                  />
+                ) : (
+                  <Eye
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => setShowPassword(true)}
+                  />
+                )}
+              </div>
             )}
           />
           <p className="text-onboarding-text-200 text-xs mt-2 pb-3">

web/components/account/sign-in-forms/password.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import Link from "next/link";
 import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
-import { XCircle } from "lucide-react";
+import { Eye, EyeOff, XCircle } from "lucide-react";
 // services
 import { AuthService } from "services/auth.service";
 // hooks
@@ -40,6 +40,7 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
   const { email, handleStepChange, handleEmailClear, onSubmit } = props;
   // states
   const [isSendingUniqueCode, setIsSendingUniqueCode] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
   const {
@@ -157,8 +158,9 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
               required: "Password is required",
             }}
             render={({ field: { value, onChange } }) => (
+              <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                 <Input
-                type="password"
+                  type={showPassword ? "text" : "password"}
                   value={value}
                   onChange={onChange}
                   hasError={Boolean(errors.password)}
@@ -166,6 +168,18 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
                   className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                   autoFocus
                 />
+                {showPassword ? (
+                  <EyeOff
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => setShowPassword(false)}
+                  />
+                ) : (
+                  <Eye
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => setShowPassword(true)}
+                  />
+                )}
+              </div>
             )}
           />
           <div className="w-full text-right mt-2 pb-3">

web/components/account/sign-up-forms/optional-set-password.tsx

@@ -10,6 +10,8 @@ import { Button, Input } from "@plane/ui";
 import { checkEmailValidity } from "helpers/string.helper";
 // constants
 import { ESignUpSteps } from "components/account";
+// icons
+import { Eye, EyeOff } from "lucide-react";
 
 type Props = {
   email: string;
@@ -34,6 +36,7 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
   const { email, handleSignInRedirection } = props;
   // states
   const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
   // form info
@@ -119,8 +122,9 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
               required: "Password is required",
             }}
             render={({ field: { value, onChange } }) => (
+              <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                 <Input
-                type="password"
+                  type={showPassword ? "text" : "password"}
                   value={value}
                   onChange={onChange}
                   hasError={Boolean(errors.password)}
@@ -129,6 +133,18 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
                   minLength={8}
                   autoFocus
                 />
+                {showPassword ? (
+                  <EyeOff
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => setShowPassword(false)}
+                  />
+                ) : (
+                  <Eye
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => setShowPassword(true)}
+                  />
+                )}
+              </div>
             )}
           />
           <p className="text-onboarding-text-200 text-xs mt-2 pb-3">

web/components/account/sign-up-forms/password.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
-import { XCircle } from "lucide-react";
+import { Eye, EyeOff, XCircle } from "lucide-react";
 // services
 import { AuthService } from "services/auth.service";
 // hooks
@@ -32,6 +32,8 @@ const authService = new AuthService();
 
 export const SignUpPasswordForm: React.FC<Props> = observer((props) => {
   const { onSubmit } = props;
+  // states
+  const [showPassword, setShowPassword] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
   // form info
@@ -112,8 +114,9 @@ export const SignUpPasswordForm: React.FC<Props> = observer((props) => {
               required: "Password is required",
             }}
             render={({ field: { value, onChange } }) => (
+              <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                 <Input
-                type="password"
+                  type={showPassword ? "text" : "password"}
                   value={value}
                   onChange={onChange}
                   hasError={Boolean(errors.password)}
@@ -121,6 +124,18 @@ export const SignUpPasswordForm: React.FC<Props> = observer((props) => {
                   className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                   autoFocus
                 />
+                {showPassword ? (
+                  <EyeOff
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => setShowPassword(false)}
+                  />
+                ) : (
+                  <Eye
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => setShowPassword(true)}
+                  />
+                )}
+              </div>
             )}
           />
           <p className="text-onboarding-text-200 text-xs mt-2 pb-3">

web/components/instance/setup-form/sign-in-form.tsx

@@ -1,6 +1,6 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
-import { XCircle } from "lucide-react";
+import { Eye, EyeOff, XCircle } from "lucide-react";
 // hooks
 import { useUser } from "hooks/store";
 // ui
@@ -24,6 +24,8 @@ export interface IInstanceSetupEmailForm {
 
 export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
   const { handleNextStep } = props;
+  // states
+  const [showPassword, setShowPassword] = useState(false);
   // store hooks
   const { fetchCurrentUser } = useUser();
   // form info
@@ -107,14 +109,27 @@ export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
             required: "Password is required",
           }}
           render={({ field: { value, onChange } }) => (
+            <div className="relative flex items-center rounded-md bg-onboarding-background-200">
               <Input
-              type="password"
+                type={showPassword ? "text" : "password"}
                 value={value}
                 onChange={onChange}
                 hasError={Boolean(errors.password)}
                 placeholder="Enter password"
                 className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
               />
+              {showPassword ? (
+                <EyeOff
+                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  onClick={() => setShowPassword(false)}
+                />
+              ) : (
+                <Eye
+                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  onClick={() => setShowPassword(true)}
+                />
+              )}
+            </div>
           )}
         />
         <p className="pb-2 text-xs text-custom-text-200">

web/pages/accounts/reset-password.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { ReactElement, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
@@ -19,6 +19,8 @@ import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 import { checkEmailValidity } from "helpers/string.helper";
 // type
 import { NextPageWithLayout } from "lib/types";
+// icons
+import { Eye, EyeOff } from "lucide-react";
 
 type TResetPasswordFormValues = {
   email: string;
@@ -37,6 +39,8 @@ const ResetPasswordPage: NextPageWithLayout = () => {
   // router
   const router = useRouter();
   const { uidb64, token, email } = router.query;
+  // states
+  const [showPassword, setShowPassword] = useState(false);
   // toast
   const { setToastAlert } = useToast();
   // sign in redirection hook
@@ -117,8 +121,9 @@ const ResetPasswordPage: NextPageWithLayout = () => {
                   required: "Password is required",
                 }}
                 render={({ field: { value, onChange } }) => (
+                  <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                     <Input
-                    type="password"
+                      type={showPassword ? "text" : "password"}
                       value={value}
                       onChange={onChange}
                       hasError={Boolean(errors.password)}
@@ -126,6 +131,18 @@ const ResetPasswordPage: NextPageWithLayout = () => {
                       className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                       minLength={8}
                     />
+                    {showPassword ? (
+                      <EyeOff
+                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        onClick={() => setShowPassword(false)}
+                      />
+                    ) : (
+                      <Eye
+                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        onClick={() => setShowPassword(true)}
+                      />
+                    )}
+                  </div>
                 )}
               />
               <Button