thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
Prateek Shourya 2024-01-30 20:11:16 +05:30 committed by GitHub
parent 638c1e21c9
commit 817737b2c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 155 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,8 @@ import useToast from "hooks/use-toast";
import { Button, Input } from "@plane/ui"; import { Button, Input } from "@plane/ui";
// helpers // helpers
import { checkEmailValidity } from "helpers/string.helper"; import { checkEmailValidity } from "helpers/string.helper";
// icons
import { Eye, EyeOff } from "lucide-react";
type Props = { type Props = {
email: string; email: string;
@ -31,6 +33,7 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
const { email, handleSignInRedirection } = props; const { email, handleSignInRedirection } = props;
// states // states
const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false); const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
const [showPassword, setShowPassword] = useState(false);
// toast alert // toast alert
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
// form info // form info
@ -114,17 +117,30 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
required: "Password is required", required: "Password is required",
}} }}
render={({ field: { value, onChange, ref } }) => ( render={({ field: { value, onChange, ref } }) => (
<Input <div className="relative flex items-center rounded-md bg-onboarding-background-200">
type="password" <Input
value={value} type={showPassword ? "text" : "password"}
onChange={onChange} value={value}
ref={ref} onChange={onChange}
hasError={Boolean(errors.password)} ref={ref}
placeholder="Enter password" hasError={Boolean(errors.password)}
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400" placeholder="Enter password"
minLength={8} className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
autoFocus 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"> <p className="text-onboarding-text-200 text-xs mt-2 pb-3">

34
web/components/account/sign-in-forms/password.tsx
View File

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

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

@ -10,6 +10,8 @@ import { Button, Input } from "@plane/ui";
import { checkEmailValidity } from "helpers/string.helper"; import { checkEmailValidity } from "helpers/string.helper";
// constants // constants
import { ESignUpSteps } from "components/account"; import { ESignUpSteps } from "components/account";
// icons
import { Eye, EyeOff } from "lucide-react";
type Props = { type Props = {
email: string; email: string;
@ -34,6 +36,7 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
const { email, handleSignInRedirection } = props; const { email, handleSignInRedirection } = props;
// states // states
const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false); const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
const [showPassword, setShowPassword] = useState(false);
// toast alert // toast alert
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
// form info // form info
@ -119,16 +122,29 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
required: "Password is required", required: "Password is required",
}} }}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<Input <div className="relative flex items-center rounded-md bg-onboarding-background-200">
type="password" <Input
value={value} type={showPassword ? "text" : "password"}
onChange={onChange} value={value}
hasError={Boolean(errors.password)} onChange={onChange}
placeholder="Enter password" hasError={Boolean(errors.password)}
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400" placeholder="Enter password"
minLength={8} className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
autoFocus 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"> <p className="text-onboarding-text-200 text-xs mt-2 pb-3">

37
web/components/account/sign-up-forms/password.tsx
View File

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

35
web/components/instance/setup-form/sign-in-form.tsx
View File

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

37
web/pages/accounts/reset-password.tsx
View File

@ -1,4 +1,4 @@
import { ReactElement } from "react"; import { ReactElement, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Controller, useForm } from "react-hook-form"; 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"; import { checkEmailValidity } from "helpers/string.helper";
// type // type
import { NextPageWithLayout } from "lib/types"; import { NextPageWithLayout } from "lib/types";
// icons
import { Eye, EyeOff } from "lucide-react";
type TResetPasswordFormValues = { type TResetPasswordFormValues = {
email: string; email: string;
@ -37,6 +39,8 @@ const ResetPasswordPage: NextPageWithLayout = () => {
// router // router
const router = useRouter(); const router = useRouter();
const { uidb64, token, email } = router.query; const { uidb64, token, email } = router.query;
// states
const [showPassword, setShowPassword] = useState(false);
// toast // toast
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
// sign in redirection hook // sign in redirection hook
@ -117,15 +121,28 @@ const ResetPasswordPage: NextPageWithLayout = () => {
required: "Password is required", required: "Password is required",
}} }}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<Input <div className="relative flex items-center rounded-md bg-onboarding-background-200">
type="password" <Input
value={value} type={showPassword ? "text" : "password"}
onChange={onChange} value={value}
hasError={Boolean(errors.password)} onChange={onChange}
placeholder="Enter password" hasError={Boolean(errors.password)}
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400" placeholder="Enter password"
minLength={8} 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 <Button