first

src/pages/auth/check-mail.js

@@ -0,0 +1,57 @@
+import { Link } from 'react-router-dom';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Box, Button, Grid, Divider, Typography, useMediaQuery } from '@mui/material';
+
+// project import
+import useAuth from 'hooks/useAuth';
+import AnimateButton from 'components/@extended/AnimateButton';
+import AuthWrapper from 'sections/auth/AuthWrapper';
+
+// ================================|| CHECK MAIL ||================================ //
+
+const CheckMail = () => {
+  const theme = useTheme();
+  const matchDownSM = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const { isLoggedIn } = useAuth();
+
+  return (
+    <AuthWrapper>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Box sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
+            <Typography variant="h3">Hi, Check Your Mail</Typography>
+            <Typography color="secondary" sx={{ mb: 0.5, mt: 1.25 }}>
+              We have sent a password recover instructions to your email.
+            </Typography>
+          </Box>
+        </Grid>
+        <Grid item xs={12}>
+          <AnimateButton>
+            <Button
+              component={Link}
+              to={isLoggedIn ? '/auth/login' : '/login'}
+              disableElevation
+              fullWidth
+              size="large"
+              type="submit"
+              variant="contained"
+              color="primary"
+            >
+              Sign in
+            </Button>
+          </AnimateButton>
+        </Grid>
+        <Grid item xs={12}>
+          <Divider>
+            <Typography variant={matchDownSM ? 'subtitle1' : 'h5'}>Sign up with</Typography>
+          </Divider>
+        </Grid>
+      </Grid>
+    </AuthWrapper>
+  );
+};
+
+export default CheckMail;

src/pages/auth/code-verification.js

