binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1330] chore: show password toggle improvement (#4471)

Browse source 
* chore: show password toggle improvement

* fix: merge conflict
This commit is contained in:
Anmol Singh Bhatia 2024-05-17 15:51:34 +05:30 • committed by GitHub
parent 8d860396bd
commit 38f5ecbdf2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 60 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

24
web/components/onboarding/profile-setup.tsx
View file

@ -87,7 +87,10 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
const [isRemoving, setIsRemoving] = useState(false);
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const [showPassword, setShowPassword] = useState({
password: false,
retypePassword: false,
});
// hooks
const { resolvedTheme } = useTheme();
// store hooks
@ -112,6 +115,9 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
mode: "onChange",
});
const handleShowPassword = (key: keyof typeof showPassword) =>
setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
const handleSetPassword = async (password: string) => {
const token = await authService.requestCSRFToken().then((data) => data?.csrf_token);
await authService.setPassword(token, { password });
@ -415,7 +421,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
render={({ field: { value, onChange, ref } }) => (
<div className="relative flex items-center rounded-md">
<Input
type={showPassword ? "text" : "password"}
type={showPassword.password ? "text" : "password"}
name="password"
value={value}
onChange={onChange}
@ -426,15 +432,15 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
/>
{showPassword ? (
{showPassword.password ? (
<EyeOff
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(false)}
onClick={() => handleShowPassword("password")}
/>
) : (
<Eye
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(true)}
onClick={() => handleShowPassword("password")}
/>
)}
</div>
@ -458,7 +464,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
render={({ field: { value, onChange, ref } }) => (
<div className="relative flex items-center rounded-md">
<Input
type={showPassword ? "text" : "password"}
type={showPassword.retypePassword ? "text" : "password"}
name="confirm_password"
value={value}
onChange={onChange}
@ -467,15 +473,15 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
placeholder="Confirm password..."
className="w-full border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/>
{showPassword ? (
{showPassword.retypePassword ? (
<EyeOff
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(false)}
onClick={() => handleShowPassword("retypePassword")}
/>
) : (
<Eye
className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(true)}
onClick={() => handleShowPassword("retypePassword")}
/>
)}
</div>