Profile page

code/web/src/client/components/home/Home.js

@@ -17,7 +17,7 @@ import userRoutes from '../../setup/routes/user'
 
 // Component
 const Home = (props) => (
-    <Grid alignCenter={ true } style={ { backgroundImage: `url('/images/homepage.jpg')`, backgroundAttachment: 'fixed', backgroundSize: 'cover', backgroundPosition: 'center top', height: 'calc(100vh - 5em)', textAlign: 'center', color: white } }>
+    <Grid alignCenter={ true } style={ { backgroundImage: `url('/images/cover.jpg')`, backgroundAttachment: 'fixed', backgroundSize: 'cover', backgroundPosition: 'center top', height: 'calc(100vh - 5em)', textAlign: 'center', color: white } }>
         {/* SEO */}
         <Helmet>
             <title>Monthly supply of clothes and accessories for Men and Women - Crate</title>

code/web/src/client/components/user/AuthCheck.js

@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
 // App Imports
-import { routes } from '../../setup/routes'
+import userRoutes from '../../setup/routes/user'
 
 // Component
 class AuthCheck extends Component {
@@ -14,7 +14,7 @@ class AuthCheck extends Component {
 
         return (
             <div>
-                { isAuthenticated ? <Redirect to={ routes.home.path } /> : '' }
+                { isAuthenticated ? <Redirect to={ userRoutes.subscriptions.path } /> : <Redirect to={ userRoutes.login.path } /> }
             </div>
         )
     }

code/web/src/client/components/user/Profile.js

@@ -7,32 +7,56 @@ import { Link } from 'react-router-dom'
 
 // UI Imports
 import { Grid, GridCell } from '../ui/grid'
-import { H1, H4 } from '../ui/typography'
+import { H3, H4 } from '../ui/typography'
 import Button from '../ui/button'
-import { white } from '../ui/common/colors'
-import { textLevel1 } from '../ui/common/shadows'
+import { grey, grey2 } from '../ui/common/colors'
 
 // App Imports
-import user from '../../setup/routes/user'
+import userRoutes from '../../setup/routes/user'
 import { logout } from './api/actions'
 
 // Component
 const Profile = (props) => (
-    <Grid>
+    <div>
         {/* SEO */}
         <Helmet>
             <title>Profile - Crate</title>
         </Helmet>
 
-        <GridCell>
-            <button onClick={ props.logout.bind(this) }>Logout</button>
-        </GridCell>
-    </Grid>
+        {/* Top title bar */}
+        <Grid gutter={ false } style={ { backgroundColor: grey } }>
+            <GridCell style={ { padding: '2em', textAlign: 'center' } }>
+                <H3 font="secondary">Profile</H3>
+            </GridCell>
+        </Grid>
+
+        <Grid gutter={ false }>
+            <GridCell style={ { padding: '2em', textAlign: 'center' } }>
+                <H4 style={ { marginBottom: '0.5em' } }>{ props.user.details.name }</H4>
+
+                <p style={ { color: grey2, marginBottom: '2em' } }>{ props.user.details.email }</p>
+
+                <Link to={ userRoutes.subscriptions.path }>
+                    <Button theme="primary">Subscription</Button>
+                </Link>
+
+                <Button theme="secondary" onClick={ props.logout } style={ { marginLeft: '1em' } }>Logout</Button>
+            </GridCell>
+        </Grid>
+    </div>
 )
 
 // Component Properties
 Profile.propTypes = {
-    logout: PropTypes.func.isRequired
+    logout: PropTypes.func.isRequired,
+    user: PropTypes.object.isRequired
+}
+
+// Component State
+function profileState(state) {
+    return {
+        user: state.user
+    }
 }
 
-export default connect(null, { logout })(Profile)
+export default connect(profileState, { logout })(Profile)

code/web/src/server/index.js

@@ -4,7 +4,6 @@ import { Server } from 'http'
 import Express from 'express'
 import bodyParser from 'body-parser'
 import cookieParser from 'cookie-parser'
-import { flushToHTML } from 'styled-jsx/server'
 
 import React from 'react'
 import { renderToString } from 'react-dom/server'
@@ -13,6 +12,7 @@ import { Helmet } from "react-helmet"
 import { createStore, applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
+import { flushToHTML } from 'styled-jsx/server'
 
 // App Imports
 import { rootReducer } from '../client/setup/store'