@@ -0,0 +1,29 @@
+// material-ui
+import { Grid, Stack, Typography } from '@mui/material';
+
+// project import
+import AuthWrapper from 'sections/auth/AuthWrapper';
+import AuthCodeVerification from 'sections/auth/auth-forms/AuthCodeVerification';
+
+// ================================|| CODE VERIFICATION ||================================ //
+
+const CodeVerification = () => (
+  <AuthWrapper>
+    <Grid container spacing={3}>
+      <Grid item xs={12}>
+        <Stack spacing={1}>
+          <Typography variant="h3">Enter Verification Code</Typography>
+          <Typography color="secondary">We send you on mail.</Typography>
+        </Stack>
+      </Grid>
+      <Grid item xs={12}>
+        <Typography>We`ve send you code on jone. ****@company.com</Typography>
+      </Grid>
+      <Grid item xs={12}>
+        <AuthCodeVerification />
+      </Grid>
+    </Grid>
+  </AuthWrapper>
+);
+
+export default CodeVerification;

src/pages/auth/forgot-password.js

@@ -0,0 +1,41 @@
+import { Link } from 'react-router-dom';
+
+// material-ui
+import { Grid, Stack, Typography } from '@mui/material';
+
+// project import
+import useAuth from 'hooks/useAuth';
+import AuthWrapper from 'sections/auth/AuthWrapper';
+import AuthForgotPassword from 'sections/auth/auth-forms/AuthForgotPassword';
+
+// ================================|| FORGOT PASSWORD ||================================ //
+
+const ForgotPassword = () => {
+  const { isLoggedIn } = useAuth();
+
+  return (
+    <AuthWrapper>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
+            <Typography variant="h3">Forgot Password</Typography>
+            <Typography
+              component={Link}
+              to={isLoggedIn ? '/auth/login' : '/login'}
+              variant="body1"
+              sx={{ textDecoration: 'none' }}
+              color="primary"
+            >
+              Back to Login
+            </Typography>
+          </Stack>
+        </Grid>
+        <Grid item xs={12}>
+          <AuthForgotPassword />
+        </Grid>
+      </Grid>
+    </AuthWrapper>
+  );
+};
+
+export default ForgotPassword;

src/pages/auth/login.js

@@ -0,0 +1,41 @@
+import { Link } from 'react-router-dom';
+
+// material-ui
+import { Grid, Stack, Typography } from '@mui/material';
+
+// project import
+import useAuth from 'hooks/useAuth';
+import AuthWrapper from 'sections/auth/AuthWrapper';
+import AuthLogin from 'sections/auth/auth-forms/AuthLogin';
+
+// ================================|| LOGIN ||================================ //
+
+const Login = () => {
+  const { isLoggedIn } = useAuth();
+
+  return (
+    <AuthWrapper>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
+            <Typography variant="h3">Login</Typography>
+            <Typography
+              component={Link}
+              to={isLoggedIn ? '/auth/register' : '/register'}
+              variant="body1"
+              sx={{ textDecoration: 'none' }}
+              color="primary"
+            >
+              Don&apos;t have an account?
+            </Typography>
+          </Stack>
+        </Grid>
+        <Grid item xs={12}>
+          <AuthLogin />
+        </Grid>
+      </Grid>
+    </AuthWrapper>
+  );
+};
+
+export default Login;

src/pages/auth/register.js

@@ -0,0 +1,41 @@
+import { Link } from 'react-router-dom';
+
+// material-ui
+import { Grid, Stack, Typography } from '@mui/material';
+
+// project import
+import useAuth from 'hooks/useAuth';
+import AuthWrapper from 'sections/auth/AuthWrapper';
+import FirebaseRegister from 'sections/auth/auth-forms/AuthRegister';
+
+// ================================|| REGISTER ||================================ //
+
+const Register = () => {
+  const { isLoggedIn } = useAuth();
+
+  return (
+    <AuthWrapper>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
+            <Typography variant="h3">Sign up</Typography>
+            <Typography
+              component={Link}
+              to={isLoggedIn ? '/auth/login' : '/login'}
+              variant="body1"
+              sx={{ textDecoration: 'none' }}
+              color="primary"
+            >
+              Already have an account?
+            </Typography>
+          </Stack>
+        </Grid>
+        <Grid item xs={12}>
+          <FirebaseRegister />
+        </Grid>
+      </Grid>
+    </AuthWrapper>
+  );
+};
+
+export default Register;

src/pages/auth/reset-password.js

@@ -0,0 +1,26 @@
+// material-ui
+import { Grid, Stack, Typography } from '@mui/material';
+
+// project import
+import AuthWrapper from 'sections/auth/AuthWrapper';
+import AuthResetPassword from 'sections/auth/auth-forms/AuthResetPassword';
+
+// ================================|| RESET PASSWORD ||================================ //
+
+const ResetPassword = () => (
+  <AuthWrapper>
+    <Grid container spacing={3}>
+      <Grid item xs={12}>
+        <Stack sx={{ mb: { xs: -0.5, sm: 0.5 } }} spacing={1}>
+          <Typography variant="h3">Reset Password</Typography>
+          <Typography color="secondary">Please choose your new password</Typography>
+        </Stack>
+      </Grid>
+      <Grid item xs={12}>
+        <AuthResetPassword />
+      </Grid>
+    </Grid>
+  </AuthWrapper>
+);
+
+export default ResetPassword;

src/pages/extra-pages/sample-page.js

@@ -0,0 +1,20 @@
+// material-ui
+import { Typography } from '@mui/material';
+
+// project import
+import MainCard from 'components/MainCard';
+
+// ==============================|| SAMPLE PAGE ||============================== //
+
+const SamplePage = () => (
+  <MainCard title="Sample Card">
+    <Typography variant="body2">
+      Lorem ipsum dolor sit amen, consenter nipissing eli, sed do elusion tempos incident ut laborers et doolie magna alissa. Ut enif ad
+      minim venice, quin nostrum exercitation illampu laborings nisi ut liquid ex ea commons construal. Duos aube grue dolor in reprehended
+      in voltage veil esse colum doolie eu fujian bulla parian. Exceptive sin ocean cuspidate non president, sunk in culpa qui officiate
+      descent molls anim id est labours.
+    </Typography>
+  </MainCard>
+);
+
+export default SamplePage;

src/pages/maintenance/404.js

@@ -0,0 +1,56 @@
+import { Link } from 'react-router-dom';
+
+// project import
+import { APP_DEFAULT_PATH } from 'config';
+
+// material-ui
+import { Box, Button, Grid, Stack, Typography } from '@mui/material';
+
+// assets
+import error404 from 'assets/images/maintenance/Error404.png';
+import TwoCone from 'assets/images/maintenance/TwoCone.png';
+
+// ==============================|| ERROR 404 - MAIN ||============================== //
+
+function Error404() {
+  return (
+    <>
+      <Grid
+        container
+        spacing={10}
+        direction="column"
+        alignItems="center"
+        justifyContent="center"
+        sx={{ minHeight: '100vh', pt: 1.5, pb: 1, overflow: 'hidden' }}
+      >
+        <Grid item xs={12}>
+          <Stack direction="row">
+            <Grid item>
+              <Box sx={{ width: { xs: 250, sm: 590 }, height: { xs: 130, sm: 300 } }}>
+                <img src={error404} alt="mantis" style={{ width: '100%', height: '100%' }} />
+              </Box>
+            </Grid>
+            <Grid item sx={{ position: 'relative' }}>
+              <Box sx={{ position: 'absolute', top: 60, left: -40, width: { xs: 130, sm: 390 }, height: { xs: 115, sm: 330 } }}>
+                <img src={TwoCone} alt="mantis" style={{ width: '100%', height: '100%' }} />
+              </Box>
+            </Grid>
+          </Stack>
+        </Grid>
+        <Grid item xs={12}>
+          <Stack spacing={2} justifyContent="center" alignItems="center">
+            <Typography variant="h1">Page Not Found</Typography>
+            <Typography color="textSecondary" align="center" sx={{ width: { xs: '73%', sm: '61%' } }}>
+              The page you are looking was moved, removed, renamed, or might never exist!
+            </Typography>
+            <Button component={Link} to={APP_DEFAULT_PATH} variant="contained">
+              Back To Home
+            </Button>
+          </Stack>
+        </Grid>
+      </Grid>
+    </>
+  );
+}
+
+export default Error404;

src/pages/maintenance/500.js

@@ -0,0 +1,45 @@
+import { Link } from 'react-router-dom';
+
+// project import
+import { APP_DEFAULT_PATH } from 'config';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { useMediaQuery, Box, Button, Grid, Stack, Typography } from '@mui/material';
+
+// assets
+import error500 from 'assets/images/maintenance/Error500.png';
+
+// ==============================|| ERROR 500 - MAIN ||============================== //
+
+function Error500() {
+  const theme = useTheme();
+  const matchDownSM = useMediaQuery(theme.breakpoints.down('sm'));
+
+  return (
+    <>
+      <Grid container direction="column" alignItems="center" justifyContent="center" sx={{ minHeight: '100vh' }}>
+        <Grid item xs={12}>
+          <Box sx={{ width: { xs: 350, sm: 396 } }}>
+            <img src={error500} alt="mantis" style={{ height: '100%', width: '100%' }} />
+          </Box>
+        </Grid>
+        <Grid item xs={12}>
+          <Stack justifyContent="center" alignItems="center">
+            <Typography align="center" variant={matchDownSM ? 'h2' : 'h1'}>
+              Internal Server Error
+            </Typography>
+            <Typography color="textSecondary" variant="body2" align="center" sx={{ width: { xs: '73%', sm: '70%' }, mt: 1 }}>
+              Server error 500. we fixing the problem. please try again at a later stage.
+            </Typography>
+            <Button component={Link} to={APP_DEFAULT_PATH} variant="contained" sx={{ textTransform: 'none', mt: 4 }}>
+              Back To Home
+            </Button>
+          </Stack>
+        </Grid>
+      </Grid>
+    </>
+  );
+}
+
+export default Error500;

src/pages/maintenance/coming-soon.js

@@ -0,0 +1,94 @@
+import PropTypes from 'prop-types';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { useMediaQuery, Box, Button, Grid, Stack, TextField, Typography } from '@mui/material';
+
+// third party
+import { useTimer } from 'react-timer-hook';
+
+// assets
+import coming from 'assets/images/maintenance/coming-soon.png';
+import MainCard from 'components/MainCard';
+
+// ==============================|| COMING SOON - MAIN ||============================== //
+
+const TimerBox = ({ count, label }) => {
+  const theme = useTheme();
+  const matchDownSM = useMediaQuery(theme.breakpoints.down('sm'));
+
+  return (
+    <MainCard content={false} sx={{ width: { xs: 60, sm: 80 } }}>
+      <Stack justifyContent="center" alignItems="center">
+        <Box sx={{ py: 1.75 }}>
+          <Typography variant={matchDownSM ? 'h4' : 'h2'}>{count}</Typography>
+        </Box>
+        <Box sx={{ p: 0.5, bgcolor: 'secondary.lighter', width: '100%' }}>
+          <Typography align="center" variant="subtitle2">
+            {label}
+          </Typography>
+        </Box>
+      </Stack>
+    </MainCard>
+  );
+};
+
+TimerBox.propTypes = {
+  count: PropTypes.number,
+  label: PropTypes.string
+};
+
+function ComingSoon() {
+  const time = new Date();
+  time.setSeconds(time.getSeconds() + 3600 * 24 * 2 - 3600 * 15.5);
+
+  const { seconds, minutes, hours, days } = useTimer({ expiryTimestamp: time });
+
+  return (
+    <>
+      <Grid container spacing={4} direction="column" alignItems="center" justifyContent="center" sx={{ minHeight: '100vh', py: 2 }}>
+        <Grid item xs={12}>
+          <Box sx={{ height: { xs: 310, sm: 420 }, width: { xs: 360, sm: 'auto' } }}>
+            <img src={coming} alt="mantis" style={{ height: '100%', width: '100%' }} />
+          </Box>
+        </Grid>
+        <Grid item xs={12}>
+          <Stack spacing={1} justifyContent="center" alignItems="center" sx={{ mt: -2 }}>
+            <Typography align="center" variant="h1">
+              Coming Soon
+            </Typography>
+            <Typography align="center" color="textSecondary">
+              Something new is on its way
+            </Typography>
+          </Stack>
+        </Grid>
+        <Grid item xs={12} sx={{ width: { xs: '95%', md: '40%' } }}>
+          <Stack direction="row" alignItems="center" justifyContent="center" spacing={{ xs: 1, sm: 2 }}>
+            <TimerBox count={days} label="day" />
+            <Typography variant="h1"> : </Typography>
+            <TimerBox count={hours} label="hour" />
+            <Typography variant="h1"> : </Typography>
+            <TimerBox count={minutes} label="min" />
+            <Typography variant="h1"> : </Typography>
+            <TimerBox count={seconds} label="sec" />
+          </Stack>
+        </Grid>
+        <Grid item xs={12} sx={{ width: { xs: 380, md: '40%', lg: '30%' } }}>
+          <Stack spacing={2} sx={{ mt: 2 }}>
+            <Typography align="center" color="textSecondary">
+              Be the first to be notified when Mantis launches.
+            </Typography>
+            <Stack direction="row" spacing={1}>
+              <TextField fullWidth placeholder="Email Address" />
+              <Button variant="contained" sx={{ width: '50%' }}>
+                Notify Me
+              </Button>
+            </Stack>
+          </Stack>
+        </Grid>
+      </Grid>
+    </>
+  );
+}
+
+export default ComingSoon;

src/pages/maintenance/under-construction.js

@@ -0,0 +1,39 @@
+import { Link } from 'react-router-dom';
+
+// project import
+import { APP_DEFAULT_PATH } from 'config';
+
+// material-ui
+import { Box, Button, Grid, Stack, Typography } from '@mui/material';
+
+// assets
+import construction from 'assets/images/maintenance/under-construction.svg';
+
+// ==============================|| UNDER CONSTRUCTION - MAIN ||============================== //
+
+function UnderConstruction() {
+  return (
+    <Grid container spacing={4} direction="column" alignItems="center" justifyContent="center" sx={{ minHeight: '100vh', py: 2 }}>
+      <Grid item xs={12}>
+        <Box sx={{ width: { xs: 300, sm: 480 } }}>
+          <img src={construction} alt="mantis" style={{ width: '100%', height: 'auto' }} />
+        </Box>
+      </Grid>
+      <Grid item xs={12}>
+        <Stack spacing={2} justifyContent="center" alignItems="center">
+          <Typography align="center" variant="h1">
+            Under Construction
+          </Typography>
+          <Typography color="textSecondary" align="center" sx={{ width: '85%' }}>
+            Hey! Please check out this site later. We are doing some maintenance on it right now.
+          </Typography>
+          <Button component={Link} to={APP_DEFAULT_PATH} variant="contained">
+            Back To Home
+          </Button>
+        </Stack>
+      </Grid>
+    </Grid>
+  );
+}
+
+export default UnderConstruction;