summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJoe Carstairs <65492573+Sycamost@users.noreply.github.com>2023-12-26 16:05:14 +0000
committerJoe Carstairs <jcarstairs@scottlogic.com>2024-01-29 10:51:49 +0000
commit093622681c30e022a14543a73626b8ba9dd6e7dd (patch)
treec06ca182650f765e4b61a0c3680a766e9f0b55b9
parente8847d6c1aa7254928496ed855979bdcf9734ea5 (diff)
Better success page
Diffstat
-rw-r--r--src/components/Navbar/Navbar.astro8
-rw-r--r--src/i18n/translations/pages/signUp/index.ts (renamed from src/i18n/translations/pages/signUp.ts)0
-rw-r--r--src/i18n/translations/pages/signUp/success.ts29
-rw-r--r--src/layouts/Layout.astro5
-rw-r--r--src/layouts/Page.astro5
-rw-r--r--src/pages/[locale]/sign-up/index.astro13
-rw-r--r--src/pages/[locale]/sign-up/success.astro81
7 files changed, 97 insertions, 44 deletions
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/index.ts
index 15a9dcf..15a9dcf 100644
--- a/src/i18n/translations/pages/signUp.ts
+++ b/src/i18n/translations/pages/signUp/index.ts
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>
generated by cgit v1.2.3 (git 2.25.1) at 2026-09-08 10:17:52 +0000