♻️ Move authentication pages to /auth
This commit is contained in:
Meier Lukas
145
src/pages/auth/invite/[inviteId].tsx
Normal file
145
src/pages/auth/invite/[inviteId].tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import { Button, Card, Flex, PasswordInput, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import { useForm, zodResolver } from '@mantine/form';
|
||||
import { showNotification, updateNotification } from '@mantine/notifications';
|
||||
import { IconCheck, IconX } from '@tabler/icons-react';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
|
||||
import { useRouter } from 'next/router';
|
||||
import { z } from 'zod';
|
||||
import { prisma } from '~/server/db';
|
||||
import { registerNamespaces } from '~/tools/server/translation-namespaces';
|
||||
import { api } from '~/utils/api';
|
||||
import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
|
||||
import { signUpFormSchema } from '~/validations/user';
|
||||
|
||||
export default function AuthInvitePage() {
|
||||
const { t } = useTranslation('authentication/register');
|
||||
const { i18nZodResolver } = useI18nZodResolver();
|
||||
const router = useRouter();
|
||||
const query = router.query as { token: string };
|
||||
const { mutateAsync } = api.user.register.useMutation();
|
||||
|
||||
const form = useForm<z.infer<typeof signUpFormSchema>>({
|
||||
validateInputOnChange: true,
|
||||
validateInputOnBlur: true,
|
||||
validate: i18nZodResolver(signUpFormSchema),
|
||||
});
|
||||
|
||||
const handleSubmit = (values: z.infer<typeof signUpFormSchema>) => {
|
||||
const notificationId = 'register';
|
||||
showNotification({
|
||||
id: notificationId,
|
||||
title: 'Registering...',
|
||||
message: 'Please wait...',
|
||||
loading: true,
|
||||
});
|
||||
void mutateAsync(
|
||||
{
|
||||
...values,
|
||||
registerToken: query.token,
|
||||
},
|
||||
{
|
||||
onSuccess() {
|
||||
updateNotification({
|
||||
id: notificationId,
|
||||
title: 'Account created',
|
||||
message: 'Your account has been created successfully',
|
||||
color: 'teal',
|
||||
icon: <IconCheck />,
|
||||
});
|
||||
router.push('/login');
|
||||
},
|
||||
onError() {
|
||||
updateNotification({
|
||||
id: notificationId,
|
||||
title: 'Error',
|
||||
message: 'Something went wrong',
|
||||
color: 'red',
|
||||
icon: <IconX />,
|
||||
});
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex h="100dvh" display="flex" w="100%" direction="column" align="center" justify="center">
|
||||
<Card withBorder shadow="md" p="xl" radius="md" w="90%" maw={420}>
|
||||
<Title align="center" weight={900}>
|
||||
{t('title')}
|
||||
</Title>
|
||||
|
||||
<Text color="dimmed" size="sm" align="center" mt={5} mb="md">
|
||||
{t('text')}
|
||||
</Text>
|
||||
|
||||
<form onSubmit={form.onSubmit(handleSubmit)}>
|
||||
<Stack>
|
||||
<TextInput
|
||||
variant="filled"
|
||||
label={t('form.fields.username.label')}
|
||||
withAsterisk
|
||||
{...form.getInputProps('username')}
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
variant="filled"
|
||||
label={t('form.fields.password.label')}
|
||||
withAsterisk
|
||||
{...form.getInputProps('password')}
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
variant="filled"
|
||||
label={t('form.fields.passwordConfirmation.label')}
|
||||
withAsterisk
|
||||
{...form.getInputProps('passwordConfirmation')}
|
||||
/>
|
||||
|
||||
<Button fullWidth type="submit">
|
||||
{t('form.buttons.submit')}
|
||||
</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
const queryParamsSchema = z.object({
|
||||
token: z.string(),
|
||||
});
|
||||
const routeParamsSchema = z.object({
|
||||
inviteId: z.string(),
|
||||
});
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async ({ locale, query, params }) => {
|
||||
const queryParams = queryParamsSchema.safeParse(query);
|
||||
const routeParams = routeParamsSchema.safeParse(params);
|
||||
console.log(queryParams, routeParams);
|
||||
if (!queryParams.success || !routeParams.success) {
|
||||
return {
|
||||
notFound: true,
|
||||
};
|
||||
}
|
||||
|
||||
const token = await prisma.registrationToken.findUnique({
|
||||
where: {
|
||||
id: routeParams.data.inviteId,
|
||||
token: queryParams.data.token,
|
||||
},
|
||||
});
|
||||
|
||||
if (!token || token.expires < new Date()) {
|
||||
return {
|
||||
notFound: true,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(locale ?? '', registerNamespaces)),
|
||||
},
|
||||
};
|
||||
};
|
||||
95
src/pages/auth/login.tsx
Normal file
95
src/pages/auth/login.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Card,
|
||||
Flex,
|
||||
PasswordInput,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
} from '@mantine/core';
|
||||
import { useForm, zodResolver } from '@mantine/form';
|
||||
import { showNotification, updateNotification } from '@mantine/notifications';
|
||||
import { IconAlertCircle, IconAlertTriangle, IconCheck, IconX } from '@tabler/icons-react';
|
||||
import axios from 'axios';
|
||||
import { setCookie } from 'cookies-next';
|
||||
import { signIn } from 'next-auth/react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
|
||||
import { useRouter } from 'next/router';
|
||||
import { z } from 'zod';
|
||||
import { signInSchema } from '~/validations/user';
|
||||
|
||||
import { loginNamespaces } from '../../tools/server/translation-namespaces';
|
||||
|
||||
export default function LoginPage() {
|
||||
const { t } = useTranslation(['authentication/login']);
|
||||
const queryParams = useRouter().query as { error?: 'CredentialsSignin' | (string & {}) };
|
||||
|
||||
const form = useForm<z.infer<typeof signInSchema>>({
|
||||
validateInputOnChange: true,
|
||||
validateInputOnBlur: true,
|
||||
validate: zodResolver(signInSchema),
|
||||
});
|
||||
|
||||
const handleSubmit = (values: z.infer<typeof signInSchema>) => {
|
||||
signIn('credentials', {
|
||||
redirect: true,
|
||||
name: values.name,
|
||||
password: values.password,
|
||||
callbackUrl: '/',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex h="100dvh" display="flex" w="100%" direction="column" align="center" justify="center">
|
||||
<Card withBorder shadow="md" p="xl" radius="md" w="90%" maw={420}>
|
||||
<Title align="center" weight={900}>
|
||||
{t('title')}
|
||||
</Title>
|
||||
|
||||
<Text color="dimmed" size="sm" align="center" mt={5} mb="md">
|
||||
{t('text')}
|
||||
</Text>
|
||||
|
||||
<form onSubmit={form.onSubmit(handleSubmit)}>
|
||||
<Stack>
|
||||
<TextInput
|
||||
variant="filled"
|
||||
label={t('form.fields.username.label')}
|
||||
withAsterisk
|
||||
{...form.getInputProps('name')}
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
variant="filled"
|
||||
label={t('form.fields.password.label')}
|
||||
withAsterisk
|
||||
{...form.getInputProps('password')}
|
||||
/>
|
||||
|
||||
<Button fullWidth type="submit">
|
||||
{t('form.buttons.submit')}
|
||||
</Button>
|
||||
|
||||
{queryParams.error === 'CredentialsSignin' && (
|
||||
<Alert icon={<IconAlertTriangle size="1rem" />} color="red">
|
||||
{t('alert')}
|
||||
</Alert>
|
||||
)}
|
||||
</Stack>
|
||||
</form>
|
||||
</Card>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export async function getServerSideProps({ locale }: { locale: string }) {
|
||||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(locale, loginNamespaces)),
|
||||
// Will be passed to the page component as props
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user