Skip to content

Commit c02e6f9

Browse files
ThomasNickersonFestiveKyle
ThomasNickerson
and
FestiveKyle
authored
Add titles to pages (canada-ca#1980)
* Add components to modify document title * Dynamic names (commented out til bug fix) * Add all static titles * Allow for translation of Tracker in page title * Update locales * Update locales after merge * Fix document title from resetting for dynamic titles * Re-add dynamic document titles to Domains and Organizations * Update favicons * Change client uri * Add dynamic title to dmarc reports * Remove unused Route * Update translations * Re-impose '<page_title> - Tracker' format * Update locales Co-authored-by: FestiveKyle <kyle.j.s.sullivan@gmail.com>
1 parent e724e37 commit c02e6f9

24 files changed

Lines changed: 545 additions & 238 deletions

‎frontend/src/App.js‎

Lines changed: 52 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { lazy, Suspense } from 'react'
2-
import { Route, Switch } from 'react-router-dom'
2+
import { Switch } from 'react-router-dom'
33
import { useLingui } from '@lingui/react'
44
import { LandingPage } from './LandingPage'
55
import { Main } from './Main'
@@ -15,7 +15,8 @@ import { useUserState } from './UserState'
1515
import { ErrorBoundary } from 'react-error-boundary'
1616
import { ErrorFallbackMessage } from './ErrorFallbackMessage'
1717
import { FloatingMenu } from './FloatingMenu'
18-
import PrivateRoute from './PrivateRoute'
18+
import PrivatePage from './PrivatePage'
19+
import { Page } from './Page'
1920

2021
const PageNotFound = lazy(() => import('./PageNotFound'))
2122
const CreateUserPage = lazy(() => import('./CreateUserPage'))
@@ -119,74 +120,91 @@ export default function App() {
119120
<Main>
120121
<Suspense fallback={<div>Loading...</div>}>
121122
<Switch>
122-
<Route exact path="/">
123+
<Page exact path="/" title={t`Home`}>
123124
<LandingPage />
124-
</Route>
125+
</Page>
125126

126-
<Route path="/create-user/:userOrgToken?">
127+
<Page
128+
path="/create-user/:userOrgToken?"
129+
title={t`Create an Account`}
130+
>
127131
<CreateUserPage />
128-
</Route>
132+
</Page>
129133

130-
<Route path="/sign-in" component={SignInPage} />
134+
<Page path="/sign-in" component={SignInPage} title={t`Sign In`} />
131135

132-
<Route
136+
<Page
133137
path="/authenticate/:sendMethod/:authenticateToken"
134138
component={TwoFactorAuthenticatePage}
139+
title={t`Authenticate`}
135140
/>
136141

137-
<Route path="/forgot-password" component={ForgotPasswordPage} />
142+
<Page
143+
path="/forgot-password"
144+
component={ForgotPasswordPage}
145+
title={t`Forgot Password`}
146+
/>
138147

139-
<Route
148+
<Page
140149
path="/reset-password/:resetToken"
141150
component={ResetPasswordPage}
151+
title={t`Reset Password`}
142152
/>
143153

144-
<PrivateRoute path="/organizations" exact>
154+
<PrivatePage path="/organizations" title={t`Organizations`} exact>
145155
<Organizations />
146-
</PrivateRoute>
156+
</PrivatePage>
147157

148-
<PrivateRoute path="/organizations/:orgSlug" exact>
158+
<PrivatePage
159+
path="/organizations/:orgSlug"
160+
setTitle={false}
161+
exact
162+
>
149163
<OrganizationDetails />
150-
</PrivateRoute>
164+
</PrivatePage>
151165

152-
<PrivateRoute path="/admin">
166+
<PrivatePage path="/admin" title={t`Admin`}>
153167
<ErrorBoundary FallbackComponent={ErrorFallbackMessage}>
154168
<AdminPage />
155169
</ErrorBoundary>
156-
</PrivateRoute>
170+
</PrivatePage>
157171

158-
<PrivateRoute path="/domains" exact>
172+
<PrivatePage path="/domains" title={t`Domains`} exact>
159173
<DomainsPage />
160-
</PrivateRoute>
174+
</PrivatePage>
161175

162-
<PrivateRoute path="/domains/:domainSlug" exact>
176+
<PrivatePage path="/domains/:domainSlug" setTitle={false} exact>
163177
<DmarcGuidancePage />
164-
</PrivateRoute>
178+
</PrivatePage>
165179

166-
<PrivateRoute
180+
<PrivatePage
167181
path="/domains/:domainSlug/dmarc-report/:period?/:year?"
182+
setTitle={false}
168183
exact
169184
>
170185
<DmarcReportPage />
171-
</PrivateRoute>
186+
</PrivatePage>
172187

173-
<PrivateRoute path="/dmarc-summaries" exact>
188+
<PrivatePage
189+
path="/dmarc-summaries"
190+
title={t`DMARC Report`}
191+
exact
192+
>
174193
<DmarcByDomainPage />
175-
</PrivateRoute>
194+
</PrivatePage>
176195

177-
<PrivateRoute path="/user">
196+
<PrivatePage path="/user" title={t`Your Account`}>
178197
<UserPage username={currentUser.userName} />
179-
</PrivateRoute>
198+
</PrivatePage>
180199

181-
<PrivateRoute path="/two-factor-code">
200+
<PrivatePage
201+
path="/two-factor-code"
202+
title={t`Authentication QR Code`}
203+
>
182204
<QRcodePage userName={currentUser.userName} />
183-
</PrivateRoute>
184-
185-
<PrivateRoute path="/dmarc-report/:period?/:year?">
186-
<DmarcReportPage />
187-
</PrivateRoute>
205+
</PrivatePage>
188206

189-
<Route component={PageNotFound} />
207+
<Page component={PageNotFound} title="404" />
190208
</Switch>
191209
</Suspense>
192210
</Main>
@@ -215,7 +233,7 @@ export default function App() {
215233
</Link>
216234
<Link
217235
ml={4}
218-
href={"https://github.com/canada-ca/tracker/issues"}
236+
href={'https://github.com/canada-ca/tracker/issues'}
219237
isExternal={true}
220238
>
221239
<Trans>Report an Issue</Trans>

‎frontend/src/DmarcGuidancePage.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,14 @@ import { Trans } from '@lingui/macro'
99
import { ErrorFallbackMessage } from './ErrorFallbackMessage'
1010
import { ErrorBoundary } from 'react-error-boundary'
1111
import { LoadingMessage } from './LoadingMessage'
12+
import { useDocumentTitle } from './useDocumentTitle'
1213

1314
export default function DmarcGuidancePage() {
1415
const { currentUser } = useUserState()
1516
const { domainSlug } = useParams()
1617

18+
useDocumentTitle(`${domainSlug}`)
19+
1720
const { loading, error, data } = useQuery(GET_GUIDANCE_TAGS_OF_DOMAIN, {
1821
context: {
1922
headers: {

‎frontend/src/DmarcReportPage.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,16 @@ import { months } from './months'
2828
import { ErrorBoundary } from 'react-error-boundary'
2929
import { ErrorFallbackMessage } from './ErrorFallbackMessage'
3030
import { LoadingMessage } from './LoadingMessage'
31+
import { useDocumentTitle } from './useDocumentTitle'
3132

3233
export default function DmarcReportPage({ summaryListResponsiveWidth }) {
3334
const { currentUser } = useUserState()
3435
const { domainSlug, period, year } = useParams()
3536
const history = useHistory()
3637
const { i18n } = useLingui()
3738

39+
useDocumentTitle(t`DMARC Report for ${domainSlug}`)
40+
3841
const currentDate = new Date()
3942
const [selectedPeriod, setSelectedPeriod] = useState(period)
4043
const [selectedYear, setSelectedYear] = useState(year)

‎frontend/src/OrganizationDetails.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,16 @@ import { ErrorFallbackMessage } from './ErrorFallbackMessage'
2323
import { LoadingMessage } from './LoadingMessage'
2424
import { OrganizationDomains } from './OrganizationDomains'
2525
import { OrganizationAffiliations } from './OrganizationAffiliations'
26+
import { useDocumentTitle } from './useDocumentTitle'
2627

2728
export default function OrganizationDetails() {
2829
const { orgSlug } = useParams()
2930
const { currentUser } = useUserState()
3031
const toast = useToast()
3132
const history = useHistory()
33+
34+
useDocumentTitle(`${orgSlug}`)
35+
3236
const { loading, _error, data } = useQuery(ORG_DETAILS_PAGE, {
3337
variables: { slug: orgSlug },
3438
context: {

‎frontend/src/Page.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
import { Route } from 'react-router-dom'
3+
import { bool, string } from 'prop-types'
4+
import { useDocumentTitle } from './useDocumentTitle'
5+
6+
export const Page = ({ title, setTitle, ...props }) => {
7+
useDocumentTitle(title, setTitle)
8+
9+
return <Route {...props} />
10+
}
11+
12+
Page.propTypes = {
13+
title: string,
14+
setTitle: bool,
15+
}

frontend/src/PrivateRoute.js renamed to frontend/src/PrivatePage.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
// From https://reactrouter.com/web/example/auth-workflow
2-
31
import React from 'react'
42
import { node } from 'prop-types'
5-
import { Route, Redirect, useLocation } from 'react-router-dom'
3+
import { Redirect, useLocation } from 'react-router-dom'
64
import { useUserState } from './UserState'
5+
import { Page } from './Page'
76

8-
// A wrapper for <Route> that redirects to the login
7+
// A wrapper for <Page> that redirects to the login
98
// screen if you're not yet authenticated.
10-
export default function PrivateRoute({ children, ...rest }) {
9+
export default function PrivatePage({ children, title, setTitle, ...rest }) {
1110
const { isLoggedIn } = useUserState()
1211
const location = useLocation()
1312
return (
14-
<Route
13+
<Page
14+
title={title}
15+
setTitle={setTitle}
1516
{...rest}
1617
render={() =>
1718
isLoggedIn() ? (
@@ -29,6 +30,7 @@ export default function PrivateRoute({ children, ...rest }) {
2930
)
3031
}
3132

32-
PrivateRoute.propTypes = {
33+
PrivatePage.propTypes = {
3334
children: node,
35+
...Page.propTypes,
3436
}

‎frontend/src/browserconfig.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<browserconfig>
3+
<msapplication>
4+
<tile>
5+
<square150x150logo src="/images/mstile-150x150.png"/>
6+
<TileColor>#2e2e40</TileColor>
7+
</tile>
8+
</msapplication>
9+
</browserconfig>

‎frontend/src/client.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const cache = createCache()
4343

4444
export const client = new ApolloClient({
4545
link: new HttpLink({
46-
uri: 'https://tracker.alpha.canada.ca/graphql',
46+
uri: '/graphql',
4747
}),
4848
cache,
4949
})

‎frontend/src/html.js‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import './images/favicon.ico'
21
import './images/apple-touch-icon.png'
32
import './images/favicon-32x32.png'
43
import './images/favicon-16x16.png'
@@ -12,37 +11,25 @@ export default () => `
1211
<html lang="en">
1312
<head>
1413
<meta charset="utf-8" />
15-
<link
16-
rel="apple-touch-icon"
17-
sizes="180x180"
18-
href="/apple-touch-icon.png"
19-
/>
20-
<link
21-
rel="icon"
22-
type="image/png"
23-
sizes="32x32"
24-
href="/favicon-32x32.png"
25-
/>
26-
<link
27-
rel="icon"
28-
type="image/png"
29-
sizes="16x16"
30-
href="/favicon-16x16.png"
31-
/>
32-
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
33-
<meta name="msapplication-TileColor" content="#da532c" />
34-
<meta name="theme-color" content="#ffffff" />
35-
<link rel="icon" href="/favicon.ico" />
14+
15+
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
16+
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
17+
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
18+
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#e65225">
19+
<link rel="shortcut icon" href="images/favicon.ico">
20+
<link rel="manifest" href="manifest.json" />
21+
<meta name="msapplication-TileColor" content="#2e2e40">
22+
<meta name="msapplication-config" content="./browserconfig.xml">
23+
<meta name="theme-color" content="#ff0000">
24+
3625
<meta
3726
name="viewport"
3827
content="width=device-width, initial-scale=1, shrink-to-fit=no"
3928
/>
40-
<meta name="theme-color" content="#000000" />
4129
<meta
4230
name="description"
4331
content="Tracking security best practices for the Government of Canada"
4432
/>
45-
<link rel="manifest" href="/manifest.json" />
4633
<title>Tracker</title>
4734
</head>
4835
<body>

‎frontend/src/images/android-chrome-192x192.png‎

11.8 KB
Loading

0 commit comments

Comments
 (0)