TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-19 22:14:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Modifying signup page.

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2023-11-19 19:47:37 +07:00
parent fd3e92f3fd
commit 5d86550382
1 changed files with 137 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
frontend/src/components/authentication/SignUpPage.jsx
View File

@ -1,7 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import axiosapi from "../../api/AuthenticationApi"; import axiosapi from "../../api/AuthenticationApi";
import Avatar from "@mui/material/Avatar"; import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import CssBaseline from "@mui/material/CssBaseline"; import CssBaseline from "@mui/material/CssBaseline";
@ -13,8 +12,9 @@ import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined"; import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container"; import { useCallback } from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles"; import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
function Copyright(props) { function Copyright(props) {
return ( return (
@ -29,7 +29,6 @@ function Copyright(props) {
); );
} }
const defaultTheme = createTheme();
export default function SignUp() { export default function SignUp() {
const Navigate = useNavigate(); const Navigate = useNavigate();
@ -62,82 +61,147 @@ export default function SignUp() {
const { name, value } = e.target; const { name, value } = e.target;
setFormData({ ...formData, [name]: value }); 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 ( return (
<ThemeProvider theme={defaultTheme}> <div data-theme="night" className="h-screen flex items-center justify-center">
<Container component="main" maxWidth="xs"> {/* Particles Container */}
<CssBaseline /> <div style={{ width: "0%", height: "100vh" }}>
<Box <Particles
sx={{ id="particles"
marginTop: 8, init={particlesInit}
display: "flex", loaded={particlesLoaded}
flexDirection: "column", className="-z-10"
alignItems: "center", options={{
}}> fpsLimit: 240,
<Avatar sx={{ m: 1, bgcolor: "secondary.main" }}> interactivity: {
<LockOutlinedIcon /> events: {
</Avatar> 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"> <Typography component="h1" variant="h5">
Sign up Sign up
</Typography> </Typography>
<Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}> <form noValidate onSubmit={handleSubmit}>
<Grid container spacing={2}> <TextField
<Grid item xs={12}> required
<TextField fullWidth
required id="email"
fullWidth label="Email Address"
id="email" name="email"
label="Email Address" autoComplete="email"
name="email" onChange={handleChange}
autoComplete="email" />
onChange={handleChange} <TextField
/> autoComplete="username"
</Grid> name="Username"
<Grid item xs={12}> required
<TextField fullWidth
autoComplete="username" id="Username"
name="Username" label="Username"
required autoFocus
fullWidth onChange={handleChange}
id="Username" />
label="Username" <TextField
autoFocus required
onChange={handleChange} fullWidth
/> name="password"
</Grid> label="Password"
<Grid item xs={12}> type="password"
<TextField id="password"
required autoComplete="new-password"
fullWidth onChange={handleChange}
name="password" />
label="Password" <FormControlLabel
type="password" control={<Checkbox value="allowExtraEmails" color="primary" />}
id="password" label="I want to receive inspiration, marketing promotions and updates via email."
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 }}> <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
Sign Up Sign Up
</Button> </Button>
<Grid container justifyContent="flex-end"> {/* Already have an account? */}
<Grid item> <div className="justify-left">
<Link href="#" variant="body2"> <a href="#" className="text-blue-500 text-sm text-left">
Already have an account? Sign in Already have an account?
</Link> </a>
</Grid> </div>
</Grid> </form>
</Box> </div>
</Box> </div>
<Copyright sx={{ mt: 5 }} /> </div>
</Container>
</ThemeProvider>
); );
} }