Update installation email settings, add languages

client/src/app-components/modal-container.js

@@ -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)}/>
         );
     }
 

client/src/app-components/popup-message.js

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

client/src/app-components/popup-message.scss

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

client/src/app/admin/panel/settings/admin-panel-email-settings.js

@@ -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'),

client/src/app/install/install-step-5-settings.js

@@ -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}}/>
+                        <FormField name="smtp-pass" label={i18n('SMTP_PASSWORD')} fieldProps={{size: 'large', password: true}}/>
-                        <Button className="install-step-5__test-connection" size="medium" onClick={this.onTestSMTPClick.bind(this)}>
+                        <SubmitButton className="install-step-5__test-connection" size="medium" onClick={this.onTestSMTPClick.bind(this)} disabled={this.state.loading}>
                             {i18n('TEST_SMTP_CONNECTION')}
-                        </Button>
+                        </SubmitButton>
-                        {this.renderMessageSMTP()}
                     </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}))
+        }).then(() => PopupMessage.open({
-            .catch(() => this.setState({smtpConnection: false}));
+            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) {

client/src/core-components/modal.js

@@ -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={this.getClass()} style={{opacity: animation.fade}} onClick={this.onModalClick.bind(this)}>
-                <div className="modal__content" style={{transform: 'scale(' + animation.scale + ')'}}>
+                <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;

client/src/reducers/modal-reducer.js

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