dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tweak auth pages for smaller screens (#467)

Browse source
This commit is contained in:
Jeremy 2024-10-30 20:49:46 +05:30 • committed by GitHub
parent 029cbb835e
commit 29f095bcc9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 42 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

38
app/(auth)/login/page.tsx
View file

@ -1,44 +1,44 @@
"use client";
'use client';
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useActionState, useEffect, useState } from "react";
import { toast } from "sonner";
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useActionState, useEffect, useState } from 'react';
import { toast } from 'sonner';
import { AuthForm } from "@/components/custom/auth-form";
import { SubmitButton } from "@/components/custom/submit-button";
import { AuthForm } from '@/components/custom/auth-form';
import { SubmitButton } from '@/components/custom/submit-button';
import { login, LoginActionState } from "../actions";
import { login, LoginActionState } from '../actions';
export default function Page() {
const router = useRouter();
const [email, setEmail] = useState("");
const [email, setEmail] = useState('');
const [state, formAction] = useActionState<LoginActionState, FormData>(
login,
{
status: "idle",
},
status: 'idle',
}
);
useEffect(() => {
if (state.status === "failed") {
toast.error("Invalid credentials!");
} else if (state.status === "invalid_data") {
toast.error("Failed validating your submission!");
} else if (state.status === "success") {
if (state.status === 'failed') {
toast.error('Invalid credentials!');
} else if (state.status === 'invalid_data') {
toast.error('Failed validating your submission!');
} else if (state.status === 'success') {
router.refresh();
}
}, [state.status, router]);
const handleSubmit = (formData: FormData) => {
setEmail(formData.get("email") as string);
setEmail(formData.get('email') as string);
formAction(formData);
};
return (
<div className="flex h-screen w-screen items-center justify-center bg-background">
<div className="flex h-dvh w-screen items-start pt-12 md:pt-0 md:items-center justify-center bg-background">
<div className="w-full max-w-md overflow-hidden rounded-2xl flex flex-col gap-12">
<div className="flex flex-col items-center justify-center gap-2 px-4 text-center sm:px-16">
<h3 className="text-xl font-semibold dark:text-zinc-50">Sign In</h3>
@ -56,7 +56,7 @@ export default function Page() {
>
Sign up
</Link>
{" for free."}
{' for free.'}
</p>
</AuthForm>
</div>