You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@answer.apache.org by sh...@apache.org on 2025/01/22 02:47:17 UTC

(answer) branch dev updated (581f73c8 -> f8bef82a)

This is an automated email from the ASF dual-hosted git repository.

shuai pushed a change to branch dev
in repository https://gitbox.apache.org/repos/asf/answer.git


    from 581f73c8 chore: instance rand.Seed to rand.Source (#1233)
     new 013df362 feat: add password hide show logic for init server
     new f8bef82a refactor: refactor show password logic in init answer app

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 ui/pnpm-lock.yaml                                  |  2 +-
 .../pages/Install/components/FourthStep/index.tsx  | 54 +++++++++++++++-------
 2 files changed, 39 insertions(+), 17 deletions(-)


(answer) 01/02: feat: add password hide show logic for init server

Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

shuai pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/answer.git

commit 013df362caa2636b2903a5f93869775fb0b138de
Author: lihui <me...@lihui.net>
AuthorDate: Thu Jan 16 00:03:30 2025 +0800

    feat: add password hide show logic for init server
---
 ui/package.json                                    |  1 +
 ui/pnpm-lock.yaml                                  | 14 +++++-
 .../pages/Install/components/FourthStep/index.tsx  | 56 +++++++++++++++-------
 3 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 0e645d2e..da8588e6 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -39,6 +39,7 @@
     "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 32ce67e7..8aa2dffb 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -77,6 +77,9 @@ 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)
@@ -8176,7 +8179,7 @@ packages:
     dependencies:
       universalify: 2.0.0
     optionalDependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
 
   /jsonp@0.2.1:
     resolution: {integrity: sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==}
@@ -9913,6 +9916,15 @@ 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 65ffd9d5..066cd079 100644
--- a/ui/src/pages/Install/components/FourthStep/index.tsx
+++ b/ui/src/pages/Install/components/FourthStep/index.tsx
@@ -17,8 +17,9 @@
  * under the License.
  */
 
-import { FC, FormEvent } from 'react';
+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';
@@ -34,6 +35,8 @@ interface Props {
 const Index: FC<Props> = ({ visible, data, changeCallback, nextCallback }) => {
   const { t } = useTranslation('translation', { keyPrefix: 'install' });
 
+  const [showPassword, setShowPassword] = useState(false);
+
   const checkValidated = (): boolean => {
     let bol = true;
     const { site_name, site_url, contact_email, name, password, email } = data;
@@ -295,21 +298,42 @@ const Index: FC<Props> = ({ visible, data, changeCallback, nextCallback }) => {
 
       <Form.Group controlId="password" className="mb-3">
         <Form.Label>{t('admin_password.label')}</Form.Label>
-        <Form.Control
-          required
-          type="password"
-          value={data.password.value}
-          isInvalid={data.password.isInvalid}
-          onChange={(e) => {
-            changeCallback({
-              password: {
-                value: e.target.value,
-                isInvalid: false,
-                errorMsg: '',
-              },
-            });
-          }}
-        />
+        <div className="position-relative">
+          <Form.Control
+            required
+            type={showPassword ? 'text' : 'password'}
+            value={data.password.value}
+            isInvalid={data.password.isInvalid}
+            style={{ paddingRight: '45px' }}
+            onChange={(e) => {
+              changeCallback({
+                password: {
+                  value: e.target.value,
+                  isInvalid: false,
+                  errorMsg: '',
+                },
+              });
+            }}
+          />
+          <button
+            type="button"
+            className="position-absolute top-50 translate-middle-y bg-transparent border-0"
+            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} />
+            ) : (
+              <EyeSlash className="text-secondary" size={18} />
+            )}
+          </button>
+        </div>
         <Form.Text>{t('admin_password.text')}</Form.Text>
         <Form.Control.Feedback type="invalid">
           {data.password.errorMsg}


(answer) 02/02: refactor: refactor show password logic in init answer app

Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

shuai pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/answer.git

commit f8bef82acc4508578874da95df299dce24189b29
Author: lihui <me...@lihui.net>
AuthorDate: Mon Jan 20 23:17:00 2025 +0800

    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>