From 991d86558ac2198bd56d26ff96aec3865b3a1b16 Mon Sep 17 00:00:00 2001
From: Berkeley Martinez <Berkeley@robotie.com>
Date: Fri, 15 Jul 2016 14:42:47 -0700
Subject: [PATCH] Feature(nav): Image/Points leads to settings This keeps the
 user in React land when changing settings User profiles will be reactified at
 a later date

---
 common/app/components/Nav/Nav.jsx             | 17 +++++----
 .../routes/settings/components/Settings.jsx   | 35 +++++++++++++++++++
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/common/app/components/Nav/Nav.jsx b/common/app/components/Nav/Nav.jsx
index 28f89102a3..875cdcf780 100644
--- a/common/app/components/Nav/Nav.jsx
+++ b/common/app/components/Nav/Nav.jsx
@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
+import { Link } from 'react-router';
 import { LinkContainer } from 'react-router-bootstrap';
 import {
   Col,
@@ -135,13 +136,15 @@ export default class extends React.Component {
       return null;
     }
     return (
-      <FCCNavItem
-        className='brownie-points-nav'
-        href={ '/' + username }
+      <LinkContainer
+        eventKey={ navLinks.length + 1 }
         key='points'
+        to='/settings'
         >
-        [ { points } ]
-      </FCCNavItem>
+        <FCCNavItem className='brownie-points-nav'>
+          [ { points } ]
+        </FCCNavItem>
+      </LinkContainer>
     );
   }
 
@@ -156,12 +159,12 @@ export default class extends React.Component {
           eventKey={ 2 }
           key='user'
           >
-          <a href={ '/' + username }>
+          <Link to='/settings'>
             <img
               className='profile-picture float-right'
               src={ picture }
             />
-          </a>
+          </Link>
         </li>
       );
     } else {
diff --git a/common/app/routes/settings/components/Settings.jsx b/common/app/routes/settings/components/Settings.jsx
index 422e2f4de2..0ca4ad9c2f 100644
--- a/common/app/routes/settings/components/Settings.jsx
+++ b/common/app/routes/settings/components/Settings.jsx
@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import { Button, Row, Col } from 'react-bootstrap';
+import FA from 'react-fontawesome';
 
 import LockedSettings from './Locked-Settings.jsx';
 import SocialSettings from './Social-Settings.jsx';
@@ -10,6 +11,7 @@ import DeleteModal from './Delete-Modal.jsx';
 export default class Settings extends React.Component {
   static displayName = 'Settings';
   static propTypes = {
+    username: PropTypes.string,
     isLocked: PropTypes.bool,
     isGithubCool: PropTypes.bool,
     isTwitter: PropTypes.bool,
@@ -22,6 +24,7 @@ export default class Settings extends React.Component {
 
   render() {
     const {
+      username,
       isLocked,
       isGithubCool,
       isTwitter,
@@ -33,6 +36,38 @@ export default class Settings extends React.Component {
     } = this.props;
     return (
       <div>
+        <Row>
+          <Col xs={ 12 }>
+            <Button
+              block={ true }
+              bsSize='lg'
+              bsStyle='primary'
+              className='btn-link-social'
+              href={ `/${username}` }
+              >
+              <FA name='user' />
+              Show me my public profile
+            </Button>
+            <Button
+              block={ true }
+              bsSize='lg'
+              bsStyle='primary'
+              className='btn-link-social'
+              href={ '/signout' }
+              >
+              Sign me out of Free Code Camp
+            </Button>
+            <Button
+              block={ true }
+              bsSize='lg'
+              bsStyle='primary'
+              className='btn-link-social'
+              href={ 'mail:team@freecodecamp.com' }
+              >
+              Email us at team@freecodecamp.com
+            </Button>
+          </Col>
+        </Row>
         <h1 className='text-center'>Settings for your Account</h1>
         <h2 className='text-center'>Actions</h2>
         <Row>