Merge pull request #2364 from cisagov/2323-update-notification-with-n…

…ew-messaging

Re-design of AuthLogin Page

frontend/src/components/AuthForm/styles.module.scss

@@ -1,6 +1,6 @@
 .root {
   width: 100%;
-  height: 100%;
+  //height: 100%;
   position: absolute;
   padding: 0;
 
@@ -23,7 +23,7 @@
     background-color: #fff;
     border-radius: 5px;
     width: 100%;
-    height: 100%;
+    //height: 100%;
     max-width: 32rem;
     padding: 3rem 1rem;
     display: flex;

frontend/src/components/Footer/Footer.tsx

@@ -5,7 +5,7 @@ import logo from '../../assets/crossfeed.svg';
 import * as FooterStyles from './styleFooter';
 
 export const CrossfeedFooter: React.FC = (props) => {
-  const { logout } = useAuthContext();
+  const { logout, user } = useAuthContext();
   const FooterRoot = FooterStyles.FooterRoot;
   const footerClasses = FooterStyles.footerClasses;
   return (
@@ -17,13 +17,13 @@ export const CrossfeedFooter: React.FC = (props) => {
               <img src={logo} alt="Crossfeed Icon Navigate Home" />
             </Link>
           </Grid>
-          <Grid className={footerClasses.footerNavItem} item xs={12} sm={2}>
-            <p>
+          {user && (
+            <Grid className={footerClasses.footerNavItem} item xs={12} sm={2}>
               <Link className={footerClasses.footerNavLink} href="/">
                 Home
               </Link>
-            </p>
-          </Grid>
+            </Grid>
+          )}
           <Grid className={footerClasses.footerNavItem} item xs={12} sm={2}>
             <p>
               <Link
@@ -54,17 +54,19 @@ export const CrossfeedFooter: React.FC = (props) => {
               </Link>
             </p>
           </Grid>
-          <Grid className={footerClasses.footerNavItem} item xs={12} sm={2}>
-            <p>
-              <Link
-                className={footerClasses.footerNavLink}
-                href="/"
-                onClick={logout}
-              >
-                Logout
-              </Link>
-            </p>
-          </Grid>
+          {user && (
+            <Grid className={footerClasses.footerNavItem} item xs={12} sm={2}>
+              <p>
+                <Link
+                  className={footerClasses.footerNavLink}
+                  href="/"
+                  onClick={logout}
+                >
+                  Logout
+                </Link>
+              </p>
+            </Grid>
+          )}
         </Grid>
       </Box>
     </FooterRoot>

frontend/src/components/WarningBanner/Warning.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Box, Grid, Paper, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import cisa_logo from '../../pages/AuthLogin/img/CISA_LOGO.png';
+
+export const CrossfeedWarning: React.FC = (props) => {
+  const BackgroundPaper = styled(Paper)(({ theme }) => ({
+    width: 900,
+    borderColor: '#047d95',
+    borderWidth: 2,
+    padding: theme.spacing(1),
+    backgroundColor: 'inherit'
+  }));
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'center', py: 5, px: 1 }}>
+      <BackgroundPaper variant="outlined">
+        <Grid container spacing={1}>
+          <Grid item xs={12} sm={3} display="flex" justifyContent="end">
+            <Box m="auto">
+              <img alt="CISA LOGO" src={cisa_logo} width="140px" />
+            </Box>
+          </Grid>
+          <Grid item xs={12} sm={9}>
+            <Typography variant="h6" textAlign="center">
+              WARNING
+            </Typography>
+            <Typography
+              variant="caption"
+              component="div"
+              fontSize={11}
+              lineHeight={1}
+            >
+              Crossfeed is hosted by Department of Homeland Security (DHS)
+              Cybersecurity and Infrastructure Security Agency (CISA)
+              Cybersecurity Division (CSD) Vulnerability Management (VM) Attack
+              Attack Attack Surface Management (ASM) Automation is computer
+              systems systems may systems may be monitored for all unlawful
+              unlawful purposes, including to ensure their use is authorized,
+              for management of the system, to protection against security
+              procedures, survivability, and operational operational operational
+              operational security. All information, information, including
+              information, placed or sent this system may be monitored.
+              Monitoring includes actives attacks by authorized US Government
+              entities to test or verify the security of this system.
+              <br />
+              <br />
+              Use of the computer system, authorized or unauthorized,
+              constitutes consent to monitoring of this system. Unauthorized
+              subject you to criminal prosecution. Evidence of unauthorized
+              collected during monitoring may be used for administrivia,
+              criminal, or other adverse action. Use of this system constitutes
+              to monitoring for these purposes. Use of this system implies
+              understanding of these items and conditions.
+            </Typography>
+          </Grid>
+        </Grid>
+      </BackgroundPaper>
+    </Box>
+  );
+};

frontend/src/components/WarningBanner/index.ts

@@ -0,0 +1 @@
+export * from './Warning';

frontend/src/components/WarningBanner/styleWarning.ts

@@ -0,0 +1,29 @@
+import { styled } from '@mui/material/styles';
+
+const PREFIX = 'Warning';
+
+export const warningClasses = {
+  warningBox: `${PREFIX}-warningBox`,
+  warningContainer: `${PREFIX}-footerContainer`,
+  warning_logo: `${PREFIX}-warning_logo`
+};
+export const WarningRoot = styled('div')(({ theme }) => ({
+  [`& .${warningClasses.warningBox}`]: {
+    position: 'relative',
+    top: '20px',
+    bottom: 0,
+    width: '100%'
+  },
+  [`& .${warningClasses.warningContainer}`]: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: '0 auto',
+    maxWidth: '1444px'
+  },
+  [`& .${warningClasses.warning_logo}`]: {
+    display: 'flex',
+    justifyContent: 'center',
+    height: '100%'
+  }
+}));