Merge pull request #64 from DTS-STN/security-page

Creating Security page.

components/Layout.js

@@ -13,16 +13,7 @@ export default function Layout(props) {
   const display = props.display ?? {}
   const t = props.locale === 'en' ? en : fr
 
-  const defaultBreadcrumbs = [
-    {
-      link: t.url_canada_ca,
-      text: t.canada_ca,
-    },
-    {
-      link: t.url_serviceCanada,
-      text: t.serviceCanada,
-    },
-  ]
+  const defaultBreadcrumbs = []
 
   return (
     <>
@@ -45,12 +36,12 @@ export default function Layout(props) {
         menuProps={{
           craPath:
             '/https://www.canada.ca/fr/agence-revenu/services/services-electroniques/services-electroniques-particuliers/dossier-particuliers.html',
-          dashboardPath: '/dashboard',
+          dashboardPath: `${props.locale === 'en' ? '' : '/fr'}/home`,
           onSignOut: () => {
             console.log('todo: implement logout')
           },
-          profilePath: '/profile',
-          securityPath: '/security-settings',
+          profilePath: `${props.locale === 'en' ? '' : '/fr'}/profile`,
+          securityPath: `${props.locale === 'en' ? '' : '/fr'}/security`,
           signOutPath: '/',
         }}
         searchProps={{

locales/en.js

@@ -14,6 +14,7 @@ export default {
   //Heading
   pageHeading: {
     title: 'My dashboard',
+    security: 'Security Settings',
     profile: 'Profile',
   },
 

locales/fr.js

@@ -14,6 +14,7 @@ export default {
   //Heading
   pageHeading: {
     title: 'Mon tableau de bord',
+    security: 'Paramètres de sécurité',
     profile: 'Profil',
   },
 

pages/security.js

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types'
+import { Heading } from '@dts-stn/service-canada-design-system'
+import en from '../locales/en'
+import fr from '../locales/fr'
+
+export default function Home(props) {
+  const t = props.locale === 'en' ? en : fr
+
+  return (
+    <div id="securityContent" data-testid="securityContent-test">
+      <Heading id="my-dashboard-heading" title={t.pageHeading.security} />
+    </div>
+  )
+}
+
+export async function getStaticProps({ locale }) {
+  /* istanbul ignore next */
+  const langToggleLink = locale === 'en' ? '/fr/security' : '/security'
+
+  const t = locale === 'en' ? en : fr
+
+  const breadCrumbItems = [
+    {
+      link: t.url_dashboard,
+      text: t.pageHeading.title,
+    },
+  ]
+
+  /* Place-holder Meta Data Props */
+  const meta = {
+    data_en: {
+      title: 'My Service Canada Account - Security',
+      desc: 'English',
+      author: 'Service Canada',
+      keywords: '',
+    },
+    data_fr: {
+      title: 'Mon dossier Service Canada - Sécurité',
+      desc: 'Français',
+      author: 'Service Canada',
+      keywords: '',
+    },
+  }
+
+  return {
+    props: { locale, langToggleLink, meta, breadCrumbItems },
+  }
+}
+
+Home.propTypes = {
+  /**
+   * current locale in the address
+   */
+  locale: PropTypes.string,
+
+  /*
+   * Language link toggle text
+   */
+  langToggleLink: PropTypes.string,
+
+  /*
+   * Meta Tags
+   */
+
+  meta: PropTypes.object,
+
+  /*
+   * BreadCrumb Items
+   */
+  breadCrumbItems: PropTypes.object,
+}