Refactored - now includes fullstack AUTH
This commit is contained in:
Ben Elferink
124
client/src/components/AuthModal.js
Normal file
124
client/src/components/AuthModal.js
Normal file
@@ -0,0 +1,124 @@
|
||||
import {Fragment, useState} from 'react'
|
||||
import {Dialog, DialogTitle, TextField, Button, CircularProgress} from '@mui/material'
|
||||
import axios from '../api'
|
||||
import {useAuth} from '../contexts/AuthContext'
|
||||
|
||||
const textFieldSx = {mx: 2, my: 0.5}
|
||||
|
||||
export default function AuthModal({open, close, register, toggleRegister}) {
|
||||
const {setIsLoggedIn, setToken, setAccount} = useAuth()
|
||||
|
||||
const [formData, setFormData] = useState({})
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const handleChange = (e) => {
|
||||
const {name, value} = e.target
|
||||
setFormData((prev) => ({...prev, [name]: value}))
|
||||
}
|
||||
|
||||
const clickSubmit = async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const requestPath = register ? '/auth/register' : '/auth/login'
|
||||
const response = await axios.post(requestPath, formData)
|
||||
|
||||
setToken(response.data.token)
|
||||
setAccount(response.data.data)
|
||||
setIsLoggedIn(true)
|
||||
close()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
setError(error?.response?.data?.message ?? error.message)
|
||||
}
|
||||
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
const disabledLoginButton = !formData['username'] || !formData['password']
|
||||
const disabledRegisterButton = !formData['username'] || !formData['password']
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={close}>
|
||||
{register ? (
|
||||
<RegisterForm formData={formData} handleChange={handleChange} />
|
||||
) : (
|
||||
<LoginForm formData={formData} handleChange={handleChange} />
|
||||
)}
|
||||
|
||||
{error && <span className='error'>{error}</span>}
|
||||
|
||||
{loading ? (
|
||||
<center>
|
||||
<CircularProgress color='inherit' />
|
||||
</center>
|
||||
) : (
|
||||
<Button
|
||||
onClick={clickSubmit}
|
||||
disabled={register ? disabledRegisterButton : disabledLoginButton}>
|
||||
{register ? 'Register' : 'Login'}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button onClick={toggleRegister}>
|
||||
{register ? 'I already have an account' : "I don't have an account"}
|
||||
</Button>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function LoginForm({formData, handleChange}) {
|
||||
return (
|
||||
<Fragment>
|
||||
<DialogTitle>Login to your account</DialogTitle>
|
||||
|
||||
<TextField
|
||||
label='Username'
|
||||
name='username'
|
||||
value={formData['username'] ?? ''}
|
||||
onChange={handleChange}
|
||||
variant='filled'
|
||||
sx={textFieldSx}
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
label='Password'
|
||||
name='password'
|
||||
value={formData['password'] ?? ''}
|
||||
onChange={handleChange}
|
||||
variant='filled'
|
||||
sx={textFieldSx}
|
||||
required
|
||||
/>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
function RegisterForm({formData, handleChange}) {
|
||||
return (
|
||||
<Fragment>
|
||||
<DialogTitle>Create a new account</DialogTitle>
|
||||
|
||||
<TextField
|
||||
label='Username'
|
||||
name='username'
|
||||
value={formData['username'] ?? ''}
|
||||
onChange={handleChange}
|
||||
variant='filled'
|
||||
sx={textFieldSx}
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
label='Password'
|
||||
name='password'
|
||||
value={formData['password'] ?? ''}
|
||||
onChange={handleChange}
|
||||
variant='filled'
|
||||
sx={textFieldSx}
|
||||
required
|
||||
/>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
77
client/src/components/Header.js
Normal file
77
client/src/components/Header.js
Normal file
@@ -0,0 +1,77 @@
|
||||
import {Fragment, useState} from 'react'
|
||||
import {IconButton, Avatar, Popover, List, ListSubheader, ListItemButton} from '@mui/material'
|
||||
import OnlineIndicator from './OnlineIndicator'
|
||||
import AuthModal from './AuthModal'
|
||||
import {useAuth} from '../contexts/AuthContext'
|
||||
|
||||
export default function Header() {
|
||||
const {isLoggedIn, account, logout} = useAuth()
|
||||
|
||||
const [anchorEl, setAnchorEl] = useState(null)
|
||||
const [popover, setPopover] = useState(false)
|
||||
const [authModal, setAuthModal] = useState(false)
|
||||
const [register, setRegister] = useState(false)
|
||||
|
||||
const openPopover = (e) => {
|
||||
setPopover(true)
|
||||
setAnchorEl(e.currentTarget)
|
||||
}
|
||||
|
||||
const closePopover = () => {
|
||||
setPopover(false)
|
||||
setAnchorEl(null)
|
||||
}
|
||||
|
||||
const clickLogin = () => {
|
||||
setRegister(false)
|
||||
setAuthModal(true)
|
||||
closePopover()
|
||||
}
|
||||
|
||||
const clickRegister = () => {
|
||||
setRegister(true)
|
||||
setAuthModal(true)
|
||||
closePopover()
|
||||
}
|
||||
|
||||
return (
|
||||
<header className='header'>
|
||||
<h1>Web App</h1>
|
||||
|
||||
<IconButton onClick={openPopover}>
|
||||
<OnlineIndicator online={isLoggedIn}>
|
||||
<Avatar src={account?.username ?? ''} alt={account?.username ?? ''} />
|
||||
</OnlineIndicator>
|
||||
</IconButton>
|
||||
|
||||
<Popover
|
||||
anchorEl={anchorEl}
|
||||
open={popover}
|
||||
onClose={closePopover}
|
||||
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
|
||||
transformOrigin={{vertical: 'top', horizontal: 'right'}}>
|
||||
<List style={{minWidth: '100px'}}>
|
||||
<ListSubheader style={{textAlign: 'center'}}>
|
||||
Hello, {isLoggedIn ? 'Ben' : 'Guest'}
|
||||
</ListSubheader>
|
||||
|
||||
{isLoggedIn ? (
|
||||
<ListItemButton onClick={logout}>Logout</ListItemButton>
|
||||
) : (
|
||||
<Fragment>
|
||||
<ListItemButton onClick={clickLogin}>Login</ListItemButton>
|
||||
<ListItemButton onClick={clickRegister}>Reigster</ListItemButton>
|
||||
</Fragment>
|
||||
)}
|
||||
</List>
|
||||
</Popover>
|
||||
|
||||
<AuthModal
|
||||
open={authModal}
|
||||
close={() => setAuthModal(false)}
|
||||
register={register}
|
||||
toggleRegister={() => setRegister((prev) => !prev)}
|
||||
/>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
63
client/src/components/OnlineIndicator.js
Normal file
63
client/src/components/OnlineIndicator.js
Normal file
@@ -0,0 +1,63 @@
|
||||
import {styled} from '@mui/material/styles'
|
||||
import {Badge, Avatar} from '@mui/material'
|
||||
|
||||
const StyledBadge = styled(Badge)(({theme}) => ({
|
||||
'& .MuiBadge-badge': {
|
||||
backgroundColor: 'black',
|
||||
color: 'black',
|
||||
boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRadius: '50%',
|
||||
animation: 'ripple 1.2s infinite ease-in-out',
|
||||
border: '1px solid currentColor',
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
'@keyframes ripple': {
|
||||
'0%': {
|
||||
transform: 'scale(.8)',
|
||||
opacity: 1,
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(2.4)',
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
||||
const OnlineBadge = styled(StyledBadge)(({theme}) => ({
|
||||
'& .MuiBadge-badge': {
|
||||
backgroundColor: 'var(--online)',
|
||||
color: 'var(--online)',
|
||||
},
|
||||
}))
|
||||
|
||||
const OfflineBadge = styled(StyledBadge)(({theme}) => ({
|
||||
'& .MuiBadge-badge': {
|
||||
backgroundColor: 'var(--offline)',
|
||||
color: 'var(--offline)',
|
||||
},
|
||||
}))
|
||||
|
||||
export default function OnlineIndicator({online = false, children = <Avatar src='' alt='' />}) {
|
||||
return online ? (
|
||||
<OnlineBadge
|
||||
variant='dot'
|
||||
overlap='circular'
|
||||
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}>
|
||||
{children}
|
||||
</OnlineBadge>
|
||||
) : (
|
||||
<OfflineBadge
|
||||
variant='dot'
|
||||
overlap='circular'
|
||||
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}>
|
||||
{children}
|
||||
</OfflineBadge>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user