From c21a3e9bd7b556db01709e3cfaa43256efaf8694 Mon Sep 17 00:00:00 2001
From: lian <lian@seafile.com>
Date: Tue, 23 Nov 2021 12:09:08 +0800
Subject: [PATCH] hide/show stored password

---
 .../components/dialog/generate-share-link.js  | 12 ++++++++++-
 .../components/dialog/generate-upload-link.js | 20 +++++++++++++++++++
 frontend/src/models/upload-link.js            |  1 +
 seahub/api2/endpoints/upload_links.py         |  1 +
 4 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/dialog/generate-share-link.js b/frontend/src/components/dialog/generate-share-link.js
index 0a1e97fe22..9d5a3e7a13 100644
--- a/frontend/src/components/dialog/generate-share-link.js
+++ b/frontend/src/components/dialog/generate-share-link.js
@@ -56,6 +56,7 @@ class GenerateShareLink extends React.Component {
       expDate: null,
       password: '',
       passwdnew: '',
+      storedPasswordVisible: false,
       errorInfo: '',
       sharedLinkInfo: null,
       isNoticeMessageShow: false,
@@ -181,6 +182,12 @@ class GenerateShareLink extends React.Component {
     this.setState({passwdnew: passwd});
   }
 
+  toggleStoredPasswordVisible = () => {
+    this.setState({
+      storedPasswordVisible: !this.state.storedPasswordVisible
+    });
+  }
+
   setPermission = (e) => {
     this.setState({currentPermission: e.target.value});
   }
@@ -404,7 +411,10 @@ class GenerateShareLink extends React.Component {
               <FormGroup className="mb-0">
                 <dt className="text-secondary font-weight-normal">{gettext('Password:')}</dt>
                 <dd className="d-flex">
-                  <span>{sharedLinkInfo.password}</span>
+                  <div className="d-flex align-items-center">
+                    <input id="stored-password" className="border-0 mr-1" type="text" value={this.state.storedPasswordVisible ? sharedLinkInfo.password : '****************************************'} readOnly={true} size={Math.max(sharedLinkInfo.password.length, 10)} />
+                    <span tabIndex="0" role="button" aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')} onKeyDown={this.onIconKeyDown} onClick={this.toggleStoredPasswordVisible} className={`eye-icon fas ${this.state.storedPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></span>
+                  </div>
                 </dd>
               </FormGroup>
             )}
diff --git a/frontend/src/components/dialog/generate-upload-link.js b/frontend/src/components/dialog/generate-upload-link.js
index 4d75783ff3..c6cd1c4fef 100644
--- a/frontend/src/components/dialog/generate-upload-link.js
+++ b/frontend/src/components/dialog/generate-upload-link.js
@@ -46,6 +46,7 @@ class GenerateUploadLink extends React.Component {
       passwordVisible: false,
       password: '',
       passwordnew: '',
+      storedPasswordVisible: false,
       sharedUploadInfo: null,
       isSendLinkShown: false,
       isExpireChecked: !this.isExpireDaysNoLimit,
@@ -111,6 +112,12 @@ class GenerateUploadLink extends React.Component {
     });
   }
 
+  toggleStoredPasswordVisible = () => {
+    this.setState({
+      storedPasswordVisible: !this.state.storedPasswordVisible
+    });
+  }
+
   generateUploadLink = () => {
     let isValid = this.validateParamsInput();
     if (isValid) {
@@ -279,6 +286,19 @@ class GenerateUploadLink extends React.Component {
                 />
               </dd>
             </FormGroup>
+
+            {sharedUploadInfo.password && (
+              <FormGroup className="mb-0">
+                <dt className="text-secondary font-weight-normal">{gettext('Password:')}</dt>
+                <dd className="d-flex">
+                  <div className="d-flex align-items-center">
+                    <input id="stored-password" className="border-0 mr-1" type="text" value={this.state.storedPasswordVisible ? sharedUploadInfo.password : '****************************************'} readOnly={true} size={Math.max(sharedUploadInfo.password.length, 10)} />
+                    <span tabIndex="0" role="button" aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')} onKeyDown={this.onIconKeyDown} onClick={this.toggleStoredPasswordVisible} className={`eye-icon fas ${this.state.storedPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></span>
+                  </div>
+                </dd>
+              </FormGroup>
+            )}
+
             {sharedUploadInfo.expire_date && (
               <FormGroup className="mb-0">
                 <dt className="text-secondary font-weight-normal">{gettext('Expiration Date:')}</dt>
diff --git a/frontend/src/models/upload-link.js b/frontend/src/models/upload-link.js
index b7921d924f..ea01cec8cf 100644
--- a/frontend/src/models/upload-link.js
+++ b/frontend/src/models/upload-link.js
@@ -12,6 +12,7 @@ class UploadLink {
     this.view_cnt = object.view_cnt;
     this.expire_date = object.expire_date;
     this.is_expired = object.is_expired;
+    this.password = object.password;
   }
 
 }
diff --git a/seahub/api2/endpoints/upload_links.py b/seahub/api2/endpoints/upload_links.py
index 4357246a00..2d616350f0 100644
--- a/seahub/api2/endpoints/upload_links.py
+++ b/seahub/api2/endpoints/upload_links.py
@@ -75,6 +75,7 @@ def get_upload_link_info(uls):
     data['username'] = uls.username
     data['expire_date'] = expire_date
     data['is_expired'] = uls.is_expired()
+    data['password'] = uls.get_password()
 
     return data