diff options
| -rw-r--r-- | src/components/Navbar/Navbar.astro | 8 | ||||
| -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.ts | 29 | ||||
| -rw-r--r-- | src/layouts/Layout.astro | 5 | ||||
| -rw-r--r-- | src/layouts/Page.astro | 5 | ||||
| -rw-r--r-- | src/pages/[locale]/sign-up/index.astro | 13 | ||||
| -rw-r--r-- | src/pages/[locale]/sign-up/success.astro | 81 |
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> |