Separate Client Portal & Dashboard

2022-05-23 10:38:16 +07:00
parent f2e84e6244
commit 89bb57f357
569 changed files with 60252 additions and 280 deletions
--- a/frontend/client-portal/src/pages/auth/Register.tsx
+++ b/frontend/client-portal/src/pages/auth/Register.tsx
@@ -0,0 +1,148 @@
+import { capitalCase } from 'change-case';
+import { Link as RouterLink } from 'react-router-dom';
+// @mui
+import { styled } from '@mui/material/styles';
+import { Box, Card, Link, Container, Typography, Tooltip } from '@mui/material';
+// hooks
+import useAuth from '../../hooks/useAuth';
+import useResponsive from '../../hooks/useResponsive';
+// routes
+import { PATH_AUTH } from '../../routes/paths';
+// components
+import Page from '../../components/Page';
+import Logo from '../../components/Logo';
+import Image from '../../components/Image';
+// sections
+import { RegisterForm } from '../../sections/auth/register';
+
+// ----------------------------------------------------------------------
+
+const RootStyle = styled('div')(({ theme }) => ({
+  [theme.breakpoints.up('md')]: {
+    display: 'flex',
+  },
+}));
+
+const HeaderStyle = styled('header')(({ theme }) => ({
+  top: 0,
+  zIndex: 9,
+  lineHeight: 0,
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  position: 'absolute',
+  padding: theme.spacing(3),
+  justifyContent: 'space-between',
+  [theme.breakpoints.up('md')]: {
+    alignItems: 'flex-start',
+    padding: theme.spacing(7, 5, 0, 7),
+  },
+}));
+
+const SectionStyle = styled(Card)(({ theme }) => ({
+  width: '100%',
+  maxWidth: 464,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  margin: theme.spacing(2, 0, 2, 2),
+}));
+
+const ContentStyle = styled('div')(({ theme }) => ({
+  maxWidth: 480,
+  margin: 'auto',
+  display: 'flex',
+  minHeight: '100vh',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  padding: theme.spacing(12, 0),
+}));
+
+// ----------------------------------------------------------------------
+
+export default function Register() {
+  const { method } = useAuth();
+
+  const smUp = useResponsive('up', 'sm');
+
+  const mdUp = useResponsive('up', 'md');
+
+  return (
+    <Page title="Register">
+      <RootStyle>
+        <HeaderStyle>
+          <Logo />
+          {smUp && (
+            <Typography variant="body2" sx={{ mt: { md: -2 } }}>
+              Already have an account? {''}
+              <Link variant="subtitle2" component={RouterLink} to={PATH_AUTH.login}>
+                Login
+              </Link>
+            </Typography>
+          )}
+        </HeaderStyle>
+
+        {mdUp && (
+          <SectionStyle>
+            <Typography variant="h3" sx={{ px: 5, mt: 10, mb: 5 }}>
+              Manage the job more effectively with Minimal
+            </Typography>
+            <Image
+              visibleByDefault
+              disabledEffect
+              alt="register"
+              src="https://minimal-assets-api.vercel.app/assets/illustrations/illustration_register.png"
+            />
+          </SectionStyle>
+        )}
+
+        <Container>
+          <ContentStyle>
+            <Box sx={{ mb: 5, display: 'flex', alignItems: 'center' }}>
+              <Box sx={{ flexGrow: 1 }}>
+                <Typography variant="h4" gutterBottom>
+                  Get started absolutely free.
+                </Typography>
+                <Typography sx={{ color: 'text.secondary' }}>
+                  Free forever. No credit card needed.
+                </Typography>
+              </Box>
+              <Tooltip title={capitalCase(method)}>
+                <>
+                  <Image
+                    disabledEffect
+                    src={`https://minimal-assets-api.vercel.app/assets/icons/auth/ic_${method}.png`}
+                    sx={{ width: 32, height: 32 }}
+                  />
+                </>
+              </Tooltip>
+            </Box>
+
+            <RegisterForm />
+
+            <Typography variant="body2" align="center" sx={{ color: 'text.secondary', mt: 3 }}>
+              By registering, I agree to Minimal&nbsp;
+              <Link underline="always" color="text.primary" href="#">
+                Terms of Service
+              </Link>
+              {''}and{''}
+              <Link underline="always" color="text.primary" href="#">
+                Privacy Policy
+              </Link>
+              .
+            </Typography>
+
+            {!smUp && (
+              <Typography variant="body2" sx={{ mt: 3, textAlign: 'center' }}>
+                Already have an account?{' '}
+                <Link variant="subtitle2" to={PATH_AUTH.login} component={RouterLink}>
+                  Login
+                </Link>
+              </Typography>
+            )}
+          </ContentStyle>
+        </Container>
+      </RootStyle>
+    </Page>
+  );
+}