81 lines
3 KiB
TypeScript
81 lines
3 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { Box, Text, color } from 'folds';
|
|
import { Link, useSearchParams } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useAuthServer } from '../../../hooks/useAuthServer';
|
|
import { RegisterFlowStatus, useAuthFlows } from '../../../hooks/useAuthFlows';
|
|
import { PasswordRegisterForm, SUPPORTED_REGISTER_STAGES } from '../register/PasswordRegisterForm';
|
|
import { SupportedUIAFlowsLoader } from '../../../components/SupportedUIAFlowsLoader';
|
|
import { getLoginPath } from '../../pathUtils';
|
|
import { RegisterPathSearchParams } from '../../paths';
|
|
import * as css from '../styles.css';
|
|
|
|
const useRegisterSearchParams = (searchParams: URLSearchParams): RegisterPathSearchParams =>
|
|
useMemo(
|
|
() => ({
|
|
username: searchParams.get('username') ?? undefined,
|
|
email: searchParams.get('email') ?? undefined,
|
|
token: searchParams.get('token') ?? undefined,
|
|
}),
|
|
[searchParams]
|
|
);
|
|
|
|
export function Register() {
|
|
const { t } = useTranslation();
|
|
const server = useAuthServer();
|
|
const { registerFlows } = useAuthFlows();
|
|
const [searchParams] = useSearchParams();
|
|
const registerSearchParams = useRegisterSearchParams(searchParams);
|
|
|
|
return (
|
|
<Box direction="Column" gap="500">
|
|
{registerFlows.status === RegisterFlowStatus.RegistrationDisabled && (
|
|
<Text style={{ color: color.Critical.Main }} size="T300">
|
|
{t('Auth.register_disabled')}
|
|
</Text>
|
|
)}
|
|
{registerFlows.status === RegisterFlowStatus.RateLimited && (
|
|
<Text style={{ color: color.Critical.Main }} size="T300">
|
|
{t('Auth.register_rate_limited')}
|
|
</Text>
|
|
)}
|
|
{registerFlows.status === RegisterFlowStatus.InvalidRequest && (
|
|
<Text style={{ color: color.Critical.Main }} size="T300">
|
|
{t('Auth.register_invalid_request')}
|
|
</Text>
|
|
)}
|
|
{registerFlows.status === RegisterFlowStatus.FlowRequired && (
|
|
<SupportedUIAFlowsLoader
|
|
flows={registerFlows.data.flows ?? []}
|
|
supportedStages={SUPPORTED_REGISTER_STAGES}
|
|
>
|
|
{(supportedFlows) =>
|
|
supportedFlows.length === 0 ? (
|
|
<Text style={{ color: color.Critical.Main }} size="T300">
|
|
{t('Auth.register_unsupported')}
|
|
</Text>
|
|
) : (
|
|
<PasswordRegisterForm
|
|
authData={registerFlows.data}
|
|
uiaFlows={supportedFlows}
|
|
defaultUsername={registerSearchParams.username}
|
|
defaultEmail={registerSearchParams.email}
|
|
defaultRegisterToken={registerSearchParams.token}
|
|
/>
|
|
)
|
|
}
|
|
</SupportedUIAFlowsLoader>
|
|
)}
|
|
<Text
|
|
align="Center"
|
|
className={css.AuthBottomLink}
|
|
style={{ color: 'rgba(232, 228, 223, 0.55)' }}
|
|
>
|
|
{t('Auth.already_have_account')}{' '}
|
|
<Link to={getLoginPath(server)} style={{ fontWeight: 600 }}>
|
|
{t('Auth.title_login')}
|
|
</Link>
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|