Refactor registration and login and improve routing
Changes:
- Improve registration and login pages
- Extract Home component from App.tsx file into its own
- Make Home component display registration or login
- Extract routes from App component and refactor routing
GitLab: #12
Change-Id: I68b01890781308282072b6dcf5e6df0d54837b4a
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
new file mode 100644
index 0000000..8a5e3d6
--- /dev/null
+++ b/client/src/pages/Home.tsx
@@ -0,0 +1,94 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program. If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { Box, Grid, Paper, useMediaQuery } from '@mui/material';
+import { Theme, useTheme } from '@mui/material/styles';
+import { useState } from 'react';
+
+import JamiWelcomeLogo from '../components/JamiWelcomeLogo';
+import JamiLogin from './JamiLogin';
+import JamiRegistration from './JamiRegistration';
+
+const borderRadius = 30;
+
+export default function Home() {
+ const theme: Theme = useTheme();
+ const [isRegistrationDisplayed, setIsRegistrationDisplayed] = useState<boolean>(false);
+
+ const child = !isRegistrationDisplayed ? (
+ <JamiLogin register={() => setIsRegistrationDisplayed(true)} />
+ ) : (
+ <JamiRegistration login={() => setIsRegistrationDisplayed(false)} />
+ );
+
+ const isDesktopOrLaptop: boolean = useMediaQuery(theme.breakpoints.up('md'));
+ const isMobile: boolean = useMediaQuery(theme.breakpoints.only('xs'));
+
+ return (
+ <Box
+ sx={{
+ width: '100%',
+ height: '100%',
+ display: 'flex',
+ backgroundColor: `${isDesktopOrLaptop ? theme.palette.primary.dark : 'white'}`,
+ }}
+ >
+ <Paper
+ elevation={10}
+ sx={{
+ width: '100%',
+ backgroundColor: 'white',
+ margin: `${isDesktopOrLaptop ? theme.typography.pxToRem(100) : 0}`,
+ borderRadius: `${isDesktopOrLaptop ? theme.typography.pxToRem(borderRadius) : 0}`,
+ }}
+ >
+ <Grid container spacing={0} sx={{ height: '100%' }}>
+ {!isMobile && (
+ <Grid
+ item
+ xs={6}
+ id="logo"
+ sx={{
+ height: '100%',
+ backgroundColor: theme.palette.secondary.main,
+ borderRadius: `${
+ isDesktopOrLaptop
+ ? `${theme.typography.pxToRem(borderRadius)} 0 0 ${theme.typography.pxToRem(borderRadius)}`
+ : 0
+ }`, // To follow paper border-radius
+ }}
+ >
+ <JamiWelcomeLogo logoWidth="90%" sx={{ height: '100%' }} />
+ </Grid>
+ )}
+ <Grid item xs={isMobile ? 12 : 6} sx={{ height: '100%' }}>
+ {isMobile && (
+ <JamiWelcomeLogo
+ logoWidth={theme.typography.pxToRem(100)}
+ logoHeight={theme.typography.pxToRem(100)}
+ sx={{ mt: theme.typography.pxToRem(30), mb: theme.typography.pxToRem(20) }}
+ />
+ )}
+ <Box className="home-child" sx={{ height: `${isMobile ? 'auto' : '100%'}` }}>
+ {child}
+ </Box>
+ </Grid>
+ </Grid>
+ </Paper>
+ </Box>
+ );
+}