From fb3262fdcd4f04e02eea0e12408cdafc02bd4925 Mon Sep 17 00:00:00 2001
From: lcampbell2 <l.campbell144768@gmail.com>
Date: Tue, 5 Jan 2021 13:45:26 -0400
Subject: [PATCH 1/5] remove org list from user page

---
 frontend/src/App.js                           |  6 +-
 frontend/src/UserCard.js                      | 15 +---
 frontend/src/UserPage.js                      | 80 +------------------
 .../src/__tests__/DmarcByDomainPage.test.js   |  6 +-
 frontend/src/__tests__/UserList.test.js       | 50 ------------
 frontend/src/__tests__/UserPage.test.js       | 18 -----
 .../src/fixtures/dmarcReportSummaryTable.js   |  4 +-
 frontend/src/graphql/queries.js               | 13 ---
 8 files changed, 11 insertions(+), 181 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 4b1621b4e0..a29cae9a84 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -10,7 +10,7 @@ import { Footer } from './Footer'
 import { Navigation } from './Navigation'
 import { Flex, Link, CSSReset, useToast, Box } from '@chakra-ui/core'
 import { SkipLink } from './SkipLink'
-import { TwoFactorNotificationBar } from './TwoFactorNotificationBar'
+// import { TwoFactorNotificationBar } from './TwoFactorNotificationBar'
 import { useUserState } from './UserState'
 import { RouteIf } from './RouteIf'
 import { ErrorBoundary } from 'react-error-boundary'
@@ -70,7 +70,7 @@ export default function App() {
             </Link>
           )}
 
