File "email-verification-page.tsx"
Full Path: /home/markqprx/iniasli.pro/client/auth/ui/email-verification-page/email-verification-page.tsx
File size: 2.34 KB
MIME-type: text/plain
Charset: utf-8
import {useUser} from '@common/auth/ui/use-user';
import {Trans} from '@common/i18n/trans';
import mailSentSvg from './mail-sent.svg';
import {SvgImage} from '@common/ui/images/svg-image/svg-image';
import {Button} from '@common/ui/buttons/button';
import {useResendVerificationEmail} from '@common/auth/requests/use-resend-verification-email';
import {useIsDarkMode} from '@common/ui/themes/use-is-dark-mode';
import {useSettings} from '@common/core/settings/use-settings';
import {useLogout} from '@common/auth/requests/logout';
export function EmailVerificationPage() {
const {data} = useUser('me');
const resendEmail = useResendVerificationEmail();
const {
branding: {logo_light, logo_dark},
} = useSettings();
const isDarkMode = useIsDarkMode();
const logoSrc = isDarkMode ? logo_light : logo_dark;
const logout = useLogout();
return (
<div className="flex min-h-screen w-screen flex-col items-center bg-alt p-24">
{logoSrc && (
<img
src={logoSrc}
alt="Site logo"
className="my-60 block h-42 w-auto"
/>
)}
<div className="flex max-w-580 flex-col items-center rounded border bg-paper px-14 py-28 text-center shadow">
<SvgImage src={mailSentSvg} className="h-144" />
<h1 className="mb-20 mt-40 text-3xl">
<Trans message="Verify your email" />
</h1>
<div className="mb-24 text-sm">
<Trans
message="We've sent an email to “:email“ to verify your email address and activate your account. The link in the the email will expire in 24 hours."
values={{email: data?.user.email}}
/>
</div>
<div className="text-sm">
<Trans message="If you did not receive an email, click the button below and we will send you another one." />
</div>
<div className="mt-30">
<Button
className="mr-10"
variant="flat"
color="primary"
disabled={resendEmail.isPending || !data?.user.email}
onClick={() => {
resendEmail.mutate({email: data!.user.email});
}}
>
<Trans message="Resend email" />
</Button>
<Button variant="outline" onClick={() => logout.mutate()}>
<Trans message="Logout" />
</Button>
</div>
</div>
</div>
);
}