ydeng/sports-matcher
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1 from csc309-winter-2022/authentication

Browse Source 
Added Sign in/up, Home, and Navbar
This commit is contained in:
Piyush Sharma
2022-03-06 20:24:01 -05:00
committed by GitHub
parent c332594b40 e1befed115
commit d9b0c827c8
11 changed files with 445 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated Normal file
View File

@@ -0,0 +1,6 @@
{
"name": "team58",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}

7
sports-matcher/package.json
View File

@@ -3,11 +3,18 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.8.1",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.4.4",
"@mui/material": "^5.4.4",
"@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-scripts": "^5.0.0", "react-scripts": "^5.0.0",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },

6
sports-matcher/public/index.html
View File

@@ -24,6 +24,12 @@
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>

25
sports-matcher/src/App.js
View File

@@ -1,23 +1,16 @@
import logo from './logo.svg';
import './App.css'; import './App.css';
import { Routes, Route, Link } from "react-router-dom";
import SignIn from './SignIn';
import SignUp from './SignUp';
import Home from './Home';
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <Routes>
<img src={logo} className="App-logo" alt="logo" /> <Route path="" element={<Home />} />
<p> <Route path="sign-in" element={<SignIn />} />
Edit <code>src/App.js</code> and save to reload. <Route path="sign-up" element={<SignUp />} />
</p> </Routes>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div> </div>
); );
} }

4
sports-matcher/src/Home.css Normal file
View File

@@ -0,0 +1,4 @@
h1, h2{
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}

46
sports-matcher/src/Home.js Normal file
View File

@@ -0,0 +1,46 @@
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>
)
}

44
sports-matcher/src/Homebar.js Normal file
View File

@@ -0,0 +1,44 @@
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>
);
};

153
sports-matcher/src/Navbar.js Normal file
View File

@@ -0,0 +1,153 @@
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>
);
};

75
sports-matcher/src/SignIn.js Normal file
View File

@@ -0,0 +1,75 @@
import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import { Link } from '@mui/material';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import { useNavigate } from 'react-router-dom';
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 (
<Container component="main" maxWidth="xs">
<CssBaseline />
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'primary.main' }}>
<AccountCircleIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Box component="form" noValidate sx={{ mt: 1 }} onSubmit={handleSubmit}>
<TextField
margin="normal"
required
fullWidth
id="username"
label="Username"
name="username"
autoComplete="username"
autoFocus
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
Sign In
</Button>
<Link href="/sign-up" underline="always">
{"Don't have an account?"}
</Link>
</Box>
</Box>
</Container>
)}

92
sports-matcher/src/SignUp.js Normal file
View File

@@ -0,0 +1,92 @@
import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import AccountBoxIcon from '@mui/icons-material/AccountBox';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import { Link } from '@mui/material';
import { Grid } from '@mui/material';
import { useNavigate } from 'react-router-dom';
export default function SignUp() {
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'info.main' }}>
<AccountBoxIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign up
</Typography>
<Box component="form" noValidate sx={{ mt: 1 }}>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<TextField
autoComplete="given-name"
name="firstName"
required
fullWidth
id="firstName"
label="First Name"
autoFocus
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
required
fullWidth
id="lastName"
label="Last Name"
name="lastName"
autoComplete="family-name"
/>
</Grid>
<Grid item xs={12}>
<TextField
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
/>
</Grid>
<Grid item xs={12}>
<TextField
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="new-password"
/>
</Grid>
</Grid>
<Button
type="submit"
fullWidth
variant="contained"
color='info'
sx={{ mt: 3, mb: 2 }}
>
Sign Up
</Button>
<Link href="/sign-in" underline="always">
{'Already have an account?'}
</Link>
</Box>
</Box>
</Container>
)}

5
sports-matcher/src/index.js
View File

@@ -1,13 +1,14 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <BrowserRouter>
<App /> <App />
</React.StrictMode>, </BrowserRouter>,
document.getElementById('root') document.getElementById('root')
); );