1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-16 07:08:55 +00:00

['settings' page] WebDav Password: redesigned the 'update password' dialog; fixup & improvement

This commit is contained in:
llj
2022-02-17 15:30:06 +08:00
parent 7ff103f69c
commit 57921f1b11
5 changed files with 30 additions and 31 deletions

View File

@@ -269,19 +269,19 @@ class GenerateShareLink extends React.Component {
// validate password // validate password
if (isShowPasswordInput) { if (isShowPasswordInput) {
if (password.length === 0) { if (password.length === 0) {
this.setState({errorInfo: 'Please enter password'}); this.setState({errorInfo: gettext('Please enter a password.')});
return false; return false;
} }
if (password.length < shareLinkPasswordMinLength) { if (password.length < shareLinkPasswordMinLength) {
this.setState({errorInfo: 'Password is too short'}); this.setState({errorInfo: gettext('The password is too short.')});
return false; return false;
} }
if (password !== passwdnew) { if (password !== passwdnew) {
this.setState({errorInfo: 'Passwords don\'t match'}); this.setState({errorInfo: gettext('Passwords don\'t match')});
return false; return false;
} }
if (Utils.getStrengthLevel(password) < shareLinkPasswordStrengthLevel) { 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; return false;
} }
} }
@@ -371,9 +371,9 @@ class GenerateShareLink extends React.Component {
return <Loading />; return <Loading />;
} }
let passwordLengthTip = gettext('(at least {passwordLength} characters and has {shareLinkPasswordStrengthLevel} of the following: num, upper letter, lower letter and other symbols)'); let passwordLengthTip = gettext('(at least {passwordMinLength} characters and includes {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols)');
passwordLengthTip = passwordLengthTip.replace('{passwordLength}', shareLinkPasswordMinLength) passwordLengthTip = passwordLengthTip.replace('{passwordMinLength}', shareLinkPasswordMinLength)
.replace('{shareLinkPasswordStrengthLevel}', shareLinkPasswordStrengthLevel); .replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel);
const { userPerm } = this.props; const { userPerm } = this.props;
const { isCustomPermission } = Utils.getUserPermission(userPerm); const { isCustomPermission } = Utils.getUserPermission(userPerm);

View File

