From 093622681c30e022a14543a73626b8ba9dd6e7dd Mon Sep 17 00:00:00 2001
From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>
Date: Tue, 26 Dec 2023 16:05:14 +0000
Subject: Better success page

---
 src/components/Navbar/Navbar.astro            |  8 ++-
 src/i18n/translations/pages/signUp.ts         | 23 --------
 src/i18n/translations/pages/signUp/index.ts   | 23 ++++++++
 src/i18n/translations/pages/signUp/success.ts | 29 ++++++++++
 src/layouts/Layout.astro                      |  5 +-
 src/layouts/Page.astro                        |  5 +-
 src/pages/[locale]/sign-up/index.astro        | 13 +++--
 src/pages/[locale]/sign-up/success.astro      | 81 ++++++++++++++++-----------
 8 files changed, 120 insertions(+), 67 deletions(-)
 delete mode 100644 src/i18n/translations/pages/signUp.ts
 create mode 100644 src/i18n/translations/pages/signUp/index.ts
 create mode 100644 src/i18n/translations/pages/signUp/success.ts

diff --git a/src/components/Navbar/Navbar.astro b/src/components/Navbar/Navbar.astro
index 4fa05a9..0722f01 100644
--- a/src/components/Navbar/Navbar.astro
+++ b/src/components/Navbar/Navbar.astro
@@ -3,13 +3,19 @@ import Breadcrumbs from './Breadcrumbs.astro';
 import SwitchLanguageLink from '../SwitchLanguageLink.astro';
 import NavLinks from './NavLinks.astro';
 import Logo from './Logo.astro';
+
+interface Props {
+  noBreadcrumbs?: boolean;
+}
+
+const { noBreadcrumbs } = Astro.props;
 ---
 
 <nav class="nav">
   <Logo />
   <NavLinks />
   <div class="nav__bottom-row">
-    <Breadcrumbs />
+    {!noBreadcrumbs && <Breadcrumbs />}
     <SwitchLanguageLink />
   </div>
 </nav>
diff --git a/src/i18n/translations/pages/signUp.ts b/src/i18n/translations/pages/signUp.ts
deleted file mode 100644
index 15a9dcf..0000000
--- a/src/i18n/translations/pages/signUp.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { TranslationsDictionary } from '$types/TranslationsDictionary';
-
-const tPage = {
-  title: {
-    sco: () => 'Sign up',
-    'en-GB': () => 'Sign up',
-  },
-  'label-email': {
-    sco: () => 'Email',
-    'en-GB': () => 'Email',
-  },
-  'label-display-name': {
-    sco: () => 'Name',
-    'en-GB': () => 'Name',
-  },
-  submit: {
-    sco: () => 'Sign up',
-    'en-GB': () => 'Sign up',
-  },
-};
-
-type Raw = typeof tPage;
-export default tPage as TranslationsDictionary<Raw>;
diff --git a/src/i18n/translations/pages/signUp/index.ts b/src/i18n/translations/pages/signUp/index.ts
new file mode 100644
index 0000000..15a9dcf
--- /dev/null
+++ b/src/i18n/translations/pages/signUp/index.ts
@@ -0,0 +1,23 @@
+import type { TranslationsDictionary } from '$types/TranslationsDictionary';
+
+const tPage = {
+  title: {
+    sco: () => 'Sign up',
+    'en-GB': () => 'Sign up',
+  },
+  'label-email': {
+    sco: () => 'Email',
+    'en-GB': () => 'Email',
+  },
+  'label-display-name': {
+    sco: () => 'Name',
+    'en-GB': () => 'Name',
+  },
+  submit: {
+    sco: () => 'Sign up',
+    'en-GB': () => 'Sign up',
+  },
+};
+
+type Raw = typeof tPage;
+export default tPage as TranslationsDictionary<Raw>;
diff --git a/src/i18n/translations/pages/signUp/success.ts b/src/i18n/translations/pages/signUp/success.ts
new file mode 100644
index 0000000..d853917
--- /dev/null
+++ b/src/i18n/translations/pages/signUp/success.ts
@@ -0,0 +1,29 @@
+import type { TranslationsDictionary } from '$types/TranslationsDictionary';
+
+const tPage = {
+  title: {
+    sco: () => 'Successfullie signed up',
+    'en-GB': () => 'Successfully signed up',
+  },
+  'para-1': {
+    sco: ({ displayName }: { displayName: string }) => `
+      Walcome, ${displayName}! You hae successfullie registered a new account
+      wi us.
+    `,
+    'en-GB': ({ displayName }: { displayName: string }) => `
+      Welcome, ${displayName}! You have successfully registered a new account
+      with us.
+    `,
+  },
+  'para-2': {
+    sco: ({ userId }: { userId: string }) => `
+      Your new unique user ID is ${userId}. Uise this neist time you wad log in.
+    `,
+    'en-GB': ({ userId }: { userId: string }) => `
+      Your new unique user ID is ${userId}. Use this next time you want to log in.
+    `,
+  },
+};
+
+type Raw = typeof tPage;
+export default tPage as TranslationsDictionary<Raw>;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index a5315be..938bfe5 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -10,9 +10,10 @@ import type Locale from '$types/Locale';
 
 interface Props {
   title: string;
+  noBreadcrumbs?: boolean;
 }
 
