webapp/src/components/Nav/AuthModal/EmailConfirm.tsx
Untone f23c3fded1
Some checks failed
deploy / test (push) Failing after 1m6s
deploy / deploy (push) Has been skipped
session-context-wip
2023-12-14 14:49:55 +03:00

84 lines
2.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import type { ConfirmEmailSearchParams } from './types'
import { clsx } from 'clsx'
import { createMemo, createSignal, onMount, Show } from 'solid-js'
import { useLocalize } from '../../../context/localize'
import { useSession } from '../../../context/session'
import { ApiError } from '../../../graphql/error'
import { useRouter } from '../../../stores/router'
import { hideModal } from '../../../stores/ui'
import styles from './AuthModal.module.scss'
export const EmailConfirm = () => {
const { t } = useLocalize()
const {
actions: { confirmEmail },
} = useSession()
const { user } = useSession()
const [isTokenExpired, setIsTokenExpired] = createSignal(false)
const [isTokenInvalid, setIsTokenInvalid] = createSignal(false)
const confirmedEmail = createMemo(() => user?.email || '')
const { searchParams } = useRouter<ConfirmEmailSearchParams>()
onMount(async () => {
const token = searchParams().token
try {
await confirmEmail({ token })
} catch (error) {
if (error instanceof ApiError) {
if (error.code === 'token_expired') {
setIsTokenExpired(true)
return
}
if (error.code === 'token_invalid') {
setIsTokenInvalid(true)
return
}
}
console.log(error)
}
})
return (
<div>
{/* TODO: texts */}
<Show when={isTokenExpired()}>
<div class={styles.title}>Ссылка больше не действительна</div>
<div class={styles.text}>
<a href="/?modal=auth&mode=login">
{/*TODO: temp solution, should be send link again, but we don't have email here*/}
Вход
</a>
</div>
</Show>
<Show when={isTokenInvalid()}>
<div class={styles.title}>Неправильная ссылка</div>
<div class={styles.text}>
<a href="/?modal=auth&mode=login">
{/*TODO: temp solution, should be send link again, but we don't have email here*/}
Вход
</a>
</div>
</Show>
<Show when={Boolean(confirmedEmail())}>
<div class={styles.title}>{t('Hooray! Welcome!')}</div>
<div class={styles.text}>
{t("You've confirmed email")} {confirmedEmail()}
</div>
<div>
<button class={clsx('button', styles.submitButton)} onClick={() => hideModal()}>
{t('Go to main page')}
</button>
</div>
</Show>
</div>
)
}