import { Alert, Button, Card, Flex, PasswordInput, Stack, Text, TextInput, Title, } from '@mantine/core'; import { useForm } from '@mantine/form'; import { IconAlertTriangle } from '@tabler/icons-react'; import { useMutation } from '@tanstack/react-query'; import { GetServerSideProps } from 'next'; import { signIn } from 'next-auth/react'; import { useTranslation } from 'next-i18next'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { z } from 'zod'; import { getServerAuthSession } from '~/server/auth'; import { useI18nZodResolver } from '~/utils/i18n-zod-resolver'; 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 { i18nZodResolver } = useI18nZodResolver(); const form = useForm>({ validateInputOnChange: true, validateInputOnBlur: true, validate: i18nZodResolver(signInSchema), }); const handleSubmit = (values: z.infer) => { signIn('credentials', { redirect: false, name: values.name, password: values.password, callbackUrl: '/', }); }; return ( Login • Homarr {t('title')} {t('text')}
{queryParams.error === 'CredentialsSignin' && ( } color="red"> {t('alert')} )}
); } export const getServerSideProps: GetServerSideProps = async ({ locale, req, res }) => { const session = await getServerAuthSession({ req, res }); if (session) { return { redirect: { destination: '/', permanent: false, }, }; } return { props: { ...(await serverSideTranslations(locale ?? 'en', loginNamespaces)), // Will be passed to the page component as props }, }; };