@@ -151,11 +151,11 @@ class GenerateUploadLink extends React.Component {
// check password params // check password params
if (showPasswordInput) { if (showPasswordInput) {
if (password.length === 0) { if (password.length === 0) {
this.setState({errorInfo: gettext('Please enter password')}); this.setState({errorInfo: gettext('Please enter a password.')});
return false; return false;
} }
if (password.length < shareLinkPasswordMinLength) { if (password.length < shareLinkPasswordMinLength) {
this.setState({errorInfo: gettext('Password is too short')}); this.setState({errorInfo: gettext('The password is too short.')});
return false; return false;
} }
if (password !== passwordnew) { if (password !== passwordnew) {
@@ -163,7 +163,7 @@ class GenerateUploadLink extends React.Component {
return false; return false;
} }
if (Utils.getStrengthLevel(password) < shareLinkPasswordStrengthLevel) { 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; return false;
} }
} }
@@ -267,9 +267,9 @@ class GenerateUploadLink extends React.Component {
const { isSendLinkShown } = this.state; 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)'); let passwordLengthTip = gettext('(at least {passwordMinLength} characters and includes {passwordStrengthLevel} of the following: number, upper letter, lower letter and other symbols)');
passwordLengthTip = passwordLengthTip.replace('{passwordLength}', shareLinkPasswordMinLength) passwordLengthTip = passwordLengthTip.replace('{passwordMinLength}', shareLinkPasswordMinLength)
.replace('{shareLinkPasswordStrengthLevel}', shareLinkPasswordStrengthLevel); .replace('{passwordStrengthLevel}', shareLinkPasswordStrengthLevel);
if (this.state.sharedUploadInfo) { if (this.state.sharedUploadInfo) {
let sharedUploadInfo = this.state.sharedUploadInfo; let sharedUploadInfo = this.state.sharedUploadInfo;

View File

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import { Modal, ModalHeader, ModalBody, ModalFooter, Alert, Button, Input, InputGroup, InputGroupAddon } from 'reactstrap'; import { Modal, ModalHeader, ModalBody, ModalFooter, Alert, Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
import { gettext } from '../../utils/constants'; import { gettext } from '../../utils/constants';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
const { webdavSecretMinLength, webdavSecretStrengthLevel } = window.app.pageOptions;
const propTypes = { const propTypes = {
password: PropTypes.string.isRequired, password: PropTypes.string.isRequired,
@@ -11,31 +10,33 @@ const propTypes = {
toggle: PropTypes.func.isRequired toggle: PropTypes.func.isRequired
}; };
const { webdavSecretMinLength, webdavSecretStrengthLevel } = window.app.pageOptions;
class UpdateWebdavPassword extends Component { class UpdateWebdavPassword extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
errorInfo: '',
password: this.props.password, password: this.props.password,
isPasswordVisible: false, isPasswordVisible: false,
btnDisabled: false btnDisabled: false,
errMsg: ''
}; };
} }
submit = () => { submit = () => {
if (this.state.password.length === 0) { if (this.state.password.length === 0) {
this.setState({errorInfo: 'Please enter password'}); this.setState({errMsg: gettext('Please enter a password.')});
return false; return false;
} }
if (this.state.password.length < webdavSecretMinLength) { if (this.state.password.length < webdavSecretMinLength) {
this.setState({errorInfo: 'Password is too short'}); this.setState({errMsg: gettext('The password is too short.')});
return false; return false;
} }
if (Utils.getStrengthLevel(this.state.password) < webdavSecretStrengthLevel) { 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; return false;
} }
@@ -43,12 +44,11 @@ class UpdateWebdavPassword extends Component {
btnDisabled: true btnDisabled: true
}); });
this.props.updatePassword(this.state.password); this.props.updatePassword(this.state.password.trim());
} }
handleInputChange = (e) => { handleInputChange = (e) => {
let passwd = e.target.value.trim(); this.setState({password: e.target.value});
this.setState({password: passwd});
} }
togglePasswordVisible = () => { togglePasswordVisible = () => {
@@ -67,24 +67,23 @@ class UpdateWebdavPassword extends Component {
render() { render() {
const { toggle } = this.props; 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)'); 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);
passwordLengthTip = passwordLengthTip.replace('{passwordLength}', webdavSecretMinLength)
.replace('{shareLinkPasswordStrengthLevel}', webdavSecretStrengthLevel);
return ( return (
<Modal centered={true} isOpen={true} toggle={toggle}> <Modal centered={true} isOpen={true} toggle={toggle}>
<ModalHeader toggle={toggle}>{gettext('WebDav Password')}</ModalHeader> <ModalHeader toggle={toggle}>{gettext('WebDav Password')}</ModalHeader>
<span className="tip">{passwordLengthTip}</span>
<ModalBody> <ModalBody>
<InputGroup className=""> <InputGroup>
<Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/> <Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/>
<InputGroupAddon addonType="append"> <InputGroupAddon addonType="append">
<Button onClick={this.togglePasswordVisible}><i className={`fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button> <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> <Button onClick={this.generatePassword}><i className="fas fa-magic"></i></Button>
</InputGroupAddon> </InputGroupAddon>
</InputGroup> </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> </ModalBody>
<ModalFooter> <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="secondary" onClick={toggle}>{gettext('Cancel')}</Button>
<Button color="primary" onClick={this.submit} disabled={this.state.btnDisabled}>{gettext('Submit')}</Button> <Button color="primary" onClick={this.submit} disabled={this.state.btnDisabled}>{gettext('Submit')}</Button>
</ModalFooter> </ModalFooter>

View File

@@ -6,7 +6,7 @@ import { Utils } from '../../utils/utils';
import toaster from '../toast'; import toaster from '../toast';
import UpdateWebdavPassword from '../dialog/update-webdav-password'; import UpdateWebdavPassword from '../dialog/update-webdav-password';
const { webdavPasswd, webdavSecretMinLength, webdavSecretStrengthLevel} = window.app.pageOptions; const { webdavPasswd } = window.app.pageOptions;
class WebdavPassword extends React.Component { class WebdavPassword extends React.Component {

View File

@@ -27,10 +27,10 @@ window.app.pageOptions = {
enableGetAuthToken: {% if ENABLE_GET_AUTH_TOKEN_BY_SESSION %} true {% else %} false {% endif %}, enableGetAuthToken: {% if ENABLE_GET_AUTH_TOKEN_BY_SESSION %} true {% else %} false {% endif %},
enableWebdavSecret: {% if ENABLE_WEBDAV_SECRET %} 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 %} {% if ENABLE_WEBDAV_SECRET %}
webdavPasswd: '{{ webdav_passwd|escapejs }}', webdavPasswd: '{{ webdav_passwd|escapejs }}',
webdavSecretMinLength: {{ WEBDAV_SECRET_MIN_LENGTH }},
webdavSecretStrengthLevel: {{ WEBDAV_SECRET_STRENGTH_LEVEL }},
{% endif %} {% endif %}
enableAddressBook: {% if ENABLE_ADDRESSBOOK_OPT_IN %} true {% else %} false {% endif %}, enableAddressBook: {% if ENABLE_ADDRESSBOOK_OPT_IN %} true {% else %} false {% endif %},