From 74be8d7ad2cb9c5a708a4d2e3581b43f1094540a Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Wed, 25 Mar 2020 11:28:00 -0300
Subject: [PATCH 01/16] Add UserPage Component. Begin populating component

---
 frontend/src/App.js      |  8 +++++
 frontend/src/UserPage.js | 73 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+)
 create mode 100644 frontend/src/UserPage.js

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 5cef5328b7..c0a7e8e91a 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -19,6 +19,7 @@ import { SkipLink } from './SkipLink'
 import { useQuery, useApolloClient } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 import { TwoFactorNotificationBar } from './TwoFactorNotificationBar'
+import { UserPage } from './UserPage'
 
 export default function App() {
   // Hooks to be used with this functional component
@@ -82,6 +83,9 @@ export default function App() {
               <Trans>Sign Out</Trans>
             </Link>
           )}
+          <Link to="/user">
+            <Trans>User Profile</Trans>
+          </Link>
         </Navigation>
         {// Dynamically show the TwoFactorNotification bar
         data && !data.tfa && <TwoFactorNotificationBar />}
@@ -94,6 +98,10 @@ export default function App() {
             <DomainsPage />
           </Route>
 
+          <Route path="/user">
+            <UserPage />
+          </Route>
+
           <Route path="/sign-in">
             <SignInPage />
           </Route>
diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
new file mode 100644
index 0000000000..a4cb8a4f45
--- /dev/null
+++ b/frontend/src/UserPage.js
@@ -0,0 +1,73 @@
+import React from 'react'
+
+import { useFormik } from 'formik'
+
+import { Stack, SimpleGrid, Button, Text, Select, Input } from '@chakra-ui/core'
+
+export function UserPage() {
+  const formik = useFormik({
+    initialValues: {
+      email: 'steve@email.gc.ca',
+      lang: 'select option',
+      displayName: 'steve',
+    },
+    onSubmit: values => {
+      window.alert(JSON.stringify(values, null, 2))
+    },
+  })
+  return (
+    <SimpleGrid columns={{ md: 1, lg: 2 }} spacing="40px" width="100%">
+      <form onSubmit={formik.handleSubmit}>
+        <Stack p={10} spacing={6}>
+          <Text fontSize="2xl" fontWeight="bold" textAlign="center">
+            User Profile
+          </Text>
+
+          <Stack>
+            <Text fontSize="xl">Display Name:</Text>
+            <Input
+              width="60%"
+              id="displayName"
+              name="displayName"
+              type="text"
+              onChange={formik.handleChange}
+              value={formik.values.displayName}
+            />
+          </Stack>
+
+          <Stack>
+            <Text fontSize="xl">Email:</Text>
+            <Input
+              width="60%"
+              id="email"
+              name="email"
+              type="email"
+              onChange={formik.handleChange}
+              value={formik.values.email}
+            />
+          </Stack>
+
+          <Stack>
+            <Text fontSize="xl">Language:</Text>
+            <Select
+              width="60%"
+              id="lang"
+              name="lang"
+              type="text"
+              placeholder="Select option"
+              onChange={formik.handleChange}
+              value={formik.values.lang}
+            >
+              <option value="en">English</option>
+              <option value="fr">French</option>
+            </Select>
+          </Stack>
+          <Button type="submit">Save Changes</Button>
+        </Stack>
+      </form>
+
+      <Stack bg="tomato" height="80px"></Stack>
+      <Stack bg="tomato" height="80px"></Stack>
+    </SimpleGrid>
+  )
+}

From 69121e55b6770b96d2ec44eea449c0d41aeb0701 Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Wed, 25 Mar 2020 13:21:39 -0300
Subject: [PATCH 02/16] Use a unique formik hook for user details form

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

diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index a4cb8a4f45..51ab8f7be6 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -5,7 +5,7 @@ import { useFormik } from 'formik'
 import { Stack, SimpleGrid, Button, Text, Select, Input } from '@chakra-ui/core'
 
 export function UserPage() {
-  const formik = useFormik({
+  const userDetailsFormik = useFormik({
     initialValues: {
       email: 'steve@email.gc.ca',
       lang: 'select option',
@@ -17,7 +17,7 @@ export function UserPage() {
   })
   return (
     <SimpleGrid columns={{ md: 1, lg: 2 }} spacing="40px" width="100%">
-      <form onSubmit={formik.handleSubmit}>
+      <form onSubmit={userDetailsFormik.handleSubmit}>
         <Stack p={10} spacing={6}>
           <Text fontSize="2xl" fontWeight="bold" textAlign="center">
             User Profile
@@ -30,8 +30,8 @@ export function UserPage() {
               id="displayName"
               name="displayName"
               type="text"
-              onChange={formik.handleChange}
-              value={formik.values.displayName}
+              onChange={userDetailsFormik.handleChange}
+              value={userDetailsFormik.values.displayName}
             />
           </Stack>
 
@@ -42,8 +42,8 @@ export function UserPage() {
               id="email"
               name="email"
               type="email"
-              onChange={formik.handleChange}
-              value={formik.values.email}
+              onChange={userDetailsFormik.handleChange}
+              value={userDetailsFormik.values.email}
             />
           </Stack>
 
@@ -55,8 +55,8 @@ export function UserPage() {
               name="lang"
               type="text"
               placeholder="Select option"
-              onChange={formik.handleChange}
-              value={formik.values.lang}
+              onChange={userDetailsFormik.handleChange}
+              value={userDetailsFormik.values.lang}
             >
               <option value="en">English</option>
               <option value="fr">French</option>
@@ -66,7 +66,10 @@ export function UserPage() {
         </Stack>
       </form>
 
-      <Stack bg="tomato" height="80px"></Stack>
+      <Stack Stack p={10} spacing={6} bg="tomato">
+      <Text fontSize="2xl" fontWeight="bold" textAlign="center">Account Details</Text>
+
+      </Stack>
       <Stack bg="tomato" height="80px"></Stack>
     </SimpleGrid>
   )

From 7ded3fd700b2e9ee359ad9e275991af86429bbb3 Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Wed, 25 Mar 2020 14:08:41 -0300
Subject: [PATCH 03/16] User Profile avaliable when you sign in. Add 'Account
 Detail' section info. Add Sign-out button and apolloClient. Add toast for
 signout. Remove signout button from APP.js nav bar. Add enable TFA button and
 link to correct page. Improve draft layout.

---
 frontend/src/App.js      |  26 ++-------
 frontend/src/UserPage.js | 118 +++++++++++++++++++++++++++++++++++----
 2 files changed, 110 insertions(+), 34 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index c0a7e8e91a..b0ca2d1aad 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -14,9 +14,9 @@ import { TopBanner } from './TopBanner'
 import { PhaseBanner } from './PhaseBanner'
 import { Footer } from './Footer'
 import { Navigation } from './Navigation'
-import { Flex, Link, CSSReset, useToast } from '@chakra-ui/core'
+import { Flex, Link, CSSReset } from '@chakra-ui/core'
 import { SkipLink } from './SkipLink'
-import { useQuery, useApolloClient } from '@apollo/react-hooks'
+import { useQuery } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 import { TwoFactorNotificationBar } from './TwoFactorNotificationBar'
 import { UserPage } from './UserPage'
@@ -30,8 +30,6 @@ export default function App() {
     }
   `
   const { i18n } = useLingui()
-  const toast = useToast()
-  const client = useApolloClient()
   const { data } = useQuery(GET_JWT_TOKEN)
 
   return (
@@ -66,26 +64,10 @@ export default function App() {
               <Trans>Sign In</Trans>
             </Link>
           ) : (
-            <Link
-              to="/"
-              onClick={() => {
-                // This clears the JWT, essentially logging the user out in one go
-                client.writeData({ data: { jwt: null } }) // How is this done?
-                toast({
-                  title: 'Sign Out.',
-                  description: 'You have successfully been signed out.',
-                  status: 'success',
-                  duration: 9000,
-                  isClosable: true,
-                })
-              }}
-            >
-              <Trans>Sign Out</Trans>
+            <Link to="/user">
+              <Trans>User Profile</Trans>
             </Link>
           )}
-          <Link to="/user">
-            <Trans>User Profile</Trans>
-          </Link>
         </Navigation>
         {// Dynamically show the TwoFactorNotification bar
         data && !data.tfa && <TwoFactorNotificationBar />}
diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index 51ab8f7be6..281498a997 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -1,10 +1,32 @@
 import React from 'react'
 
 import { useFormik } from 'formik'
+import { useHistory } from 'react-router-dom'
 
-import { Stack, SimpleGrid, Button, Text, Select, Input } from '@chakra-ui/core'
+import {
+  Stack,
+  SimpleGrid,
+  Button,
+  Text,
+  Select,
+  Input,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+  Divider,
+  Checkbox,
+  CheckboxGroup,
+  useToast,
+} from '@chakra-ui/core'
+import { useApolloClient } from '@apollo/react-hooks'
 
 export function UserPage() {
+  const client = useApolloClient()
+  const toast = useToast()
+  const history = useHistory()
+
   const userDetailsFormik = useFormik({
     initialValues: {
       email: 'steve@email.gc.ca',
@@ -16,17 +38,16 @@ export function UserPage() {
     },
   })
   return (
-    <SimpleGrid columns={{ md: 1, lg: 2 }} spacing="40px" width="100%">
+    <SimpleGrid columns={{ md: 1, lg: 2 }} spacing="60px" width="100%">
       <form onSubmit={userDetailsFormik.handleSubmit}>
-        <Stack p={10} spacing={6}>
+        <Stack p={25} spacing={4}>
           <Text fontSize="2xl" fontWeight="bold" textAlign="center">
             User Profile
           </Text>
 
-          <Stack>
+          <Stack mt="20px">
             <Text fontSize="xl">Display Name:</Text>
             <Input
-              width="60%"
               id="displayName"
               name="displayName"
               type="text"
@@ -38,7 +59,6 @@ export function UserPage() {
           <Stack>
             <Text fontSize="xl">Email:</Text>
             <Input
-              width="60%"
               id="email"
               name="email"
               type="email"
@@ -50,7 +70,6 @@ export function UserPage() {
           <Stack>
             <Text fontSize="xl">Language:</Text>
             <Select
-              width="60%"
               id="lang"
               name="lang"
               type="text"
@@ -62,15 +81,90 @@ export function UserPage() {
               <option value="fr">French</option>
             </Select>
           </Stack>
-          <Button type="submit">Save Changes</Button>
+          <Button type="submit" variantColor="teal" w={'50%'} mt={5}>
+            Save Changes
+          </Button>
         </Stack>
       </form>
 
-      <Stack Stack p={10} spacing={6} bg="tomato">
-      <Text fontSize="2xl" fontWeight="bold" textAlign="center">Account Details</Text>
-
+      <Stack Stack p={25} spacing={4}>
+        <Text fontSize="2xl" fontWeight="bold" textAlign="center">
+          Account Details
+        </Text>
+        <CheckboxGroup
+          mt="20px"
+          variantColor="teal"
+          defaultValue={['admin', 'active']}
+        >
+          <Checkbox value="admin">Administrative Account</Checkbox>
+          <Checkbox value="active">Account Active</Checkbox>
+        </CheckboxGroup>
+        <Stack>
+          <Text fontSize="xl">API Quota:</Text>
+          <NumberInput
+            id="apiQuota"
+            name="apiQuota"
+            defaultValue={15}
+            min={10}
+            max={20}
+          >
+            <NumberInputField />
+            <NumberInputStepper>
+              <NumberIncrementStepper />
+              <NumberDecrementStepper />
+            </NumberInputStepper>
+          </NumberInput>
+        </Stack>
+        <Stack>
+          <Text fontSize="xl">Submission Quota:</Text>
+          <NumberInput
+            id="submissionQuota"
+            name="submissionQuota"
+            defaultValue={15}
+            min={10}
+            max={20}
+          >
+            <NumberInputField />
+            <NumberInputStepper>
+              <NumberIncrementStepper />
+              <NumberDecrementStepper />
+            </NumberInputStepper>
+          </NumberInput>
+        </Stack>
+        <Divider />
+        <Stack isInline>
+          <Button leftIcon="lock" variantColor="blue"  onClick={() => {history.push('/two-factor-code')}}>
+            Enable 2FA
+          </Button>
+          <Button leftIcon="edit" variantColor="teal" onClick={() => {window.alert("coming soon")}}>
+            Manage API keys
+          </Button>
+        </Stack>
+        <Button
+          variantColor="teal"
+          w={'50%'}
+          onClick={() => {
+            // This clears the JWT, essentially logging the user out in one go
+            client.writeData({ data: { jwt: null } }) // How is this done?
+            history.push('/')
+            toast({
+              title: 'Sign Out.',
+              description: 'You have successfully been signed out.',
+              status: 'success',
+              duration: 9000,
+              isClosable: true,
+            })
+          }}
+        >
+          Sign Out
+        </Button>
+      </Stack>
+      <Stack p={25} spacing={4}>
+        <Text fontSize="2xl" fontWeight="bold" textAlign="center">
+          Change Password
+        </Text>
+        <p>PasswordConfirm componenet goes here.</p>
       </Stack>
-      <Stack bg="tomato" height="80px"></Stack>
     </SimpleGrid>
   )
 }

From 09a58c7a7d83a22f49bada54cdc1f9f5cd57ac7f Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Wed, 25 Mar 2020 11:28:00 -0300
Subject: [PATCH 04/16] Add UserPage Component. Begin populating component

---
 frontend/src/App.js      |  8 +++++
 frontend/src/UserPage.js | 73 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+)
 create mode 100644 frontend/src/UserPage.js

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 5cef5328b7..c0a7e8e91a 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -19,6 +19,7 @@ import { SkipLink } from './SkipLink'
 import { useQuery, useApolloClient } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 import { TwoFactorNotificationBar } from './TwoFactorNotificationBar'
+import { UserPage } from './UserPage'
 
 export default function App() {
   // Hooks to be used with this functional component
@@ -82,6 +83,9 @@ export default function App() {
               <Trans>Sign Out</Trans>
             </Link>
           )}
+          <Link to="/user">
+            <Trans>User Profile</Trans>
+          </Link>
         </Navigation>
         {// Dynamically show the TwoFactorNotification bar
         data && !data.tfa && <TwoFactorNotificationBar />}
@@ -94,6 +98,10 @@ export default function App() {
             <DomainsPage />
           </Route>
 
+          <Route path="/user">
+            <UserPage />
+          </Route>
+
           <Route path="/sign-in">
             <SignInPage />
           </Route>
diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
new file mode 100644
index 0000000000..a4cb8a4f45
--- /dev/null
+++ b/frontend/src/UserPage.js
@@ -0,0 +1,73 @@
+import React from 'react'
+
+import { useFormik } from 'formik'
+
+import { Stack, SimpleGrid, Button, Text, Select, Input } from '@chakra-ui/core'
+
+export function UserPage() {
+  const formik = useFormik({
+    initialValues: {
+      email: 'steve@email.gc.ca',
+      lang: 'select option',
+      displayName: 'steve',
+    },
+    onSubmit: values => {
+      window.alert(JSON.stringify(values, null, 2))
+    },
+  })
+  return (
+    <SimpleGrid columns={{ md: 1, lg: 2 }} spacing="40px" width="100%">
+      <form onSubmit={formik.handleSubmit}>
+        <Stack p={10} spacing={6}>
+          <Text fontSize="2xl" fontWeight="bold" textAlign="center">
+            User Profile
+          </Text>
+
+          <Stack>
+            <Text fontSize="xl">Display Name:</Text>
+            <Input
+              width="60%"
+              id="displayName"
+              name="displayName"
+              type="text"
+              onChange={formik.handleChange}
+              value={formik.values.displayName}
+            />
+          </Stack>
+
+          <Stack>
+            <Text fontSize="xl">Email:</Text>
+            <Input
+              width="60%"
+              id="email"
+              name="email"
+              type="email"
+              onChange={formik.handleChange}
+              value={formik.values.email}
+            />
+          </Stack>
+
+          <Stack>
+            <Text fontSize="xl">Language:</Text>
+            <Select
+              width="60%"
+              id="lang"
+              name="lang"
+              type="text"
+              placeholder="Select option"
+              onChange={formik.handleChange}
+              value={formik.values.lang}
+            >
+              <option value="en">English</option>
+              <option value="fr">French</option>
+            </Select>
+          </Stack>
+          <Button type="submit">Save Changes</Button>
+        </Stack>
+      </form>
+
+      <Stack bg="tomato" height="80px"></Stack>
+      <Stack bg="tomato" height="80px"></Stack>
+    </SimpleGrid>
+  )
+}

From 0d97178d1b4ccedf9129847a7eadda2f02f70180 Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Wed, 25 Mar 2020 13:21:39 -0300
Subject: [PATCH 05/16] Use a unique formik hook for user details form

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

diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index a4cb8a4f45..51ab8f7be6 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -5,7 +5,7 @@ import { useFormik } from 'formik'
 import { Stack, SimpleGrid, Button, Text, Select, Input } from '@chakra-ui/core'
 
 export function UserPage() {
-  const formik = useFormik({
+  const userDetailsFormik = useFormik({
     initialValues: {
       email: 'steve@email.gc.ca',
       lang: 'select option',
@@ -17,7 +17,7 @@ export function UserPage() {
   })
   return (
     <SimpleGrid columns={{ md: 1, lg: 2 }} spacing="40px" width="100%">
-      <form onSubmit={formik.handleSubmit}>
+      <form onSubmit={userDetailsFormik.handleSubmit}>
         <Stack p={10} spacing={6}>
           <Text fontSize="2xl" fontWeight="bold" textAlign="center">
             User Profile
@@ -30,8 +30,8 @@ export function UserPage() {
               id="displayName"
               name="displayName"
               type="text"
-              onChange={formik.handleChange}
-              value={formik.values.displayName}
+              onChange={userDetailsFormik.handleChange}
+              value={userDetailsFormik.values.displayName}
             />
           </Stack>
 
@@ -42,8 +42,8 @@ export function UserPage() {
               id="email"
               name="email"
               type="email"
-              onChange={formik.handleChange}
-              value={formik.values.email}
+              onChange={userDetailsFormik.handleChange}
+              value={userDetailsFormik.values.email}
             />
           </Stack>
 
@@ -55,8 +55,8 @@ export function UserPage() {
               name="lang"
               type="text"
               placeholder="Select option"
-              onChange={formik.handleChange}
-              value={formik.values.lang}
+              onChange={userDetailsFormik.handleChange}
+              value={userDetailsFormik.values.lang}
             >
               <option value="en">English</option>
               <option value="fr">French</option>
@@ -66,7 +66,10 @@ export function UserPage() {
         </Stack>
       </form>
 
-      <Stack bg="tomato" height="80px"></Stack>
+      <Stack Stack p={10} spacing={6} bg="tomato">
+      <Text fontSize="2xl" fontWeight="bold" textAlign="center">Account Details</Text>
+
+      </Stack>
       <Stack bg="tomato" height="80px"></Stack>
     </SimpleGrid>
   )

From 12592bca116e9a1c9b1bba90195b76e83dc50d73 Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Wed, 25 Mar 2020 14:08:41 -0300
Subject: [PATCH 06/16] User Profile avaliable when you sign in. Add 'Account
 Detail' section info. Add Sign-out button and apolloClient. Add toast for
 signout. Remove signout button from APP.js nav bar. Add enable TFA button and
 link to correct page. Improve draft layout.

---
 frontend/src/App.js      |  26 ++-------
 frontend/src/UserPage.js | 118 +++++++++++++++++++++++++++++++++++----
 2 files changed, 110 insertions(+), 34 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index c0a7e8e91a..b0ca2d1aad 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -14,9 +14,9 @@ import { TopBanner } from './TopBanner'
 import { PhaseBanner } from './PhaseBanner'
 import { Footer } from './Footer'
 import { Navigation } from './Navigation'
-import { Flex, Link, CSSReset, useToast } from '@chakra-ui/core'
+import { Flex, Link, CSSReset } from '@chakra-ui/core'
 import { SkipLink } from './SkipLink'
-import { useQuery, useApolloClient } from '@apollo/react-hooks'
+import { useQuery } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 import { TwoFactorNotificationBar } from './TwoFactorNotificationBar'
 import { UserPage } from './UserPage'
@@ -30,8 +30,6 @@ export default function App() {
     }
   `
   const { i18n } = useLingui()
-  const toast = useToast()
-  const client = useApolloClient()
   const { data } = useQuery(GET_JWT_TOKEN)
 
   return (
@@ -66,26 +64,10 @@ export default function App() {
               <Trans>Sign In</Trans>
             </Link>
           ) : (
-            <Link
-              to="/"
-              onClick={() => {
-                // This clears the JWT, essentially logging the user out in one go
-                client.writeData({ data: { jwt: null } }) // How is this done?
-                toast({
-                  title: 'Sign Out.',
-                  description: 'You have successfully been signed out.',
-                  status: 'success',
-                  duration: 9000,
-                  isClosable: true,
-                })
-              }}
-            >
-              <Trans>Sign Out</Trans>
+            <Link to="/user">
+              <Trans>User Profile</Trans>
             </Link>
           )}
-          <Link to="/user">
-            <Trans>User Profile</Trans>
-          </Link>
         </Navigation>
         {// Dynamically show the TwoFactorNotification bar
         data && !data.tfa && <TwoFactorNotificationBar />}
diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index 51ab8f7be6..281498a997 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -1,10 +1,32 @@
 import React from 'react'
 
 import { useFormik } from 'formik'
+import { useHistory } from 'react-router-dom'
 
-import { Stack, SimpleGrid, Button, Text, Select, Input } from '@chakra-ui/core'
+import {
+  Stack,
+  SimpleGrid,
+  Button,
+  Text,
+  Select,
+  Input,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+  Divider,
+  Checkbox,
+  CheckboxGroup,
+  useToast,
+} from '@chakra-ui/core'
+import { useApolloClient } from '@apollo/react-hooks'
 
 export function UserPage() {
+  const client = useApolloClient()
+  const toast = useToast()
+  const history = useHistory()
+
   const userDetailsFormik = useFormik({
     initialValues: {
       email: 'steve@email.gc.ca',
@@ -16,17 +38,16 @@ export function UserPage() {
     },
   })
   return (
-    <SimpleGrid columns={{ md: 1, lg: 2 }} spacing="40px" width="100%">
+    <SimpleGrid columns={{ md: 1, lg: 2 }} spacing="60px" width="100%">
       <form onSubmit={userDetailsFormik.handleSubmit}>
-        <Stack p={10} spacing={6}>
+        <Stack p={25} spacing={4}>
           <Text fontSize="2xl" fontWeight="bold" textAlign="center">
             User Profile
           </Text>
 
-          <Stack>
+          <Stack mt="20px">
             <Text fontSize="xl">Display Name:</Text>
             <Input
-              width="60%"
               id="displayName"
               name="displayName"
               type="text"
@@ -38,7 +59,6 @@ export function UserPage() {
           <Stack>
             <Text fontSize="xl">Email:</Text>
             <Input
-              width="60%"
               id="email"
               name="email"
               type="email"
@@ -50,7 +70,6 @@ export function UserPage() {
           <Stack>
             <Text fontSize="xl">Language:</Text>
             <Select
-              width="60%"
               id="lang"
               name="lang"
               type="text"
@@ -62,15 +81,90 @@ export function UserPage() {
               <option value="fr">French</option>
             </Select>
           </Stack>
-          <Button type="submit">Save Changes</Button>
+          <Button type="submit" variantColor="teal" w={'50%'} mt={5}>
+            Save Changes
+          </Button>
         </Stack>
       </form>
 
-      <Stack Stack p={10} spacing={6} bg="tomato">
-      <Text fontSize="2xl" fontWeight="bold" textAlign="center">Account Details</Text>
-
+      <Stack Stack p={25} spacing={4}>
+        <Text fontSize="2xl" fontWeight="bold" textAlign="center">
+          Account Details
+        </Text>
+        <CheckboxGroup
+          mt="20px"
+          variantColor="teal"
+          defaultValue={['admin', 'active']}
+        >
+          <Checkbox value="admin">Administrative Account</Checkbox>
+          <Checkbox value="active">Account Active</Checkbox>
+        </CheckboxGroup>
+        <Stack>
+          <Text fontSize="xl">API Quota:</Text>
+          <NumberInput
+            id="apiQuota"
+            name="apiQuota"
+            defaultValue={15}
+            min={10}
+            max={20}
+          >
+            <NumberInputField />
+            <NumberInputStepper>
+              <NumberIncrementStepper />
+              <NumberDecrementStepper />
+            </NumberInputStepper>
+          </NumberInput>
+        </Stack>
+        <Stack>
+          <Text fontSize="xl">Submission Quota:</Text>
+          <NumberInput
+            id="submissionQuota"
+            name="submissionQuota"
+            defaultValue={15}
+            min={10}
+            max={20}
+          >
+            <NumberInputField />
+            <NumberInputStepper>
+              <NumberIncrementStepper />
+              <NumberDecrementStepper />
+            </NumberInputStepper>
+          </NumberInput>
+        </Stack>
+        <Divider />
+        <Stack isInline>
+          <Button leftIcon="lock" variantColor="blue"  onClick={() => {history.push('/two-factor-code')}}>
+            Enable 2FA
+          </Button>
+          <Button leftIcon="edit" variantColor="teal" onClick={() => {window.alert("coming soon")}}>
+            Manage API keys
+          </Button>
+        </Stack>
+        <Button
+          variantColor="teal"
+          w={'50%'}
+          onClick={() => {
+            // This clears the JWT, essentially logging the user out in one go
+            client.writeData({ data: { jwt: null } }) // How is this done?
+            history.push('/')
+            toast({
+              title: 'Sign Out.',
+              description: 'You have successfully been signed out.',
+              status: 'success',
+              duration: 9000,
+              isClosable: true,
+            })
+          }}
+        >
+          Sign Out
+        </Button>
+      </Stack>
+      <Stack p={25} spacing={4}>
+        <Text fontSize="2xl" fontWeight="bold" textAlign="center">
+          Change Password
+        </Text>
+        <p>PasswordConfirm componenet goes here.</p>
       </Stack>
-      <Stack bg="tomato" height="80px"></Stack>
     </SimpleGrid>
   )
 }

From 3a850d1456ba7d1a9a4d78f7ec803de847f519bd Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Tue, 31 Mar 2020 14:59:12 -0300
Subject: [PATCH 07/16] Add passwordConfirmation field to userPage. TODO: fix
 schema.faker.graphql.

---
 frontend/src/App.js      |  3 +++
 frontend/src/UserPage.js | 48 ++++++++++++++++++++++++++++++++++++----
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index b0ca2d1aad..1dcb0e6f77 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -68,6 +68,9 @@ export default function App() {
               <Trans>User Profile</Trans>
             </Link>
           )}
+          <Link to="/user">
+            <Trans>UserPage</Trans>
+          </Link>
         </Navigation>
         {// Dynamically show the TwoFactorNotification bar
         data && !data.tfa && <TwoFactorNotificationBar />}
diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index 281498a997..03c271f488 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useFormik } from 'formik'
+import { useFormik, Formik } from 'formik'
 import { useHistory } from 'react-router-dom'
 
 import {
@@ -21,6 +21,7 @@ import {
   useToast,
 } from '@chakra-ui/core'
 import { useApolloClient } from '@apollo/react-hooks'
+import { PasswordConfirmation } from './PasswordConfirmation'
 
 export function UserPage() {
   const client = useApolloClient()
@@ -133,10 +134,22 @@ export function UserPage() {
         </Stack>
         <Divider />
         <Stack isInline>
-          <Button leftIcon="lock" variantColor="blue"  onClick={() => {history.push('/two-factor-code')}}>
+          <Button
+            leftIcon="lock"
+            variantColor="blue"
+            onClick={() => {
+              history.push('/two-factor-code')
+            }}
+          >
             Enable 2FA
           </Button>
-          <Button leftIcon="edit" variantColor="teal" onClick={() => {window.alert("coming soon")}}>
+          <Button
+            leftIcon="edit"
+            variantColor="teal"
+            onClick={() => {
+              window.alert('coming soon')
+            }}
+          >
             Manage API keys
           </Button>
         </Stack>
@@ -163,7 +176,34 @@ export function UserPage() {
         <Text fontSize="2xl" fontWeight="bold" textAlign="center">
           Change Password
         </Text>
-        <p>PasswordConfirm componenet goes here.</p>
+        <Text>
+          Change your password below by entering and confirming a new password.
+        </Text>
+
+        <Formik
+          initialValues={{password: '', confirmPassword: '' }}
+          onSubmit={async values => {
+            console.log(values)
+            window.alert("Change password submitted.  TODO: Implement GQL call")
+          }}
+        >
+          {({ handleSubmit, isSubmitting }) => (
+            <form id="form" onSubmit={handleSubmit}>
+              <PasswordConfirmation />
+
+              <Stack mt={6} spacing={4} isInline>
+                <Button
+                  variantColor="teal"
+                  isLoading={isSubmitting}
+                  type="submit"
+                  id="submitBtn"
+                >
+                  Change Password
+                </Button>
+              </Stack>
+            </form>
+          )}
+        </Formik>
       </Stack>
     </SimpleGrid>
   )

From 1508db05ccf04fedee28d8123293c49621041ad3 Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Wed, 1 Apr 2020 08:06:16 -0300
Subject: [PATCH 08/16] Add gql mutation for updating password on UserPage. Add
 export default of empty string to frontend/src/graphql/mutations.

---
 frontend/src/CreateUserPage.js    |  2 +-
 frontend/src/UserPage.js          | 55 +++++++++++++++++++++++++++++--
 frontend/src/graphql/mutations.js |  2 ++
 3 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/frontend/src/CreateUserPage.js b/frontend/src/CreateUserPage.js
index 6e10515f92..8f888e7067 100644
--- a/frontend/src/CreateUserPage.js
+++ b/frontend/src/CreateUserPage.js
@@ -57,7 +57,7 @@ export function CreateUserPage() {
       </Text>
       <Formik
         initialValues={{ email: '', password: '', confirmPassword: '' }}
-        onSubmit={async (values) => {
+        onSubmit={async values => {
           createUser({
             variables: {
               userName: values.email,
diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index 03c271f488..8db33be71b 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -20,14 +20,46 @@ import {
   CheckboxGroup,
   useToast,
 } from '@chakra-ui/core'
-import { useApolloClient } from '@apollo/react-hooks'
+import { useApolloClient, useMutation } from '@apollo/react-hooks'
 import { PasswordConfirmation } from './PasswordConfirmation'
+import gql from 'graphql-tag'
 
 export function UserPage() {
+  // TODO: Move to mutations folder
+  const UPDATE_PASSWORD = gql`
+    mutation UpdatePassword(
+      $userName: EmailAddress!
+      $password: String!
+      $confirmPassword: String!
+    ) {
+      updatePassword(
+        userName: $userName
+        password: $password
+        confirmPassword: $confirmPassword
+      ) {
+        user {
+          userName
+        }
+      }
+    }
+  `
+
   const client = useApolloClient()
   const toast = useToast()
   const history = useHistory()
 
+  const [updatePassword, { loading, error, data }] = useMutation(
+    UPDATE_PASSWORD,
+  )
+
+  if (data) {
+    console.log(data)
+  }
+
+  if (loading) {
+    console.log('loading')
+  }
+
   const userDetailsFormik = useFormik({
     initialValues: {
       email: 'steve@email.gc.ca',
@@ -181,10 +213,27 @@ export function UserPage() {
         </Text>
 
         <Formik
-          initialValues={{password: '', confirmPassword: '' }}
+          initialValues={{ password: '', confirmPassword: '' }}
           onSubmit={async values => {
+            // Submit GraphQL mutation
             console.log(values)
-            window.alert("Change password submitted.  TODO: Implement GQL call")
+            await updatePassword({
+              variables: {
+                userName: 'testuser@test.ca', // This needs to be retreived from a seperate GQL query or props that will populate this entire page with data.
+                password: values.password,
+                confirmPassword: values.confirmPassword,
+              },
+            })
+
+            if (!error) {
+              toast({
+                title: 'Password Updated.',
+                description: 'You have successfully changed your password.',
+                status: 'success',
+                duration: 9000,
+                isClosable: true,
+              })
+            }
           }}
         >
           {({ handleSubmit, isSubmitting }) => (
diff --git a/frontend/src/graphql/mutations.js b/frontend/src/graphql/mutations.js
index a244f4cd09..d3e84783c7 100644
--- a/frontend/src/graphql/mutations.js
+++ b/frontend/src/graphql/mutations.js
@@ -41,3 +41,5 @@ export const VALIDATE_TWO_FACTOR = gql`
     }
   }
 `
+
+export default ''

From 47038541af607d93b7f5aa2c6850f0c4ac7e99a2 Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Wed, 1 Apr 2020 14:06:13 -0300
Subject: [PATCH 09/16] Change useFormik() hook to <Formik> component in
 userPage

---
 frontend/src/UserPage.js | 197 +++++++++++++++++++--------------------
 1 file changed, 96 insertions(+), 101 deletions(-)

diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index 8db33be71b..8926a3ceb2 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -1,6 +1,7 @@
+/* eslint react/prop-types: 0 */
 import React from 'react'
 
-import { useFormik, Formik } from 'formik'
+import { Formik } from 'formik'
 import { useHistory } from 'react-router-dom'
 
 import {
@@ -10,17 +11,12 @@ import {
   Text,
   Select,
   Input,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-  NumberIncrementStepper,
-  NumberDecrementStepper,
   Divider,
   Checkbox,
   CheckboxGroup,
   useToast,
 } from '@chakra-ui/core'
-import { useApolloClient, useMutation } from '@apollo/react-hooks'
+import { useApolloClient, useMutation, useQuery } from '@apollo/react-hooks'
 import { PasswordConfirmation } from './PasswordConfirmation'
 import gql from 'graphql-tag'
 
@@ -44,81 +40,112 @@ export function UserPage() {
     }
   `
 
+  const QUERY_USER = gql`
+    query User($userName: EmailAddress!) {
+      user(userName: $username) {
+        userName
+        displayName
+        lang
+      }
+    }
+  `
+
   const client = useApolloClient()
   const toast = useToast()
   const history = useHistory()
 
-  const [updatePassword, { loading, error, data }] = useMutation(
-    UPDATE_PASSWORD,
-  )
+  const [
+    updatePassword,
+    {
+      loading: updatePasswordLoading,
+      error: updatePasswordError,
+      data: updatePasswordData,
+    },
+  ] = useMutation(UPDATE_PASSWORD)
 
-  if (data) {
-    console.log(data)
+  const {
+    loading: queryUserLoading,
+    error: queryUserError,
+    data: queryUserData,
+  } = useQuery(QUERY_USER)
+
+  if (updatePasswordData || queryUserData) {
+    console.log(updatePasswordData)
   }
 
-  if (loading) {
+  if (updatePasswordLoading || queryUserLoading) {
     console.log('loading')
   }
 
-  const userDetailsFormik = useFormik({
-    initialValues: {
-      email: 'steve@email.gc.ca',
-      lang: 'select option',
-      displayName: 'steve',
-    },
-    onSubmit: values => {
-      window.alert(JSON.stringify(values, null, 2))
-    },
-  })
+  if(queryUserError){
+    console.log(queryUserError)
+  }
+
   return (
     <SimpleGrid columns={{ md: 1, lg: 2 }} spacing="60px" width="100%">
-      <form onSubmit={userDetailsFormik.handleSubmit}>
-        <Stack p={25} spacing={4}>
-          <Text fontSize="2xl" fontWeight="bold" textAlign="center">
-            User Profile
-          </Text>
+      <Formik
+        initialValues={{
+          email: '',
+          lang: '',
+          displayName: '',
+        }}
+        onSubmit={(values, actions) => {
+          setTimeout(() => {
+            window.alert(JSON.stringify(values, null, 2))
+            actions.setSubmitting(false)
+          }, 1000)
+        }}
+      >
+        {(props) => (
+          <form onSubmit={props.handleSubmit}>
+            <Stack p={25} spacing={4}>
+              <Text fontSize="2xl" fontWeight="bold" textAlign="center">
+                User Profile
+              </Text>
 
-          <Stack mt="20px">
-            <Text fontSize="xl">Display Name:</Text>
-            <Input
-              id="displayName"
-              name="displayName"
-              type="text"
-              onChange={userDetailsFormik.handleChange}
-              value={userDetailsFormik.values.displayName}
-            />
-          </Stack>
+              <Stack mt="20px">
+                <Text fontSize="xl">Display Name:</Text>
+                <Input
+                  id="displayName"
+                  name="displayName"
+                  type="text"
+                  onChange={props.handleChange}
+                  value={props.values.displayName}
+                />
+              </Stack>
 
-          <Stack>
-            <Text fontSize="xl">Email:</Text>
-            <Input
-              id="email"
-              name="email"
-              type="email"
-              onChange={userDetailsFormik.handleChange}
-              value={userDetailsFormik.values.email}
-            />
-          </Stack>
+              <Stack>
+                <Text fontSize="xl">Email:</Text>
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  onChange={props.handleChange}
+                  value={props.values.email}
+                />
+              </Stack>
 
-          <Stack>
-            <Text fontSize="xl">Language:</Text>
-            <Select
-              id="lang"
-              name="lang"
-              type="text"
-              placeholder="Select option"
-              onChange={userDetailsFormik.handleChange}
-              value={userDetailsFormik.values.lang}
-            >
-              <option value="en">English</option>
-              <option value="fr">French</option>
-            </Select>
-          </Stack>
-          <Button type="submit" variantColor="teal" w={'50%'} mt={5}>
-            Save Changes
-          </Button>
-        </Stack>
-      </form>
+              <Stack>
+                <Text fontSize="xl">Language:</Text>
+                <Select
+                  id="lang"
+                  name="lang"
+                  type="text"
+                  placeholder="Select option"
+                  onChange={props.handleChange}
+                  value={props.values.lang}
+                >
+                  <option value="en">English</option>
+                  <option value="fr">French</option>
+                </Select>
+              </Stack>
+              <Button type="submit" variantColor="teal" w={'50%'} mt={5}>
+                Save Changes
+              </Button>
+            </Stack>
+          </form>
+        )}
+      </Formik>
 
       <Stack Stack p={25} spacing={4}>
         <Text fontSize="2xl" fontWeight="bold" textAlign="center">
@@ -132,38 +159,6 @@ export function UserPage() {
           <Checkbox value="admin">Administrative Account</Checkbox>
           <Checkbox value="active">Account Active</Checkbox>
         </CheckboxGroup>
-        <Stack>
-          <Text fontSize="xl">API Quota:</Text>
-          <NumberInput
-            id="apiQuota"
-            name="apiQuota"
-            defaultValue={15}
-            min={10}
-            max={20}
-          >
-            <NumberInputField />
-            <NumberInputStepper>
-              <NumberIncrementStepper />
-              <NumberDecrementStepper />
-            </NumberInputStepper>
-          </NumberInput>
-        </Stack>
-        <Stack>
-          <Text fontSize="xl">Submission Quota:</Text>
-          <NumberInput
-            id="submissionQuota"
-            name="submissionQuota"
-            defaultValue={15}
-            min={10}
-            max={20}
-          >
-            <NumberInputField />
-            <NumberInputStepper>
-              <NumberIncrementStepper />
-              <NumberDecrementStepper />
-            </NumberInputStepper>
-          </NumberInput>
-        </Stack>
         <Divider />
         <Stack isInline>
           <Button
@@ -214,7 +209,7 @@ export function UserPage() {
 
         <Formik
           initialValues={{ password: '', confirmPassword: '' }}
-          onSubmit={async values => {
+          onSubmit={async (values) => {
             // Submit GraphQL mutation
             console.log(values)
             await updatePassword({
@@ -225,7 +220,7 @@ export function UserPage() {
               },
             })
 
-            if (!error) {
+            if (!updatePasswordError) {
               toast({
                 title: 'Password Updated.',
                 description: 'You have successfully changed your password.',

From e1fb53b2d2ef2fee8d0257ed8dde1b4e58b88280 Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Thu, 2 Apr 2020 07:43:31 -0300
Subject: [PATCH 10/16] Update schema.faker.graphql to return a single user
 instead of a list of users for user query.

---
 frontend/schema.faker.graphql | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/schema.faker.graphql b/frontend/schema.faker.graphql
index 4aff47dd1f..541945b0e2 100644
--- a/frontend/schema.faker.graphql
+++ b/frontend/schema.faker.graphql
@@ -698,7 +698,7 @@ type Query {
   """
   Query the currently logged in user if no user name isgiven, or query a specific user by user name.
   """
-  user(userName: EmailAddress): [User]
+  user(userName: EmailAddress): User
 
   """
   Select all information on a selected organization that a user has access to.

From b4f16df5465c2c758b9710bdef5cfcbd26f9d2d2 Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Thu, 2 Apr 2020 07:50:08 -0300
Subject: [PATCH 11/16] Update Schema.Faker.Graphql and update logic for
 querying users and form inital values.

---
 frontend/schema.faker.graphql |  2 +-
 frontend/src/UserPage.js      | 23 +++++++++++------------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/frontend/schema.faker.graphql b/frontend/schema.faker.graphql
index 541945b0e2..ea6a993a83 100644
--- a/frontend/schema.faker.graphql
+++ b/frontend/schema.faker.graphql
@@ -976,7 +976,7 @@ type User implements Node {
   userName: EmailAddress @fake(type: email)
 
   """Name displayed to other users"""
-  displayName: String
+  displayName: String @fake(type: firstName)
 
   """Users preferred language"""
   lang: String
diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index 8926a3ceb2..875f1bdd52 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -42,7 +42,7 @@ export function UserPage() {
 
   const QUERY_USER = gql`
     query User($userName: EmailAddress!) {
-      user(userName: $username) {
+      user(userName: $userName) {
         userName
         displayName
         lang
@@ -67,27 +67,25 @@ export function UserPage() {
     loading: queryUserLoading,
     error: queryUserError,
     data: queryUserData,
-  } = useQuery(QUERY_USER)
-
-  if (updatePasswordData || queryUserData) {
-    console.log(updatePasswordData)
-  }
+  } = useQuery(QUERY_USER, {
+    variables: { userName: 'testuser@testemail.ca' },
+  })
 
   if (updatePasswordLoading || queryUserLoading) {
-    console.log('loading')
+    return <p>Loading...</p>
   }
 
-  if(queryUserError){
-    console.log(queryUserError)
+  if (queryUserError || updatePasswordError) {
+    return <p>Error</p>
   }
 
   return (
     <SimpleGrid columns={{ md: 1, lg: 2 }} spacing="60px" width="100%">
       <Formik
         initialValues={{
-          email: '',
-          lang: '',
-          displayName: '',
+          email: queryUserData.user.userName,
+          lang: queryUserData.user.lang,
+          displayName: queryUserData.user.displayName,
         }}
         onSubmit={(values, actions) => {
           setTimeout(() => {
@@ -221,6 +219,7 @@ export function UserPage() {
             })
 
             if (!updatePasswordError) {
+              console.log(updatePasswordData)
               toast({
                 title: 'Password Updated.',
                 description: 'You have successfully changed your password.',

From 2d20c70c69a22bafa5ba404abdf4722b8300a2aa Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Thu, 2 Apr 2020 10:13:58 -0300
Subject: [PATCH 12/16] Update mutation and tests to use 'tfa' instead of
 'tfaValidated'.

---
 frontend/src/__tests__/SignInPage.test.js | 10 ++++++----
 frontend/src/graphql/mutations.js         |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/__tests__/SignInPage.test.js b/frontend/src/__tests__/SignInPage.test.js
index ce39565afe..4559139c48 100644
--- a/frontend/src/__tests__/SignInPage.test.js
+++ b/frontend/src/__tests__/SignInPage.test.js
@@ -120,7 +120,7 @@ describe('<SignInPage />', () => {
                 signIn(userName: $userName, password: $password) {
                   user {
                     userName
-                    tfaValidated
+                    tfa
                   }
                   authToken
                 }
@@ -136,8 +136,7 @@ describe('<SignInPage />', () => {
               signIn: {
                 user: {
                   userName: 'Thalia.Rosenbaum@gmail.com',
-                  failedLoginAttempts: 4,
-                  tfaValidated: false,
+                  tfa: false,
                 },
                 authToken: 'test123stringJWT',
               },
@@ -153,7 +152,7 @@ describe('<SignInPage />', () => {
         initialIndex: 0,
       })
 
-      const { container, getByRole } = render(
+      const { container, getByRole, queryByText } = render(
         <ThemeProvider theme={theme}>
           <I18nProvider i18n={i18n}>
             <Router history={history}>
@@ -168,6 +167,9 @@ describe('<SignInPage />', () => {
           </I18nProvider>
         </ThemeProvider>,
       )
+      await waitFor(() => {
+        expect(queryByText(/Sign in with your username and password./i)).toBeInTheDocument()
+      })
 
       const email = container.querySelector('#email')
       const password = container.querySelector('#password')
diff --git a/frontend/src/graphql/mutations.js b/frontend/src/graphql/mutations.js
index d3e84783c7..698dcd8ce5 100644
--- a/frontend/src/graphql/mutations.js
+++ b/frontend/src/graphql/mutations.js
@@ -25,7 +25,7 @@ export const SIGN_IN = gql`
     signIn(userName: $userName, password: $password) {
       user {
         userName
-        tfaValidated
+        tfa
       }
       authToken
     }

From fb1621cdc92292620b8c9693a381dc312db2cb18 Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Thu, 2 Apr 2020 10:15:09 -0300
Subject: [PATCH 13/16] Update userpage to have a 'username' prop. Force user
 to be signed in to access userpage -- remove direct link from app.js nav.
 Update signIn and signOut functions to add the userName field to apollo
 client.

---
 frontend/src/App.js            | 12 +++++++-----
 frontend/src/CreateUserPage.js |  2 +-
 frontend/src/SignInPage.js     |  5 +++--
 frontend/src/UserPage.js       | 12 ++++++++----
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 1dcb0e6f77..8d28f5ec48 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -27,10 +27,15 @@ export default function App() {
     {
       jwt @client
       tfa @client
+      userName @client
     }
   `
   const { i18n } = useLingui()
-  const { data } = useQuery(GET_JWT_TOKEN)
+  const { data, loading } = useQuery(GET_JWT_TOKEN)
+
+  if (loading) {
+    return <p>Loading...</p>
+  }
 
   return (
     <>
@@ -68,9 +73,6 @@ export default function App() {
               <Trans>User Profile</Trans>
             </Link>
           )}
-          <Link to="/user">
-            <Trans>UserPage</Trans>
-          </Link>
         </Navigation>
         {// Dynamically show the TwoFactorNotification bar
         data && !data.tfa && <TwoFactorNotificationBar />}
@@ -84,7 +86,7 @@ export default function App() {
           </Route>
 
           <Route path="/user">
-            <UserPage />
+            <UserPage userName={data && data.userName ? data.userName : null} />
           </Route>
 
           <Route path="/sign-in">
diff --git a/frontend/src/CreateUserPage.js b/frontend/src/CreateUserPage.js
index 8f888e7067..6e10515f92 100644
--- a/frontend/src/CreateUserPage.js
+++ b/frontend/src/CreateUserPage.js
@@ -57,7 +57,7 @@ export function CreateUserPage() {
       </Text>
       <Formik
         initialValues={{ email: '', password: '', confirmPassword: '' }}
-        onSubmit={async values => {
+        onSubmit={async (values) => {
           createUser({
             variables: {
               userName: values.email,
diff --git a/frontend/src/SignInPage.js b/frontend/src/SignInPage.js
index daf5b59e25..0c5080bafc 100644
--- a/frontend/src/SignInPage.js
+++ b/frontend/src/SignInPage.js
@@ -36,7 +36,8 @@ export function SignInPage() {
       cache.writeData({
         data: {
           jwt: signIn.authToken,
-          tfa: signIn.user.tfaValidated,
+          tfa: signIn.user.tfa,
+          userName: signIn.user.userName,
         },
       })
     },
@@ -90,7 +91,7 @@ export function SignInPage() {
         }}
       >
         {(props) => (
-          <form onSubmit={props.handleSubmit} role="form">
+          <form onSubmit={props.handleSubmit} role="form" aria-label="form" name="form">
             <Field name="email">
               {({ field, form }) => (
                 <FormControl
diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index 875f1bdd52..89311c30f6 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -4,6 +4,8 @@ import React from 'react'
 import { Formik } from 'formik'
 import { useHistory } from 'react-router-dom'
 
+import { string } from 'prop-types'
+
 import {
   Stack,
   SimpleGrid,
@@ -20,7 +22,7 @@ import { useApolloClient, useMutation, useQuery } from '@apollo/react-hooks'
 import { PasswordConfirmation } from './PasswordConfirmation'
 import gql from 'graphql-tag'
 
-export function UserPage() {
+export function UserPage({ userName }) {
   // TODO: Move to mutations folder
   const UPDATE_PASSWORD = gql`
     mutation UpdatePassword(
@@ -68,7 +70,7 @@ export function UserPage() {
     error: queryUserError,
     data: queryUserData,
   } = useQuery(QUERY_USER, {
-    variables: { userName: 'testuser@testemail.ca' },
+    variables: { userName: userName },
   })
 
   if (updatePasswordLoading || queryUserLoading) {
@@ -83,7 +85,7 @@ export function UserPage() {
     <SimpleGrid columns={{ md: 1, lg: 2 }} spacing="60px" width="100%">
       <Formik
         initialValues={{
-          email: queryUserData.user.userName,
+          email: userName, // Taken from prop or query, does not matter.
           lang: queryUserData.user.lang,
           displayName: queryUserData.user.displayName,
         }}
@@ -183,7 +185,7 @@ export function UserPage() {
           w={'50%'}
           onClick={() => {
             // This clears the JWT, essentially logging the user out in one go
-            client.writeData({ data: { jwt: null } }) // How is this done?
+            client.writeData({ data: { jwt: null, tfa: null, userName: null } }) // How is this done?
             history.push('/')
             toast({
               title: 'Sign Out.',
@@ -251,3 +253,5 @@ export function UserPage() {
     </SimpleGrid>
   )
 }
+
+UserPage.propTypes = { userName: string.isRequired }

From f1b3e5c95ba2bf8ff9ee28b92452b43ae9efeac1 Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Thu, 2 Apr 2020 10:24:59 -0300
Subject: [PATCH 14/16] Update domain query and tests to pass app.test.js

---
 frontend/src/DomainsPage.js        |  6 +++---
 frontend/src/__tests__/App.test.js | 28 +++++++++++++++++++---------
 frontend/src/graphql/queries.js    |  6 +++++-
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/frontend/src/DomainsPage.js b/frontend/src/DomainsPage.js
index e1c1961fe0..f4774fe62d 100644
--- a/frontend/src/DomainsPage.js
+++ b/frontend/src/DomainsPage.js
@@ -23,10 +23,10 @@ export function DomainsPage() {
               <Trans>This is the full list of domains</Trans>
             </Text>
             <List>
-              {data.domains.map((domain, i) => {
+              {data.domains.edges.map((edge, i) => {
                 return (
-                  <ListItem key={domain.url + i}>
-                    <Text>{domain.url}</Text>
+                  <ListItem key={edge.node.url + i}>
+                    <Text>{edge.node.url}</Text>
                   </ListItem>
                 )
               })}
diff --git a/frontend/src/__tests__/App.test.js b/frontend/src/__tests__/App.test.js
index 5f0c6efada..3e67739ed3 100644
--- a/frontend/src/__tests__/App.test.js
+++ b/frontend/src/__tests__/App.test.js
@@ -24,7 +24,11 @@ const mocks = [
       query: gql`
         {
           domains(organization: BOC) {
-            url
+            edges {
+              node {
+                url
+              }
+            }
           }
         }
       `,
@@ -32,14 +36,20 @@ const mocks = [
     },
     result: {
       data: {
-        domains: [
-          {
-            url: 'canada.ca',
-          },
-          {
-            url: 'alpha.canada.ca',
-          },
-        ],
+        domains: {
+          edges: [
+            {
+              node: {
+                url: 'canada.ca',
+              },
+            },
+            {
+              node: {
+                url: 'alpha.canada.ca',
+              },
+            },
+          ],
+        },
       },
     },
   },
diff --git a/frontend/src/graphql/queries.js b/frontend/src/graphql/queries.js
index 845af9555a..2bb464a2e6 100644
--- a/frontend/src/graphql/queries.js
+++ b/frontend/src/graphql/queries.js
@@ -3,7 +3,11 @@ import gql from 'graphql-tag'
 export const DOMAINS = gql`
   {
     domains(organization: BOC) {
-      url
+      edges {
+        node {
+          url
+        }
+      }
     }
   }
 `

From e9f41e9ad43e9d1dc819e19407bfa9d5218cb704 Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Thu, 2 Apr 2020 10:30:01 -0300
Subject: [PATCH 15/16] Update onclick placeholders and format files for eslint

---
 frontend/src/UserPage.js                  | 4 +++-
 frontend/src/__tests__/SignInPage.test.js | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index 89311c30f6..a758828df6 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -90,10 +90,12 @@ export function UserPage({ userName }) {
           displayName: queryUserData.user.displayName,
         }}
         onSubmit={(values, actions) => {
-          setTimeout(() => {
+          window.alert('coming soon')
+          /*setTimeout(() => {
             window.alert(JSON.stringify(values, null, 2))
             actions.setSubmitting(false)
           }, 1000)
+        */
         }}
       >
         {(props) => (
diff --git a/frontend/src/__tests__/SignInPage.test.js b/frontend/src/__tests__/SignInPage.test.js
index 4559139c48..7b80ffef19 100644
--- a/frontend/src/__tests__/SignInPage.test.js
+++ b/frontend/src/__tests__/SignInPage.test.js
@@ -168,7 +168,9 @@ describe('<SignInPage />', () => {
         </ThemeProvider>,
       )
       await waitFor(() => {
-        expect(queryByText(/Sign in with your username and password./i)).toBeInTheDocument()
+        expect(
+          queryByText(/Sign in with your username and password./i),
+        ).toBeInTheDocument()
       })
 
       const email = container.querySelector('#email')

From ddc90c56c48f8694de8986600323fcea2cddc279 Mon Sep 17 00:00:00 2001
From: Matt Peachey <peacheym@dal.ca>
Date: Thu, 2 Apr 2020 10:32:21 -0300
Subject: [PATCH 16/16] Add coming soon message to placeholder alert

---
 frontend/src/UserPage.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
index a758828df6..98f5f43c1c 100644
--- a/frontend/src/UserPage.js
+++ b/frontend/src/UserPage.js
@@ -90,12 +90,8 @@ export function UserPage({ userName }) {
           displayName: queryUserData.user.displayName,
         }}
         onSubmit={(values, actions) => {
-          window.alert('coming soon')
-          /*setTimeout(() => {
-            window.alert(JSON.stringify(values, null, 2))
-            actions.setSubmitting(false)
-          }, 1000)
-        */
+          window.alert('coming soon!!\n' + JSON.stringify(values, null, 2))
+          actions.setSubmitting(false)
         }}
       >
         {(props) => (