Add login and navigation to Survey depending on user attributes

compendium-frontend/src/components/global/ExternalPageNavBar.tsx

 import React, { ReactElement } from "react";
-import { Container, Row } from "react-bootstrap";
+import { Col, Container, Row } from "react-bootstrap";
+import Login from "../../shared/Login";
 import GeantLogo from "../../images/geant_logo_f2020_new.svg";
 
 /**
@@ -14,26 +15,36 @@ function ExternalPageNavBar(): ReactElement {
 
             <Container>
                 <Row>
-                    <nav>
-                        <a href="https://geant.org/"><img src={GeantLogo} /></a>
+                    <Col xs={10}>
+                        <div className="nav-wrapper">
+                            <nav className="header-nav">
+                                <a href="https://geant.org/"><img src={GeantLogo} /></a>
 
-                        <ul>
-                            <li><a href="https://network.geant.org/">NETWORK</a></li>
-                            <li><a href="https://geant.org/services/">SERVICES</a></li>
-                            <li><a href="https://community.geant.org/">COMMUNITY</a></li>
-                            <li><a href="https://tnc23.geant.org/">TNC</a></li>
-                            <li><a href="https://geant.org/projects/">PROJECTS</a></li>
-                            <li><a href="https://connect.geant.org/">CONNECT</a></li>
-                            <li><a href="https://impact.geant.org/">IMPACT</a></li>
-                            <li><a href="https://careers.geant.org/">CAREERS</a></li>
-                            <li><a href="https://about.geant.org/">ABOUT</a></li>
-                            <li><a href="https://connect.geant.org/community-news">NEWS</a></li>
-                            <li><a href="https://resources.geant.org/">RESOURCES</a></li>
-                        </ul>
-                    </nav>
+                                <ul>
+                                    <li><a className="nav-link-entry" href="https://network.geant.org/">NETWORK</a></li>
+                                    <li><a className="nav-link-entry" href="https://geant.org/services/">SERVICES</a></li>
+                                    <li><a className="nav-link-entry" href="https://community.geant.org/">COMMUNITY</a></li>
+                                    <li><a className="nav-link-entry" href="https://tnc23.geant.org/">TNC</a></li>
+                                    <li><a className="nav-link-entry" href="https://geant.org/projects/">PROJECTS</a></li>
+                                    <li><a className="nav-link-entry" href="https://connect.geant.org/">CONNECT</a></li>
+                                    <li><a className="nav-link-entry" href="https://impact.geant.org/">IMPACT</a></li>
+                                    <li><a className="nav-link-entry" href="https://careers.geant.org/">CAREERS</a></li>
+                                    <li><a className="nav-link-entry" href="https://about.geant.org/">ABOUT</a></li>
+                                    <li><a className="nav-link-entry" href="https://connect.geant.org/community-news">NEWS</a></li>
+                                    <li><a className="nav-link-entry" href="https://resources.geant.org/">RESOURCES</a></li>
+                                </ul>
+
+                            </nav>
+                        </div>
+
+                    </Col>
+
+                    <Col align="right">
+                        <Login />
+                    </Col>
                 </Row>
             </Container>
-        </div>
+        </div >
     );
 }
 

compendium-frontend/src/main.scss

@@ -2,13 +2,49 @@
 @import 'scss/base/text';
 @import 'scss/layout/components';
 
-.external-page-nav-bar {
-  background-color: #003753;
+.nav-link-entry {
+  border-radius: 2px;
+  font-family: "Open Sans", sans-serif;
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-decoration: none;
   color: #b0cde1;
+  padding: 10px;
+}
+
+.nav-link {
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
   height: 60px;
+
+  .nav-link-entry:hover {
+    color: #003753;
+    background-color: #b0cde1;
+  }
+
+  ul {
+    line-height: 1.3;
+    text-transform: uppercase;
+    list-style: none;
+
+    li {
+      float: left;
+
+
+    }
+  }
+}
+
+.nav-wrapper {
   display: flex;
   -webkit-box-align: center;
   align-items: center;
+  height: 60px;
+}
+
+.header-nav {
+  width: 100%;
 
   img {
     float: left;
@@ -42,8 +78,14 @@
   }
 }
 
+.external-page-nav-bar {
+  background-color: #003753;
+  color: #b0cde1;
+  height: 60px;
+}
+
 .app {
-  display: flex;
+  // display: flex;
   flex-direction: column;
   min-height: 100vh;
-}
+}
\ No newline at end of file

compendium-frontend/src/scss/layout/Login.scss

+.btn-login {
+    --bs-btn-color: #fff;
+    --bs-btn-border-color: #6c757d;
+    --bs-btn-border-radius: none;
+
+    // active
+    --bs-btn-active-color: #fff;
+    // see https://stackoverflow.com/a/76213205 for why this syntax is necessary
+    --bs-btn-active-bg: #{$yellow-orange};
+    --bs-btn-active-border-color: #{$yellow-orange};
+
+    // hover
+    --bs-btn-hover-color: rgb(0, 63, 95);
+    --bs-btn-hover-bg: #{$yellow-orange};
+    --bs-btn-hover-border-color: #{$yellow-orange};
+
+
+    // disabled
+    --bs-btn-disabled-color: #6c757d;
+    --bs-btn-disabled-bg: transparent;
+    // --bs-btn-disabled-border-color: #6c757d;
+
+    border: 2px solid $yellow-orange;
+}
\ No newline at end of file

compendium-frontend/src/shared/Login.tsx

+import React, { useContext, useEffect } from 'react';
+import { Button } from 'react-bootstrap';
+import { userContext } from './UserProvider';
+
+
+const Login = () => {
+    const { user, logout } = useContext(userContext);
+
+    if (!user.name) {
+        return (
+            <a href='/login'><Button variant='login' active={false} style={{ maxWidth: '6rem' }}><span>Login</span></Button></a>
+        )
+    }
+
+    if (user.permissions.active) {
+        return <div className='nav-link' style={{ float: 'right' }}><a className='nav-link-entry' href="/survey">Go to Survey</a></div>
+    }
+    return <div className='nav-link' style={{ float: 'right' }}>
+        <span>{'<'}{user.name}{'>'}</span>
+    </div>
+}
+
+export default Login
\ No newline at end of file