From dd1172b57ef571d51f3f334e0517ce4795872c0f Mon Sep 17 00:00:00 2001
From: Selenium39 <895484122@qq.com>
Date: Mon, 24 Jul 2023 14:48:00 +0800
Subject: [PATCH] Perf: Support for password display and hiding (#636)

Co-authored-by: Selenium39 <selenium39@qq.com>
---
 web/app/install/installForm.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/web/app/install/installForm.tsx b/web/app/install/installForm.tsx
index 722abb4743..cdc519d56d 100644
--- a/web/app/install/installForm.tsx
+++ b/web/app/install/installForm.tsx
@@ -17,6 +17,7 @@ const InstallForm = () => {
   const [email, setEmail] = React.useState('')
   const [name, setName] = React.useState('')
   const [password, setPassword] = React.useState('')
+  const [showPassword, setShowPassword] = React.useState(false)
   const showErrorMessage = (message: string) => {
     Toast.notify({
       type: 'error',
@@ -108,12 +109,21 @@ const InstallForm = () => {
               <div className="mt-1 relative rounded-md shadow-sm">
                 <input
                   id="password"
-                  type='password'
+                  type={showPassword ? 'text' : 'password'}
                   value={password}
                   onChange={e => setPassword(e.target.value)}
                   placeholder={t('login.passwordPlaceholder') || ''}
                   className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm pr-10'}
                 />
+                <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500"
+                  >
+                    {showPassword ? '👀' : '😝'}
+                  </button>
+                </div>
               </div>
               <div className='mt-1 text-xs text-gray-500'>{t('login.error.passwordInvalid')}</div>