AccountManager and Dropdown renamed to ProfileManager and Dropdown. Variables.scss moved up to app level.

Author: prescottprue

generators/app/templates/app/components/_variables.scss renamed to generators/app/templates/app/_variables.scss

@@ -1,8 +1,5 @@
 import React, {Component, PropTypes} from 'react';
-import {bindActionCreators} from 'redux';
-import {connect} from 'react-redux';
 import { Link } from 'react-router';
-import * as Actions from '../../actions';
 import './LoginForm.scss';
 
  class LoginForm extends Component {
@@ -13,6 +10,9 @@ import './LoginForm.scss';
     this.handlePasswordChange = this.handlePasswordChange.bind(this);
     this.state = {username: '', password: ''};
   }
+  static propType = {
+    onLoginClick: PropTypes.func.isRequired
+  };
   /**
    * @function handleLogin
    * @description Fire onLoginClick function provided to component when login is clicked
@@ -36,26 +36,22 @@ import './LoginForm.scss';
   }
   render() {
     return (
-      <div className="login-page">
-        <form className="inputs" onSubmit={this.handleLogin}>
-          <div className="input-wrapper">
-            <span className="input-label">Username/Email</span>
-            <input onChange={this.handleUsernameChange}/>
+        <form className="LoginForm" onSubmit={this.handleLogin}>
+          <div className="LoginForm-Group">
+            <span className="LoginForm-Label">Username/Email</span>
+            <input className="LoginForm-Input" onChange={this.handleUsernameChange}/>
           </div>
-          <div className="input-wrapper">
-            <span className="input-label">Password</span>
-            <input onChange={this.handlePasswordChange} type='password' />
+          <div className="LoginForm-Group">
+            <span className="LoginForm-Label">Password</span>
+            <input className="LoginForm-Input" onChange={this.handlePasswordChange} type='password' />
           </div>
-          <div className="input-wrapper">
-            <button className="" type="submit">Login</button>
-            <button className="" type="reset">Cancel</button>
+          <div className="LoginForm-Buttons">
+            <button className="LoginForm-Login" type="submit">Login</button>
+            <button className="LoginForm-Cancel" type="reset">Cancel</button>
           </div>
        </form>
-      </div>
     )
   }
 }
-LoginForm.propTypes = {
-  onLoginClick: PropTypes.func.isRequired
-};
+
 export default LoginForm;

generators/app/templates/app/components/AccountDropdown/AccountDropdown.js

@@ -1,8 +1,13 @@
-.login-page {
+.LoginForm {
   width: 100%;
   text-align:center;
-}
+  &-Group {
+    padding:10px;
+  }
+  &-Label {
+
+  }
+  &-Input {
 
-.input-wrapper {
-  padding:10px;
+  }
 }

generators/app/templates/app/components/AccountManager/AccountManager.js

@@ -0,0 +1,26 @@
+import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
+
+import ProfileManager from '../ProfileManager/ProfileManager';
+import './Navbar.scss';
+
+class Navbar extends Component {
+  constructor(props) {
+    super(props);
+  }
+  static propTypes = {
+    profile: PropTypes.object
+  };
+  render() {
+    return (
+      <div className="Navbar">
+        <div className="Navbar-Brand">
+          <Link to="/">Starter</Link>
+        </div>
+        <div className="Navbar-Spacer"></div>
+        <ProfileManager profile={ this.props.profile } />
+      </div>
+    )
+  }
+}
+export default Navbar;

generators/app/templates/app/components/LoginForm/LoginForm.js

@@ -0,0 +1,24 @@
+@import '../../variables';
+
+.Navbar {
+  background-color: $navbar;
+  width:100%;
+  padding:10px;
+  font-size:1.5em;
+  line-height: 1.3em;
+  /* Flexbox */
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  flex-direction: row;
+  vertical-align: middle;
+  &-Brand {
+    font-size:1em;
+    & :hover {
+      color: $secondary;
+    }
+  }
+  &-Spacer {
+    flex:1;
+  }
+}

generators/app/templates/app/components/LoginForm/LoginForm.scss

@@ -0,0 +1,19 @@
+import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
+
+class ProfileDropdown extends Component {
+  static propTypes = {
+    profile: PropTypes.shape({
+      username: PropTypes.string.isRequired
+    }).isRequired
+  };
+  render() {
+    return (
+      <div className="buttons">
+        <Link to="/profile">{this.props.profile.username}</Link>
+      </div>
+    )
+  }
+}
+
+export default ProfileDropdown;

generators/app/templates/app/components/Navbar/Navbar.js

@@ -0,0 +1,31 @@
+import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
+import ProfileDropdown from '../ProfileDropdown/ProfileDropdown';
+import './ProfileManager.scss';
+
+class ProfileManager extends Component {
+  constructor(props) {
+    super(props);
+  }
+  static propTypes = {
+    profile: PropTypes.object
+  };
+  render() {
+    if(this.props.profile && this.props.profile.username){
+      return (
+        <ProfileDropdown
+          profile={ this.props.profile }
+        />
+      )
+    } else {
+      return (
+        <div className="ProfileManager-Buttons">
+          <Link className="ProfileManager-Button" to="/login">Login</Link>
+          <Link className="ProfileManager-Button" to="/signup">Signup</Link>
+        </div>
+      );
+    }
+  }
+}
+
+export default ProfileManager;

generators/app/templates/app/components/Navbar/Navbar.scss

@@ -0,0 +1,20 @@
+@import '../../variables';
+.ProfileManager {
+
+  //Button group
+  &-Buttons {
+    display:inline;
+    padding-right:10px;
+  }
+  //Button
+  &-Button {
+    margin-right:10px;
+    margin-left:10px;
+    text-decoration:none;
+    & :hover {
+      // background-color:white;
+      color: $secondary;
+      text-decoration: underline;
+    }
+  }
+}