= (props) => {
required: "Password is required",
}}
render={({ field: { value, onChange, ref } }) => (
-
+
+
+ {showPassword ? (
+ setShowPassword(false)}
+ />
+ ) : (
+ setShowPassword(true)}
+ />
+ )}
+
)}
/>
diff --git a/web/components/account/sign-in-forms/password.tsx b/web/components/account/sign-in-forms/password.tsx
index fd4ccbf40..fe20d5b10 100644
--- a/web/components/account/sign-in-forms/password.tsx
+++ b/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 = 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,15 +158,28 @@ export const SignInPasswordForm: React.FC = observer((props) => {
required: "Password is required",
}}
render={({ field: { value, onChange } }) => (
-
+
+
+ {showPassword ? (
+ setShowPassword(false)}
+ />
+ ) : (
+ setShowPassword(true)}
+ />
+ )}
+
)}
/>
diff --git a/web/components/account/sign-up-forms/optional-set-password.tsx b/web/components/account/sign-up-forms/optional-set-password.tsx
index 38fdaeca1..db14f0ccb 100644
--- a/web/components/account/sign-up-forms/optional-set-password.tsx
+++ b/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) => {
const { email, handleSignInRedirection } = props;
// states
const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
+ const [showPassword, setShowPassword] = useState(false);
// toast alert
const { setToastAlert } = useToast();
// form info
@@ -119,16 +122,29 @@ export const SignUpOptionalSetPasswordForm: React.FC = (props) => {
required: "Password is required",
}}
render={({ field: { value, onChange } }) => (
-
+
+
+ {showPassword ? (
+ setShowPassword(false)}
+ />
+ ) : (
+ setShowPassword(true)}
+ />
+ )}
+
)}
/>
diff --git a/web/components/account/sign-up-forms/password.tsx b/web/components/account/sign-up-forms/password.tsx
index 6ff6753df..293e03ef8 100644
--- a/web/components/account/sign-up-forms/password.tsx
+++ b/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 = observer((props) => {
const { onSubmit } = props;
+ // states
+ const [showPassword, setShowPassword] = useState(false);
// toast alert
const { setToastAlert } = useToast();
// form info
@@ -112,15 +114,28 @@ export const SignUpPasswordForm: React.FC = observer((props) => {
required: "Password is required",
}}
render={({ field: { value, onChange } }) => (
-
+
+
+ {showPassword ? (
+ setShowPassword(false)}
+ />
+ ) : (
+ setShowPassword(true)}
+ />
+ )}
+
)}
/>
diff --git a/web/components/instance/setup-form/sign-in-form.tsx b/web/components/instance/setup-form/sign-in-form.tsx
index f34d807c9..c4a9de6a3 100644
--- a/web/components/instance/setup-form/sign-in-form.tsx
+++ b/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 = (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 = (props) => {
required: "Password is required",
}}
render={({ field: { value, onChange } }) => (
-
+
+
+ {showPassword ? (
+ setShowPassword(false)}
+ />
+ ) : (
+ setShowPassword(true)}
+ />
+ )}
+
)}
/>
diff --git a/web/pages/accounts/reset-password.tsx b/web/pages/accounts/reset-password.tsx
index 2b893d665..9854ec5bb 100644
--- a/web/pages/accounts/reset-password.tsx
+++ b/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,15 +121,28 @@ const ResetPasswordPage: NextPageWithLayout = () => {
required: "Password is required",
}}
render={({ field: { value, onChange } }) => (
-
+
+
+ {showPassword ? (
+ setShowPassword(false)}
+ />
+ ) : (
+ setShowPassword(true)}
+ />
+ )}
+
)}
/>