From f8bef82acc4508578874da95df299dce24189b29 Mon Sep 17 00:00:00 2001
From: lihui <me@lihui.net>
Date: Mon, 20 Jan 2025 23:17:00 +0800
Subject: [PATCH] refactor: refactor show password logic in init answer app

---
 ui/package.json                                      |  1 -
 ui/pnpm-lock.yaml                                    | 12 ------------
 ui/src/pages/Install/components/FourthStep/index.tsx | 10 ++++------
 3 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index da8588e6..0e645d2e 100644
--- a/ui/package.json
+++ b/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",
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index 8aa2dffb..4d122c58 100644
--- a/ui/pnpm-lock.yaml
+++ b/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:
diff --git a/ui/src/pages/Install/components/FourthStep/index.tsx b/ui/src/pages/Install/components/FourthStep/index.tsx
index 066cd079..ad95c4d3 100644
--- a/ui/src/pages/Install/components/FourthStep/index.tsx
+++ b/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>