Created
August 23, 2024 09:11
-
-
Save gasatrya/13480907b641cfdbb3b1d32cc7386b68 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // src/LoginForm.js | |
| import React from "react"; | |
| import { Form, Input, Button, Checkbox, Typography } from "antd"; | |
| const { Title } = Typography; | |
| const LoginForm = () => { | |
| const onFinish = (values) => { | |
| console.log("Success:", values); | |
| // Handle login logic with the values | |
| }; | |
| const onFinishFailed = (errorInfo) => { | |
| console.log("Failed:", errorInfo); | |
| }; | |
| return ( | |
| <div style={{ maxWidth: "300px", margin: "50px auto" }}> | |
| <Title level={2}>Login</Title> | |
| <Form | |
| name="login" | |
| labelCol={{ span: 8 }} | |
| wrapperCol={{ span: 16 }} | |
| initialValues={{ remember: true }} | |
| onFinish={onFinish} | |
| onFinishFailed={onFinishFailed} | |
| > | |
| <Form.Item | |
| label="Email" | |
| name="email" | |
| rules={[ | |
| { | |
| required: true, | |
| message: "Please input your email!", | |
| }, | |
| { | |
| type: "email", | |
| message: "Please enter a valid email!", | |
| }, | |
| ]} | |
| > | |
| <Input /> | |
| </Form.Item> | |
| <Form.Item | |
| label="Password" | |
| name="password" | |
| rules={[ | |
| { | |
| required: true, | |
| message: "Please input your password!", | |
| }, | |
| ]} | |
| > | |
| <Input.Password /> | |
| </Form.Item> | |
| <Form.Item wrapperCol={{ offset: 8, span: 16 }}> | |
| <Form.Item name="remember" valuePropName="checked" noStyle> | |
| <Checkbox>Remember me</Checkbox> | |
| </Form.Item> | |
| <Button type="primary" htmlType="submit"> | |
| Log in | |
| </Button> | |
| </Form.Item> | |
| </Form> | |
| </div> | |
| ); | |
| }; | |
| export default LoginForm; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment