Merge pull request #86 from weaponsforge/dev

v1.0.3

client/.eslintrc.json

@@ -15,6 +15,7 @@
  "semi": ["error", "never"],
  "no-unused-vars": "error",
  "no-undef": "error",
+ "no-trailing-spaces": "error",
  "no-console": ["error", { "allow": ["error"] }]
  }
 }

client/src/common/auth/protectedpage/index.js

@@ -0,0 +1,43 @@
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+import { useAuth } from '@/lib/hooks/useAuth'
+
+import LoadingCover from '@/common/layout/loadingcover'
+
+/**
+ * HOC that listens for the Firebase user auth info from the global "user" redux states set by the useAuth() hook.
+ * Displays a loading cover page while waiting for the remote authentication info to settle in.
+ * Displays and returns the Component parameter if there is user data from the remote auth.
+ * Redirect to the /login page if there is no user info after the remote auth settles in.
+ * @param {Component} Component
+ * @returns {Component} (Component parameter or a Loading placeholder component)
+ * Usage: export default ProtectedPage(MyComponent)
+ */
+function ProtectedPage (Component) {
+ function AuthListener (props) {
+ const router = useRouter()
+ const { authLoading, authError, authUser } = useAuth()
+
+ useEffect(() => {
+ if (!authLoading && !authUser) {
+ router.push('/login')
+ }
+ }, [authUser, authLoading, router])
+
+ const ItemComponent = () => {
+ if (authLoading) {
+ return <LoadingCover />
+ } else if (authUser) {
+ return <Component {...props} />
+ } else {
+ return <LoadingCover authError={authError} />
+ }
+ }
+
+ return (<ItemComponent />)
+ }
+
+ return AuthListener
+}
+
+export default ProtectedPage

client/src/common/layout/header/index.js

@@ -1,8 +1,10 @@
 // REACT
 import { useState } from 'react'
+import { useDispatch } from 'react-redux'
 
 // NEXT
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 // MUI
 import AppBar from '@mui/material/AppBar'
@@ -25,18 +27,37 @@ import HowToRegIcon from '@mui/icons-material/HowToReg'
 // LIB
 import { Avalon } from '@/lib/mui/theme'
 import { useSyncLocalStorage } from '@/lib/hooks/useSync'
+import { useAuth } from '@/lib/hooks/useAuth'
 
 // VARIABLES
 const pages = ['about']
