refactor: refactor show password logic in init answer app

ui/package.json

@@ -39,7 +39,6 @@
     "qs": "^6.11.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.0",
-    "react-bootstrap-icons": "^1.11.5",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
     "react-i18next": "^11.18.3",

ui/pnpm-lock.yaml

@@ -77,9 +77,6 @@ importers:
       react-bootstrap:
         specifier: ^2.10.0
         version: 2.10.0(@types/react@18.0.20)(react-dom@18.2.0)(react@18.2.0)
-      react-bootstrap-icons:
-        specifier: ^1.11.5
-        version: 1.11.5(react@18.2.0)
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
@@ -9916,15 +9913,6 @@ packages:
       semver: 5.7.1
     dev: true
 
-  /react-bootstrap-icons@1.11.5(react@18.2.0):
-    resolution: {integrity: sha512-eOhtFJMUqw98IJcfKJsSMZkFHCeNPTTwXZAe9V9d4mT22ARmbrISxPO9GmtWWuf72zQctLeZMGodX/q6wrbYYg==}
-    peerDependencies:
-      react: '>=16.8.6'
-    dependencies:
-      prop-types: 15.8.1
-      react: 18.2.0
-    dev: false
-
   /react-bootstrap@2.10.0(@types/react@18.0.20)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-87gRP69VAfeU2yKgp8RI3HvzhPNrnYIV2QNranYXataz3ef+k7OhvKGGdxQLQfUsQ2RTmlY66tn4pdFrZ94hNg==}
     peerDependencies:

ui/src/pages/Install/components/FourthStep/index.tsx

@@ -19,12 +19,12 @@
 
 import { FC, FormEvent, useState } from 'react';
 import { Form, Button } from 'react-bootstrap';
-import { Eye, EyeSlash } from 'react-bootstrap-icons';
 import { useTranslation } from 'react-i18next';
 
 import type { FormDataType } from '@/common/interface';
 import Pattern from '@/common/pattern';
 import Progress from '../Progress';
+import { Icon } from '@/components';
 
 interface Props {
   data: FormDataType;
@@ -317,20 +317,18 @@ const Index: FC<Props> = ({ visible, data, changeCallback, nextCallback }) => {
           />
           <button
             type="button"
-            className="position-absolute top-50 translate-middle-y bg-transparent border-0"
+            className="position-absolute top-50 translate-middle-y bg-transparent border-0 p-1"
             style={{
-              cursor: 'pointer',
               right: '12px',
-              padding: '4px',
             }}
             aria-label={showPassword ? t('hide_password') : t('show_password')}
             onMouseDown={() => setShowPassword(true)}
             onMouseUp={() => setShowPassword(false)}
             onMouseLeave={() => setShowPassword(false)}>
             {showPassword ? (
-              <Eye className="text-secondary" size={18} />
+              <Icon name="eye" className="text-secondary" size="18" />
             ) : (
-              <EyeSlash className="text-secondary" size={18} />
+              <Icon name="eye-slash" className="text-secondary" size="18" />
             )}
           </button>
         </div>