refactor: replace emoji-based password visibility toggles with SVG icons using next/image components.
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { TwoFactorSettings } from './TwoFactorSettings';
|
||||
import api from '@/services/api';
|
||||
|
||||
@@ -146,7 +147,12 @@ export function PasswordSecurityForm({ onSave }: PasswordSecurityFormProps) {
|
||||
onClick={() => toggleShowPassword('current')}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
|
||||
>
|
||||
{showPasswords.current ? '🙈' : '👁️'}
|
||||
<Image
|
||||
src={showPasswords.current ? '/assets/icons/eye-off-icon.svg' : '/assets/icons/eye-icon.svg'}
|
||||
alt={showPasswords.current ? 'Hide password' : 'Show password'}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -169,7 +175,12 @@ export function PasswordSecurityForm({ onSave }: PasswordSecurityFormProps) {
|
||||
onClick={() => toggleShowPassword('new')}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
|
||||
>
|
||||
{showPasswords.new ? '🙈' : '👁️'}
|
||||
<Image
|
||||
src={showPasswords.new ? '/assets/icons/eye-off-icon.svg' : '/assets/icons/eye-icon.svg'}
|
||||
alt={showPasswords.new ? 'Hide password' : 'Show password'}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[11px] text-[#00293D]/50 font-serif mt-1">
|
||||
@@ -195,7 +206,12 @@ export function PasswordSecurityForm({ onSave }: PasswordSecurityFormProps) {
|
||||
onClick={() => toggleShowPassword('confirm')}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
|
||||
>
|
||||
{showPasswords.confirm ? '🙈' : '👁️'}
|
||||
<Image
|
||||
src={showPasswords.confirm ? '/assets/icons/eye-off-icon.svg' : '/assets/icons/eye-icon.svg'}
|
||||
alt={showPasswords.confirm ? 'Hide password' : 'Show password'}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user