added a conditional sign out link into the header [closes homedepot#73]

amlidos · Oct 29, 2019 · c4b4bd7 · c4b4bd7
1 parent 5dac5f1
commit c4b4bd7
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 24 deletions.
diff --git a/ui/src/childinfo/ChildInfo.js b/ui/src/childinfo/ChildInfo.js
@@ -150,7 +150,7 @@ export default class ChildInfo extends Component {
     let { showConfirmation, step } = this.state
     return (
       <>
-        <Header />
+        <Header logout={true} />
         {!showConfirmation ? (
           <div className="childInfo containerVertical spotlight">
             <p className="progress">

diff --git a/ui/src/header/index.js b/ui/src/header/index.js
@@ -3,24 +3,29 @@ import MakeAWishLogo from '../assets/images/MAW_Georgia_white.png'
 import RocketLogo from '../assets/images/TheSkyisTheLimitLogo.png'
 import './styles.scss'
 
-export const Header = () => (
-  <header>
-    <section className="slidingVertical header-item" style={{color: 'white'}}>
-      <span>Hello!</span>
-      <span>Bonjour!</span>
-      <span>Hola!</span>
-      <span>你好</span>
-      <span>こんにちは</span>
-    </section>
-    <section className="header-item">
-      <img
-        className="header-make-a-wish-logo"
-        src={MakeAWishLogo}
-        alt="Make a Wish"
-      />
-    </section>
-    <section className="header-item">
-      <img className="header-rocket-logo" src={RocketLogo} alt="Rocket Logo" />
-    </section>
-  </header>
+export const Header = ({logout}) => (
+  <div className="header">
+    <div className="toolbar">
+      { logout ? <a href="/logout">Sign Out</a> : null }
+    </div>
+    <header>
+      <section className="slidingVertical header-item" style={{color: 'white'}}>
+        <span>Hello!</span>
+        <span>Bonjour!</span>
+        <span>Hola!</span>
+        <span>你好</span>
+        <span>こんにちは</span>
+      </section>
+      <section className="header-item">
+        <img
+          className="header-make-a-wish-logo"
+          src={MakeAWishLogo}
+          alt="Make a Wish"
+        />
+      </section>
+      <section className="header-item">
+        <img className="header-rocket-logo" src={RocketLogo} alt="Rocket Logo" />
+      </section>
+    </header>
+  </div>
 )
diff --git a/ui/src/header/styles.scss b/ui/src/header/styles.scss
@@ -1,4 +1,25 @@
-header {
+.header {
+  display: flex;
+  flex-direction: column;
+
+  .toolbar {
+    display: flex;
+    height: 30px;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 1rem;
+  }
+
+  a {
+    color: white;
+  }
+
+  a:visited {
+    color: white;
+  }
+}
+
+.header header {
   padding-top: 40px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;

diff --git a/ui/src/landing/splashScreen/index.js b/ui/src/landing/splashScreen/index.js
@@ -9,7 +9,7 @@ export const Landing = ({ name, age, updateField, selectWishType, validFields })
 
   return (
     <div id="SplashScreen">
-      <Header />
+      <Header logout={true} />
       <div className="wish-input">
         <span>My name is </span>
         <input data-test="name-input" placeholder="enter your name" type="text" onChange={(e) => updateField(nameField, e.target.value)} value={name}/>

diff --git a/ui/src/login/Login.js b/ui/src/login/Login.js
@@ -31,7 +31,7 @@ class Login extends Component {
 
     return (
       <div className="login-page">
-        <Header />
+        <Header logout={false} />
         <main className="main-section">
           {showSignIn ? (
             <section className="form-wrapper">