diff --git a/frontend/src/components/dialog/generate-share-link.js b/frontend/src/components/dialog/generate-share-link.js
index 9d5a3e7a13..22f37d5027 100644
--- a/frontend/src/components/dialog/generate-share-link.js
+++ b/frontend/src/components/dialog/generate-share-link.js
@@ -269,19 +269,19 @@ class GenerateShareLink extends React.Component {
     // validate password
     if (isShowPasswordInput) {
       if (password.length === 0) {
-        this.setState({errorInfo: 'Please enter password'});
+        this.setState({errorInfo: gettext('Please enter a password.')});
         return false;
       }
       if (password.length < shareLinkPasswordMinLength) {
-        this.setState({errorInfo: 'Password is too short'});
+        this.setState({errorInfo: gettext('The password is too short.')});
         return false;
       }
       if (password !== passwdnew) {
-        this.setState({errorInfo: 'Passwords don\'t match'});
+        this.setState({errorInfo: gettext('Passwords don\'t match')});
         return false;
       }
       if (Utils.getStrengthLevel(password) < shareLinkPasswordStrengthLevel) {
-        this.setState({errorInfo: gettext('Password is too weak, should have at least {shareLinkPasswordStrengthLevel} of the following: num, upper letter, lower letter and other symbols'.replace('{shareLinkPasswordStrengthLevel}', shareLinkPasswordStrengthLevel))});
+        this.setState({errorInfo: gettext('The password is too weak. It should include at least {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols.').replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel)});
         return false;
       }
     }
@@ -371,9 +371,9 @@ class GenerateShareLink extends React.Component {
       return <Loading />;
     }
 
-    let passwordLengthTip = gettext('(at least {passwordLength} characters and has {shareLinkPasswordStrengthLevel} of the following: num, upper letter, lower letter and other symbols)');
-    passwordLengthTip = passwordLengthTip.replace('{passwordLength}', shareLinkPasswordMinLength)
-                                         .replace('{shareLinkPasswordStrengthLevel}', shareLinkPasswordStrengthLevel);
+    let passwordLengthTip = gettext('(at least {passwordMinLength} characters and includes {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols)');
+    passwordLengthTip = passwordLengthTip.replace('{passwordMinLength}', shareLinkPasswordMinLength)
+                                         .replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel);
 
     const { userPerm } = this.props;
     const { isCustomPermission } = Utils.getUserPermission(userPerm);
