feat: implement login
This commit is contained in:
caturbgs
parent
b20835257e
commit
62dfdbe40a
|
|
@ -1,5 +1,5 @@
|
|||
export const appConfig = {
|
||||
apiUrl: 'http://localhost:3222/v1'
|
||||
apiUrl: 'https://ppob-backend.k3s.bangun-kreatif.com/v1'
|
||||
};
|
||||
|
||||
//export default appConfig;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,15 +2,16 @@ import {Redirect, Route, Switch} from "react-router-dom";
|
|||
import {Login} from "../pages/Login/Login";
|
||||
import {PublicRoute} from "../component/PublicRoute";
|
||||
import {App} from "../pages/App/App";
|
||||
import {PrivateRoute} from "../component/PrivateRoute";
|
||||
|
||||
export const MainRoutes = (props) => {
|
||||
return (
|
||||
<Switch>
|
||||
<Route path="/" exact>
|
||||
<Redirect to={"/app/home"}/>
|
||||
<Redirect to={"/login"}/>
|
||||
</Route>
|
||||
<PublicRoute restricted={true} component={Login} path="/login" exact/>
|
||||
<PublicRoute component={App} path="/app"/>
|
||||
<PrivateRoute component={App} path="/app"/>
|
||||
</Switch>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,27 +1,63 @@
|
|||
import {makeAutoObservable} from "mobx";
|
||||
import {makeAutoObservable, runInAction} from "mobx";
|
||||
import {TokenUtil} from "../utils/token";
|
||||
import {http} from "../utils/http";
|
||||
|
||||
export class Authentication {
|
||||
isLoggedIn = false;
|
||||
isLoginLoading = false;
|
||||
ctx;
|
||||
|
||||
accessToken = '';
|
||||
|
||||
refreshToken = '';
|
||||
|
||||
constructor(ctx) {
|
||||
this.ctx = ctx;
|
||||
makeAutoObservable(this);
|
||||
}
|
||||
|
||||
get isLoggedIn() {
|
||||
return !!this.refreshToken;
|
||||
return !!this.accessToken;
|
||||
}
|
||||
|
||||
setInitialToken(accessToken, refreshToken) {
|
||||
this.setToken(accessToken, refreshToken);
|
||||
get userData() {
|
||||
const defaultValue = {
|
||||
role: '',
|
||||
user_id: '',
|
||||
username: '',
|
||||
};
|
||||
|
||||
try {
|
||||
return JSON.parse(atob(this.accessToken.split('.')[1]));
|
||||
} catch (err) {
|
||||
return defaultValue;
|
||||
}
|
||||
}
|
||||
|
||||
setToken(accessToken, refreshToken) {
|
||||
this.accessToken = accessToken;
|
||||
this.refreshToken = refreshToken;
|
||||
async login({username, password}) {
|
||||
runInAction(() => {
|
||||
this.isLoginLoading = true;
|
||||
});
|
||||
|
||||
try {
|
||||
const result = await http.post('/auth/login').send({username, password});
|
||||
|
||||
TokenUtil.setAccessToken(result.body.access_token);
|
||||
TokenUtil.persistToken();
|
||||
runInAction(() => {
|
||||
this.isLoginLoading = false;
|
||||
this.isLoggedIn = true;
|
||||
});
|
||||
} catch (e) {
|
||||
runInAction(() => {
|
||||
this.isLoginLoading = false;
|
||||
});
|
||||
console.error(e);
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
logout() {
|
||||
TokenUtil.clearAccessToken();
|
||||
TokenUtil.persistToken();
|
||||
this.isLoggedIn = false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {User} from "./user";
|
|||
import {Membership} from "./membership";
|
||||
import {Product} from "./product";
|
||||
import {Categories} from "./categories";
|
||||
import {TokenUtil} from "../utils/token";
|
||||
|
||||
export class Store {
|
||||
ui = new UI(this);
|
||||
|
|
@ -14,5 +15,9 @@ export class Store {
|
|||
categories = new Categories(this);
|
||||
|
||||
constructor() {
|
||||
TokenUtil.loadToken();
|
||||
if (TokenUtil.accessToken) {
|
||||
this.authentication.isLoggedIn = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export class User {
|
|||
|
||||
@action
|
||||
async getData() {
|
||||
this.data = (await http.get('/product')).body.data;
|
||||
this.data = (await http.get('/user')).body.data;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,15 +4,10 @@ export class TokenUtil {
|
|||
|
||||
static loadToken() {
|
||||
const accessToken = localStorage.getItem('access_token');
|
||||
const refreshToken = localStorage.getItem('refresh_token');
|
||||
|
||||
if (accessToken) {
|
||||
TokenUtil.setAccessToken(accessToken);
|
||||
}
|
||||
|
||||
if (refreshToken) {
|
||||
TokenUtil.setRefreshToken(refreshToken);
|
||||
}
|
||||
}
|
||||
|
||||
static persistToken() {
|
||||
|
|
@ -22,25 +17,13 @@ export class TokenUtil {
|
|||
localStorage.removeItem('access_token');
|
||||
}
|
||||
|
||||
if (TokenUtil.refreshToken != null) {
|
||||
localStorage.setItem('refresh_token', TokenUtil.refreshToken);
|
||||
} else {
|
||||
localStorage.removeItem('refresh_token');
|
||||
}
|
||||
}
|
||||
|
||||
static setAccessToken(accessToken) {
|
||||
TokenUtil.accessToken = accessToken;
|
||||
}
|
||||
|
||||
static setRefreshToken(refreshToken) {
|
||||
TokenUtil.refreshToken = refreshToken;
|
||||
}
|
||||
|
||||
static clearAccessToken() {
|
||||
TokenUtil.accessToken = null;
|
||||
}
|
||||
static clearRefreshToken() {
|
||||
TokenUtil.accessToken = null;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user