hide/show stored password

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>
             )}

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>

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;
   }
 
 }

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