Compare commits
2 Commits
authentica
...
admin
| Author | SHA1 | Date | |
|---|---|---|---|
|
884c79e18d | ||
|
|
ae1c05c944 |
@@ -10,9 +10,7 @@
|
|||||||
"@testing-library/jest-dom": "^5.16.2",
|
"@testing-library/jest-dom": "^5.16.2",
|
||||||
"@testing-library/react": "^12.1.3",
|
"@testing-library/react": "^12.1.3",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"bootstrap": "^5.1.3",
|
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-bootstrap": "^2.2.0",
|
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-router-dom": "^6.2.2",
|
"react-router-dom": "^6.2.2",
|
||||||
"react-scripts": "^5.0.0",
|
"react-scripts": "^5.0.0",
|
||||||
|
|||||||
@@ -24,12 +24,6 @@
|
|||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
|
|
||||||
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
|
|
||||||
crossorigin="anonymous"
|
|
||||||
/>
|
|
||||||
<title>React App</title>
|
<title>React App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
4
sports-matcher/src/Admin.css
Normal file
4
sports-matcher/src/Admin.css
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
|
||||||
|
.MainTable {
|
||||||
|
padding : 20px;
|
||||||
|
}
|
||||||
249
sports-matcher/src/Admin.js
Normal file
249
sports-matcher/src/Admin.js
Normal file
@@ -0,0 +1,249 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import './Admin.css';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
import Container from '@mui/material/Container';
|
||||||
|
import { TableContainer, TableCell, Table, TableBody, TableRow, TableHead, Paper } from '@mui/material';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
class AdminTable extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
users: [
|
||||||
|
{ id: 1, username: 'username1', name: 'name1', email: 'user1@email.com', phone: '123-456-7890' },
|
||||||
|
{ id: 2, username: 'username2', name: 'name2', email: 'user2@email.com', phone: '123-456-7890' },
|
||||||
|
{ id: 3, username: 'username3', name: 'name3', email: 'user3@email.com', phone: '123-456-7890' },
|
||||||
|
{ id: 4, username: 'username4', name: 'name4', email: 'user4@email.com', phone: '123-456-7890' }
|
||||||
|
],
|
||||||
|
suspendedUsers: [
|
||||||
|
{ id: 1, username: 'suspended1', name: 's1', email: 's1@email.com', phone: '123-456-7890' },
|
||||||
|
{ id: 2, username: 'suspended2', name: 's2', email: 's2@email.com', phone: '123-456-7890' },
|
||||||
|
{ id: 3, username: 'suspended3', name: 's3', email: 's3@email.com', phone: '123-456-7890' },
|
||||||
|
{ id: 4, username: 'suspended4', name: 's4', email: 's4@email.com', phone: '123-456-7890' }
|
||||||
|
],
|
||||||
|
matches: [
|
||||||
|
{ id: 1, sport: "Tennis", date: '08/08/2021', location: 'toronto', description: 'Tennis match' },
|
||||||
|
{ id: 2, sport: "Basketball", date: '09/09/2021', location: 'toronto', description: 'Basketball match' }
|
||||||
|
],
|
||||||
|
buttonColors: ['black', '', '']
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
EditButton() {
|
||||||
|
return <Button onClick={() => {
|
||||||
|
alert('clicked');
|
||||||
|
}} variant="contained">Edit</Button>;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
DeleteButtonClick() {
|
||||||
|
return (
|
||||||
|
<Container component="main" maxWidth="xs">
|
||||||
|
|
||||||
|
<Typography>Are you sure you want to delete this user?</Typography>
|
||||||
|
<Button onClick={() => {
|
||||||
|
alert('User deleted');
|
||||||
|
}} variant="contained">Yes</Button>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
NewDeleteButtonClick() {
|
||||||
|
return (<form onsubmit="console.log('You clicked submit.'); return false">
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>)
|
||||||
|
}
|
||||||
|
|
||||||
|
DeleteButton() {
|
||||||
|
return <Button onClick={() => {
|
||||||
|
alert('User deleted.');
|
||||||
|
}} variant="contained">Delete</Button>;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
PardonButton() {
|
||||||
|
return <Button onClick={() => {
|
||||||
|
alert('User pardoned.');
|
||||||
|
}} variant="contained">Pardon</Button>;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
userTableData() {
|
||||||
|
return this.state.users.map((user) => {
|
||||||
|
const { id, username, name, email, phone } = user;
|
||||||
|
return (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>{id}</TableCell>
|
||||||
|
<TableCell>{username}</TableCell>
|
||||||
|
<TableCell>{name}</TableCell>
|
||||||
|
<TableCell>{email}</TableCell>
|
||||||
|
<TableCell>{phone}</TableCell>
|
||||||
|
<TableCell>{this.DeleteButton()}</TableCell>
|
||||||
|
<TableCell>{this.EditButton()}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
suspendedUserTableData() {
|
||||||
|
return this.state.suspendedUsers.map((user) => {
|
||||||
|
const { id, username, name, email, phone } = user
|
||||||
|
return (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>{id}</TableCell>
|
||||||
|
<TableCell>{username}</TableCell>
|
||||||
|
<TableCell>{name}</TableCell>
|
||||||
|
<TableCell>{email}</TableCell>
|
||||||
|
<TableCell>{phone}</TableCell>
|
||||||
|
<TableCell>{this.DeleteButton()}</TableCell>
|
||||||
|
<TableCell>{this.EditButton()}</TableCell>
|
||||||
|
<TableCell>{this.PardonButton()}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
matchTableData() {
|
||||||
|
return this.state.matches.map((match) => {
|
||||||
|
const { id, sport, date, location, description } = match
|
||||||
|
return (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>{id}</TableCell>
|
||||||
|
<TableCell>{sport}</TableCell>
|
||||||
|
<TableCell>{date}</TableCell>
|
||||||
|
<TableCell>{location}</TableCell>
|
||||||
|
<TableCell>{description}</TableCell>
|
||||||
|
<TableCell>{this.DeleteButton()}</TableCell>
|
||||||
|
<TableCell>{this.EditButton()}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
matchTableHead() {
|
||||||
|
return (
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>ID</TableCell>
|
||||||
|
<TableCell>Sport</TableCell>
|
||||||
|
<TableCell>Date</TableCell>
|
||||||
|
<TableCell>Location</TableCell>
|
||||||
|
<TableCell>Description</TableCell>
|
||||||
|
<TableCell></TableCell>
|
||||||
|
<TableCell></TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
suspendedUserTableHead() {
|
||||||
|
return (
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>ID</TableCell>
|
||||||
|
<TableCell>Username</TableCell>
|
||||||
|
<TableCell>Name</TableCell>
|
||||||
|
<TableCell>Email</TableCell>
|
||||||
|
<TableCell>Phone</TableCell>
|
||||||
|
<TableCell></TableCell>
|
||||||
|
<TableCell></TableCell>
|
||||||
|
<TableCell></TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
userTableHead() {
|
||||||
|
return (
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>ID</TableCell>
|
||||||
|
<TableCell>Username</TableCell>
|
||||||
|
<TableCell>Name</TableCell>
|
||||||
|
<TableCell>Email</TableCell>
|
||||||
|
<TableCell>Phone</TableCell>
|
||||||
|
<TableCell></TableCell>
|
||||||
|
<TableCell></TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
selectTable() {
|
||||||
|
this.setState({ buttonColors: ['', '', ''] });
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTableHead() {
|
||||||
|
if (this.state.buttonColors[0] === 'black') {
|
||||||
|
return this.matchTableHead();
|
||||||
|
} else if (this.state.buttonColors[1] === 'black') {
|
||||||
|
return this.userTableHead();
|
||||||
|
} else {
|
||||||
|
return this.suspendedUserTableHead();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTableData() {
|
||||||
|
if (this.state.buttonColors[0] === 'black') {
|
||||||
|
return this.matchTableData();
|
||||||
|
} else if (this.state.buttonColors[1] === 'black') {
|
||||||
|
return this.userTableData();
|
||||||
|
} else {
|
||||||
|
return this.suspendedUserTableData();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1 id='title'>Administration</h1>
|
||||||
|
<div className='ButtonList'>
|
||||||
|
<Button onClick={() => {
|
||||||
|
this.setState({ buttonColors: ['black', '', ''] });
|
||||||
|
}} sx={{
|
||||||
|
margin: 3,
|
||||||
|
backgroundColor: this.state.buttonColors[0],
|
||||||
|
}} variant="outlined">Matches</Button>
|
||||||
|
<Button onClick={() => {
|
||||||
|
this.setState({ buttonColors: ['', 'black', ''] });
|
||||||
|
}} sx={{
|
||||||
|
margin: 3,
|
||||||
|
backgroundColor: this.state.buttonColors[1],
|
||||||
|
}} variant="outlined">Users</Button>
|
||||||
|
<Button onClick={() => {
|
||||||
|
this.setState({ buttonColors: ['', '', 'black'] });
|
||||||
|
}} sx={{
|
||||||
|
margin: 3,
|
||||||
|
backgroundColor: this.state.buttonColors[2],
|
||||||
|
}} variant="outlined">Suspended Users</Button></div>
|
||||||
|
<div className='MainTable'>
|
||||||
|
<TableContainer
|
||||||
|
component={Paper}
|
||||||
|
variant="outlined"
|
||||||
|
>
|
||||||
|
<Table>
|
||||||
|
{this.renderTableHead()}
|
||||||
|
<TableBody>
|
||||||
|
{this.renderTableData()}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AdminTable
|
||||||
@@ -2,14 +2,14 @@ import './App.css';
|
|||||||
import { Routes, Route, Link } from "react-router-dom";
|
import { Routes, Route, Link } from "react-router-dom";
|
||||||
import SignIn from './SignIn';
|
import SignIn from './SignIn';
|
||||||
import SignUp from './SignUp';
|
import SignUp from './SignUp';
|
||||||
import Home from './Home';
|
import Admin from './Admin';
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="" element={<Home />} />
|
|
||||||
<Route path="sign-in" element={<SignIn />} />
|
<Route path="sign-in" element={<SignIn />} />
|
||||||
<Route path="sign-up" element={<SignUp />} />
|
<Route path="sign-up" element={<SignUp />} />
|
||||||
|
<Route path="admin" element={<Admin />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,4 +0,0 @@
|
|||||||
h1, h2{
|
|
||||||
-webkit-text-stroke-width: 1px;
|
|
||||||
-webkit-text-stroke-color: black;
|
|
||||||
}
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import Homebar from './Homebar';
|
|
||||||
import { Carousel } from 'react-bootstrap';
|
|
||||||
import './Home.css';
|
|
||||||
export default function Home() {
|
|
||||||
return(
|
|
||||||
<React.Fragment>
|
|
||||||
<Homebar></Homebar>
|
|
||||||
<Carousel>
|
|
||||||
<Carousel.Item>
|
|
||||||
<img
|
|
||||||
src='https://d39l2hkdp2esp1.cloudfront.net/img/photo/148976/148976_00_2x.jpg'
|
|
||||||
alt="Connect Slide"
|
|
||||||
style={{ height: '680px', width: '2000px'}}
|
|
||||||
/>
|
|
||||||
<Carousel.Caption>
|
|
||||||
<h1>Connect</h1>
|
|
||||||
<h2>Connect with other athletes in your area!</h2>
|
|
||||||
</Carousel.Caption>
|
|
||||||
</Carousel.Item>
|
|
||||||
<Carousel.Item>
|
|
||||||
<img
|
|
||||||
src='https://www.groovypost.com/wp-content/uploads/2021/08/sports-calendar-featured.jpg'
|
|
||||||
alt="Schedule Slide"
|
|
||||||
style={{ height: '680px', width: '2000px' }}
|
|
||||||
/>
|
|
||||||
<Carousel.Caption>
|
|
||||||
<h1>Schedule</h1>
|
|
||||||
<h2>Schedule sport meets with other athletes!</h2>
|
|
||||||
</Carousel.Caption>
|
|
||||||
</Carousel.Item>
|
|
||||||
<Carousel.Item>
|
|
||||||
<img
|
|
||||||
src='https://i.pinimg.com/736x/dd/80/c3/dd80c3136a96c2fbf6004aef8e9619f3.jpg'
|
|
||||||
alt="Rent Slide"
|
|
||||||
style={{ height: '680px', width: '2000px' }}
|
|
||||||
/>
|
|
||||||
<Carousel.Caption>
|
|
||||||
<h1>Rent</h1>
|
|
||||||
<h2>Rent sports equipment from other athletes!</h2>
|
|
||||||
</Carousel.Caption>
|
|
||||||
</Carousel.Item>
|
|
||||||
</Carousel>
|
|
||||||
</React.Fragment>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import AppBar from '@mui/material/AppBar';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import Toolbar from '@mui/material/Toolbar';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import Container from '@mui/material/Container';
|
|
||||||
import Button from '@mui/material/Button';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
|
|
||||||
export default function Navbar(){
|
|
||||||
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AppBar position="static" sx={{background: '#00226D'}}>
|
|
||||||
<Container maxWidth="xl">
|
|
||||||
<Toolbar disableGutters>
|
|
||||||
<Typography
|
|
||||||
variant="h6"
|
|
||||||
noWrap
|
|
||||||
component="div"
|
|
||||||
sx={{ mr: 2, fontSize: '200%', textAlign: 'center', flexGrow: 1, marginLeft: '10%'}}
|
|
||||||
>
|
|
||||||
Sports Matcher
|
|
||||||
</Typography>
|
|
||||||
<Box sx={{display: { xs: 'none', md: 'flex' }}}>
|
|
||||||
<Button
|
|
||||||
sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%'}}
|
|
||||||
onClick={() => navigate('sign-up')}
|
|
||||||
>
|
|
||||||
Sign Up
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%'}}
|
|
||||||
onClick={() => navigate('sign-in')}
|
|
||||||
>
|
|
||||||
Sign In
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</Toolbar>
|
|
||||||
</Container>
|
|
||||||
</AppBar>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,153 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import AppBar from '@mui/material/AppBar';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import Toolbar from '@mui/material/Toolbar';
|
|
||||||
import IconButton from '@mui/material/IconButton';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import Menu from '@mui/material/Menu';
|
|
||||||
import MenuIcon from '@mui/icons-material/Menu';
|
|
||||||
import Container from '@mui/material/Container';
|
|
||||||
import Button from '@mui/material/Button';
|
|
||||||
import Tooltip from '@mui/material/Tooltip';
|
|
||||||
import MenuItem from '@mui/material/MenuItem';
|
|
||||||
import AccountCircle from '@mui/icons-material/AccountCircle';
|
|
||||||
import ForumIcon from '@mui/icons-material/Forum';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
|
|
||||||
const pages = ['Dashboard'];
|
|
||||||
|
|
||||||
export default function Navbar(){
|
|
||||||
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
|
||||||
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
|
||||||
|
|
||||||
const handleOpenNavMenu = (event) => {
|
|
||||||
setAnchorElNav(event.currentTarget);
|
|
||||||
};
|
|
||||||
const handleOpenUserMenu = (event) => {
|
|
||||||
setAnchorElUser(event.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCloseNavMenu = () => {
|
|
||||||
setAnchorElNav(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCloseUserMenu = () => {
|
|
||||||
setAnchorElUser(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AppBar position="static" sx={{background: '#00226D'}}>
|
|
||||||
<Container maxWidth="xl">
|
|
||||||
<Toolbar disableGutters>
|
|
||||||
<Typography
|
|
||||||
variant="h6"
|
|
||||||
noWrap
|
|
||||||
component="div"
|
|
||||||
sx={{ mr: 2, display: { xs: 'none', md: 'flex' }, fontSize: '150%', borderRight: '0.05em solid black', borderColor: 'white', paddingRight: '1.5em' }}
|
|
||||||
>
|
|
||||||
Sports Matcher
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
|
|
||||||
<IconButton
|
|
||||||
size="large"
|
|
||||||
aria-label="account of current user"
|
|
||||||
aria-controls="menu-appbar"
|
|
||||||
aria-haspopup="true"
|
|
||||||
onClick={handleOpenNavMenu}
|
|
||||||
color="inherit"
|
|
||||||
>
|
|
||||||
<MenuIcon />
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
id="menu-appbar"
|
|
||||||
anchorEl={anchorElNav}
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'left',
|
|
||||||
}}
|
|
||||||
keepMounted
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'left',
|
|
||||||
}}
|
|
||||||
open={Boolean(anchorElNav)}
|
|
||||||
onClose={handleCloseNavMenu}
|
|
||||||
sx={{
|
|
||||||
display: { xs: 'block', md: 'none' },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{pages.map((page) => (
|
|
||||||
<MenuItem key={page} onClick={handleCloseNavMenu}>
|
|
||||||
<Typography textAlign="center">{page}</Typography>
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
</Menu>
|
|
||||||
</Box>
|
|
||||||
<Typography
|
|
||||||
variant="h6"
|
|
||||||
noWrap
|
|
||||||
component="div"
|
|
||||||
sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
|
|
||||||
>
|
|
||||||
Sports Matcher
|
|
||||||
</Typography>
|
|
||||||
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' }, marginLeft: '2%' }}>
|
|
||||||
{pages.map((page) => (
|
|
||||||
<Button
|
|
||||||
key={page}
|
|
||||||
onClick={handleCloseNavMenu}
|
|
||||||
sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%'}}
|
|
||||||
>
|
|
||||||
{page}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box sx={{ flexGrow: 0, marginRight: '1%'}}>
|
|
||||||
<Tooltip title="Chats">
|
|
||||||
<IconButton sx={{ p: 0}}>
|
|
||||||
<ForumIcon sx={{color: 'white'}}></ForumIcon>
|
|
||||||
</IconButton>
|
|
||||||
</Tooltip>
|
|
||||||
</Box>
|
|
||||||
<Box sx={{ flexGrow: 0 }}>
|
|
||||||
<Tooltip title="Settings">
|
|
||||||
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0}}>
|
|
||||||
<AccountCircle sx={{color: 'white'}}></AccountCircle>
|
|
||||||
</IconButton>
|
|
||||||
</Tooltip>
|
|
||||||
<Menu
|
|
||||||
sx={{ mt: '30px' }}
|
|
||||||
id="menu-appbar"
|
|
||||||
anchorEl={anchorElUser}
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right',
|
|
||||||
}}
|
|
||||||
keepMounted
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'right',
|
|
||||||
}}
|
|
||||||
open={Boolean(anchorElUser)}
|
|
||||||
onClose={handleCloseUserMenu}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleCloseUserMenu}>
|
|
||||||
<Typography textAlign="center">Profile</Typography>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={handleCloseUserMenu}>
|
|
||||||
<Typography textAlign="center">Account</Typography>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={() => navigate('sign-in')}>
|
|
||||||
<Typography textAlign="center">Sign Out</Typography>
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Box>
|
|
||||||
</Toolbar>
|
|
||||||
</Container>
|
|
||||||
</AppBar>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -8,18 +8,8 @@ import Typography from '@mui/material/Typography';
|
|||||||
import Container from '@mui/material/Container';
|
import Container from '@mui/material/Container';
|
||||||
import { Link } from '@mui/material';
|
import { Link } from '@mui/material';
|
||||||
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
|
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
|
|
||||||
export default function SignIn() {
|
export default function SignIn() {
|
||||||
const navigate = useNavigate();
|
|
||||||
const handleSubmit = (event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
const data = new FormData(event.currentTarget);
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
if(data.get('username') == "admin" && data.get('password') == "admin"){
|
|
||||||
navigate('/');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return (
|
return (
|
||||||
<Container component="main" maxWidth="xs">
|
<Container component="main" maxWidth="xs">
|
||||||
<CssBaseline />
|
<CssBaseline />
|
||||||
@@ -37,15 +27,15 @@ export default function SignIn() {
|
|||||||
<Typography component="h1" variant="h5">
|
<Typography component="h1" variant="h5">
|
||||||
Sign in
|
Sign in
|
||||||
</Typography>
|
</Typography>
|
||||||
<Box component="form" noValidate sx={{ mt: 1 }} onSubmit={handleSubmit}>
|
<Box component="form" noValidate sx={{ mt: 1 }}>
|
||||||
<TextField
|
<TextField
|
||||||
margin="normal"
|
margin="normal"
|
||||||
required
|
required
|
||||||
fullWidth
|
fullWidth
|
||||||
id="username"
|
id="email"
|
||||||
label="Username"
|
label="Email Address"
|
||||||
name="username"
|
name="email"
|
||||||
autoComplete="username"
|
autoComplete="email"
|
||||||
autoFocus
|
autoFocus
|
||||||
/>
|
/>
|
||||||
<TextField
|
<TextField
|
||||||
|
|||||||
@@ -9,7 +9,6 @@ import Typography from '@mui/material/Typography';
|
|||||||
import Container from '@mui/material/Container';
|
import Container from '@mui/material/Container';
|
||||||
import { Link } from '@mui/material';
|
import { Link } from '@mui/material';
|
||||||
import { Grid } from '@mui/material';
|
import { Grid } from '@mui/material';
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
|
|
||||||
export default function SignUp() {
|
export default function SignUp() {
|
||||||
return (
|
return (
|
||||||
|
|||||||
Reference in New Issue
Block a user