Merge pull request #58 from TNG/demo-banner

Added possibiity to add a demo disclaimer banner

docker/client.dockerfile

@@ -1,6 +1,7 @@
 FROM node:16.13.1-alpine3.14 AS builder
 ARG REACT_APP_EOP_IMPRINT
 ARG REACT_APP_EOP_PRIVACY
+ARG REACT_APP_EOP_BANNER_TEXT
 WORKDIR /usr/src/app
 COPY package.json ./
 COPY package-lock.json ./
@@ -15,6 +16,7 @@ COPY ./.prettierrc.cjs ./.prettierc.cjs
 COPY ./src ./src
 ENV REACT_APP_EOP_IMPRINT=$REACT_APP_EOP_IMPRINT
 ENV REACT_APP_EOP_PRIVACY=$REACT_APP_EOP_PRIVACY
+ENV REACT_APP_EOP_BANNER_TEXT=$REACT_APP_EOP_BANNER_TEXT
 RUN npm run build:client
 
 FROM nginxinc/nginx-unprivileged:1.20.1-alpine

src/client/components/banner/banner.css

@@ -0,0 +1,20 @@
+.banner {
+  background-color: #dd1e1e;
+  color: #fff;
+  font-size: 115%;
+  font-weight: 900;
+  left: -8rem;
+  max-width: 31rem;
+  min-width: 31rem;
+  padding: 7rem;
+  position: fixed;
+  text-align: center;
+  top: 14rem;
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  padding-top: 2.5rem;
+  padding-bottom: 2rem;
+  z-index: 999;
+}

src/client/components/banner/banner.test.tsx

@@ -0,0 +1,34 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Banner from './banner';
+
+describe('Banner', () => {
+  const envBackup = process.env
+
+  afterEach(() => process.env = envBackup);
+
+  it('should render link if env var is defined', async () => {
+    // given
+    process.env.REACT_APP_EOP_BANNER_TEXT = 'This is a banner text'
+    render(<Banner />);
+
+    // when
+    const banner = await screen.findByText('This is a banner text');
+
+    // then
+    expect(banner).toBeInTheDocument();
+  });
+
+  it('should not render link if env var is not defined', async () => {
+    // given
+    process.env.REACT_APP_EOP_BANNER_TEXT = "";
+    render(<Banner />);
+
+    // when
+    const banner = await screen.queryByText('This is a banner text');
+
+    // then
+    expect(banner).not.toBeInTheDocument();
+  });
+});

src/client/components/banner/banner.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { FC } from 'react';
+import './banner.css';
+
+
+const Banner: FC = () => {
+  if (process.env.REACT_APP_EOP_BANNER_TEXT) {
+    return (
+      <div className='banner'>{process.env.REACT_APP_EOP_BANNER_TEXT}</div>
+      );
+  }
+  return null;
+}
+
+export default Banner;

src/client/components/board/board.jsx

@@ -16,6 +16,7 @@ import { API_PORT } from '../../../utils/serverConfig';
 import PrivacyEnhancedModel from '../privacyEnhancedModel/privacyEnhancedModel';
 import Imprint from '../footer/imprint';
 import Privacy from '../footer/privacy';
+import Banner from '../banner/banner';
 
 class Board extends React.Component {
   static get propTypes() {
@@ -112,6 +113,7 @@ class Board extends React.Component {
 
     return (
       <div>
+        <Banner />
         {this.props.G.modelType === ModelType.IMAGE && (
           <ImageModel
             playerID={this.props.playerID ?? SPECTATOR}

src/client/components/footer/imprint.test.tsx

@@ -10,10 +10,10 @@ describe('Imprint', () => {
     render(<Imprint />);
 
     // when
-    const links = await screen.queryAllByRole('link');
+    const link = await screen.findByRole('link');
 
     // then
-    expect(links.length).toBe(1);
+    expect(link).toBeInTheDocument();
   });
 
   it('should not render link if env var is not defined', async () => {
@@ -22,9 +22,9 @@ describe('Imprint', () => {
     render(<Imprint />);
 
     // when
-    const links = await screen.queryAllByRole('link');
+    const link = screen.queryByRole('link');
 
     // then
-    expect(links.length).toBe(0);
+    expect(link).not.toBeInTheDocument();
   });
 });

src/client/components/footer/privacy.test.tsx

@@ -10,10 +10,10 @@ describe('Privacy', () => {
     render(<Privacy />);
 
     // when
-    const links = await screen.queryAllByRole('link');
+    const link = await screen.findByRole('link');
 
     // then
-    expect(links.length).toBe(1);
+    expect(link).toBeInTheDocument();
   });
 
   it('should not render link if env var is not defined', async () => {
@@ -22,9 +22,9 @@ describe('Privacy', () => {
     render(<Privacy />);
 
     // when
-    const links = await screen.queryAllByRole('link');
+    const link = screen.queryByRole('link');
 
     // then
-    expect(links.length).toBe(0);
+    expect(link).not.toBeInTheDocument();
   });
 });

src/client/pages/about.tsx

@@ -7,10 +7,12 @@ import { Card, CardBody, CardHeader, Col, Container, Row } from 'reactstrap';
 
 import Footer from '../components/footer/footer';
 import Logo from '../components/logo/logo';
+import Banner from '../components/banner/banner';
 
 const About: FC = () => {
   return (
     <div>
+      <Banner />
       {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
       <Helmet bodyAttributes={{ style: 'background-color : #000' }} />
       <Container className="about" fluid>

src/client/pages/create.tsx

@@ -40,6 +40,7 @@ import CopyButton from '../components/copybutton/copybutton';
 import Footer from '../components/footer/footer';
 import Logo from '../components/logo/logo';
 import '../styles/create.css';
+import Banner from '../components/banner/banner';
 
 type CreateProps = Record<string, never>;
 
@@ -307,6 +308,7 @@ class Create extends React.Component<CreateProps, CreateState> {
     if (!this.state.created) {
       createForm = (
         <div>
+          <Banner />
           <p>
             Elevation of Privilege (EoP) is the easy way to get started and
             learn threat modeling. It is a card game that developers, architects
@@ -539,6 +541,7 @@ class Create extends React.Component<CreateProps, CreateState> {
     } else {
       linkDisplay = (
         <div>
+          <Banner />
           <div className="text-center text-muted">
             <p>
               The following links should be distributed to the players