Refactoring login module

Author: webdevstar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cezerin",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Cezerin allow you to create online store with full-stack JavaScript. https://cezerin.com",
   "keywords": [
     "cezerin",
@@ -55,7 +55,7 @@
     "body-parser": "^1.16.1",
     "cezerin-client": "^0.4.38",
     "cookie-parser": "^1.4.3",
-    "css-loader": "^0.26.4",
+    "css-loader": "^0.28.0",
     "express": "^4.15.1",
     "express-jwt": "^5.1.0",
     "extract-text-webpack-plugin": "^2.1.0",
@@ -68,30 +68,30 @@
     "jsonwebtoken": "^7.3.0",
     "lru-cache": "^4.0.2",
     "material-ui": "^0.17.1",
-    "moment": "^2.16.0",
+    "moment": "^2.18.1",
     "mongodb": "^2.2.25",
-    "nodemailer": "^3.1.5",
+    "nodemailer": "^3.1.8",
     "nodemailer-smtp-transport": "^2.7.2",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
-    "react-dropzone": "^3.12.0",
-    "react-helmet": "^4.0.0",
+    "react-dropzone": "^3.12.2",
+    "react-helmet": "^5.0.2",
     "react-redux": "^5.0.3",
-    "react-router": "^3.0.2",
+    "react-router": "^3.0.3",
     "react-router-redux": "^4.0.8",
-    "react-sortable-hoc": "^0.5.0",
+    "react-sortable-hoc": "^0.6.1",
     "react-tap-event-plugin": "^2.0.1",
     "react-tinymce": "^0.5.1",
     "redux": "^3.5.2",
-    "redux-form": "^6.5.0",
-    "redux-form-material-ui": "^4.1.0",
+    "redux-form": "^6.6.1",
+    "redux-form-material-ui": "^4.1.3",
     "redux-thunk": "^2.2.0",
     "response-time": "^2.3.2",
     "script-ext-html-webpack-plugin": "^1.7.1",
     "slug": "^0.9.1",
     "theme": "file:themes/current",
     "ua-parser-js": "^0.7.12",
-    "webpack": "^2.2.1",
+    "webpack": "^2.3.2",
     "winston": "^2.3.1"
   },
   "devDependencies": {

public/admin-assets/css/style.css

@@ -1,12 +1,15 @@
-html, body { height: 100%; margin: 0; padding: 0; background-color: #F9F9F9;}
+html, body { height: 100%; margin: 0; padding: 0; background-color: #F9F9F9; box-sizing: border-box;}
 
 #app, #container { height: 100%; }
 #bodyContainer { overflow: hidden; }
 
 .scroll { overflow: auto;}
 .col-full-height { height: 100%; }
 
-* { font-family: Roboto, sans-serif;}
+body, button, input, select, textarea {
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+
 .row--no-gutter {
    margin-left: 0;
    margin-right: 0;

public/assets/images/placeholder.png

@@ -157,7 +157,7 @@
     window.addEventListener('load', resizeElements);
   </script>
   <link href="/admin-assets/css/flexboxgrid.min.css" rel="stylesheet" type="text/css" />
-  <link href="/admin-assets/css/material.min.css" rel="stylesheet" type="text/css" />
+  <!-- <link href="/admin-assets/css/material.min.css" rel="stylesheet" type="text/css" /> -->
   <link href="/admin-assets/css/style.css" rel="stylesheet" type="text/css" />
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&subset=cyrillic" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

src/admin/client/index.html

@@ -1,24 +1,13 @@
 import React from 'react'
 import Login from 'modules/app/login'
 
-// import {deepPurple500} from 'material-ui/styles/colors';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
-import getMuiTheme from 'material-ui/styles/getMuiTheme';
 
-const muiTheme = getMuiTheme({
-  palette: {
-    // textColor: deepPurple500,
-  },
-  appBar: {
-    //height: 50,
-  },
-});
-
-export default () => (
-  <MuiThemeProvider muiTheme={muiTheme}>
+export default() => (
+  <MuiThemeProvider>
     <div className="row col-full-height center-xs middle-xs">
-      <div className="col-xs-10 col-sm-6 col-md-5 col-lg-4">
-        <Login />
+      <div className="col-xs-12 col-sm-8 col-md-6 col-lg-4">
+        <Login/>
       </div>
     </div>
   </MuiThemeProvider>

src/admin/client/layouts/login.js

@@ -1,4 +1,3 @@
-import { push } from 'react-router-redux';
 import api from 'lib/api';
 import settings from 'lib/settings';
 import * as t from './actionTypes'
@@ -7,9 +6,9 @@ const requestAuthorize = () => ({
   type: t.AUTHORIZE_REQUEST
 });
 
-const receiveAuthorize = (sent, error) => ({
+const receiveAuthorize = (emailIsSent, error) => ({
   type: t.AUTHORIZE_RECEIVE,
-  sent,
+  emailIsSent,
   error
 });
 

src/admin/client/modules/app/login/actions.js

@@ -27,14 +27,14 @@ const Form = (props) => {
     pristine,
     submitting,
     isFetching,
-    sentAuth,
+    emailIsSent,
     errorAuth
   } = props
 
   var response = <span className={style.noResponse}>{messages.messages_loading}</span>;
-  if (sentAuth) {
+  if (emailIsSent) {
     response = <span className={style.successResponse}>{messages.login_linkSent}</span>;
-  } else if(sentAuth === false && errorAuth) {
+  } else if(emailIsSent === false && errorAuth) {
     response = <span className={style.errorResponse}>{errorAuth}</span>;
   }
 
@@ -45,7 +45,7 @@ const Form = (props) => {
         <div className={style.input}>
           <Field name="email" component={TextField} label={messages.login_email} fullWidth={true} inputStyle={{textAlign:'center'}} hintStyle={{textAlign:'center', width: '100%'}} hintText={messages.login_hint}/>
         </div>
-        <RaisedButton type="submit" label={messages.login_loginButton} primary={true} fullWidth={true} disabled={pristine || submitting || isFetching || sentAuth}/>
+        <RaisedButton type="submit" label={messages.login_loginButton} primary={true} fullWidth={true} disabled={pristine || submitting || isFetching || emailIsSent}/>
         <div className={style.response}>
           {response}
         </div>

src/admin/client/modules/app/login/components/form.js

@@ -1,5 +1,5 @@
 .login {
-  margin: 20px;
+  margin: 10px;
   padding: 30px;
   text-align: center;
 }
@@ -31,7 +31,7 @@
   font-size: 32px;
   font-weight: 200;
   text-transform: uppercase;
-  padding: 50px;
+  padding: 30px 0;
 }
 
 .input {

src/admin/client/modules/app/login/components/style.css

@@ -5,7 +5,7 @@ import Form from './components/form'
 const mapStateToProps = (state) => {
   return {
     isFetching: state.auth.isFetching,
-    sentAuth: state.auth.sent,
+    emailIsSent: state.auth.emailIsSent,
     errorAuth: state.auth.error
   }
 }

src/admin/client/modules/app/login/index.js

@@ -3,7 +3,7 @@ import * as t from './actionTypes'
 const initialState = {
 	isFetching: false,
 	isAuthorized: false,
-	sent: false,
+	emailIsSent: false,
 	error: null
 };
 
@@ -13,21 +13,21 @@ export default(state = initialState, action) => {
 			return Object.assign({}, state, {
 				isFetching: true,
 				isAuthorized: false,
-				sent: false,
+				emailIsSent: false,
 				error: null
 			});
 		case t.AUTHORIZE_RECEIVE:
 			return Object.assign({}, state, {
 				isFetching: false,
 				isAuthorized: false,
-				sent: action.sent,
+				emailIsSent: action.emailIsSent,
 				error: action.error
 			});
 		case t.AUTHORIZE_FAILURE:
 			return Object.assign({}, state, {
 				isFetching: false,
 				isAuthorized: false,
-				sent: false,
+				emailIsSent: false,
 				error: action.error
 			});
 		default: