tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update installation email settings, add languages

This commit is contained in:
Ivan Diaz 2019-01-12 01:28:23 -03:00
parent c7f489d988
commit 17e2dabeae
7 changed files with 72 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/app-components/modal-container.js
View File

@ -9,11 +9,12 @@ import Modal from 'core-components/modal';
class ModalContainer extends React.Component {
static openModal(content, noPadding) {
static openModal(content, noPadding, outsideClick=false) {
store.dispatch(
ModalActions.openModal({
content,
noPadding
noPadding,
outsideClick
})
);
}
@ -49,8 +50,9 @@ class ModalContainer extends React.Component {
}
renderModal() {
const {content, noPadding, outsideClick} = this.props.modal;
return (
<Modal content={this.props.modal.content} noPadding={this.props.modal.noPadding}/>
<Modal content={content} noPadding={noPadding} outsideClick={outsideClick} onOutsideClick={this.closeModal.bind(this)}/>
);
}

8
client/src/app-components/popup-message.js
View File

@ -18,17 +18,21 @@ class PopupMessage extends React.Component {
static open(props) {
ModalContainer.openModal(
<PopupMessage {...props}/>,
true,
true
);
}
componentDidMount() {
// this.refs.closeButton && this.refs.closeButton.focus();
this.refs.closeButton && this.refs.closeButton.focus();
}
render() {
return (
<Message {...this.props} className="popup-message"/>
<div className="popup-message">
<Message {...this.props} className="popup-message__message"/>
<Button className="popup-message__close-button" iconName="times" type="clean" ref="closeButton" onClick={this.closeModal.bind(this)}/>
</div>
);
}

16
client/src/app-components/popup-message.scss
View File

@ -1,3 +1,17 @@
@import "../scss/vars";
.popup-message {
width: 400px;
min-width: 500px;
position: relative;
&__close-button {
position: absolute;
top: 0;
right: 0;
color: $dark-grey;
&:focus {
outline: none;
color: $grey;
}
}
}

2
client/src/app/admin/panel/settings/admin-panel-email-settings.js
View File

@ -347,7 +347,7 @@ class AdminPanelEmailSettings extends React.Component {
data: this.parsePasswordField(form)
}).then(() => PopupMessage.open({
title: i18n('SETTINGS_UPDATED'),
children: successMessage,
children: i18n(successMessage),
type: 'success'
})).catch(response => PopupMessage.open({
title: i18n('ERROR_UPDATING_SETTINGS'),

53
client/src/app/install/install-step-5-settings.js
View File

@ -6,6 +6,7 @@ import history from 'lib-app/history';
import i18n from 'lib-app/i18n';
import API from 'lib-app/api-call';
import PopupMessage from 'app-components/popup-message';
import Button from 'core-components/button';
import Header from 'core-components/header';
import Form from 'core-components/form';
@ -17,7 +18,6 @@ class InstallStep5Settings extends React.Component {
state = {
loading: false,
smtpConnection: null,
form: {},
error: false,
errorMessage: ''
@ -31,17 +31,15 @@ class InstallStep5Settings extends React.Component {
<Form loading={this.state.loading} onSubmit={this.onSubmit.bind(this)} value={this.state.form} onChange={(form) => this.setState({form})}>
<FormField name="title" label={i18n('TITLE')} fieldProps={{size: 'large'}} required/>
<FormField className="install-step-5__attachments-field" name="allow-attachments" label={i18n('ALLOW_FILE_ATTACHMENTS')} field="checkbox" fieldProps={{size: 'large'}}/>
<FormField name="server-email" label={i18n('SERVER_EMAIL')} fieldProps={{size: 'large'}}/>
<FormField name="server-email" label={i18n('EMAIL_SERVER_ADDRESS')} fieldProps={{size: 'large'}} infoMessage={i18n('EMAIL_SERVER_ADDRESS_DESCRIPTION')}/>
<div className="install-step-5__smtp-block">
<Header title={i18n('SMTP_SERVER')} description={i18n('SMTP_SERVER_DESCRIPTION')} />
<FormField name="smtp-host" label={i18n('SMTP_SERVER')} fieldProps={{size: 'large'}}/>
<FormField name="smtp-port" label={i18n('PORT')} fieldProps={{size: 'small'}}/>
<FormField name="smtp-user" label={i18n('SMTP_USER')} fieldProps={{size: 'large'}}/>
<FormField name="smtp-password" label={i18n('SMTP_PASSWORD')} fieldProps={{size: 'large', password: true}}/>
<Button className="install-step-5__test-connection" size="medium" onClick={this.onTestSMTPClick.bind(this)}>
<FormField name="smtp-pass" label={i18n('SMTP_PASSWORD')} fieldProps={{size: 'large', password: true}}/>
<SubmitButton className="install-step-5__test-connection" size="medium" onClick={this.onTestSMTPClick.bind(this)} disabled={this.state.loading}>
{i18n('TEST_SMTP_CONNECTION')}
</Button>
{this.renderMessageSMTP()}
</SubmitButton>
</div>
<div className="install-step-5__buttons">
<SubmitButton className="install-step-5__next" size="medium" type="secondary">{i18n('NEXT')}</SubmitButton>
@ -66,36 +64,29 @@ class InstallStep5Settings extends React.Component {
return message;
}
renderMessageSMTP() {
let message = null;
if(this.state.smtpConnection !== null) {
if(this.state.smtpConnection) {
message = (
<Message className="install-step-5__smtp-message" type="success">
{i18n('SMTP_CONNECTION_SUCCESS')}
</Message>
);
} else {
message = (
<Message className="install-step-5__smtp-message" type="error">
{i18n('SMTP_CONNECTION_ERROR')}
</Message>
);
}
}
return message;
}
onTestSMTPClick(event) {
event.preventDefault();
this.setState({
loading: true
});
API.call({
path: '/system/test-smtp',
data: this.state.form
}).then(() => this.setState({smtpConnection: true}))
.catch(() => this.setState({smtpConnection: false}));
}).then(() => PopupMessage.open({
title: i18n('SETTINGS_UPDATED'),
children: i18n('SMTP_SUCCESS'),
type: 'success'
}))
.catch(result => PopupMessage.open({
title: i18n('ERROR_UPDATING_SETTINGS'),
children: result.message,
type: 'error'
}))
.then(() => this.setState({
loading: false
}));
}
onPreviousClick(event) {

20
client/src/core-components/modal.js
View File

@ -6,7 +6,9 @@ import {Motion, spring} from 'react-motion';
class Modal extends React.Component {
static propTypes = {
content: React.PropTypes.node,
noPadding: React.PropTypes.bool
noPadding: React.PropTypes.bool,
outsideClick: React.PropTypes.bool,
onOutsideClick: React.PropTypes.func
};
render() {
@ -32,8 +34,8 @@ class Modal extends React.Component {
renderModal(animation) {
return (
<div className={this.getClass()} style={{opacity: animation.fade}}>
<div className="modal__content" style={{transform: 'scale(' + animation.scale + ')'}}>
<div className={this.getClass()} style={{opacity: animation.fade}} onClick={this.onModalClick.bind(this)}>
<div className="modal__content" style={{transform: 'scale(' + animation.scale + ')'}} onClick={this.onModalContentClick.bind(this)}>
{this.props.content}
</div>
</div>
@ -48,6 +50,18 @@ class Modal extends React.Component {
return classNames(classes);
}
onModalClick() {
if(this.props.outsideClick) {
this.props.onOutsideClick();
}
}
onModalContentClick(event) {
if(this.props.outsideClick) {
event.stopPropagation();
}
}
}
export default Modal;

9
client/src/reducers/modal-reducer.js
View File

@ -8,7 +8,8 @@ class ModalReducer extends Reducer {
return {
opened: false,
noPadding: false,
content: null
content: null,
outsideClick: false,
};
}
@ -25,7 +26,8 @@ class ModalReducer extends Reducer {
return _.extend({}, state, {
opened: true,
content: payload.content,
noPadding: payload.noPadding || false
noPadding: payload.noPadding || false,
outsideClick: payload.outsideClick
});
}
@ -35,7 +37,8 @@ class ModalReducer extends Reducer {
return _.extend({}, state, {
opened: false,
content: null,
noPadding: false
noPadding: false,
outsideClick: false
});
}
}