feat: implement login
This commit is contained in:
caturbgs
@@ -1,7 +1,7 @@
|
||||
import React, {useState} from "react";
|
||||
import {Button, Drawer, Layout, Menu, Popover, Typography,} from "antd";
|
||||
import {MenuList} from "./MenuList";
|
||||
import {Link} from "react-router-dom";
|
||||
import {Link, useHistory} from "react-router-dom";
|
||||
import {CalendarOutlined, HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons";
|
||||
import {AppRoute} from "../../routes/app";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
@@ -12,6 +12,7 @@ const {Text, Paragraph} = Typography;
|
||||
const {Header, Content, Sider} = Layout;
|
||||
|
||||
export const DesktopLayout = observer(() => {
|
||||
let history = useHistory();
|
||||
const xl = useMediaQuery({minWidth: 1024});
|
||||
const store = useStore();
|
||||
const [clicked, setClicked] = useState(false);
|
||||
@@ -268,8 +269,8 @@ export const DesktopLayout = observer(() => {
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
onClick={() => {
|
||||
// store.authentication.logout();
|
||||
// return history.push("/login");
|
||||
store.authentication.logout();
|
||||
history.push("/login");
|
||||
}}
|
||||
>
|
||||
<span>Sign out</span>
|
||||
@@ -278,10 +279,10 @@ export const DesktopLayout = observer(() => {
|
||||
}
|
||||
title={
|
||||
<Text>
|
||||
{/*{store.user.data.email}{" "}*/}
|
||||
{/*<Paragraph style={{fontWeight: 400}} type={"secondary-dark"}>*/}
|
||||
{/* {store.authentication.userData.full_name}*/}
|
||||
{/*</Paragraph>*/}
|
||||
{store.user.data.email}{" "}
|
||||
<Paragraph style={{fontWeight: 400}} type={"secondary-dark"}>
|
||||
{store.authentication.userData.email}
|
||||
</Paragraph>
|
||||
</Text>
|
||||
}
|
||||
trigger="click"
|
||||
@@ -359,8 +360,8 @@ export const DesktopLayout = observer(() => {
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
onClick={() => {
|
||||
// store.authentication.logout();
|
||||
// return history.push("/login");
|
||||
store.authentication.logout();
|
||||
history.push("/login");
|
||||
}}
|
||||
>
|
||||
<span>Sign out</span>
|
||||
|
||||
@@ -1,51 +1,52 @@
|
||||
import React, {useState} from "react";
|
||||
import React from "react";
|
||||
import {observer} from 'mobx-react-lite';
|
||||
import {useStore} from "../../utils/useStore";
|
||||
import {Button, Card, Checkbox, Col, Form, Input, Row, Typography} from 'antd';
|
||||
import {LockOutlined, UserOutlined} from '@ant-design/icons';
|
||||
import {Button, Card, Col, Form, Input, message, Row, Typography} from 'antd';
|
||||
import {useHistory} from "react-router-dom";
|
||||
|
||||
export const Login = observer(() => {
|
||||
const store = useStore();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
let history = useHistory();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const onFinish = values => {
|
||||
console.log('Received values of form: ', values);
|
||||
enterLoading(values).then(res => {
|
||||
console.log(res, "awasaa");
|
||||
}).catch((error) => {
|
||||
console.log({error}, "awasaa error");
|
||||
});
|
||||
};
|
||||
const handleLogin = async (params) => {
|
||||
try {
|
||||
await store.authentication.login({
|
||||
username: params.username,
|
||||
password: params.password,
|
||||
});
|
||||
history.push('/app/home');
|
||||
} catch (e) {
|
||||
if (e.response?.body?.message) {
|
||||
message.error(e.response.body.message);
|
||||
return;
|
||||
}
|
||||
message.error(e.message);
|
||||
}
|
||||
}
|
||||
|
||||
const enterLoading = async (props) => {
|
||||
// store.setInitialToken("ayayay", "clap");
|
||||
return history.push("/app/page_example_1");
|
||||
};
|
||||
|
||||
return <div style={{width: '100vw', display: 'flex', justifyContent: 'center'}}>
|
||||
<Row justify={'center'}>
|
||||
<Col>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
marginTop: '5vh',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'stretch'}}>
|
||||
<Typography.Paragraph
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontSize: 20,
|
||||
marginLeft: 5,
|
||||
fontWeight: 600,
|
||||
color: "#413d3e",
|
||||
}}
|
||||
>
|
||||
return (
|
||||
<div style={{width: '100vw', display: 'flex', justifyContent: 'center'}}>
|
||||
<Row justify={'center'}>
|
||||
<Col>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
marginTop: '5vh',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'stretch'}}>
|
||||
<Typography.Paragraph
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontSize: 20,
|
||||
marginLeft: 5,
|
||||
fontWeight: 600,
|
||||
color: "#413d3e",
|
||||
}}
|
||||
>
|
||||
Boilerplate
|
||||
</Typography.Paragraph>
|
||||
</div>
|
||||
@@ -57,83 +58,28 @@ export const Login = observer(() => {
|
||||
title={'Sign in to your account'}
|
||||
>
|
||||
<Form
|
||||
layout={'vertical'}
|
||||
name="normal_login"
|
||||
className="login-form"
|
||||
onFinish={onFinish}
|
||||
layout={"vertical"}
|
||||
form={form}
|
||||
onFinish={handleLogin}
|
||||
className={"w-9/12"}
|
||||
>
|
||||
<Form.Item
|
||||
label="Email"
|
||||
name="email"
|
||||
size={'large'}
|
||||
rules={[{required: false, message: 'Please input your Username!'}]}
|
||||
>
|
||||
<Input
|
||||
prefix={<UserOutlined className="site-form-item-icon"/>}
|
||||
type="text"
|
||||
placeholder="Email"/>
|
||||
<Form.Item label="Username" name="username"
|
||||
rules={[{required: true, message: 'Please input your username!'}]}>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
style={{
|
||||
marginBottom: 0,
|
||||
}}
|
||||
label="Password"
|
||||
name="password"
|
||||
size={'large'}
|
||||
rules={[{required: false, message: 'Please input your Password!'}]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined className="site-form-item-icon"/>}
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
style={{
|
||||
marginTop: 0,
|
||||
marginBottom: 20,
|
||||
padding: 0
|
||||
}}
|
||||
// label="Password"
|
||||
name="forgot-password"
|
||||
size={'small'}
|
||||
rules={[{required: false, message: 'Please input your Password!'}]}
|
||||
>
|
||||
<a className="login-form-forgot" href="">
|
||||
Forgot password
|
||||
</a>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
style={{
|
||||
marginBottom: 5,
|
||||
textAlign: 'left'
|
||||
}}>
|
||||
<Form.Item name="remember" valuePropName="checked" noStyle>
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
style={{
|
||||
marginBottom: 0,
|
||||
}}>
|
||||
<Button type="primary"
|
||||
block
|
||||
loading={loading}
|
||||
htmlType="submit"
|
||||
size={'large'}
|
||||
onSubmit={enterLoading}
|
||||
className="login-form-button">
|
||||
Sign In
|
||||
</Button>
|
||||
<Form.Item label="Password" name="password"
|
||||
rules={[{required: true, message: 'Please input your password!'}]}>
|
||||
<Input.Password/>
|
||||
</Form.Item>
|
||||
<div className={"flex flex-row justify-between content-center"}>
|
||||
<Button type="primary" htmlType="submit"
|
||||
loading={store.authentication.isLoginLoading}>Submit</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</div>;
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user