🐛 Add error message for invalid login

This commit is contained in:
Meier Lukas
2023-08-09 21:25:29 +02:00
parent f1fb7a5a78
commit d24d84c834

View File

@@ -25,10 +25,10 @@ import { signInSchema } from '~/validations/user';
export default function LoginPage() { export default function LoginPage() {
const { t } = useTranslation('authentication/login'); const { t } = useTranslation('authentication/login');
const queryParams = useRouter().query as { error?: 'CredentialsSignin' | (string & {}) };
const { i18nZodResolver } = useI18nZodResolver(); const { i18nZodResolver } = useI18nZodResolver();
const router = useRouter(); const router = useRouter();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
const form = useForm<z.infer<typeof signInSchema>>({ const form = useForm<z.infer<typeof signInSchema>>({
validateInputOnChange: true, validateInputOnChange: true,
@@ -38,6 +38,7 @@ export default function LoginPage() {
const handleSubmit = (values: z.infer<typeof signInSchema>) => { const handleSubmit = (values: z.infer<typeof signInSchema>) => {
setIsLoading(true); setIsLoading(true);
setIsError(false);
signIn('credentials', { signIn('credentials', {
redirect: false, redirect: false,
name: values.name, name: values.name,
@@ -46,6 +47,7 @@ export default function LoginPage() {
}).then((response) => { }).then((response) => {
if (!response?.ok) { if (!response?.ok) {
setIsLoading(false); setIsLoading(false);
setIsError(true);
return; return;
} }
router.push('/manage'); router.push('/manage');
@@ -70,6 +72,12 @@ export default function LoginPage() {
{t('text')} {t('text')}
</Text> </Text>
{isError && (
<Alert icon={<IconAlertTriangle size="1rem" />} color="red">
{t('alert')}
</Alert>
)}
<form onSubmit={form.onSubmit(handleSubmit)}> <form onSubmit={form.onSubmit(handleSubmit)}>
<Stack> <Stack>
<TextInput <TextInput
@@ -89,12 +97,6 @@ export default function LoginPage() {
<Button fullWidth type="submit" loading={isLoading}> <Button fullWidth type="submit" loading={isLoading}>
{t('form.buttons.submit')} {t('form.buttons.submit')}
</Button> </Button>
{queryParams.error === 'CredentialsSignin' && (
<Alert icon={<IconAlertTriangle size="1rem" />} color="red">
{t('alert')}
</Alert>
)}
</Stack> </Stack>
</form> </form>
</Card> </Card>