-          {1 && (
+          {isLoggedIn() && (
             <Link to="/dmarc-summaries">
               <Trans>DMARC Report</Trans>
             </Link>
@@ -113,7 +113,7 @@ export default function App() {
           )}
         </Navigation>
 
-        {isLoggedIn() && !currentUser.tfa && <TwoFactorNotificationBar />}
+        {/* {isLoggedIn() && !currentUser.tfa && <TwoFactorNotificationBar />} */}
         <Main>
           <Suspense fallback={<div>Loading...</div>}>
             <Switch>
diff --git a/frontend/src/UserCard.js b/frontend/src/UserCard.js
index e811082637..16ca2c6b1c 100644
--- a/frontend/src/UserCard.js
+++ b/frontend/src/UserCard.js
@@ -1,24 +1,11 @@
 import React from 'react'
 import { Badge, Box, Text, PseudoBox, Stack } from '@chakra-ui/core'
 import { Trans } from '@lingui/macro'
-// import { useHistory } from 'react-router-dom'
 import { bool, string } from 'prop-types'
 
 export function UserCard({ userName, tfa, role }) {
-  // const history = useHistory()
   return (
-    <PseudoBox
-      width="100%"
-      // onClick={() => {
-      //   history.push({
-      //     pathname: '/user',
-      //     state: { detail: userName },
-      //   })
-      // }}
-      // _hover={{ borderColor: 'gray.200', bg: 'gray.200' }}
-      p="8"
-      as="button"
-    >
+    <PseudoBox width="100%" p="8">
       <Stack isInline align="center" mb={['1', '0']}>
         <Box>
           <Text fontSize="md">{userName}</Text>
diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index 5ed1da1767..e4ce7a0279 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -1,16 +1,7 @@
 import React from 'react'
-import { useHistory, useLocation, Link as RouteLink } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom'
 import { string } from 'prop-types'
-import {
-  Stack,
-  SimpleGrid,
-  Divider,
-  Heading,
-  Icon,
-  Text,
-  Badge,
-  Link,
-} from '@chakra-ui/core'
+import { Stack, SimpleGrid, Divider, Heading, Icon } from '@chakra-ui/core'
 import { useQuery } from '@apollo/client'
 import { useUserState } from './UserState'
 import { QUERY_CURRENT_USER } from './graphql/queries'
@@ -22,29 +13,12 @@ import EditableUserPassword from './EditableUserPassword'
 import { TrackerButton } from './TrackerButton'
 import { LoadingMessage } from './LoadingMessage'
 import { ErrorFallbackMessage } from './ErrorFallbackMessage'
-import { ErrorBoundary } from 'react-error-boundary'
-import { ListOf } from './ListOf'
 
 export default function UserPage() {
   const location = useLocation()
   const history = useHistory()
   const { currentUser } = useUserState()
 
-  // const {
-  //   loading: queryUserLoading,
-  //   error: queryUserError,
-  //   data: queryUserData,
-  // } = useQuery(QUERY_USER, {
-  //   context: {
-  //     headers: {
-  //       authorization: currentUser.jwt,
-  //     },
-  //   },
-  //   variables: {
-  //     userName: currentUser.userName,
-  //   },
-  // })
-
   const {
     loading: queryUserLoading,
     error: queryUserError,
@@ -69,10 +43,6 @@ export default function UserPage() {
     return <ErrorFallbackMessage error={queryUserError} />
   }
 
-  const affiliations = queryUserData.userPage.affiliations.edges.map(
-    (e) => e.node,
-  )
-
   return (
     <SimpleGrid columns={{ md: 1, lg: 2 }} spacing="60px" width="100%">
       <Stack p={25} spacing={4}>
@@ -96,52 +66,6 @@ export default function UserPage() {
       </Stack>
 
       <Stack Stack p={25} spacing="4">
-        <Heading as="h1" size="lg" textAlign="left">
-          <Trans>Organizations</Trans>
-        </Heading>
-        <ListOf
-          elements={affiliations}
-          ifEmpty={() => <Trans>No Organizations</Trans>}
-          mb="4"
-        >
-          {({ permission, organization }, index) => (
-            <ErrorBoundary key={`userpage-errorbound-${index}`} FallbackComponent={ErrorFallbackMessage}>
-              <Stack
-                mb="2"
-                flexDirection={['column', 'row']}
-                align={['flex-start', 'center']}
-                key={`${organization.slug}:${index}`}
-              >
-                <Stack isInline align="center" w={['100%', '70%']}>
-                  <Link
-                    as={RouteLink}
-                    to={`/organizations/${organization.slug}`}
-                  >
-                    <Text fontWeight="semibold" isTruncated mr="1">
-                      {organization.name}
-                    </Text>
-                  </Link>
-                  {organization.verified && (
-                    <Icon name="check-circle" color="blue.500" />
-                  )}
-                </Stack>
-                <Stack isInline align="center">
-                  <Text fontWeight="bold">Role:</Text>
-                  <Badge
-                    color="primary"
-                    bg="transparent"
-                    borderColor="primary"
-                    borderWidth="1px"
-                  >
-                    {permission}
-                  </Badge>
-                </Stack>
-                <Divider />
-              </Stack>
-            </ErrorBoundary>
-          )}
-        </ListOf>
-        <Divider />
         <Heading as="h1" size="lg" textAlign="left">
           <Trans>Account Details</Trans>
         </Heading>
diff --git a/frontend/src/__tests__/DmarcByDomainPage.test.js b/frontend/src/__tests__/DmarcByDomainPage.test.js
index 0251d3936d..1ec37aec58 100644
--- a/frontend/src/__tests__/DmarcByDomainPage.test.js
+++ b/frontend/src/__tests__/DmarcByDomainPage.test.js
@@ -36,7 +36,7 @@ describe('<DmarcByDomainPage />', () => {
           query: FORWARD,
           variables: {
             month: 'LAST30DAYS',
-            year: '2020',
+            year: '2021',
             first: 10,
           },
         },
@@ -66,7 +66,7 @@ describe('<DmarcByDomainPage />', () => {
       {
         request: {
           query: FORWARD,
-          variables: { first: 10, month: 'LAST30DAYS', year: '2020' },
+          variables: { first: 10, month: 'LAST30DAYS', year: '2021' },
         },
         result: rawDmarcReportSummaryTableData,
       },
@@ -96,7 +96,7 @@ describe('<DmarcByDomainPage />', () => {
           query: FORWARD,
           variables: {
             month: 'LAST30DAYS',
-            year: '2020',
+            year: '2021',
             first: 10,
           },
         },
diff --git a/frontend/src/__tests__/UserList.test.js b/frontend/src/__tests__/UserList.test.js
index 7df0ad3aa8..c9fa406bc2 100644
--- a/frontend/src/__tests__/UserList.test.js
+++ b/frontend/src/__tests__/UserList.test.js
@@ -60,56 +60,6 @@ describe('<UserList />', () => {
     )
   })
 
-  // it('redirects to userPage when a list element is clicked', async () => {
-  //   // create a history object and inject it so we can inspect it afterwards
-  //   // for the side effects of our form submission (a redirect to /!).
-  //   const history = createMemoryHistory({
-  //     initialEntries: ['/user-list'],
-  //     initialIndex: 0,
-  //   })
-
-  //   // Set the inital history item to user-list
-  //   const { getByText } = render(
-  //     <UserStateProvider
-  //       initialState={{
-  //         userName: 'testuser@testemail.gc.ca',
-  //         jwt: 'string',
-  //         tfa: false,
-  //       }}
-  //     >
-  //       <ThemeProvider theme={theme}>
-  //         <I18nProvider i18n={i18n}>
-  //           <Router history={history}>
-  //             <MockedProvider>
-  //               <UserList
-  //                 permission={'SUPER_ADMIN'}
-  //                 userListData={data.findOrganizationBySlug.affiliations}
-  //                 orgId={data.findOrganizationBySlug.id}
-  //                 orgName={data.findOrganizationBySlug.name}
-  //               />
-  //             </MockedProvider>
-  //           </Router>
-  //         </I18nProvider>
-  //       </ThemeProvider>
-  //     </UserStateProvider>,
-  //   )
-
-  //   const foundUserCard = await waitFor(() =>
-  //     getByText(
-  //       data.findOrganizationBySlug.affiliations.edges[0].node.user.userName,
-  //     ),
-  //   )
-
-  //   const leftClick = { button: 0 }
-  //   fireEvent.click(foundUserCard, leftClick)
-  //   // default `button` property for click events is set to `0` which is a left click.
-
-  //   await waitFor(() => {
-  //     // Path should be '/user', so expect that value
-  //     expect(history.location.pathname).toEqual('/user')
-  //   })
-  // })
-
   describe('Admin profile userlist', () => {
     it('updateUserRole elements render', async () => {
       const history = createMemoryHistory({
diff --git a/frontend/src/__tests__/UserPage.test.js b/frontend/src/__tests__/UserPage.test.js
index 7d1254f0a9..3818872dfd 100644
--- a/frontend/src/__tests__/UserPage.test.js
+++ b/frontend/src/__tests__/UserPage.test.js
@@ -26,7 +26,6 @@ describe('<UserPage />', () => {
     {
       request: {
         query: QUERY_CURRENT_USER,
-        // variables: { userName: userName },
       },
       result: {
         data: {
@@ -37,23 +36,6 @@ describe('<UserPage />', () => {
             preferredLang: 'ENGLISH',
             tfaValidated: false,
             emailValidated: false,
-            affiliations: {
-              edges: [
-                {
-                  node: {
-                    permission: 'ADMIN',
-                    organization: {
-                      id: 'VXNlckxpc3RJdGVtOig0LCAzKQ==',
-                      acronym: 'CSE',
-                      name: 'Test Org',
-                      slug: 'test-org',
-                      verified: false,
-                      domainCount: 3,
-                    },
-                  },
-                },
-              ],
-            },
           },
         },
       },
diff --git a/frontend/src/fixtures/dmarcReportSummaryTable.js b/frontend/src/fixtures/dmarcReportSummaryTable.js
index 3f97896b41..0e034d653e 100644
--- a/frontend/src/fixtures/dmarcReportSummaryTable.js
+++ b/frontend/src/fixtures/dmarcReportSummaryTable.js
@@ -8,7 +8,7 @@ export const rawDmarcReportSummaryTableData = {
             domain: 'domain1.ca',
             dmarcSummaryByPeriod: {
               month: 'LAST30DAYS',
-              year: '2020',
+              year: '2021',
               domain: 'domain1.ca',
               categoryPercentages: {
                 failPercentage: 31.5,
@@ -31,7 +31,7 @@ export const rawDmarcReportSummaryTableData = {
             domain: 'domain2.ca',
             dmarcSummaryByPeriod: {
               month: 'LAST30DAYS',
-              year: '2020',
+              year: '2021',
               domain: 'domain2.ca',
               categoryPercentages: {
                 failPercentage: 31.5,
diff --git a/frontend/src/graphql/queries.js b/frontend/src/graphql/queries.js
index ec8641e473..3d413e64d2 100644
--- a/frontend/src/graphql/queries.js
+++ b/frontend/src/graphql/queries.js
@@ -448,19 +448,6 @@ export const QUERY_CURRENT_USER = gql`
       preferredLang
       tfaValidated
       emailValidated
-      affiliations {
-        edges {
-          node {
-            permission
-            organization {
-              id
-              name
-              slug
-              verified
-            }
-          }
-        }
-      }
     }
   }
 `

From f7611cb08497f6b7b6a46262a03dea8265443e56 Mon Sep 17 00:00:00 2001
From: lcampbell2 <l.campbell144768@gmail.com>
Date: Tue, 5 Jan 2021 14:14:17 -0400
Subject: [PATCH 2/5] added validation badges to user page

---
 frontend/src/UserPage.js   | 29 +++++++++++++++++++++++++++--
 frontend/src/locales/en.po |  5 +++++
 frontend/src/locales/fr.po |  5 +++++
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index e4ce7a0279..41941d4c97 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -1,7 +1,15 @@
 import React from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { string } from 'prop-types'
-import { Stack, SimpleGrid, Divider, Heading, Icon } from '@chakra-ui/core'
+import {
+  Stack,
+  SimpleGrid,
+  Divider,
+  Heading,
+  Icon,
+  Badge,
+  Box,
+} from '@chakra-ui/core'
 import { useQuery } from '@apollo/client'
 import { useUserState } from './UserState'
 import { QUERY_CURRENT_USER } from './graphql/queries'
@@ -65,10 +73,27 @@ export default function UserPage() {
         />
       </Stack>
 
-      <Stack Stack p={25} spacing="4">
+      <Stack p={25} spacing="4">
         <Heading as="h1" size="lg" textAlign="left">
           <Trans>Account Details</Trans>
         </Heading>
+        <Box>
+          <Badge
+            variantColor={queryUserData.userPage.tfaValidated ? 'green' : 'red'}
+          >
+            <Trans>2FA Validated</Trans>
+          </Badge>
+        </Box>
+        <Box>
+          <Badge
+            variantColor={
+              queryUserData.userPage.emailValidated ? 'green' : 'red'
+            }
+          >
+            <Trans>Email Validated</Trans>
+          </Badge>
+        </Box>
+
         <TrackerButton
           w={['100%', '50%']}
           variant="primary"
diff --git a/frontend/src/locales/en.po b/frontend/src/locales/en.po
index 094299d6f3..b658d0a42c 100644
--- a/frontend/src/locales/en.po
+++ b/frontend/src/locales/en.po
@@ -26,9 +26,14 @@ msgid "*search bars do not actively search databases currently. They are used to
 msgstr "*search bars do not actively search databases currently. They are used to demonstrate the 'add' button feature"
 
 #: src/UserCard.js:44
+#: src/UserPage.js:84
 msgid "2FA Validated"
 msgstr "2FA Validated"
 
+#: src/UserPage.js:93
+msgid "Email Validated"
+msgstr "Email Validated"
+
 #: src/guidanceTagConstants.js:5
 msgid "3.2.2 Third Parties and DKIM"
 msgstr "3.2.2 Third Parties and DKIM"
diff --git a/frontend/src/locales/fr.po b/frontend/src/locales/fr.po
index e2e405b2b5..dbf43b0df3 100644
--- a/frontend/src/locales/fr.po
+++ b/frontend/src/locales/fr.po
@@ -26,9 +26,14 @@ msgid "*search bars do not actively search databases currently. They are used to
 msgstr "*Les barres de recherche ne recherchent pas activement les bases de données actuellement. Elles sont utilisées pour démontrer la fonction du bouton 'Ajouter'"
 
 #: src/UserCard.js:44
+#: src/UserPage.js:84
 msgid "2FA Validated"
 msgstr "2FA Validé"
 
+#: src/UserPage.js:93
+msgid "Email Validated"
+msgstr "Courriel validé"
+
 #: src/guidanceTagConstants.js:5
 msgid "3.2.2 Third Parties and DKIM"
 msgstr "3.2.2 Expéditeurs tiers et DKIM"

From d52c12a063fe510f0b479898d8e138f4aeebcd32 Mon Sep 17 00:00:00 2001
From: lcampbell2 <l.campbell144768@gmail.com>
Date: Wed, 6 Jan 2021 10:37:26 -0400
Subject: [PATCH 3/5] add error fallback message to DmarcByDomainPage.js

---
 frontend/src/DmarcByDomainPage.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/frontend/src/DmarcByDomainPage.js b/frontend/src/DmarcByDomainPage.js
index 2ab7cebe4e..3d3d064ea2 100644
--- a/frontend/src/DmarcByDomainPage.js
+++ b/frontend/src/DmarcByDomainPage.js
@@ -47,13 +47,7 @@ export default function DmarcByDomainPage() {
     relayRoot: 'findMyDomains',
   })
 
-  // TODO: Properly handle these errors
-  if (error)
-    return (
-      <Heading as="h3" size="lg" textAlign="center">
-        <Trans>Error while querying for DMARC report summary table</Trans>
-      </Heading>
-    )
+  if (error) return <ErrorFallbackMessage error={error} />
 
   // DMARC Summary Table setup
   let tableDisplay

From b6765625e101dea10dd2cf819a0f04f522352790 Mon Sep 17 00:00:00 2001
From: lcampbell2 <l.campbell144768@gmail.com>
Date: Wed, 6 Jan 2021 10:52:34 -0400
Subject: [PATCH 4/5] changed variant of 2FA badges, org card percentages
 rounded

---
 frontend/src/OrganizationCard.js        | 12 ++++++++++++
 frontend/src/UserCard.js                |  2 +-
 frontend/src/UserPage.js                |  2 ++
 frontend/src/__tests__/UserCard.test.js |  4 ++--
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/OrganizationCard.js b/frontend/src/OrganizationCard.js
index 95015046bb..3028d2cf04 100644
--- a/frontend/src/OrganizationCard.js
+++ b/frontend/src/OrganizationCard.js
@@ -35,6 +35,18 @@ export function OrganizationCard({
   if (webSummary[0]?.percentage) webValue = webSummary[0]?.percentage
   if (mailSummary[0]?.percentage) mailValue = mailSummary[0]?.percentage
 
+  if (webValue % 1 >= 0.5) {
+    webValue = Math.ceil(webValue)
+  } else {
+    webValue = Math.floor(webValue)
+  }
+
+  if (mailValue % 1 >= 0.5) {
+    mailValue = Math.ceil(mailValue)
+  } else {
+    mailValue = Math.floor(mailValue)
+  }
+
   return (
     <ListItem {...rest}>
       <PseudoBox
diff --git a/frontend/src/UserCard.js b/frontend/src/UserCard.js
index 16ca2c6b1c..664c96e934 100644
--- a/frontend/src/UserCard.js
+++ b/frontend/src/UserCard.js
@@ -25,7 +25,7 @@ export function UserCard({ userName, tfa, role }) {
         )}
         {tfa !== null && (
           <Box>
-            <Badge variantColor={tfa ? 'green' : 'red'}>
+            <Badge variant="solid" variantColor={tfa ? 'green' : 'red'}>
               <Trans>2FA Validated</Trans>
             </Badge>
           </Box>
diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index 41941d4c97..36df67ae87 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -79,6 +79,7 @@ export default function UserPage() {
         </Heading>
         <Box>
           <Badge
+            variant="solid"
             variantColor={queryUserData.userPage.tfaValidated ? 'green' : 'red'}
           >
             <Trans>2FA Validated</Trans>
@@ -86,6 +87,7 @@ export default function UserPage() {
         </Box>
         <Box>
           <Badge
+            variant="solid"
             variantColor={
               queryUserData.userPage.emailValidated ? 'green' : 'red'
             }
diff --git a/frontend/src/__tests__/UserCard.test.js b/frontend/src/__tests__/UserCard.test.js
index 98d94ce3f4..50a44b5114 100644
--- a/frontend/src/__tests__/UserCard.test.js
+++ b/frontend/src/__tests__/UserCard.test.js
@@ -37,7 +37,7 @@ describe('<UserCard />', () => {
 
     const tfaBadge = getByText(/2FA Validated/i)
     expect(tfaBadge).toBeDefined()
-    expect(tfaBadge).toHaveStyle('background-color: rgb(198, 246, 213)')
+    expect(tfaBadge).toHaveStyle('background-color: rgb(56, 161, 105)')
   })
 
   it('badge is red when TwoFactor value is false', async () => {
@@ -59,6 +59,6 @@ describe('<UserCard />', () => {
 
     const tfaBadge = getByText(/2FA Validated/i)
     expect(tfaBadge).toBeDefined()
-    expect(tfaBadge).toHaveStyle('background-color: rgb(254, 215, 215)')
+    expect(tfaBadge).toHaveStyle('background-color: rgb(229, 62, 62)')
   })
 })

From 87b472aa6da00a59056dbf34a04765e5d77301bf Mon Sep 17 00:00:00 2001
From: lcampbell2 <l.campbell144768@gmail.com>
Date: Thu, 7 Jan 2021 11:07:37 -0400
Subject: [PATCH 5/5] replaced 2FA/Email validation red/green representation
 with icons

---
 frontend/src/UserPage.js | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index 36df67ae87..307e7fe924 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -78,20 +78,28 @@ export default function UserPage() {
           <Trans>Account Details</Trans>
         </Heading>
         <Box>
-          <Badge
-            variant="solid"
-            variantColor={queryUserData.userPage.tfaValidated ? 'green' : 'red'}
-          >
+          <Icon
+            size="icons.lg"
+            name={queryUserData.userPage.tfaValidated ? 'check' : 'close'}
+            color={
+              queryUserData.userPage.tfaValidated ? 'green.500' : 'red.500'
+            }
+            pr={2}
+          />
+          <Badge variant="outline" color="gray.900">
             <Trans>2FA Validated</Trans>
           </Badge>
         </Box>
         <Box>
-          <Badge
-            variant="solid"
-            variantColor={
-              queryUserData.userPage.emailValidated ? 'green' : 'red'
+          <Icon
+            size="icons.lg"
+            name={queryUserData.userPage.emailValidated ? 'check' : 'close'}
+            color={
+              queryUserData.userPage.emailValidated ? 'green.500' : 'red.500'
             }
-          >
+            pr={2}
+          />
+          <Badge variant="outline" color="gray.900">
             <Trans>Email Validated</Trans>
           </Badge>
         </Box>