-const settings = ['Profile', 'Account', 'Dashboard', 'Logout']
+const settings = [
+ {
+ name: 'Profile',
+ route: 'userProfile'
+ },
+ {
+ name: 'Account',
+ route: '/'
+ },
+ {
+ name: 'Dashboard',
+ route: 'dashboard'
+ },
+ {
+ name: 'Logout',
+ route: '#'
+ }
+]
 
 function Header() {
  // HOOKS
  const [anchorElNav, setAnchorElNav] = useState(null)
  const [anchorElUser, setAnchorElUser] = useState(null)
- const [isLoggedIn] = useState(false)
  const [activeTheme, setActiveTheme] = useSyncLocalStorage('activeTheme')
-
+ const { authUser, authSignOut } = useAuth()
+ const dispatch = useDispatch()
+ const router = useRouter()
 
  class eventsHandler {
  static themeHandler = () => {
@@ -54,8 +75,11 @@ function Header() {
  static handleCloseUserMenu = () => {
  setAnchorElUser(null)
  }
+ static handleClickNavMenu = (route) => {
+ router.push(route)
+ }
  }
- const {themeHandler, handleOpenNavMenu, handleOpenUserMenu, handleCloseNavMenu, handleCloseUserMenu} = eventsHandler
+ const {themeHandler, handleOpenNavMenu, handleOpenUserMenu, handleCloseNavMenu, handleCloseUserMenu, handleClickNavMenu} = eventsHandler
 
  return (
  <AppBar elevation={10} sx={{
@@ -152,7 +176,7 @@ function Header() {
  ))}
  </Box>
 
- {isLoggedIn 
+ {(authUser !== null)
  ?
  <Box sx={{ flex: 0 }}>
  <Tooltip title="Open settings">
@@ -177,11 +201,15 @@ function Header() {
  open={Boolean(anchorElUser)}
  onClose={handleCloseUserMenu}
  >
- {settings.map((setting) => (
- <MenuItem key={setting} onClick={handleCloseUserMenu}>
- <Typography textAlign="center">{setting}</Typography>
- </MenuItem>
- ))}
+ {settings.map((setting, id) => {
+ return (setting.name === 'Logout')
+ ? <MenuItem key={id} onClick={() => dispatch(authSignOut())}>
+ <Typography textAlign="center">{setting.name}</Typography>
+ </MenuItem>
+ : <MenuItem key={id} onClick={() => handleClickNavMenu(setting.route)}>
+ <Typography textAlign="center">{setting.name}</Typography>
+ </MenuItem>
+ })}
  </Menu>
  </Box>
  :
@@ -190,7 +218,7 @@ function Header() {
  }}>
  <Link href='/login' style={{ textDecoration: 'none' }}>
  <Button
- sx={{ 
+ sx={{
  my: 2,
  color: 'black',
  display: { xs: 'none', md: 'flex' },
@@ -203,7 +231,7 @@ function Header() {
  </Link>
  <Link href='/register' style={{ textDecoration: 'none' }}>
  <Button
- sx={{ 
+ sx={{
  my: 2,
  color: 'black',
  display: { xs: 'none', md: 'flex' },
@@ -218,7 +246,7 @@ function Header() {
  }
  <Link href='/login' style={{ textDecoration: 'none' }}>
  <IconButton
- sx={{ 
+ sx={{
  color: 'black',
  display: { xs: 'flex', md: 'none' },
  justifyContent:'center',
@@ -237,7 +265,7 @@ function Header() {
  </Link>
  <Link href='/register' style={{ textDecoration: 'none' }}>
  <IconButton
- sx={{ 
+ sx={{
  color: 'black',
  display: { xs: 'flex', md: 'none' },
  justifyContent:'center',
@@ -261,7 +289,7 @@ function Header() {
  alignItems:'center',
  }} onClick={themeHandler}
  >
- {activeTheme === 'dark' 
+ {activeTheme === 'dark'
  ?
  <LightModeIcon style={{ filter: 'invert(100%) sepia(0%) saturate(7440%) hue-rotate(111deg) brightness(126%) contrast(112%)'}}/>
  :

client/src/common/layout/loadingcover/index.js

@@ -0,0 +1,48 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import CircularProgress from '@mui/material/CircularProgress'
+
+import Page from '@/common/layout/page'
+import TransparentBox from '@/common/ui/transparentbox'
+import { useSyncLocalStorage } from '@/lib/hooks/useSync'
+
+function LoadingCover ({ authError }) {
+ const [activeTheme] = useSyncLocalStorage('activeTheme')
+
+ return (
+ <Page>
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ placeContent: 'center',
+ height: '100vh'
+ }}
+ >
+ <TransparentBox>
+ <span>
+ <Typography variant='h6' color='#000'>
+ Loading...
+ </Typography>
+ </span>
+
+ <span>
+ <CircularProgress
+ color={(activeTheme === 'light') ? 'dark' : 'primary'}
+ />
+ </span>
+
+ {authError &&
+ <Typography variant='label' color='error'>
+ {authError}
+ </Typography>
+ }
+ </TransparentBox>
+ </Box>
+ </Page>
+ )
+}
+
+export default LoadingCover

client/src/common/layout/page/index.js

@@ -24,7 +24,7 @@ const Background = () => {
  position: 'fixed',
  zIndex: '-1',
  top: 0,
- width: '100vw', 
+ width: '100vw',
  height: '100vh',
  width: '100vmax',
  height: '100vmax',
@@ -54,7 +54,7 @@ const Background = () => {
  },
  '66%': {
  background: '#FA5374',
- }, 
+ },
  '83%': {
  background: '#E46653',
  },
@@ -80,7 +80,7 @@ function Page ({ children }) {
  <>
  <Background/>
  <Box sx={{
- width: '100%', 
+ width: '100%',
  minHeight: '100vh',
  display: 'flex',
  flexDirection: 'column',

client/src/common/ui/transparentbox/index.js

@@ -0,0 +1,22 @@
+import Box from '@mui/material/Box'
+
+function TransparentBox ({ children }) {
+ return (
+ <Box sx={{
+ width: {
+ md: '800px',
+ },
+ backgroundColor: 'rgba(255, 255, 255, 0.5)',
+ borderRadius: '8px',
+ boxShadow: 'box-shadow: 0 10px 40px rgb(0 0 0 / 14%)',
+ textAlign: 'center',
+ padding: '24px',
+ display: 'grid',
+ placeContent: 'center'
+ }}>
+ {children}
+ </Box>
+ )
+}
+
+export default TransparentBox

client/src/components/dashboard/index.js

@@ -0,0 +1,11 @@
+import Page from '@/common/layout/page'
+
+function DashboardComponent () {
+ return (
+ <Page>
+ <h1>Dashboard</h1>
+ </Page>
+ )
+}
+
+export default DashboardComponent

client/src/components/login/index.js

@@ -11,12 +11,14 @@ import CheckIcon from '@mui/icons-material/Check'
 import Paper from '@mui/material/Paper'
 import SimpleSnackbar from '@/common/snackbars/simpleSnackbar'
 import TransparentTextfield from '@/common/ui/transparentfield'
+import LoadingButton from '@/common/ui/loadingbutton'
 import { useTheme } from '@emotion/react'
 
-function LoginComponent ({state, eventsHandler}) {
+function LoginComponent ({ state, eventsHandler, resetError }) {
  const theme = useTheme()
- const { username, password, errorMessage, joke } = state
+ const { username, password, errorMessage, joke, loading } = state
  const { usernameHandler, passwordHandler, loginHandler } = eventsHandler
+
  return (
  <Page>
  <Paper sx={{
@@ -59,6 +61,7 @@ function LoginComponent ({state, eventsHandler}) {
  size="small"
  type="text"
  fullwidth="true"
+ disabled={loading}
  required={true}
  color={username.color}
  helperText={username.helperText}
@@ -76,6 +79,7 @@ function LoginComponent ({state, eventsHandler}) {
  size="small"
  type="password"
  fullwidth="true"
+ disabled={loading}
  required={true}
  value={password.value}
  error={password.error}
@@ -104,18 +108,20 @@ function LoginComponent ({state, eventsHandler}) {
  LOGIN
  </Button>
  :
- <Button
+ <LoadingButton
  variant="contained"
  id="login"
+ disabled={loading}
+ isloading={loading}
  sx={{
  fontWeight:'bold',
  color: theme.palette.primary.contrastText,
  gridArea: 'login'
  }}
- onClick={loginHandler}
+ handleClick={loginHandler}
+ label='LOGIN'
  >
- LOGIN
- </Button>
+ </LoadingButton>
  }
  <Link href="/recoverPassword" style={{gridArea: 'forgot'}}>
  <Typography
@@ -130,7 +136,7 @@ function LoginComponent ({state, eventsHandler}) {
  </Typography>
  </Link>
  {errorMessage &&
- <SimpleSnackbar message={errorMessage}/>
+ <SimpleSnackbar message={errorMessage} closeHandler={resetError} />
  }
  </Paper>
  </Paper>