From 84d3085c0c265bd82300e006342c384daa9e8695 Mon Sep 17 00:00:00 2001 From: caturbgs Date: Thu, 9 Dec 2021 23:00:56 +0700 Subject: [PATCH] feat: implement login --- src/config/app.js | 2 +- src/pages/App/DesktopLayout.js | 19 ++-- src/pages/Login/Login.js | 172 +++++++++++---------------------- src/routes/index.js | 5 +- src/store/authentication.js | 54 +++++++++-- src/store/index.js | 5 + src/store/user.js | 2 +- src/utils/token.js | 17 ---- 8 files changed, 124 insertions(+), 152 deletions(-) diff --git a/src/config/app.js b/src/config/app.js index 36a03ee..e4b7ca0 100644 --- a/src/config/app.js +++ b/src/config/app.js @@ -1,5 +1,5 @@ export const appConfig = { - apiUrl: 'http://localhost:3222/v1' + apiUrl: 'https://ppob-backend.k3s.bangun-kreatif.com/v1' }; //export default appConfig; diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js index 2a1da7a..abf523d 100644 --- a/src/pages/App/DesktopLayout.js +++ b/src/pages/App/DesktopLayout.js @@ -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(() => { { - // store.authentication.logout(); - // return history.push("/login"); + store.authentication.logout(); + history.push("/login"); }} > Sign out @@ -278,10 +279,10 @@ export const DesktopLayout = observer(() => { } title={ - {/*{store.user.data.email}{" "}*/} - {/**/} - {/* {store.authentication.userData.full_name}*/} - {/**/} + {store.user.data.email}{" "} + + {store.authentication.userData.email} + } trigger="click" @@ -359,8 +360,8 @@ export const DesktopLayout = observer(() => { { - // store.authentication.logout(); - // return history.push("/login"); + store.authentication.logout(); + history.push("/login"); }} > Sign out diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js index 9c5090a..14f1e6f 100644 --- a/src/pages/Login/Login.js +++ b/src/pages/Login/Login.js @@ -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
- - -
-
- + return ( +
+ + +
+
+ Boilerplate
@@ -57,83 +58,28 @@ export const Login = observer(() => { title={'Sign in to your account'} >
- - } - type="text" - placeholder="Email"/> + + - - - } - type="password" - placeholder="Password" - /> - - - - Forgot password - - - - - - Remember me - - - - - + + +
+ +
-
- - - -
; +
+ + +
+ ); }); diff --git a/src/routes/index.js b/src/routes/index.js index dd37c94..e35d030 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -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 ( - + - + ); }; diff --git a/src/store/authentication.js b/src/store/authentication.js index 49a92ae..ef39c7a 100644 --- a/src/store/authentication.js +++ b/src/store/authentication.js @@ -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; } } diff --git a/src/store/index.js b/src/store/index.js index e6250f3..cb89030 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -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; + } } } diff --git a/src/store/user.js b/src/store/user.js index 00722be..741da5b 100644 --- a/src/store/user.js +++ b/src/store/user.js @@ -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; } } diff --git a/src/utils/token.js b/src/utils/token.js index a66e156..8b28c65 100644 --- a/src/utils/token.js +++ b/src/utils/token.js @@ -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; - } }