use indentation for list items in error message

package.json

@@ -57,8 +57,9 @@
     "react": "^15.5.4",
     "react-cookie": "^2.1.2",
     "react-data-components": "^1.1.1",
+    "react-dialog": "^1.0.2",
     "react-dom": "^15.5.4",
-    "react-draggable": "^3.0.5",
+    "react-draggable": "^2.2.6",
     "react-geosuggest": "^2.5.0",
     "react-geosuggest-sw": "^1.4.13",
     "react-google-maps": "^7.2.0",
@@ -67,8 +68,10 @@
     "react-imgix": "^7.1.1",
     "react-jquery-datatables": "^0.7.1",
     "react-materialui-notifications": "^0.5.1",
+    "react-onclickoutside": "^5.10.0",
     "react-places-autocomplete": "^5.4.2",
     "react-redux": "^5.0.5",
+    "react-resizable": "^1.7.1",
     "react-router": "^3.0.4",
     "react-router-redux": "^4.0.8",
     "react-tap-event-plugin": "^2.0.1",

src/components/Header/NavRightList.js

@@ -4,6 +4,12 @@ import MenuItem from 'material-ui/MenuItem';
 import IconButton from 'material-ui/IconButton/IconButton';
 import { hashHistory } from 'react-router';
 
+import {
+  loggedUser,
+  visitReporter,
+} from 'utils/authorization';
+
+
 const ImgIconButtonStyle = {
   width: '60px',
   height: '60px'
@@ -48,20 +54,33 @@ class NavRightList extends React.Component {
             targetOrigin={{ horizontal: 'right', vertical: 'top' }}
             menuStyle={{ minWidth: '150px' }}
           >
-            <MenuItem
-              onTouchTap={(e) => this.handleChange(e, `/app/authorizedusers/${this.state.useruuid}`)}
-              primaryText="Profile"
-              style={{ fontSize: '14px', lineHeight: '48px' }}
-              innerDivStyle={listItemStyle}
-              leftIcon={<i className="material-icons">account_circle</i>}
-            />
-            <MenuItem
-              onTouchTap={(e) => this.handleChange(e, `/app/form/steppers/${this.state.useruuid}`)}
-              primaryText="Book Ride"
-              innerDivStyle={listItemStyle}
-              style={{ fontSize: '14px', lineHeight: '48px' }}
-              leftIcon={<i className="material-icons">mode_edit</i>}
-            />
+            {!loggedUser.anyOf(visitReporter) &&
+              <MenuItem
+                onTouchTap={(e) => this.handleChange(e, `/app/authorizedusers/${this.state.useruuid}`)}
+                primaryText="Profile"
+                style={{ fontSize: '14px', lineHeight: '48px' }}
+                innerDivStyle={listItemStyle}
+                leftIcon={<i className="material-icons">account_circle</i>}
+              />
+            }
+            {!loggedUser.anyOf(visitReporter) &&
+              <MenuItem
+                onTouchTap={(e) => this.handleChange(e, `/app/form/steppers/${this.state.useruuid}`)}
+                primaryText="Book Ride"
+                innerDivStyle={listItemStyle}
+                style={{ fontSize: '14px', lineHeight: '48px' }}
+                leftIcon={<i className="material-icons">mode_edit</i>}
+              />
+            }
+            {loggedUser.anyOf(visitReporter) &&
+              <MenuItem
+                onTouchTap={(e) => this.handleChange(e, `/app/form/visit/${this.state.useruuid}`)}
+                primaryText="Create Visit"
+                innerDivStyle={listItemStyle}
+                style={{ fontSize: '14px', lineHeight: '48px' }}
+                leftIcon={<i className="material-icons">mode_edit</i>}
+              />
+            }
             <MenuItem
               onTouchTap={(e) => this.handleChange(e, `/login`)}
               primaryText="Log Out"

src/components/Shared/ValidationErrorsInfoDialog.js

@@ -1,62 +1,68 @@
 import React, { Component } from 'react';
-import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
+import Dialog from './draggable-dialog';
+
+import './draggable-dialog/css/index.css';
+
+const defaultDialogHeight = 100; //px
+const dialogHeightPerLine = 25; //px
 
 export class ValidationErrorsInfoDialog extends React.Component {
-  constructor(props) {
-    super(props)
-    this.props = props;
-    this.state = {
+
+    state = {
       open: this.props.open,
     }
+  
+    componentWillReceiveProps(newProps){
+      this.setState({open: newProps.open});
+    }
+  
+    handleOpen = () => {
+      this.setState({ open: true });
+    };
+  
+    handleClose = () => {
+      this.setState({ open: false });
+      this.props.onDismiss();
+    };
+  
+    render() {
+
+      const actions = [
+        <FlatButton
+          label="Dismiss"
+          primary={true}
+          onClick={this.handleClose}
+        />,
+      ];
+  
+      return (
+        <div className="container">
+            {
+                this.state.open &&
+                <Dialog
+                    title={this.props.title ? this.props.title : 'Error'}
+                    isDraggable={this.props.draggable ? this.props.draggable : false}
+                    buttons={actions}
+                    hasCloseIcon={false}
+                    modal={this.props.modal ? this.props.modal : false}
+                    height={defaultDialogHeight + this.props.errorMessages.length * dialogHeightPerLine}
+                >
+                    {this.props.errorMessages.map(errorMessage=>{
+                      const oneValidationMessage = (<span><a>{errorMessage.message}</a><br /></span>);
+                      const oneValidationMessageWithTab = (<span><li style={{marginLeft:2 + "em"}}>{errorMessage.message}</li></span>);
+
+                      if (errorMessage.field_name === "password-tab"){
+                        return oneValidationMessageWithTab;
+                      } else{
+                        return oneValidationMessage;
+                      }
+                    })}
+                </Dialog>
+            }
+        </div>
+      );
+    }
   }
 
-  componentWillReceiveProps(newProps) {
-    this.setState({ open: newProps.open });
-  }
-
-  handleOpen = () => {
-    this.setState({ open: true });
-  };
-
-  handleClose = () => {
-    this.setState({ open: false });
-    this.props.onDismiss();
-  };
-
-  render() {
-
-    const actions = [
-      <FlatButton
-        label="Dismiss"
-        primary={true}
-        keyboardFocused={true}
-        onClick={this.handleClose}
-      />,
-    ];
-
-    return (
-      <div>
-        <Dialog
-          title="Errors"
-          actions={actions}
-          modal={this.props.modal ? this.props.modal : false}
-          open={this.state.open}
-          onRequestClose={this.handleClose}
-          overlayStyle={{ backgroundColor: 'transparent' }}
-        >
-          {this.props.errorMessages.map(errorMessage => {
-            return (
-              <div>
-                <a>{errorMessage.message}</a>
-                <br />
-              </div>
-            );
-          })}
-        </Dialog>
-      </div>
-    );
-  }
-}
-
-module.exports = ValidationErrorsInfoDialog;
+  module.exports = ValidationErrorsInfoDialog;

src/components/Shared/draggable-dialog/DialogBody.js

@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+class DialogBody extends React.Component {
+    render() {
+        return (
+            <div className="ui-dialog-content" style={{ "overflowY": "auto" }}>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+DialogBody.propTypes = {
+    children: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
+};
+
+export default DialogBody;

src/components/Shared/draggable-dialog/DialogFooter.js

@@ -0,0 +1,43 @@
+import React from "react";
+import PropTypes from "prop-types";
+import cs from "classnames";
+
+const DialogFooter = (props) => {
+    const buttons = props.buttons;
+    if (!buttons || buttons.length == 0) {
+        return false;
+    }
+
+    const dialogButtons = buttons.map(function (button, index) {
+        if (React.isValidElement(button)) {
+            return button;
+        }
+
+        const { text, onClick, className } = button;
+
+        return (
+            <button
+                key={`button-${index}`}
+                type="button"
+                className={cs("button", className)}
+                onClick={onClick}>
+                {text}
+            </button>
+        );
+    }, this);
+
+    return (
+        <div className="ui-dialog-buttonpane">
+            <div className="ui-dialog-buttonset">
+                {dialogButtons}
+            </div>
+        </div>
+    );
+};
+
+DialogFooter.propTypes = {
+    buttons: PropTypes.array,
+    onClose: PropTypes.func.isRequired
+};
+
+export default DialogFooter;

src/components/Shared/draggable-dialog/DialogTitle.js

@@ -0,0 +1,65 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const DialogTitle = ({ title, hasCloseIcon, onClose, allowMinimize, isMinimized, onMinimize, allowMaximize, isMaximized, onMaximize, onRestore }) => {
+    let closeIcon;
+    if (hasCloseIcon !== false) {
+        closeIcon = (
+            <i className="icon icon-close" onClick={onClose}></i>
+        );
+    }
+
+    let minimizeIcon;
+    if (allowMinimize) {
+        if (isMinimized) {
+            minimizeIcon = (
+                <i className="icon icon-restore" onClick={onRestore}></i>
+            );
+        } else {
+            minimizeIcon = (
+                <i className="icon icon-minimize" onClick={onMinimize}></i>
+            );
+        }
+    }
+
+    let maximizeIcon;
+    if (allowMaximize) {
+        if (isMaximized) {
+            maximizeIcon = (
+                <i className="icon icon-restore" onClick={onRestore}></i>
+            );
+        } else {
+            maximizeIcon = (
+                <i className="icon icon-maximize" onClick={onMaximize}></i>
+            );
+        }
+    }
+
+    return (
+        <header className="ui-dialog-titlebar">
+            <div className="title">
+                {title}
+            </div>
+            <div className="action-items">
+                {minimizeIcon}
+                {maximizeIcon}
+                {closeIcon}
+            </div>
+        </header>
+    );
+};
+
+DialogTitle.propTypes = {
+    hasCloseIcon: PropTypes.bool,
+    allowMinimize: PropTypes.bool,
+    allowMaximize: PropTypes.bool,
+    isMinimized: PropTypes.bool,
+    isMaximized: PropTypes.bool,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    onClose: PropTypes.func.isRequired,
+    onMinimize: PropTypes.func,
+    onMaximize: PropTypes.func,
+    onRestore: PropTypes.func
+};
+
+export default DialogTitle;

src/components/Shared/draggable-dialog/css/index.css

@@ -0,0 +1,167 @@
+body {
+    width: 100%;
+    min-height: 700px;
+}
+
+a {
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.ui-dialog-overlay {
+    background: #aaaaaa;
+    opacity: .3;
+    filter: Alpha(Opacity=30);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+}
+
+.ui-dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    outline: 0 none;
+    padding: 0 !important;;
+    z-index: 101;
+    background-color: white;
+    border: 1px solid #f6f6f6;
+}
+
+.ui-dialog.maximized{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100% !important;
+    height: 100% !important;
+}
+
+.ui-dialog.minimized{
+    position: fixed;
+    bottom: 0;
+    right: 0;
+}
+
+.ui-dialog .ui-dialog-titlebar {
+    position: relative;
+    font-size: 1em;
+    border-radius: 3px;
+    padding: 0.5em;
+    height: 35px;
+    /*border-bottom: 1px solid #f6f6f6;*/
+}
+ 
+.ui-dialog.react-draggable .ui-dialog-titlebar{
+    cursor: move;
+}
+
+.ui-dialog.react-draggable .ui-dialog-content{
+    cursor: move;
+}
+
+.ui-dialog.react-draggable .ui-dialog-buttonpane {
+    cursor: move;
+}
+
+
+.ui-dialog .ui-dialog-titlebar .action-items {
+    float: right;
+    position: relative;
+}
+
+.ui-dialog .ui-dialog-titlebar .title {
+    float: left;
+    margin-right: .5em;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-size: 1.3125em;
+    font-weight: 500;
+    line-height: 0.2em;
+    padding : 24px 0px 0px 19px;
+}
+
+.icon {
+    width: 24px;
+    height: 24px;
+    display: block;
+    float: left;
+    margin: 5px;
+    cursor: pointer;
+    background-size: cover;
+}
+
+.icon.icon-close {
+    width: 20px;
+    height: 20px;
+    background-image: url("./img/close.png");
+}
+
+.icon.icon-minimize {
+    background-image: url("./img/minimize.png");
+}
+
+.icon.icon-maximize {
+    background-image: url("./img/maximize.png");
+}
+
+.icon.icon-restore {
+    background-image: url("./img/restore.png");
+}
+
+.ui-dialog .ui-dialog-content {
+    background: none repeat scroll 0 0 transparent;
+    border: 0 none;
+    overflow: auto;
+    position: relative;
+    font-size: 1rem;
+    font-weight: 400;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    line-height: 1.5em;
+    color:rgba(0, 0, 0, 0.54);
+    padding : 24px 24px 24px 24px;
+}
+
+.ui-dialog .ui-dialog-buttonpane {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    text-align: right;
+    border-width: 1px 0 0 0;
+    /*border-top: 1px solid #f6f6f6;*/
+}
+
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{
+    padding: 0.5em;
+}
+
+.ui-dialog .ui-dialog-buttonpane button {
+	margin: 0 .5em 0 .5em;
+    cursor: pointer;
+    background-color: #f6f6f6;
+    padding: 0.5em 1em;
+    outline: none;
+    border: 1px solid #CCCCCC;
+    border-radius: 3px;
+}
+
+.ui-dialog .ui-dialog-buttonpane button:hover{
+    background-color: #CCCCCC;
+    border: 1px solid #BBBBBB;
+}
+
+.ui-dialog .react-resizable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    bottom: 0;
+    right: 0;
+    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
+    background-position: bottom right;
+    padding: 0 3px 3px 0;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    box-sizing: border-box;
+    cursor: se-resize;
+}

src/components/Shared/draggable-dialog/index.js

@@ -0,0 +1,171 @@
+import React from "react";
+import PropTypes from "prop-types";
+import cs from "classnames";
+import Draggable from "react-draggable";
+import { Resizable } from "react-resizable";
+import DialogTitle from "./DialogTitle";
+import DialogBody from "./DialogBody";
+import DialogFooter from "./DialogFooter";
+import EventStack from "active-event-stack";
+
+class Dialog extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            height: props.height,
+            width: props.width,
+            isMinimized: false,
+            isMaximized: false
+        };
+    }
+
+    componentWillMount() {
+        /**
+         * This is done in the componentWillMount instead of the componentDidMount
+         * because this way, a modal that is a child of another will have register
+         * for events after its parent
+         */
+        this.eventToken = EventStack.addListenable([
+            ["keydown", this.handleGlobalKeydown]
+        ]);
+    }
+
+    componentWillUnmount = () => {
+        EventStack.removeListenable(this.eventToken);
+    }
+
+    handleGlobalKeydown = (e) => {
+        if (this.props.closeOnEscape && e.keyCode == 27) {
+            e.stopPropagation();
+            this.onClose();
+        }
+
+        return false;
+    }
+
+    onClose = () => {
+        if (this.props.onClose) {
+            this.props.onClose();
+        }
+    }
+
+    onMinimize = () => {
+        this.setState({ isMinimized: true, isMaximized: false });
+    }
+
+    onMaximize = () => {
+        this.setState({ isMinimized: false, isMaximized: true });
+    }
+
+    onRestore = () => {
+        this.setState({ isMinimized: false, isMaximized: false });
+    }
+
+    onResize = (event, { element, size }) => {
+        this.setState({ width: size.width, height: size.height });
+    }
+
+    getDialogTitle = () => {
+        return (
+            <DialogTitle
+                title={this.props.title}
+                hasCloseIcon={this.props.hasCloseIcon}
+                allowMinimize={this.props.allowMinimize}
+                allowMaximize={this.props.allowMaximize}
+                isMinimized={this.state.isMinimized}
+                isMaximized={this.state.isMaximized}
+                onMinimize={this.onMinimize}
+                onMaximize={this.onMaximize}
+                onRestore={this.onRestore}
+                onClose={this.onClose}
+            />
+        );
+    }
+
+    render() {
+        const { height, width, isMinimized, isMaximized } = this.state;
+        const { modal, isDraggable, isResizable, buttons, children, position } = this.props;
+        const { x = -width / 2, y = -height / 2 } = position;
+
+        let dialog = (
+            <div style={{ height: height, width, transform: `translate(${x}px, ${y}px)` }} className={cs("ui-dialog", { "minimized": isMinimized, "maximized": isMaximized })}>
+                {this.getDialogTitle()}
+                {
+                    !isMinimized && <DialogBody>{children}</DialogBody>
+                }
+                {
+                    !isMinimized && <DialogFooter buttons={buttons} onClose={this.onClose}></DialogFooter>
+                }
+
+            </div>
+        );
+
+        if (!isMinimized && !isMaximized && isResizable) {
+            dialog = (
+                <Resizable className="box" height={height} width={width} onResize={this.onResize}>
+                    {dialog}
+                </Resizable>
+            );
+        }
+
+        if (!isMinimized && !isMaximized && isDraggable !== false) {
+            dialog = (
+                <Draggable handle=".ui-dialog" bounds="body" defaultPosition={{ x, y }}>
+                    {dialog}
+                </Draggable>
+            );
+        }
+
+        return (
+            <div
+                className={cs("ui-dialog-container", { "": modal })}>
+                {dialog}
+                {modal && <div className="ui-dialog-overlay"></div>}
+            </div>
+        );
+    }
+}
+
+Dialog.propTypes = {
+    height: PropTypes.number,
+    width: PropTypes.number,
+    modal: PropTypes.bool,
+    position: PropTypes.shape({
+        x: PropTypes.number,
+        y: PropTypes.number
+    }),
+    hasCloseIcon: PropTypes.bool,
+    allowMinimize: PropTypes.bool,
+    allowMaximize: PropTypes.bool,
+    isResizable: PropTypes.bool,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    closeOnEscape: PropTypes.bool,
+    onClose: PropTypes.func,
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.element]).isRequired,
+    buttons: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.shape({
+            text: PropTypes.string,
+            onClick: PropTypes.func
+        })),
+        PropTypes.arrayOf(PropTypes.element)
+    ])
+};
+
+Dialog.defaultProps = {
+    height: 200,
+    width: 600,
+    modal: false,
+    closeOnEscape: true,
+    isDraggable: false,
+    isResizable: false,
+    title: '',
+    hasCloseIcon: true,
+    allowMinimize: false,
+    allowMaximize: false,
+    onClose: null,
+    buttons: null,
+    position: { x: -250, y: -150 }
+};
+
+export default Dialog;

