From 5014b1ea17258b5106301bace670ffb648fe4bd9 Mon Sep 17 00:00:00 2001
From: Bjarke Madsen <bjarke@nordu.net>
Date: Tue, 25 Jul 2023 13:30:55 +0200
Subject: [PATCH] Add login and navigation to Survey depending on user
attributes
---
.../components/global/ExternalPageNavBar.tsx | 47 ++++++++++-------
compendium-frontend/src/main.scss | 50 +++++++++++++++++--
.../src/scss/layout/Login.scss | 24 +++++++++
compendium-frontend/src/shared/Login.tsx | 23 +++++++++
4 files changed, 122 insertions(+), 22 deletions(-)
create mode 100644 compendium-frontend/src/scss/layout/Login.scss
create mode 100644 compendium-frontend/src/shared/Login.tsx
diff --git a/compendium-frontend/src/components/global/ExternalPageNavBar.tsx b/compendium-frontend/src/components/global/ExternalPageNavBar.tsx
index 701d7f10..bb2ac21e 100644
--- a/compendium-frontend/src/components/global/ExternalPageNavBar.tsx
+++ b/compendium-frontend/src/components/global/ExternalPageNavBar.tsx
@@ -1,5 +1,6 @@
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 >
);
}
diff --git a/compendium-frontend/src/main.scss b/compendium-frontend/src/main.scss
index 7df1e65b..dff9a81c 100644
--- a/compendium-frontend/src/main.scss
+++ b/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
diff --git a/compendium-frontend/src/scss/layout/Login.scss b/compendium-frontend/src/scss/layout/Login.scss
new file mode 100644
index 00000000..0d2dcb0c
--- /dev/null
+++ b/compendium-frontend/src/scss/layout/Login.scss
@@ -0,0 +1,24 @@
+.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
diff --git a/compendium-frontend/src/shared/Login.tsx b/compendium-frontend/src/shared/Login.tsx
new file mode 100644
index 00000000..baa75200
--- /dev/null
+++ b/compendium-frontend/src/shared/Login.tsx
@@ -0,0 +1,23 @@
+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
--
GitLab