Ivan - STAFF LOGIN - Fix issues and improve frontend login [skip ci]

client/src/app/App.js

@@ -45,7 +45,7 @@ class App extends React.Component {
             languageChanged: props.config.language !== this.props.config.language,
             loggedIn: !_.includes(props.location.pathname, '/dashboard') && props.session.logged,
             loggedOut: _.includes(props.location.pathname, '/dashboard') && !props.session.logged,
-            loggedInStaff: !_.includes(props.location.pathname, '/admin/panel') && props.session.staff,
+            loggedInStaff: !_.includes(props.location.pathname, '/admin/panel') && props.session.logged && props.session.staff,
             loggedOutStaff: _.includes(props.location.pathname, '/admin/panel') && !props.session.logged
         };
 

client/src/app/admin/admin-login-page.js

@@ -8,12 +8,14 @@ import SessionActions from 'actions/session-actions';
 import Form from 'core-components/form';
 import FormField from 'core-components/form-field';
 import SubmitButton from 'core-components/submit-button';
+import Message from 'core-components/message';
+import Widget from 'core-components/widget';
 
 class AdminLoginPage extends React.Component {
     render() {
         return (
             <div className="admin-login-page">
-                <div className="admin-login-page__content">
+                <Widget className="admin-login-page__content">
                     <div className="admin-login-page__image"><img width="100%" src="/images/logo.png" alt="OpenSupports Admin Panel"/></div>
                     <div className="admin-login-page__login-form">
                         <Form onSubmit={this.onSubmit.bind(this)} loading={this.props.session.pending}>
@@ -22,11 +24,26 @@ class AdminLoginPage extends React.Component {
                             <SubmitButton>{i18n('LOG_IN')}</SubmitButton>
                         </Form>
                     </div>
-                </div>
+                    {this.renderMessage()}
+                </Widget>
             </div>
         );
     }
 
+    renderMessage() {
+        let message = null;
+
+        if(this.props.session.failed) {
+            message = (
+                <Message className="admin-login-page__error" type="error">
+                    {i18n('EMAIL_OR_PASSWORD')}
+                </Message>
+            );
+        }
+
+        return message;
+    }
+
     onSubmit(formState) {
         this.props.dispatch(SessionActions.login(_.extend({}, formState, {
             staff: true

client/src/app/admin/admin-login-page.scss

@@ -5,11 +5,7 @@
 
     &__content {
         margin: 0 auto;
-        display: inline-block;
-        background-color: white;
         padding: 40px;
-        border-radius: 4px;
-        text-align: center;
     }
 
     &__image {
@@ -21,4 +17,8 @@
         margin: 0 auto;
         display: inline-block;
     }
+
+    &__error {
+        margin-top: 30px;
+    }
 }

client/src/app/admin/panel/admin-panel-staff-widget.js

@@ -4,6 +4,7 @@ import {connect}  from 'react-redux';
 
 import i18n from 'lib-app/i18n';
 import Button from 'core-components/button';
+import SessionActions from 'actions/session-actions';
 
 class AdminPanelStaffWidget extends React.Component {
 
@@ -17,7 +18,7 @@ class AdminPanelStaffWidget extends React.Component {
                             {i18n('MY_ACCOUNT')}
                         </Button>
                         <span className="admin-panel-staff-widget__action-separator">|</span>
-                        <Button className="admin-panel-staff-widget__action" type="link" route={{to:'/signup'}} >
+                        <Button className="admin-panel-staff-widget__action" type="link" onClick={this.closeSession.bind(this)}>
                             {i18n('CLOSE_SESSION')}
                         </Button>
                     </div>
@@ -38,6 +39,10 @@ class AdminPanelStaffWidget extends React.Component {
 
         return classNames(classes);
     }
+
+    closeSession() {
+        this.props.dispatch(SessionActions.logout());
+    }
 }
 
 export default connect((store) => {

client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js

@@ -20,7 +20,6 @@ class DashboardEditProfilePage extends React.Component {
         messagePass:''
     };
 
-
     render() {
         return (
             <div className="edit-profile-page">

client/src/data/languages/en.js

@@ -57,6 +57,7 @@ export default {
     'FILTERS_CUSTOM_FIELDS': 'Filters and Custom Fields',
 
     //ERRORS
+    'EMAIL_OR_PASSWORD': 'Email or password invalid',
     'EMAIL_NOT_EXIST': 'Email does not exist',
     'ERROR_EMPTY': 'Invalid value',
     'ERROR_PASSWORD': 'Invalid password',