src/routes/app/routes/forms/routes/steppers/components/VerticalNonLinear.js

@@ -405,8 +405,8 @@ class VerticalNonLinear extends React.Component {
       },
       return_time: new Date(),
       pickupTimeHide: false,
-      showValidationErrors: false,
-      validationErrors: [],
+      showValidationErrors:false,
+      validationErrors:[]
     };
   }
 
@@ -524,8 +524,8 @@ class VerticalNonLinear extends React.Component {
           if (error.response.status === 422) {
             //Unprocessable Entity (validation failed)
             self.setState(Object.assign(self.state, {
-              showValidationErrors: true,
-              validationErrors: error.response.data.data
+              showValidationErrors:true,
+              validationErrors:error.response.data.data
             }));
           }
         });
@@ -896,8 +896,8 @@ class VerticalNonLinear extends React.Component {
           <div className="box-body padding-xs">
 
             <div style={{ maxWidth: 380, margin: 'auto' }}>
-              <ValidationErrorsInfoDialog open={this.state.showValidationErrors} errorMessages={this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)} />
-
+            <ValidationErrorsInfoDialog title={'Errors'} open = {this.state.showValidationErrors} draggable={true} modal={false} errorMessages = {this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)}/>         
+              
               <Stepper
                 activeStep={this.state.stepIndex}
                 linear={false}

