e47c18177b
This removes the useApp hook from all org pages in favor of various context. This means there is no longer global state that gets passed around, instead each component that requires access to something shared (like account, or navigation) can just use the context instead. This is a first step, as a lot of shared components stil rely on app not to mention the dev and lab sites.
122 lines
3.9 KiB
JavaScript
122 lines
3.9 KiB
JavaScript
// Hooks
|
|
import { useEffect, useState, useContext } from 'react'
|
|
import { useBackend } from 'shared/hooks/use-backend.mjs'
|
|
import { useAccount } from 'shared/hooks/use-account.mjs'
|
|
import { useToast } from 'shared/hooks/use-toast.mjs'
|
|
import { useRouter } from 'next/router'
|
|
import { useTranslation } from 'next-i18next'
|
|
// Context
|
|
import { LoadingContext } from 'shared/context/loading-context.mjs'
|
|
// Dependencies
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
import Link from 'next/link'
|
|
// Components
|
|
import { PageWrapper, ns as pageNs } from 'shared/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 'shared/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 = ({ page }) => {
|
|
// Context
|
|
const { loading, startLoading, stopLoading } = useContext(LoadingContext)
|
|
|
|
// Hooks
|
|
const { setAccount, setToken, token } = useAccount()
|
|
const backend = useBackend()
|
|
const toast = useToast()
|
|
const { t } = useTranslation(ns)
|
|
const router = useRouter()
|
|
// Get confirmation ID and check from url
|
|
const [id, check] = router.asPath.slice(1).split('/').slice(2)
|
|
|
|
// State
|
|
const [error, setError] = useState(false)
|
|
|
|
// Effects
|
|
useEffect(() => {
|
|
// Async inside useEffect requires this approach
|
|
const confirmEmail = async () => {
|
|
startLoading()
|
|
const confirmation = await backend.loadConfirmation({ id, check })
|
|
if (confirmation?.result === 'success' && confirmation.confirmation) {
|
|
const result = await backend.updateAccount({
|
|
confirm: 'emailchange',
|
|
confirmation: confirmation.confirmation.id,
|
|
check: confirmation.confirmation.check,
|
|
})
|
|
if (result.success) {
|
|
setAccount(result.data.account)
|
|
setToken(result.data.token)
|
|
stopLoading()
|
|
setError(false)
|
|
toast.for.settingsSaved()
|
|
router.push('/account')
|
|
} else {
|
|
stopLoading()
|
|
setError(true)
|
|
}
|
|
} else {
|
|
stopLoading()
|
|
setError(true)
|
|
}
|
|
}
|
|
// Call async methods
|
|
if (token) confirmEmail()
|
|
}, [id, check, token])
|
|
|
|
// Update path with dynamic ID
|
|
if (!page) return null
|
|
if (page) page.path = ['confirm', 'emailchange', id]
|
|
|
|
// Short-circuit errors
|
|
if (error)
|
|
return (
|
|
<PageWrapper {...page} 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 {...page} 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)),
|
|
page: { locale },
|
|
},
|
|
}
|
|
}
|
|
|
|
export async function getStaticPaths() {
|
|
return {
|
|
paths: [],
|
|
fallback: true,
|
|
}
|
|
}
|