Profile view

package.json

@@ -73,7 +73,7 @@
     "redux-localstorage-filter": "^0.1.1",
     "redux-simple-router": "^1.0.2",
     "redux-thunk": "^1.0.3",
-    "stardust": "^0.11.0"
+    "stardust": "^0.12.0"
   },
   "devDependencies": {
     "autobind-decorator": "^1.3.2",

src/components/Header/Header.js

@@ -1,16 +1,19 @@
 import React, { Component } from 'react'
-import { Menu, MenuItem } from 'stardust'
+import { Container, Menu } from 'stardust'
 import { Link } from 'react-router'
+
 export default class Header extends Component {
   render() {
     return (
       <Menu>
-        <Link to='/profile'>
-          <MenuItem>Profile</MenuItem>
-        </Link>
-        <Link to='/dashboard'>
-          <MenuItem>Dashboard</MenuItem>
-        </Link>
+        <Container>
+          <Link to='/profile'>
+            <Menu.Item>Profile</Menu.Item>
+          </Link>
+          <Link to='/dashboard'>
+            <Menu.Item>Dashboard</Menu.Item>
+          </Link>
+        </Container>
       </Menu>
     )
   }

src/components/LoginForm/LoginForm.js

@@ -6,7 +6,6 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import {
   Button,
-  Field,
   Form,
   Input,
   Message,
@@ -15,11 +14,6 @@ import {
 
 import { login } from 'services/session'
 
-const FORM_SETTINGS = {
-  // stop Semantic UI from submitting form
-  onSuccess: () => false,
-}
-
 export default class LoginForm extends Component {
   static propTypes = {
     actions: PropTypes.object.isRequired,
@@ -75,26 +69,26 @@ export default class LoginForm extends Component {
 
     return (
       <Segment className='stacked'>
-        <Form settings={FORM_SETTINGS} onSubmit={this.handleSubmit} className={formClasses} ref='form'>
+        <Form onSubmit={this.handleSubmit} className={formClasses} ref='form'>
           {this.renderErrorMessage()}
-          <Field>
+          <Form.Field>
             <Input
               className='left icon'
               name='email'
               type='text'
               placeholder='Email'
               icon='envelope'
             />
-          </Field>
-          <Field>
+          </Form.Field>
+          <Form.Field>
             <Input
               className='left icon'
               name='password'
               type='password'
               placeholder='Password'
               icon='lock'
             />
-          </Field>
+          </Form.Field>
           <Button type='submit' className='fluid blue'>
             Login
           </Button>

src/layouts/AppLayout/AppLayout.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import Header from 'components/Header/Header'
-import classes from './AppLayout.scss'
+import './AppLayout.scss'
+import { Container, Grid } from 'stardust'
 
 class AppLayout extends React.Component {
   static propTypes = {
@@ -9,12 +10,20 @@ class AppLayout extends React.Component {
 
   render() {
     return (
-      <div className='layout-container'>
-        <Header />
-        <div className={`layout-main ${classes.mainLayout}`}>
-          {this.props.children}
-        </div>
-      </div>
+      <Grid className='one column'>
+        <Grid.Column>
+          <Header />
+        </Grid.Column>
+        <Grid.Column>
+          <Container>
+            <Grid className='one column padded'>
+              <Grid.Column>
+                {this.props.children}
+              </Grid.Column>
+            </Grid>
+          </Container>
+        </Grid.Column>
+      </Grid>
     )
   }
 }

src/layouts/AppLayout/AppLayout.scss

@@ -1,10 +1,3 @@
 :global {
   @import 'core';
 }
-
-.mainLayout {
-  display: flex;
-  flex: 1 0 0;
-  flex-flow: column wrap;
-  padding-top: 3.75em;
-}

src/resources/tsc/index.js

@@ -22,24 +22,27 @@ const DEFAULT_HEADERS = {
   'Content-Type': 'application/json',
 }
 
+const API_URL = 'https://threesc-api.herokuapp.com/'
+
 const ENDPOINTS = {
   applicants: 'api/applicants/',
   assignments: 'api/assignments/',
+  connectGithub: 'login/github/',
   recipes: 'api/recipes/',
-  passwordReset: '/rest-auth/password/reset/',
-  passwordConfirm: '/rest-auth/password/reset/confirm/',
-  passwordChange: '/rest-auth/password/change/',
-  login: '/rest-auth/login/',
-  logout: '/rest-auth/logout/',
-  user: '/rest-auth/user/',
+  passwordReset: 'rest-auth/password/reset/',
+  passwordConfirm: 'rest-auth/password/reset/confirm/',
+  passwordChange: 'rest-auth/password/change/',
+  login: 'rest-auth/login/',
+  logout: 'rest-auth/logout/',
+  user: 'rest-auth/user/',
 }
 
 // ----------------------------------------------------
 // AJAX - abstract away our ajax lib implementation
 // ----------------------------------------------------
 
 const ajax = axios.create({
-  baseURL: 'https://threesc-api.herokuapp.com',
+  baseURL: API_URL,
 })
 
 ajax.interceptors.request.use(config => {
@@ -94,6 +97,8 @@ tsc.logout = () => {
   return Promise.resolve()
 }
 
+tsc.connectGithub = () => window.location = API_URL + ENDPOINTS.connectGithub
+
 // ----------------------------------------------------
 // Namespaces (resources/models)
 // ----------------------------------------------------

src/views/LoginView/LoginView.js

@@ -4,7 +4,6 @@ import {
   Grid,
   Header,
   Image,
-  Column,
 } from 'stardust'
 
 import './LoginView.scss'
@@ -30,12 +29,12 @@ class LoginView extends Component {
     const logo = <Image src={logoUrl} className='mini' />
     return (
       <Grid className='middle aligned center aligned very relaxed equal width LoginView__grid'>
-        <Column className='LoginView__formColumn'>
+        <Grid.Column className='LoginView__formColumn'>
           <Header.H1 className='blue center aligned' image={logo}>
             3 Strand Code
           </Header.H1>
           <LoginForm />
-        </Column>
+        </Grid.Column>
       </Grid>
     )
   }

src/views/ProfileView/ProfileView.js

@@ -1,17 +1,51 @@
-import React, { Component, PropTypes } from 'react'
-import {
-  Grid,
-  Header,
-  Column,
-} from 'stardust'
+import React, { Component } from 'react'
+import { Button, Form, Grid, Header, Input, Segment } from 'stardust'
+import tsc from 'resources/tsc'
 
 class ProfileView extends Component {
+  handleClickGithub() {
+    tsc.connectGithub()
+  }
+
   render() {
     return (
       <Grid className='equal width'>
-        <Column>
-          <Header.H1>Profile</Header.H1>
-        </Column>
+        <Grid.Row>
+          <Grid.Column>
+            <Header.H1>Profile</Header.H1>
+          </Grid.Column>
+        </Grid.Row>
+
+        <Grid.Row>
+          <Grid.Column>
+            <Segment>
+              <Header.H3 className='dividing'>
+                Connect Services
+              </Header.H3>
+              <Button className='green' onClick={this.handleClickGithub}>
+                <i className='github icon' />
+                GitHub
+              </Button>
+            </Segment>
+          </Grid.Column>
+        </Grid.Row>
+
+        <Grid.Row>
+          <Grid.Column>
+            <Segment>
+              <Form>
+                <Form.Fields>
+                  <Form.Field label='First Name'>
+                    <Input name='first_name' />
+                  </Form.Field>
+                  <Form.Field label='Last Name'>
+                    <Input name='last_name' />
+                  </Form.Field>
+                </Form.Fields>
+              </Form>
+            </Segment>
+          </Grid.Column>
+        </Grid.Row>
       </Grid>
     )
   }