src/routes/app/routes/pages/routes/eligibility/components/eligibility.js

@@ -37,7 +37,8 @@ class SignUp extends React.Component {
     validated: false,
     memberType:"S",
     showValidationErrors: false,
-    validationErrors:[]
+    validationErrors:[],
+    draggableDialog:false
   }
 
   componentDidMount = () => {
@@ -63,7 +64,8 @@ class SignUp extends React.Component {
       "phonenumber": this.state.phonenumber,
       "birthdate": this.state.birthdate.toISOString(),
       "consent" : this.state.agreedTerms,
-      "type": this.state.memberType
+      "type": this.state.memberType,
+      "useruuid": "1234567"
 
       // "eligibility": {
       //   "tracking_id": "1234567",
@@ -105,13 +107,26 @@ class SignUp extends React.Component {
       //   alert('NO benefits found for this member');
       // }
     }).catch(function (err) {
-      if (err.response.status === 422){
-        //Unprocessable Entity (validation failed)
-        state.setState(Object.assign(state.state, {showValidationErrors:true, validationErrors:err.response.data.data}))
-      }else{
-        console.log('Error to get eligibility: ', err);
-        alert('NO benefits found for this member');
-        this.handleRequestClose();
+      switch(err.response.status){
+        case 403:
+          //Forbidden (not eligible)
+          console.log(err.response.data);
+          let messageArray = [
+            {
+              message:err.response.data.message
+            }
+          ]
+          state.setState(Object.assign(state.state, {showValidationErrors:true, validationErrors:messageArray, draggableDialog:false}))
+          break;
+        case 422:
+          //Unprocessable Entity (validation failed)
+          state.setState(Object.assign(state.state, {showValidationErrors:true, validationErrors:err.response.data.data, draggableDialog:true}))
+          break;
+        
+        default:
+          console.log('Error to get eligibility: ', err);
+          alert('NO benefits found for this member');
+          this.handleRequestClose();
       }
     });
   }
@@ -192,7 +207,7 @@ class SignUp extends React.Component {
     return (
       <form className="">
         <fieldset>
-          <ValidationErrorsInfoDialog open = {this.state.showValidationErrors} errorMessages = {this.state.validationErrors} modal={true} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)}/>         
+          <ValidationErrorsInfoDialog open = {this.state.showValidationErrors} errorMessages = {this.state.validationErrors} draggable={this.state.draggableDialog} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)}/>         
           <div className="form-group">
             <TextField
               floatingLabelText="First Name"

