108 lines
3.5 KiB
JavaScript
108 lines
3.5 KiB
JavaScript
// Hooks
|
|
import { useEffect, useState } from 'react'
|
|
import { useApp } from 'site/hooks/useApp.mjs'
|
|
import { useBackend } from 'site/hooks/useBackend.mjs'
|
|
import { useToast } from 'site/hooks/useToast.mjs'
|
|
import { useRouter } from 'next/router'
|
|
import { useTranslation } from 'next-i18next'
|
|
// Dependencies
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
import Link from 'next/link'
|
|
// Components
|
|
import { PageWrapper, ns as pageNs } from 'site/components/wrappers/page.mjs'
|
|
import { BareLayout } from 'site/components/layouts/bare.mjs'
|
|
import { Spinner } from 'shared/components/spinner.mjs'
|
|
import { Robot } from 'shared/components/robot/index.mjs'
|
|
import { BackToAccountButton } from 'site/components/account/shared.mjs'
|
|
import { HelpIcon } from 'shared/components/icons.mjs'
|
|
|
|
// Translation namespaces used on this page
|
|
const ns = Array.from(new Set([...pageNs, 'account']))
|
|
|
|
const ConfirmSignUpPage = (props) => {
|
|
const app = useApp(props)
|
|
const backend = useBackend(app)
|
|
const toast = useToast()
|
|
const { t } = useTranslation(ns)
|
|
const router = useRouter()
|
|
|
|
const [error, setError] = useState(false)
|
|
|
|
// Get confirmation ID and check from url
|
|
const [id, check] = router.asPath.slice(1).split('/').slice(2)
|
|
|
|
useEffect(() => {
|
|
// Async inside useEffect requires this approach
|
|
const confirmEmail = async () => {
|
|
app.startLoading()
|
|
const result = await backend.loadConfirmation({ id, check })
|
|
if (result?.result === 'success' && result.confirmation) {
|
|
const changed = await backend.updateAccount({
|
|
confirm: 'emailchange',
|
|
confirmation: result.confirmation.id,
|
|
check: result.confirmation.check,
|
|
})
|
|
if (changed) {
|
|
app.stopLoading()
|
|
setError(false)
|
|
toast.for.settingsSaved()
|
|
router.push('/account')
|
|
} else {
|
|
app.stopLoading()
|
|
setError(true)
|
|
}
|
|
} else {
|
|
app.stopLoading()
|
|
setError(true)
|
|
}
|
|
}
|
|
// Call async methods
|
|
if (app.token) confirmEmail()
|
|
}, [id, check, app.token])
|
|
|
|
// Short-circuit errors
|
|
if (error)
|
|
return (
|
|
<PageWrapper app={app} title={t('account:politeOhCrap')} layout={BareLayout} footer={false}>
|
|
<div className="max-w-md flex flex-col items-center m-auto justify-center h-screen text-center">
|
|
<h1 className="text-center">{t('account:politeOhCrap')}</h1>
|
|
<Robot pose="ohno" className="w-48" embed />
|
|
<p className="mt-4">{t('account:vagueError')}</p>
|
|
<div className="flex flex-row gap-4 items-center mt-4">
|
|
<BackToAccountButton />
|
|
<Link className="btn btn-primary mt-4 pr-6" href="/support">
|
|
<HelpIcon className="w-6 h-6 mr-4" /> {t('contactSupport')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</PageWrapper>
|
|
)
|
|
|
|
return (
|
|
<PageWrapper app={app} title={t('account:oneMomentPlease')} layout={BareLayout} footer={false}>
|
|
<div className="max-w-md flex flex-col items-center m-auto justify-center h-screen text-center">
|
|
<h1 className="text-center">{t('account:oneMomentPlease')}</h1>
|
|
<p className="text-center">
|
|
<Spinner />
|
|
</p>
|
|
</div>
|
|
</PageWrapper>
|
|
)
|
|
}
|
|
|
|
export default ConfirmSignUpPage
|
|
|
|
export async function getStaticProps({ locale }) {
|
|
return {
|
|
props: {
|
|
...(await serverSideTranslations(locale, ns)),
|
|
},
|
|
}
|
|
}
|
|
|
|
export async function getStaticPaths() {
|
|
return {
|
|
paths: [],
|
|
fallback: true,
|
|
}
|
|
}
|