-const { title } = Astro.props;
+const { noBreadcrumbs, title } = Astro.props;
 const locale = getLocaleFromPathOrDefault(Astro.url.pathname);
 const t = translate(locale);
 
@@ -55,7 +56,7 @@ function qualifiedLocalisedPath(newLocale: Locale) {
   </head>
   <body id="top">
     <a class="btn skip-to-content" href="#main">Skip to content</a>
-    <Navbar />
+    <Navbar noBreadcrumbs={noBreadcrumbs} />
     <slot />
     <Footer />
   </body>
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index bc7a095..da75514 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -2,13 +2,14 @@
 import Layout from './Layout.astro';
 
 interface Props {
+  noBreadcrumbs?: boolean;
   title: string;
 }
 
-const { title } = Astro.props;
+const { noBreadcrumbs, title } = Astro.props;
 ---
 
-<Layout title={title}>
+<Layout noBreadcrumbs={noBreadcrumbs} title={title}>
   <main id="main">
     <slot />
   </main>
diff --git a/src/pages/[locale]/sign-up/index.astro b/src/pages/[locale]/sign-up/index.astro
index 27b40a2..cef1fe0 100644
--- a/src/pages/[locale]/sign-up/index.astro
+++ b/src/pages/[locale]/sign-up/index.astro
@@ -45,14 +45,14 @@ const t = translate(locale);
   const statusInfoMsg = document.createElement('p');
   statusInfoMsg.textContent = locale === 'en-GB' ? 'Signing you up…' : 'Signin you up…';
 
-  const successPageUrl = `${locale}/sign-up/success`;
+  const successPageUrl = `/${locale}/sign-up/success`;
 
   form.addEventListener('submit', async (event: SubmitEvent) => {
     // Prevent default behaviour of submit button (which includes refreshing the page)
     event.preventDefault();
 
     // Disable the form and leave message to let the user know it’s been submitted
-    setIsFormDisabled('true');
+    setIsFormDisabled(true);
     form.after(statusInfoMsg);
 
     let registrationOptions;
@@ -93,9 +93,12 @@ const t = translate(locale);
       );
     }
 
-    const url = new URL(successPageUrl);
-    url.searchParams.set('displayName', registrationOptions.user.displayName);
-    url.searchParams.set('username', registrationOptions.user.name);
+    const url =
+      successPageUrl +
+      '?displayName=' +
+      registrationOptions.user.displayName +
+      '&userId=' +
+      registrationOptions.user.name;
 
     console.info(`Redirecting to the success page ${url}...`);
     statusInfoMsg.innerHTML =
diff --git a/src/pages/[locale]/sign-up/success.astro b/src/pages/[locale]/sign-up/success.astro
index b23993e..175b6ab 100644
--- a/src/pages/[locale]/sign-up/success.astro
+++ b/src/pages/[locale]/sign-up/success.astro
@@ -1,42 +1,55 @@
 ---
+import translate from '$i18n/translate';
+import tPage from '$i18n/translations/pages/signUp/success';
 import localeStaticPaths from '$lib/localeStaticPaths';
+import { getLocaleFromPathOrThrow } from '$lib/getLocaleFromPath';
+import Page from '$layouts/Page.astro';
 
 export async function getStaticPaths() {
   return localeStaticPaths;
 }
+
+const locale = getLocaleFromPathOrThrow(Astro.url.pathname);
+const t = translate(locale);
 ---
 
-<!-- TODO: localise this -->
-<h1>Successfully signed up</h1>
-
-<script>
-  const errorMsg = new HTMLParagraphElement();
-  errorMsg.append('Something went wrong. Please send an error report to ');
-  const lallansEmailAnchor = new HTMLAnchorElement();
-  lallansEmailAnchor.href = 'mailto:lallans@hotmail.co.uk';
-  lallansEmailAnchor.textContent = 'lallans@hotmail.co.uk';
-  errorMsg.append(lallansEmailAnchor);
-  errorMsg.append('.');
-
-  const heading = document.getElementsByTagName('h1')[0];
-
-  const url = new URL(window.location.href);
-
-  const displayName = url.searchParams.get('displayName');
-  const username = url.searchParams.get('username');
-  if (!displayName || !username) {
-    heading.after(errorMsg);
-  }
-
-  const successMsg = [new HTMLParagraphElement(), new HTMLParagraphElement()];
-  // TODO: localise this
-  successMsg[0].textContent = `
-    Congratulations, ${displayName}! You have successfully registered a new
-    account with us.
-  `;
-  successMsg[1].textContent = `
-    Your new unique username is ${username}. Use this next time you want to log in.
-  `;
-  heading.after(...successMsg);
-</script>
-<!-- TODO: 'go back to where you were' link -->
+<Page title={t(tPage, { key: 'title' })} noBreadcrumbs={true}>
+  <section>
+    <h1>{t(tPage, { key: 'title' })}</h1>
+
+    <script>
+      import translate from '$i18n/translate';
+      import tPage from '$i18n/translations/pages/signUp/success';
+      import { getLocaleFromPathOrThrow } from '$lib/getLocaleFromPath';
+
+      const locale = getLocaleFromPathOrThrow(window.location.pathname);
+      const t = translate(locale);
+
+      const heading = document.getElementsByTagName('h1')[0];
+
+      const url = new URL(window.location.href);
+
+      const displayName = url.searchParams.get('displayName');
+      const userId = url.searchParams.get('userId');
+      if (displayName && userId) {
+        const successMsg = [document.createElement('p'), document.createElement('p')];
+        successMsg[0].textContent = t(tPage, { key: 'para-1', displayName });
+        successMsg[1].textContent = t(tPage, { key: 'para-2', userId });
+
+        heading.after(...successMsg);
+      } else {
+        const errorMsg = document.createElement('p');
+        errorMsg.append('Something went wrong. Please send an error report to ');
+        const lallansEmailAnchor = document.createElement('a');
+        lallansEmailAnchor.href = 'mailto:lallans@hotmail.co.uk';
+        lallansEmailAnchor.textContent = 'lallans@hotmail.co.uk';
+        errorMsg.append(lallansEmailAnchor);
+        errorMsg.append('.');
+
+        heading.after(errorMsg);
+      }
+    </script>
+
+    <!-- TODO: 'go back to where you were' link -->
+  </section>
+</Page>
-- 
cgit v1.2.3