src/routes/app/routes/pages/routes/map/components/Services.js

@@ -50,7 +50,6 @@ import FloatingActionButton from 'material-ui/FloatingActionButton';
 import ContentAdd from 'material-ui/svg-icons/content/add';
 import moment from 'moment';
 import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
-import Draggable, { DraggableCore } from 'react-draggable'; // Both at the same time
 import Imgix from 'react-imgix'
 import Paper from 'material-ui/Paper';
 

src/routes/login/components/Login.js

@@ -8,6 +8,11 @@ import Dialog from 'material-ui/Dialog';
 
 import Instance from '../../../components/Connection';
 
+import {
+  loggedUser,
+  visitReporter,
+} from 'utils/authorization';
+
 class Login extends React.Component {
   constructor(props) {
     super(props);
@@ -76,9 +81,16 @@ class Login extends React.Component {
         state.setCookie('token', auth.token, auth.valid_time);
         localStorage.setItem('loggedUser', JSON.stringify(auth.user));
 
-        Instance.setToken(auth.token);
+        console.log("....");
+        console.log(loggedUser.anyOf(visitReporter));
+
+        if (loggedUser.anyOf(visitReporter)){
+          location.href = '/#/app/form/visit/' + auth.user.useruuid;
+        }else{
+          location.href = '/#/app/table/rides';
+        }
+
 
-        location.href = '/#/';
       }).catch(function (err) {
         state.setState(Object.assign(state.state, {
           message: (err.response.data.message),

src/routes/selfRegister/components/SignUp.js

@@ -17,6 +17,8 @@ import Toggle from 'material-ui/Toggle';
 import Snackbar from 'material-ui/Snackbar';
 import Instance from '../../../components/Connection';
 
+import ValidationErrorsInfoDialog from '../../../components/Shared/ValidationErrorsInfoDialog';
+
 class SignUp extends React.Component {
   constructor(props) {
     super(props);
@@ -144,29 +146,13 @@ class SignUp extends React.Component {
     });
   }
 
-  handleDismiss() {
-    this.setState(Object.assign(this.state, { showErrorMessage: false }));
+  handleValidationErrosDialogDismiss() {
+    this.setState(Object.assign(this.state, {
+      showValidationErrors: false
+    }));
   }
 
   render() {
-    let validationErrors = null;
-    if (this.state.showValidationErrors) {
-      validationErrors = (
-        <ul>
-          {this.state.validationErrors.map(errorMessage => {
-            const oneValidationMessage = (<li>{errorMessage.message}</li>);
-            const oneValidationMessageWithTab = (<span><li style={{ marginLeft: 2 + "em" }}>{errorMessage.message}</li></span>);
-
-            if (errorMessage.field_name === "password-tab") {
-              return oneValidationMessageWithTab;
-            } else {
-              return oneValidationMessage;
-            }
-          })}
-        </ul>
-      );
-    }
-
     return (
       <div className="body-inner">
 
@@ -245,10 +231,7 @@ class SignUp extends React.Component {
                 <div className="form-group">
                   <p className="text-small">By clicking on sign up, you agree to <a href="javascript:;"><i>terms</i></a> and <a href="javascript:;"><i>privacy policy</i></a></p>
                 </div>
-                <div className="divider" />
-                <div className="form-group">
-                  {validationErrors}
-                </div>
+                <ValidationErrorsInfoDialog open={this.state.showValidationErrors} errorMessages={this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)} />
               </fieldset>
             </form>
           </div>