import { useState } from 'react'; import Head from 'next/head'; import Router from 'next/router'; import { Layout, Card, Typography, Form, Input, Button, Checkbox, message } from 'antd'; import { GithubFilled } from '@ant-design/icons'; import { useUser } from '../lib/auth/hooks'; const { Title, Paragraph } = Typography; const { Footer } = Layout; const layout = { labelCol: { span: 8, }, wrapperCol: { span: 16, }, }; const tailLayout = { wrapperCol: { offset: 8, span: 16, }, }; export default function Home() { useUser({ redirectTo: '/dashboard', redirectIfFound: true }); const [loading, setLoading] = useState(false); const onFinishFailed = (errorInfo) => { console.error('Failed:', errorInfo); }; const onFinish = async (values) => { const body = { username: values.username, password: values.password, remember: values.remember, }; try { setLoading(true); const res = await fetch('/api/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body), }); const { error } = await res.json(); switch (res.status) { case 200: message.success('Login successful'); Router.push('/dashboard'); break; default: throw new Error(error); } } catch (error) { message.error(error.message); } finally { setLoading(false); } }; return ( <div> <Head> <title>Zero Queue</title> <link rel="icon" href="/favicon.ico" /> </Head> <Layout className="home-body"> <Title className="login-header" level={1} code> ZeroQueue </Title> <Paragraph className="login-sub-header">⏰ A low-code queue management system ⏰</Paragraph> <Card className="login-card"> <Paragraph className="login-card__header">Log into your account</Paragraph> <Form {...layout} name="basic" initialValues={{ remember: true }} onFinish={onFinish} onFinishFailed={onFinishFailed} > <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username!' }]} > <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]} > <Input.Password /> </Form.Item> <Form.Item {...tailLayout} name="remember" valuePropName="checked"> <Checkbox>Remember me</Checkbox> </Form.Item> <Form.Item {...tailLayout}> <Button loading={loading} type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> </Card> <Footer className="dashboard-footer"> <Button type="link" href="https://github.com/thezeroqueue/zeroqueue" target="blank" icon={<GithubFilled />} /> </Footer> </Layout> </div> ); }