updated notification and footer

cisagov · Nov 8, 2023 · 874bf6d · 874bf6d
1 parent 6c11a68
commit 874bf6d
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 35 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -37,6 +37,7 @@ import { Layout, RouteGuard } from 'components';
 import { CrossfeedFooter } from './components/Footer';
 import './styles.scss';
 import { Authenticator } from '@aws-amplify/ui-react';
+//import { AuthLoginFooter } from 'pages/AuthLogin/AuthLoginFooter';
 
 API.configure({
   endpoints: [

diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
@@ -17,6 +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>
+              <Link className={footerClasses.footerNavLink} href="/">
+                Home
+              </Link>
+            </p>
+          </Grid>
           <Grid className={footerClasses.footerNavItem} item xs={12} sm={2}>
             <p>
               <Link
@@ -47,6 +54,17 @@ 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>
         </Grid>
       </Box>
     </FooterRoot>

diff --git a/frontend/src/pages/AuthLogin/AuthLogin.tsx b/frontend/src/pages/AuthLogin/AuthLogin.tsx
@@ -17,6 +17,7 @@ import {
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { AuthForm } from 'components';
+//import { AuthLoginFooter } from '../../pages/AuthLogin/AuthLoginFooter';
 import { Button } from '@trussworks/react-uswds';
 import { useAuthContext } from 'context';
 import { Alert } from '@mui/material';
@@ -27,35 +28,28 @@ import {
   useAuthenticator
 } from '@aws-amplify/ui-react';
 import { I18n } from 'aws-amplify';
-
 const TOTP_ISSUER = process.env.REACT_APP_TOTP_ISSUER;
-
 // Strings come from https://github.com/aws-amplify/amplify-ui/blob/main/packages/ui/src/i18n/dictionaries/authenticator/en.ts
 I18n.putVocabulariesForLanguage('en-US', {
   'Setup TOTP': 'Set up 2FA',
   'Confirm TOTP Code': 'Enter 2FA Code'
 });
-
 const amplifyTheme = {
   name: 'my-theme'
 };
-
 interface Errors extends Partial<FormData> {
   global?: string;
 }
-
 export const AuthLogin: React.FC<{ showSignUp?: boolean }> = ({
   showSignUp = false
 }) => {
   const { apiPost, refreshUser } = useAuthContext();
   const [errors, setErrors] = useState<Errors>({});
-
   // Once a user signs in, call refreshUser() so that the callback is called and the user gets signed in.
   const { authStatus } = useAuthenticator((context) => [context.isPending]);
   useEffect(() => {
     refreshUser();
   }, [refreshUser, authStatus]);
-
   const formFields = {
     confirmSignIn: {
       confirmation_code: {
@@ -80,7 +74,6 @@ export const AuthLogin: React.FC<{ showSignUp?: boolean }> = ({
       }
     }
   };
-
   const onSubmit: React.FormEventHandler = async (e) => {
     e.preventDefault();
     try {
@@ -97,33 +90,9 @@ export const AuthLogin: React.FC<{ showSignUp?: boolean }> = ({
       });
     }
   };
-
   if (process.env.REACT_APP_USE_COGNITO) {
     return (
       <AuthForm as="div">
-        <Alert onClose={() => {}} severity="warning">
-          <AlertTitle>
-            <h2 className="platform_notice">PLATFORM NOTIFICATION</h2>
-          </AlertTitle>
-          <h3>
-            Important Notice: Temporary Downtime During Crossfeed Migration
-          </h3>
-          <p>
-            The Crossfeed environment is moving. The migration will require a
-            temporary downtime of approximately one week.
-          </p>
-          <p>
-            The downtime will begin on Wednesday, October 25, through the end of
-            day Wednesday, November 01.
-          </p>
-          <p>
-            For additional information, please click
-            <a href="https://s3.amazonaws.com/crossfeed.cyber.dhs.gov/Notice.pdf">
-              {' '}
-              here.
-            </a>
-          </p>
-        </Alert>
         <h1>Welcome to Crossfeed</h1>
         <ThemeProvider theme={amplifyTheme}>
           <Authenticator
@@ -134,6 +103,29 @@ export const AuthLogin: React.FC<{ showSignUp?: boolean }> = ({
               !showSignUp && !(process.env.NODE_ENV === 'development')
             }
           />
+          <Alert onClose={() => {}} severity="warning" className="alert_box">
+            <AlertTitle>
+              <h2 className="platform_notice">PLATFORM NOTIFICATION</h2>
+            </AlertTitle>
+            <h3>
+              Important Notice: Temporary Downtime During Crossfeed Migration
+            </h3>
+            <p>
+              The Crossfeed environment is moving. The migration will require a
+              temporary downtime of approximately one week.
+            </p>
+            <p>
+              The downtime will begin on Wednesday, October 25, through the end
+              of day Wednesday, November 01.
+            </p>
+            <p>
+              For additional information, please click
+              <a href="https://s3.amazonaws.com/crossfeed.cyber.dhs.gov/Notice.pdf">
+                {' '}
+                here.
+              </a>
+            </p>
+          </Alert>
           <div className="notification_box">
             <div className="warning_header">WARNING</div>
             <div className="warning_logo">
@@ -171,7 +163,6 @@ export const AuthLogin: React.FC<{ showSignUp?: boolean }> = ({
       </AuthForm>
     );
   }
-
   return (
     <AuthForm onSubmit={onSubmit}>
       <h1>Welcome to Crossfeed</h1>

diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
@@ -95,9 +95,32 @@ form[data-amplify-authenticator-setup-totp] {
   }
 
 }
-.platform_notice{
-  margin:auto;
+.alert_box {
+  margin-top: 25px;
+}
+.platform_notice {
+  margin: auto;
   text-align: center;
+  padding-top: 10px;
+  font-weight: bold;
+  font-size: 20px;
+}
+.notification_header {
+  position: relative; 
+  padding-left: 10px;
+  padding-top: 10px;
+  padding-bottom: 20px;
+  transition: top .2s;
+  background-color: white;
+
+}
+.temp_notification{
+  position: relative; 
+  padding-left: 10px;
+  padding-top: 10px;
+  padding-bottom: 20px;
+  transition: top .2s;
+  background-color: white;
 }
 
 .notification_box {