user login form done

src/App.js

@@ -15,7 +15,6 @@ class App extends Component {
     return (
  <MuiThemeProvider>
 
-
         <Router>
             <div className="App">
           <div className="App-intro">

src/actions/user.js

@@ -4,3 +4,15 @@ export const authenticate = (user) => {
       user
   };
 }
+
+export const openAuthenticationDialog = () => {
+  return {
+      type: 'openAuthenticationDialog'
+  }
+}
+
+export const closeAuthenticationDialog = () => {
+  return {
+      type: 'closeAuthenticationDialog'
+  }
+}

src/components/user/authentication_dialog.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import TextField from 'material-ui/TextField';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as userActions from '../../actions/user';
+
+/**
+ * Dialog with action buttons. The actions are passed in as an array of React objects,
+ * in this example [FlatButtons](/#/components/flat-button).
+ *
+ * You can also close this dialog by clicking outside the dialog, or with the 'Esc' key.
+ */
+class AuthenticationDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    const user = this.props.user.user ? this.props.user.user : {
+      name: "",
+      email: ""
+    };
+
+    this.state = {
+      name: user.name,
+      email: user.email
+    }
+  }
+
+  handleOpen = () => {
+    this.props.actions.openAuthenticationDialog();
+  };
+
+  authenticate = () => {
+    this.props.actions.authenticate(this.state);
+  };
+
+  handleClose = () => {
+    this.props.actions.closeAuthenticationDialog();
+  };
+
+  emailValid = () => {
+      const emailRe = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+      return emailRe.test(this.state.email);
+  }
+
+  nameValid = () => {
+      const nameRe = /^[\w\s]+$/iu;
+      return nameRe.test(this.state.name);
+  }
+  userValid = () => {
+    return this.emailValid() && this.nameValid();
+  }
+
+  render() {
+
+      console.log("is user valid ", this.userValid(), "state is", this.state);
+    const actions = [
+      <FlatButton
+        label="Cancel"
+        primary={true}
+        onTouchTap={this.handleClose}
+      />,
+      <FlatButton
+        label="Create User"
+        primary={true}
+        keyboardFocused={true}
+        onTouchTap={this.authenticate}
+        disabled={!this.userValid()}
+      />,
+    ];
+
+    return (
+      <div>
+        <Dialog
+          title="Welcome Conqueror!"
+          actions={actions}
+          modal={false}
+          open={!!this.props.user.userAuthenticationDialogOpen}
+          onRequestClose={this.handleClose}
+        >
+
+        <TextField
+     hintText="someone@email.com"
+     floatingLabelText="E-mail"
+          value={this.state.email}
+          onChange={(e) => { this.setState({...this.state, email: e.target.value } )}}
+          type="email"
+          errorText={this.emailValid() ? null : "Email is required and must be in correct format."}
+          />
+            <br />
+
+        <TextField
+     hintText="eg. John Smith"
+     floatingLabelText="Name"
+          value={this.state.name}
+          onChange={(e) => { this.setState({...this.state, name: e.target.value } )}}
+          errorText={this.nameValid() ? null : "Name is required and must not contain any special characters."}
+          />
+
+
+
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state, props) {
+
+  return {
+    user: state.user
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(userActions, dispatch)
+  }
+}
+export default connect(mapStateToProps, mapDispatchToProps)(AuthenticationDialog);

src/components/user/user_display.css

@@ -0,0 +1,3 @@
+.UserDisplay {
+  margin-top: 5px;
+}

src/components/user/user_display.js

@@ -9,6 +9,8 @@ import {
 } from 'react-redux';
 import * as userActions from '../../actions/user';
 import FlatButton from 'material-ui/FlatButton';
+import Avatar from 'material-ui/Avatar';
+import AuthenticationDialog from './authentication_dialog';
 
 
 class UserDisplay extends Component {
@@ -16,15 +18,23 @@ class UserDisplay extends Component {
     super(props);
     this.state = {}
   }
+
+  initials(name) {
+   const extractedInitials = name.match(/\b\w/g) || [];
+   return ((extractedInitials.shift() || '') + (extractedInitials.pop() || '')).toUpperCase();
+  }
+
   render() {
     const user = this.props.user;
-    if (!user.name){
+    if (!user){
-      return ( <FlatButton label="Login" onTouchTap={() => { alert("TouchTapped"); }} /> ) 
+      return ( <span><FlatButton label="Login" onTouchTap={() => { this.props.actions.openAuthenticationDialog()}} />
+      <AuthenticationDialog />
+
+
+      </span> )
       } else {
         return ( <div className="UserDisplay">
-          {
+          <Avatar>{this.initials(user.name)}</Avatar>
-            user.name
-          }
           </div>
         );
       }
@@ -33,7 +43,7 @@ class UserDisplay extends Component {
 
   function mapStateToProps(state, props) {
     return {
-      user: state.user
+      user: state.user.user
     };
   }
 

src/reducers/user.js

@@ -1,7 +1,11 @@
 export default(state = {}, payload) => {
     switch (payload.type) {
         case 'authenticate':
-            return {...state, user: payload.item };
+            return {...state, user: payload.user, userAuthenticationDialogOpen: false };
+        case 'openAuthenticationDialog':
+            return {...state, userAuthenticationDialogOpen: true }
+        case 'closeAuthenticationDialog':
+            return {...state, userAuthenticationDialogOpen: false }
         default:
             return state;
     }