diff --git a/frontend/src/components/dialog/generate-upload-link.js b/frontend/src/components/dialog/generate-upload-link.js
index c6cd1c4fef..a701b88128 100644
--- a/frontend/src/components/dialog/generate-upload-link.js
+++ b/frontend/src/components/dialog/generate-upload-link.js
@@ -151,11 +151,11 @@ class GenerateUploadLink extends React.Component {
     // check password params
     if (showPasswordInput) {
       if (password.length === 0) {
-        this.setState({errorInfo: gettext('Please enter password')});
+        this.setState({errorInfo: gettext('Please enter a password.')});
         return false;
       }
       if (password.length < shareLinkPasswordMinLength) {
-        this.setState({errorInfo: gettext('Password is too short')});
+        this.setState({errorInfo: gettext('The password is too short.')});
         return false;
       }
       if (password !== passwordnew) {
@@ -163,7 +163,7 @@ class GenerateUploadLink extends React.Component {
         return false;
       }
       if (Utils.getStrengthLevel(password) < shareLinkPasswordStrengthLevel) {
-        this.setState({errorInfo: gettext('Password is too weak, should have at least {shareLinkPasswordStrengthLevel} of the following: num, upper letter, lower letter and other symbols'.replace('{shareLinkPasswordStrengthLevel}', shareLinkPasswordStrengthLevel))});
+        this.setState({errorInfo: gettext('The password is too weak. It should include at least {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols.').replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel)});
         return false;
       }
     }
@@ -267,9 +267,9 @@ class GenerateUploadLink extends React.Component {
 
     const { isSendLinkShown } = this.state;
 
-    let passwordLengthTip = gettext('(at least {passwordLength} characters and has {shareLinkPasswordStrengthLevel} of the following: num, upper letter, lower letter and other symbols)');
-    passwordLengthTip = passwordLengthTip.replace('{passwordLength}', shareLinkPasswordMinLength)
-                                         .replace('{shareLinkPasswordStrengthLevel}', shareLinkPasswordStrengthLevel);
+    let passwordLengthTip = gettext('(at least {passwordMinLength} characters and includes {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols)');
+    passwordLengthTip = passwordLengthTip.replace('{passwordMinLength}', shareLinkPasswordMinLength)
+                                         .replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel);
 
     if (this.state.sharedUploadInfo) {
       let sharedUploadInfo = this.state.sharedUploadInfo;
diff --git a/frontend/src/components/dialog/update-webdav-password.js b/frontend/src/components/dialog/update-webdav-password.js
index be12939565..2d5fc24983 100644
--- a/frontend/src/components/dialog/update-webdav-password.js
+++ b/frontend/src/components/dialog/update-webdav-password.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Alert, Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
-const { webdavSecretMinLength, webdavSecretStrengthLevel } = window.app.pageOptions;
 
 const propTypes = {
   password: PropTypes.string.isRequired,
@@ -11,31 +10,33 @@ const propTypes = {
   toggle: PropTypes.func.isRequired
 };
 
+const { webdavSecretMinLength, webdavSecretStrengthLevel } = window.app.pageOptions;
+
 class UpdateWebdavPassword extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      errorInfo: '',
       password: this.props.password,
       isPasswordVisible: false,
-      btnDisabled: false
+      btnDisabled: false,
+      errMsg: ''
     };
   }
 
   submit = () => {
 
     if (this.state.password.length === 0) {
-      this.setState({errorInfo: 'Please enter password'});
+      this.setState({errMsg: gettext('Please enter a password.')});
       return false;
     }
     if (this.state.password.length < webdavSecretMinLength) {
-      this.setState({errorInfo: 'Password is too short'});
+      this.setState({errMsg: gettext('The password is too short.')});
       return false;
     }
 
     if (Utils.getStrengthLevel(this.state.password) < webdavSecretStrengthLevel) {
-      this.setState({errorInfo: gettext('Password is too weak, should have at least {webdavSecretStrengthLevel} of the following: num, upper letter, lower letter and other symbols'.replace('{webdavSecretStrengthLevel}', webdavSecretStrengthLevel))});
+      this.setState({errMsg: gettext('The password is too weak. It should include at least {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols.').replace('{passwordStrengthLevel}', webdavSecretStrengthLevel)});
       return false;
     }
 
@@ -43,12 +44,11 @@ class UpdateWebdavPassword extends Component {
       btnDisabled: true
     });
 
-    this.props.updatePassword(this.state.password);
+    this.props.updatePassword(this.state.password.trim());
   }
 
   handleInputChange = (e) => {
-    let passwd = e.target.value.trim();
-    this.setState({password: passwd});
+    this.setState({password: e.target.value});
   }
 
   togglePasswordVisible = () => {
@@ -67,24 +67,23 @@ class UpdateWebdavPassword extends Component {
 
   render() {
     const { toggle } = this.props;
-    let passwordLengthTip = gettext('(at least {passwordLength} characters and has {shareLinkPasswordStrengthLevel} of the following: num, upper letter, lower letter and other symbols)');
-    passwordLengthTip = passwordLengthTip.replace('{passwordLength}', webdavSecretMinLength)
-                                         .replace('{shareLinkPasswordStrengthLevel}', webdavSecretStrengthLevel);
+    const passwordTip = gettext('(at least {passwordMinLength} characters and includes {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols)').replace('{passwordMinLength}', webdavSecretMinLength).replace('{passwordStrengthLevel}', webdavSecretStrengthLevel);
+
     return (
       <Modal centered={true} isOpen={true} toggle={toggle}>
         <ModalHeader toggle={toggle}>{gettext('WebDav Password')}</ModalHeader>
-        <span className="tip">{passwordLengthTip}</span>
         <ModalBody>
-          <InputGroup className="">
+          <InputGroup>
             <Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/>
             <InputGroupAddon addonType="append">
               <Button onClick={this.togglePasswordVisible}><i className={`fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
               <Button onClick={this.generatePassword}><i className="fas fa-magic"></i></Button>
             </InputGroupAddon>
           </InputGroup>
+          <p className="form-text text-muted m-0">{passwordTip}</p>
+          {this.state.errMsg && <Alert color="danger" className="m-0 mt-2">{gettext(this.state.errMsg)}</Alert>}
         </ModalBody>
         <ModalFooter>
-          {this.state.errorInfo && <Alert color="danger" className="mt-2">{gettext(this.state.errorInfo)}</Alert>}
           <Button color="secondary" onClick={toggle}>{gettext('Cancel')}</Button>
           <Button color="primary" onClick={this.submit} disabled={this.state.btnDisabled}>{gettext('Submit')}</Button>
         </ModalFooter>
diff --git a/frontend/src/components/user-settings/webdav-password.js b/frontend/src/components/user-settings/webdav-password.js
index 92667e5690..a8c2983e73 100644
--- a/frontend/src/components/user-settings/webdav-password.js
+++ b/frontend/src/components/user-settings/webdav-password.js
@@ -6,7 +6,7 @@ import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import UpdateWebdavPassword from '../dialog/update-webdav-password';
 
-const { webdavPasswd, webdavSecretMinLength, webdavSecretStrengthLevel} = window.app.pageOptions;
+const { webdavPasswd } = window.app.pageOptions;
 
 class WebdavPassword extends React.Component {
 
diff --git a/seahub/profile/templates/profile/set_profile_react.html b/seahub/profile/templates/profile/set_profile_react.html
index 3a3bc8eac4..09139697c2 100644
--- a/seahub/profile/templates/profile/set_profile_react.html
+++ b/seahub/profile/templates/profile/set_profile_react.html
@@ -27,10 +27,10 @@ window.app.pageOptions = {
   enableGetAuthToken: {% if ENABLE_GET_AUTH_TOKEN_BY_SESSION %} true {% else %} false {% endif %},
 
   enableWebdavSecret: {% if ENABLE_WEBDAV_SECRET %} true {% else %} false {% endif %},
-  webdavSecretMinLength: {{ WEBDAV_SECRET_MIN_LENGTH }},
-  webdavSecretStrengthLevel: {{ WEBDAV_SECRET_STRENGTH_LEVEL }},
   {% if ENABLE_WEBDAV_SECRET %}
   webdavPasswd: '{{ webdav_passwd|escapejs }}',
+  webdavSecretMinLength: {{ WEBDAV_SECRET_MIN_LENGTH }},
+  webdavSecretStrengthLevel: {{ WEBDAV_SECRET_STRENGTH_LEVEL }},
   {% endif %}
 
   enableAddressBook: {% if ENABLE_ADDRESSBOOK_OPT_IN %} true {% else %} false {% endif %},