refactor: replace emoji-based password visibility toggles with SVG icons using next/image components.

This commit is contained in:
pradeepkumar
2026-02-10 21:41:59 +05:30
parent 841b776dca
commit 692a91f6db

View File

@@ -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>