Add titles to pages

frontend/src/App.js

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense } from 'react'
-import { Route, Switch } from 'react-router-dom'
+import { Switch } from 'react-router-dom'
 import { useLingui } from '@lingui/react'
 import { LandingPage } from './LandingPage'
 import { Main } from './Main'
@@ -15,7 +15,8 @@ import { useUserState } from './UserState'
 import { ErrorBoundary } from 'react-error-boundary'
 import { ErrorFallbackMessage } from './ErrorFallbackMessage'
 import { FloatingMenu } from './FloatingMenu'
-import PrivateRoute from './PrivateRoute'
+import PrivatePage from './PrivatePage'
+import { Page } from './Page'
 
 const PageNotFound = lazy(() => import('./PageNotFound'))
 const CreateUserPage = lazy(() => import('./CreateUserPage'))
@@ -119,74 +120,91 @@ export default function App() {
         <Main>
           <Suspense fallback={<div>Loading...</div>}>
             <Switch>
-              <Route exact path="/">
+              <Page exact path="/" title={t`Home`}>
                 <LandingPage />
-              </Route>
+              </Page>
 
-              <Route path="/create-user/:userOrgToken?">
+              <Page
+                path="/create-user/:userOrgToken?"
+                title={t`Create an Account`}
+              >
                 <CreateUserPage />
-              </Route>
+              </Page>
 
-              <Route path="/sign-in" component={SignInPage} />
+              <Page path="/sign-in" component={SignInPage} title={t`Sign In`} />
 
-              <Route
+              <Page
                 path="/authenticate/:sendMethod/:authenticateToken"
                 component={TwoFactorAuthenticatePage}
+                title={t`Authenticate`}
               />
 
-              <Route path="/forgot-password" component={ForgotPasswordPage} />
+              <Page
+                path="/forgot-password"
+                component={ForgotPasswordPage}
+                title={t`Forgot Password`}
+              />
 
-              <Route
+              <Page
                 path="/reset-password/:resetToken"
                 component={ResetPasswordPage}
+                title={t`Reset Password`}
               />
 
-              <PrivateRoute path="/organizations" exact>
+              <PrivatePage path="/organizations" title={t`Organizations`} exact>
                 <Organizations />
-              </PrivateRoute>
+              </PrivatePage>
 
-              <PrivateRoute path="/organizations/:orgSlug" exact>
+              <PrivatePage
+                path="/organizations/:orgSlug"
+                setTitle={false}
+                exact
+              >
                 <OrganizationDetails />
-              </PrivateRoute>
+              </PrivatePage>
 
-              <PrivateRoute path="/admin">
+              <PrivatePage path="/admin" title={t`Admin`}>
                 <ErrorBoundary FallbackComponent={ErrorFallbackMessage}>
                   <AdminPage />
                 </ErrorBoundary>
-              </PrivateRoute>
+              </PrivatePage>
 
-              <PrivateRoute path="/domains" exact>
+              <PrivatePage path="/domains" title={t`Domains`} exact>
                 <DomainsPage />
-              </PrivateRoute>
+              </PrivatePage>
 
-              <PrivateRoute path="/domains/:domainSlug" exact>
+              <PrivatePage path="/domains/:domainSlug" setTitle={false} exact>
                 <DmarcGuidancePage />
-              </PrivateRoute>
+              </PrivatePage>
 
-              <PrivateRoute
+              <PrivatePage
                 path="/domains/:domainSlug/dmarc-report/:period?/:year?"
+                setTitle={false}
                 exact
               >
                 <DmarcReportPage />
-              </PrivateRoute>
+              </PrivatePage>
 
-              <PrivateRoute path="/dmarc-summaries" exact>
+              <PrivatePage
+                path="/dmarc-summaries"
+                title={t`DMARC Report`}
+                exact
+              >
                 <DmarcByDomainPage />
-              </PrivateRoute>
+              </PrivatePage>
 
-              <PrivateRoute path="/user">
+              <PrivatePage path="/user" title={t`Your Account`}>
                 <UserPage username={currentUser.userName} />
-              </PrivateRoute>
+              </PrivatePage>
 
-              <PrivateRoute path="/two-factor-code">
+              <PrivatePage
+                path="/two-factor-code"
+                title={t`Authentication QR Code`}
+              >
                 <QRcodePage userName={currentUser.userName} />
-              </PrivateRoute>
-
-              <PrivateRoute path="/dmarc-report/:period?/:year?">
-                <DmarcReportPage />
-              </PrivateRoute>
+              </PrivatePage>
 
-              <Route component={PageNotFound} />
+              <Page component={PageNotFound} title="404" />
             </Switch>
           </Suspense>
         </Main>
@@ -215,7 +233,7 @@ export default function App() {
           </Link>
           <Link
             ml={4}
-            href={"https://github.com/canada-ca/tracker/issues"}
+            href={'https://github.com/canada-ca/tracker/issues'}
             isExternal={true}
           >
             <Trans>Report an Issue</Trans>

frontend/src/DmarcGuidancePage.js

@@ -9,11 +9,14 @@ import { Trans } from '@lingui/macro'
 import { ErrorFallbackMessage } from './ErrorFallbackMessage'
 import { ErrorBoundary } from 'react-error-boundary'
 import { LoadingMessage } from './LoadingMessage'
+import { useDocumentTitle } from './useDocumentTitle'
 
 export default function DmarcGuidancePage() {
   const { currentUser } = useUserState()
   const { domainSlug } = useParams()
 
+  useDocumentTitle(`${domainSlug}`)
+
   const { loading, error, data } = useQuery(GET_GUIDANCE_TAGS_OF_DOMAIN, {
     context: {
       headers: {

frontend/src/DmarcReportPage.js

@@ -28,13 +28,16 @@ import { months } from './months'
 import { ErrorBoundary } from 'react-error-boundary'
 import { ErrorFallbackMessage } from './ErrorFallbackMessage'
 import { LoadingMessage } from './LoadingMessage'
+import { useDocumentTitle } from './useDocumentTitle'
 
 export default function DmarcReportPage({ summaryListResponsiveWidth }) {
   const { currentUser } = useUserState()
   const { domainSlug, period, year } = useParams()
   const history = useHistory()
   const { i18n } = useLingui()
 
+  useDocumentTitle(t`DMARC Report for ${domainSlug}`)
+
   const currentDate = new Date()
   const [selectedPeriod, setSelectedPeriod] = useState(period)
   const [selectedYear, setSelectedYear] = useState(year)

frontend/src/OrganizationDetails.js

@@ -23,12 +23,16 @@ import { ErrorFallbackMessage } from './ErrorFallbackMessage'
 import { LoadingMessage } from './LoadingMessage'
 import { OrganizationDomains } from './OrganizationDomains'
 import { OrganizationAffiliations } from './OrganizationAffiliations'
+import { useDocumentTitle } from './useDocumentTitle'
 
 export default function OrganizationDetails() {
   const { orgSlug } = useParams()
   const { currentUser } = useUserState()
   const toast = useToast()
   const history = useHistory()
+
+  useDocumentTitle(`${orgSlug}`)
+
   const { loading, _error, data } = useQuery(ORG_DETAILS_PAGE, {
     variables: { slug: orgSlug },
     context: {

frontend/src/Page.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Route } from 'react-router-dom'
+import { bool, string } from 'prop-types'
+import { useDocumentTitle } from './useDocumentTitle'
+
+export const Page = ({ title, setTitle, ...props }) => {
+  useDocumentTitle(title, setTitle)
+
+  return <Route {...props} />
+}
+
+Page.propTypes = {
+  title: string,
+  setTitle: bool,
+}

frontend/src/PrivateRoute.js → frontend/src/PrivatePage.js

@@ -1,17 +1,18 @@
-// From https://reactrouter.com/web/example/auth-workflow
-
 import React from 'react'
 import { node } from 'prop-types'
-import { Route, Redirect, useLocation } from 'react-router-dom'
+import { Redirect, useLocation } from 'react-router-dom'
 import { useUserState } from './UserState'
+import { Page } from './Page'
 
-// A wrapper for <Route> that redirects to the login
+// A wrapper for <Page> that redirects to the login
 // screen if you're not yet authenticated.
-export default function PrivateRoute({ children, ...rest }) {
+export default function PrivatePage({ children, title, setTitle, ...rest }) {
   const { isLoggedIn } = useUserState()
   const location = useLocation()
   return (
-    <Route
+    <Page
+      title={title}
+      setTitle={setTitle}
       {...rest}
       render={() =>
         isLoggedIn() ? (
@@ -29,6 +30,7 @@ export default function PrivateRoute({ children, ...rest }) {
   )
 }
 
-PrivateRoute.propTypes = {
+PrivatePage.propTypes = {
   children: node,
+  ...Page.propTypes,
 }

frontend/src/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/images/mstile-150x150.png"/>
+            <TileColor>#2e2e40</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

frontend/src/client.js

@@ -43,7 +43,7 @@ export const cache = createCache()
 
 export const client = new ApolloClient({
   link: new HttpLink({
-    uri: 'https://tracker.alpha.canada.ca/graphql',
+    uri: '/graphql',
   }),
   cache,
 })

frontend/src/html.js

@@ -1,4 +1,3 @@
-import './images/favicon.ico'
 import './images/apple-touch-icon.png'
 import './images/favicon-32x32.png'
 import './images/favicon-16x16.png'
@@ -12,37 +11,25 @@ export default () => `
   <html lang="en">
     <head>
       <meta charset="utf-8" />
-      <link
-        rel="apple-touch-icon"
-        sizes="180x180"
-        href="/apple-touch-icon.png"
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="32x32"
-        href="/favicon-32x32.png"
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="16x16"
-        href="/favicon-16x16.png"
-      />
-      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-      <meta name="msapplication-TileColor" content="#da532c" />
-      <meta name="theme-color" content="#ffffff" />
-      <link rel="icon" href="/favicon.ico" />
+
+      <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
+      <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
+      <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
+      <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#e65225">
+      <link rel="shortcut icon" href="images/favicon.ico">
+      <link rel="manifest" href="manifest.json" />
+      <meta name="msapplication-TileColor" content="#2e2e40">
+      <meta name="msapplication-config" content="./browserconfig.xml">
+      <meta name="theme-color" content="#ff0000">
+
       <meta
         name="viewport"
         content="width=device-width, initial-scale=1, shrink-to-fit=no"
       />
-      <meta name="theme-color" content="#000000" />
       <meta
         name="description"
         content="Tracking security best practices for the Government of Canada"
       />
-      <link rel="manifest" href="/manifest.json" />
       <title>Tracker</title>
     </head>
     <body>