450 lines
13 KiB
JavaScript
450 lines
13 KiB
JavaScript
import { useCallback, useMemo, useState, useEffect } from 'react';
|
|
import Head from 'next/head';
|
|
import { subDays, subHours } from 'date-fns';
|
|
import ArrowDownOnSquareIcon from '@heroicons/react/24/solid/ArrowDownOnSquareIcon';
|
|
import ArrowUpOnSquareIcon from '@heroicons/react/24/solid/ArrowUpOnSquareIcon';
|
|
import PlusIcon from '@heroicons/react/24/solid/PlusIcon';
|
|
import { Box, Button, CircularProgress, Container, Dialog, DialogContent, DialogTitle, Stack, SvgIcon, Typography,
|
|
DialogActions,
|
|
TextField,
|
|
Backdrop,
|
|
} from '@mui/material';
|
|
import { useSelection } from 'src/hooks/use-selection';
|
|
import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout';
|
|
import { CustomersTable } from 'src/sections/customer/customers-table';
|
|
import { CustomersSearch } from 'src/sections/customer/customers-search';
|
|
import { applyPagination } from 'src/utils/apply-pagination';
|
|
import { useAuth } from 'src/hooks/use-auth';
|
|
import { useRouter } from 'next/router';
|
|
import { is } from 'date-fns/locale';
|
|
import { set } from 'nprogress';
|
|
|
|
const Page = () => {
|
|
|
|
const auth = useAuth();
|
|
const router = useRouter();
|
|
|
|
const validateEmail = (email) => {
|
|
return email.match(
|
|
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
|
);
|
|
};
|
|
|
|
//const [page, setPage] = useState(0);
|
|
//const [rowsPerPage, setRowsPerPage] = useState(5);
|
|
const [loading, setLoading] = useState(true);
|
|
const [creatingNewUser, setCreatingNewUser] = useState(false);
|
|
const [users, setUsers] = useState([]);
|
|
const [selected, setSelected] = useState([]);
|
|
const [addDeviceDialogOpen, setAddDeviceDialogOpen] = useState(false);
|
|
const [newUserData, setNewUserData] = useState({});
|
|
const [isPasswordEmpty, setIsPasswordEmpty] = useState(false);
|
|
const [isEmailEmpty, setIsEmailEmpty] = useState(false);
|
|
const [isEmailExistent, setIsEmailExistent] = useState(false);
|
|
|
|
const deleteUser = (id) => {
|
|
console.log("request to delete user: ", id)
|
|
|
|
var myHeaders = new Headers();
|
|
myHeaders.append("Content-Type", "application/json");
|
|
myHeaders.append("Authorization", auth.user.token);
|
|
|
|
var requestOptions = {
|
|
method: 'DELETE',
|
|
headers: myHeaders,
|
|
redirect: 'follow'
|
|
}
|
|
|
|
return fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/auth/delete/${id}`, requestOptions)
|
|
.then(response => {
|
|
if (response.status === 401) {
|
|
router.push("/auth/login")
|
|
} else if (response.status === 403) {
|
|
return router.push("/403")
|
|
}
|
|
setUsers(users.filter(user => user.email !== id))
|
|
})
|
|
.catch(error => {
|
|
return console.error('Error:', error)
|
|
});
|
|
}
|
|
|
|
|
|
const fetchUsers = async () => {
|
|
console.log("fetching users data...")
|
|
var myHeaders = new Headers();
|
|
myHeaders.append("Content-Type", "application/json");
|
|
myHeaders.append("Authorization", auth.user.token);
|
|
|
|
var requestOptions = {
|
|
method: 'GET',
|
|
headers: myHeaders,
|
|
redirect: 'follow'
|
|
}
|
|
|
|
return fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/api/users`, requestOptions)
|
|
.then(response => {
|
|
if (response.status === 401) {
|
|
router.push("/auth/login")
|
|
} else if (response.status === 403) {
|
|
return router.push("/403")
|
|
}
|
|
return response.json()
|
|
})
|
|
.then(json => {
|
|
console.log("users: ", json)
|
|
setUsers(json)
|
|
// setPages(json.pages + 1)
|
|
// setPage(json.page +1)
|
|
// setDevices(json.devices)
|
|
setLoading(false)
|
|
})
|
|
.catch(error => {
|
|
return console.error('Error:', error)
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
// if (auth.user.token) {
|
|
// console.log("auth.user.token =", auth.user.token)
|
|
// }else{
|
|
// auth.user.token = localStorage.getItem("token")
|
|
// }
|
|
//console.log("auth.user.token =", auth.user.token)
|
|
fetchUsers()
|
|
}, []);
|
|
|
|
// const handlePageChange = useCallback(
|
|
// (event, value) => {
|
|
// setPage(value);
|
|
// },
|
|
// []
|
|
// );
|
|
|
|
// const handleRowsPerPageChange = useCallback(
|
|
// (event) => {
|
|
// setRowsPerPage(event.target.value);
|
|
// },
|
|
// []
|
|
// );
|
|
|
|
const createUser = async (data) => {
|
|
var myHeaders = new Headers();
|
|
myHeaders.append("Content-Type", "application/json");
|
|
myHeaders.append("Authorization", auth.user.token);
|
|
|
|
var raw = JSON.stringify(data);
|
|
|
|
var requestOptions = {
|
|
method: 'POST',
|
|
headers: myHeaders,
|
|
body: raw,
|
|
redirect: 'follow'
|
|
};
|
|
|
|
let result = await fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/api/auth/register`, requestOptions)
|
|
|
|
if (result.status == 200) {
|
|
console.log("user created: deu boa raça !!")
|
|
}else if (result.status == 403) {
|
|
console.log("num tenx permissão, seu boca de sandália")
|
|
setCreatingNewUser(false)
|
|
return router.push("/403")
|
|
}else if (result.status == 401){
|
|
console.log("taix nem autenticado, sai fora oh")
|
|
setCreatingNewUser(false)
|
|
return router.push("/auth/login")
|
|
}else if (result.status == 409){
|
|
console.log("usuário já existe, seu boca de bagre")
|
|
setIsEmailExistent(true)
|
|
setCreatingNewUser(false)
|
|
return
|
|
}else if (result.status == 400){
|
|
console.log("faltou mandar dados jow")
|
|
setAddDeviceDialogOpen(false)
|
|
setNewUserData({})
|
|
setIsPasswordEmpty(false)
|
|
setIsEmailEmpty(false)
|
|
setIsEmailExistent(false)
|
|
setCreatingNewUser(false)
|
|
return
|
|
}else {
|
|
console.log("agora quebrasse ux córno mô quiridu")
|
|
const content = await result.json()
|
|
setCreatingNewUser(false)
|
|
throw new Error(content);
|
|
}
|
|
setAddDeviceDialogOpen(false)
|
|
data["_id"] = data.email
|
|
data["createdAt"] = new Date().toLocaleDateString('es-pa')
|
|
data["level"] = 0
|
|
|
|
setUsers([...users, data])
|
|
setNewUserData({})
|
|
setIsPasswordEmpty(false)
|
|
setIsEmailEmpty(false)
|
|
setIsEmailExistent(false)
|
|
setCreatingNewUser(false)
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>
|
|
Oktopus | Users
|
|
</title>
|
|
</Head>
|
|
<Box
|
|
component="main"
|
|
sx={{
|
|
flexGrow: 1,
|
|
py: 8
|
|
}}
|
|
>
|
|
<Container maxWidth="xl">
|
|
<Stack spacing={3}>
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
spacing={4}
|
|
>
|
|
<Stack spacing={1}>
|
|
<Typography variant="h4">
|
|
Users
|
|
</Typography>
|
|
<Stack
|
|
alignItems="center"
|
|
direction="row"
|
|
spacing={1}
|
|
>
|
|
{/* <Button
|
|
color="inherit"
|
|
startIcon={(
|
|
<SvgIcon fontSize="small">
|
|
<ArrowUpOnSquareIcon />
|
|
</SvgIcon>
|
|
)}
|
|
>
|
|
Import
|
|
</Button> */}
|
|
{/* <Button
|
|
color="inherit"
|
|
startIcon={(
|
|
<SvgIcon fontSize="small">
|
|
<ArrowDownOnSquareIcon />
|
|
</SvgIcon>
|
|
)}
|
|
>
|
|
Export
|
|
</Button> */}
|
|
</Stack>
|
|
</Stack>
|
|
<div>
|
|
<Button
|
|
startIcon={(
|
|
<SvgIcon fontSize="small">
|
|
<PlusIcon />
|
|
</SvgIcon>
|
|
)}
|
|
variant="contained"
|
|
onClick={() => {
|
|
setAddDeviceDialogOpen(true)
|
|
}}
|
|
>
|
|
Add
|
|
</Button>
|
|
</div>
|
|
</Stack>
|
|
{/* <CustomersSearch /> */}
|
|
{users && !loading ?
|
|
<CustomersTable
|
|
count={users.length}
|
|
items={users}
|
|
//onDeselectAll={customersSelection.handleDeselectAll}
|
|
onDeselectOne={(id) => {
|
|
setSelected(selected.filter((item) => item !== id))
|
|
}}
|
|
//onPageChange={handlePageChange}
|
|
//onRowsPerPageChange={handleRowsPerPageChange}
|
|
//onSelectAll={customersSelection.handleSelectAll}
|
|
onSelectOne={(id) => {
|
|
setSelected([...selected, id])
|
|
console.log("added user " + id + " to selected array")
|
|
}}
|
|
//page={page}
|
|
//rowsPerPage={rowsPerPage}
|
|
deleteUser={deleteUser}
|
|
selected={selected}
|
|
/> :
|
|
<CircularProgress></CircularProgress>
|
|
}
|
|
</Stack>
|
|
</Container>
|
|
</Box>
|
|
<Dialog
|
|
open={addDeviceDialogOpen}
|
|
onClose={() => {
|
|
setAddDeviceDialogOpen(false)
|
|
setIsEmailEmpty(false)
|
|
setIsEmailExistent(false)
|
|
setIsPasswordEmpty(false)
|
|
setNewUserData({})
|
|
}}
|
|
>
|
|
<DialogTitle>Create User</DialogTitle>
|
|
<DialogContent>
|
|
<Stack
|
|
alignItems="center"
|
|
direction="row"
|
|
spacing={2}
|
|
>
|
|
<TextField
|
|
inputProps={{
|
|
form: {
|
|
autocomplete: 'new-password',
|
|
},
|
|
}}
|
|
// focused={isEmailEmpty}
|
|
// color={isEmailEmpty ? "error" : "primary"}
|
|
helperText={isEmailEmpty ? "Email error" : (isEmailExistent ? "Email already exists" : "")}
|
|
autoFocus
|
|
required
|
|
margin="dense"
|
|
id="email"
|
|
name="email"
|
|
label="Email Address"
|
|
type="email"
|
|
fullWidth
|
|
onChange={
|
|
(event) => {
|
|
setNewUserData({...newUserData, email: event.target.value})
|
|
}
|
|
}
|
|
variant="standard">
|
|
</TextField>
|
|
<TextField
|
|
// focused={isPasswordEmpty}
|
|
//color={isPasswordEmpty ? "error" : "primary"}
|
|
helperText={isPasswordEmpty ? "Password cannot be empty" : ""}
|
|
autoFocus
|
|
required
|
|
margin="dense"
|
|
id="password"
|
|
name="password"
|
|
label="Password"
|
|
type="password"
|
|
autoComplete='new-password'
|
|
fullWidth
|
|
onChange={
|
|
(event) => {
|
|
setNewUserData({...newUserData, password: event.target.value})
|
|
}
|
|
}
|
|
variant="standard">
|
|
</TextField>
|
|
</Stack>
|
|
<Stack
|
|
alignItems="center"
|
|
direction="row"
|
|
spacing={2}
|
|
>
|
|
<TextField
|
|
inputProps={{
|
|
form: {
|
|
autocomplete: 'off',
|
|
},
|
|
}}
|
|
autoFocus
|
|
margin="dense"
|
|
id="name"
|
|
name="name"
|
|
label="Full Name"
|
|
type="name"
|
|
fullWidth
|
|
variant="standard"
|
|
onChange={
|
|
(event) => {
|
|
setNewUserData({...newUserData, name: event.target.value})
|
|
}
|
|
}
|
|
>
|
|
</TextField>
|
|
<TextField
|
|
inputProps={{
|
|
form: {
|
|
autocomplete: 'off',
|
|
},
|
|
}}
|
|
autoComplete="off"
|
|
autoFocus
|
|
margin="dense"
|
|
id="phone"
|
|
name="phone"
|
|
label="Phone Number"
|
|
type="phone"
|
|
fullWidth
|
|
variant="standard"
|
|
onChange={
|
|
(event) => {
|
|
setNewUserData({...newUserData, phone: event.target.value})
|
|
}
|
|
}
|
|
>
|
|
</TextField>
|
|
</Stack>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={
|
|
() => {
|
|
setAddDeviceDialogOpen(false)
|
|
setIsEmailEmpty(false)
|
|
setIsEmailExistent(false)
|
|
setIsPasswordEmpty(false)
|
|
setNewUserData({})
|
|
}
|
|
}>Cancel</Button>
|
|
<Button onClick={()=>{
|
|
console.log("new user data: ", newUserData)
|
|
if (newUserData.password === undefined || newUserData.password === "") {
|
|
setIsPasswordEmpty(true)
|
|
return
|
|
} else{
|
|
setIsPasswordEmpty(false)
|
|
}
|
|
if (newUserData.email === undefined || newUserData.email === "") {
|
|
setIsEmailEmpty(true)
|
|
return
|
|
} else if(!validateEmail(newUserData.email)){
|
|
setIsEmailEmpty(true)
|
|
return
|
|
}else{
|
|
setIsEmailEmpty(false)
|
|
}
|
|
setIsEmailExistent(false)
|
|
setCreatingNewUser(true)
|
|
createUser(newUserData)
|
|
}}>Confirm</Button>
|
|
</DialogActions>
|
|
{
|
|
<Backdrop
|
|
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
|
open={creatingNewUser}
|
|
>
|
|
<CircularProgress color="inherit" />
|
|
</Backdrop>
|
|
}
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
Page.getLayout = (page) => (
|
|
<DashboardLayout>
|
|
{page}
|
|
</DashboardLayout>
|
|
);
|
|
|
|
export default Page;
|