From 42eb0cf84a68eb8b720837242ed6e359cefb6613 Mon Sep 17 00:00:00 2001
From: "michael.wiryadinata" <michael.wiryadinata@ui.ac.id>
Date: Thu, 12 Mar 2020 10:14:03 +0700
Subject: [PATCH] [REFACTOR] Add logout
---
src/component/Sidebar.jsx | 13 +++++++++++--
src/page/Login.jsx | 8 ++++----
2 files changed, 15 insertions(+), 6 deletions(-)
diff --git a/src/component/Sidebar.jsx b/src/component/Sidebar.jsx
index 7d46c08..df4fb61 100644
--- a/src/component/Sidebar.jsx
+++ b/src/component/Sidebar.jsx
@@ -6,8 +6,17 @@ import LinkSidebar from "./LinkSidebar";
import { useAuthContext } from "../utils/contex";
import styled from "@emotion/styled";
+const logout = (token) => {
+ fetch(`${process.env.REACT_APP_BASE_URL}/auth/logout/`, {
+ method: 'POST',
+ headers: {
+ Authorization: `Token ${token}`
+ }
+ })
+};
+
const Sidebar = () => {
- const { handleLogout } = useAuthContext();
+ const { handleLogout, profile } = useAuthContext();
return (
<Center
css={css`
@@ -52,7 +61,7 @@ const Sidebar = () => {
height: 2.5rem;
`}
>
- <StyledA data-testid="logout" onClick={() => handleLogout()}>
+ <StyledA data-testid="logout" onClick={() => {logout(profile.token.repeat(1)); handleLogout();}}>
LOGOUT
</StyledA>
</Center>
diff --git a/src/page/Login.jsx b/src/page/Login.jsx
index 15cf963..12634e3 100644
--- a/src/page/Login.jsx
+++ b/src/page/Login.jsx
@@ -4,7 +4,7 @@ import { useAuthContext } from "../utils/contex";
import { css } from "@emotion/core";
import Logo from "../component/Logo";
import styled from "@emotion/styled";
-import { Center } from "../component/html/html";
+import {Center, ErrorDiv} from "../component/html/html";
const Login = () => {
const { register, handleSubmit, errors } = useForm();
@@ -84,7 +84,7 @@ const Login = () => {
/>
{/* errors will return when field validation fails */}
{errors.username && (
- <span data-testid="name-required">Username field is required</span>
+ <span css={css`color: darkred`} data-testid="name-required">Username field is required</span>
)}
<FieldLogin
css={css`
@@ -97,11 +97,11 @@ const Login = () => {
ref={register({ required: true })}
/>
{errors.password && (
- <span data-testid="password-required">
+ <span css={css`color: darkred`} data-testid="password-required">
Password field is required
</span>
)}
- {errorState && <div>Password salah !</div>}
+ {errorState && <ErrorDiv>Password salah !</ErrorDiv>}
<LoginButton
css={css`
margin-top: 2rem;
--
GitLab