File size: 2,143 Bytes
ece5841 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Flex, Modal, Text, Title } from '@mantine/core'
import { useDisclosure } from '@mantine/hooks'
const Logout = () => {
const [isOpen, { open, close }] = useDisclosure(false);
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(false);
const [errorMsg, setErrorMsg] = useState("");
const logoutHandler = async (evt) => {
try {
evt.preventDefault();
console.log('Logging out')
setIsLoading(true);
let logoutUrl = `${import.meta.env.VITE_BACKEND_HOST}/api/auth/logout`
const response = await fetch(logoutUrl, {
method: 'DELETE', credentials: 'include'
});
const resData = await response.json();
setIsLoading(false);
if (response.ok) {
localStorage.removeItem('user');
localStorage.removeItem('loggedIn');
close();
return navigate('/login');
} else {
return setErrorMsg(resData.message || "Something went wrong")
}
} catch (err) {
setIsLoading(false)
console.error(err)
setErrorMsg("Something went wrong");
}
}
return (
<>
<Modal opened={isOpen} onClose={close} title={<Title order={3}>Logout</Title>} centered>
<Text>Are you sure you want to logout?</Text>
<Flex gap={'sm'} my="20px">
<form onSubmit={logoutHandler}>
<Button loading={isLoading} type="submit" color='red' px='xl'>Logout</Button>
</form>
<Button disabled={isLoading} color='gray'>Cancel</Button>
</Flex>
<Text style={{ color: 'red', fontWeight: '800' }}>
{errorMsg}
</Text>
</Modal>
<Button onClick={open} type="submit" color='red' size='md' px='xl'>Logout</Button>
</>
)
}
export default Logout |