Modifying signup page.

frontend/src/components/authentication/SignUpPage.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import axiosapi from "../../api/AuthenticationApi";
-
 import Avatar from "@mui/material/Avatar";
 import Button from "@mui/material/Button";
 import CssBaseline from "@mui/material/CssBaseline";
@@ -13,8 +12,9 @@ import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 import Typography from "@mui/material/Typography";
-import Container from "@mui/material/Container";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { useCallback } from "react";
+import Particles from "react-tsparticles";
+import { loadFull } from "tsparticles";
 
 function Copyright(props) {
   return (
@@ -29,7 +29,6 @@ function Copyright(props) {
   );
 }
 
-const defaultTheme = createTheme();
 
 export default function SignUp() {
   const Navigate = useNavigate();
@@ -62,27 +61,101 @@ export default function SignUp() {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
   };
+  {
+    /* Particles Loader*/
+  }
+  const particlesInit = useCallback(async (engine) => {
+    console.log(engine);
+    await loadFull(engine);
+  }, []);
+
+  const particlesLoaded = useCallback(async (container) => {
+    console.log(container);
+  }, []);
+
 
   return (
-    <ThemeProvider theme={defaultTheme}>
-      <Container component="main" maxWidth="xs">
-        <CssBaseline />
-        <Box
-          sx={{
-            marginTop: 8,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-          }}>
-          <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
-            <LockOutlinedIcon />
-          </Avatar>
+    <div data-theme="night" className="h-screen flex items-center justify-center">
+      {/* Particles Container */}
+      <div style={{ width: "0%", height: "100vh" }}>
+        <Particles
+          id="particles"
+          init={particlesInit}
+          loaded={particlesLoaded}
+          className="-z-10"
+          options={{
+            fpsLimit: 240,
+            interactivity: {
+              events: {
+                onClick: {
+                  enable: true,
+                  mode: "push",
+                },
+                onHover: {
+                  enable: true,
+                  mode: "repulse",
+                },
+                resize: true,
+              },
+              modes: {
+                push: {
+                  quantity: 4,
+                },
+                repulse: {
+                  distance: 200,
+                  duration: 0.4,
+                },
+              },
+            },
+            particles: {
+              color: {
+                value: "#008000",
+              },
+              links: {
+                color: "#00ff00",
+                distance: 150,
+                enable: true,
+                opacity: 0.1,
+                width: 1,
+              },
+              move: {
+                direction: "none",
+                enable: true,
+                outModes: {
+                  default: "bounce",
+                },
+                random: false,
+                speed: 4,
+                straight: false,
+              },
+              number: {
+                density: {
+                  enable: true,
+                  area: 800,
+                },
+                value: 50,
+              },
+              opacity: {
+                value: 0.5,
+              },
+              shape: {
+                type: "circle",
+              },
+              size: {
+                value: { min: 4, max: 5 },
+              },
+            },
+            detectRetina: true,
+          }}
+        />
+      </div>
+      <div className="w-1/4 flex items-center justify-center">
+        <div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4 z-10">
+          {/* Register Form */}
           <Typography component="h1" variant="h5">
             Sign up
           </Typography>
-          <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
-            <Grid container spacing={2}>
-              <Grid item xs={12}>
+          <form noValidate onSubmit={handleSubmit}>
             <TextField
               required
               fullWidth
@@ -92,8 +165,6 @@ export default function SignUp() {
               autoComplete="email"
               onChange={handleChange}
             />
-              </Grid>
-              <Grid item xs={12}>
             <TextField
               autoComplete="username"
               name="Username"
@@ -104,8 +175,6 @@ export default function SignUp() {
               autoFocus
               onChange={handleChange}
             />
-              </Grid>
-              <Grid item xs={12}>
             <TextField
               required
               fullWidth
@@ -116,28 +185,23 @@ export default function SignUp() {
               autoComplete="new-password"
               onChange={handleChange}
             />
-              </Grid>
-              <Grid item xs={12}>
             <FormControlLabel
               control={<Checkbox value="allowExtraEmails" color="primary" />}
               label="I want to receive inspiration, marketing promotions and updates via email."
             />
-              </Grid>
-            </Grid>
             <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
               Sign Up
             </Button>
-            <Grid container justifyContent="flex-end">
-              <Grid item>
-                <Link href="#" variant="body2">
-                  Already have an account? Sign in
-                </Link>
-              </Grid>
-            </Grid>
-          </Box>
-        </Box>
-        <Copyright sx={{ mt: 5 }} />
-      </Container>
-    </ThemeProvider>
+          {/* Already have an account? */}
+          <div className="justify-left">
+            <a href="#" className="text-blue-500 text-sm text-left">
+            Already have an account?
+            </a>
+          </div>
+          </form>
+        </div>
+      </div>
+    </div>
   );
+  
 }