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;