Skip to content

C
concept-front-mojsprat-v2
Commit 51cc0c3f authored by Djordje's avatar Djordje
Browse files
Options

Collect registration info

parent 4a8a1a6c
Hide whitespace changes
Inline Side-by-side
Showing with 123 additions and 31 deletions
src/components/register/Register.tsx
View file @ 51cc0c3f
......@@ -7,7 +7,7 @@ export const Register = () => {
return (
<div className="RegisterWrapper">
<div className="Logo">
<img src={process.env.PUBLIC_URL + '/assets/logo-svg.svg'} alt='logo'/>
<img src={process.env.PUBLIC_URL + '/assets/logo-svg.svg'} alt='logo'/>
</div>
<div className="Form">
<RegisterForm />
......
src/components/register/RegisterForm.tsx
View file @ 51cc0c3f
import { TextField, Box, Typography, Button, styled, ButtonProps, Select, FormControl, InputLabel, MenuItem } from "@mui/material";
import { red } from "@mui/material/colors";
import React from "react";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { getPreRegisterData } from "../../actions/data-manager";
import { RegistrationInfo } from "../../internal-types";
const classes = {
textField: {
......@@ -10,6 +12,9 @@ const classes = {
color: 'rgb(30, 41, 60)'
},
'& .MuiOutlinedInput-root': {
'& input': {
zIndex: '5'
},
'& fieldset': {
borderColor: 'rgb(203, 213, 224)',
backgroundColor: 'white'
......@@ -36,7 +41,10 @@ const classes = {
},
'& svg': {
zIndex: 2
}
},
'& div': {
zIndex: 3
},
},
registerButton: {
......@@ -54,38 +62,111 @@ export const RegisterForm = () => {
let { buildingId } = useParams();
console.log(buildingId);
const [buildingUnits, setBuildingUnits] = useState([]);
const [registerInfo, setRegisterInfo] = useState<RegistrationInfo>({ name: '', lastName: '', email: '', username: '', password: '', mobile: '', units: [] });
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
<Typography sx={{ fontFamily: 'Inter', fontWeight: 'bold' }} variant='h4'>Create Account</Typography>
<Box sx={{ display: 'flex', gap : '20px' }}>
<TextField hiddenLabel variant="outlined" size='small' label="First name" sx={classes.textField} />
<TextField hiddenLabel variant="outlined" size='small' label="Last name" sx={classes.textField} />
</Box>
useEffect(() => {
getPreRegisterData(buildingId, (err: any, data: any, dsp: any) => {
if (err) {
return;
}
<TextField variant="outlined" size='small' label="Email" sx={classes.textField} />
<TextField variant="outlined" size='small' label="Username" sx={classes.textField} />
<TextField variant="outlined" size='small' label="Password" type="password" sx={classes.textField} />
<TextField variant="outlined" size='small' label="Mobile number" type="number" sx={classes.textField} />
<FormControl sx={{ flex: 1 }} size="small">
<InputLabel>Select your units</InputLabel>
<Select
sx={classes.select}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
setBuildingUnits(data.units);
});
}, [])
<Button sx={classes.registerButton} variant='contained'>Register</Button>
useEffect(() => {
console.log(registerInfo.units)
}, [registerInfo.units])
return (
<>
{buildingUnits &&
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
<Typography sx={{ fontFamily: 'Inter', fontWeight: 'bold' }} variant='h4'>Create Account</Typography>
<Box sx={{ display: 'flex', gap: '20px' }}>
<TextField
hiddenLabel
variant="outlined"
size='small'
label="First name"
sx={classes.textField}
value={registerInfo.name}
onChange={(e) => {
setRegisterInfo({ ...registerInfo, name: e.target.value })
}} />
<TextField
hiddenLabel
variant="outlined"
size='small'
label="Last name"
sx={classes.textField}
value={registerInfo.lastName}
onChange={(e) => {
setRegisterInfo({ ...registerInfo, lastName: e.target.value })
}} />
</Box>
<TextField
variant="outlined"
size='small'
label="Email"
sx={classes.textField}
value={registerInfo.email}
onChange={(e) => {
setRegisterInfo({ ...registerInfo, email: e.target.value })
}}
/>
<TextField
variant="outlined"
size='small'
label="Username"
sx={classes.textField}
value={registerInfo.username}
onChange={(e) => {
setRegisterInfo({ ...registerInfo, username: e.target.value })
}}
/>
<TextField
variant="outlined"
size='small'
label="Password"
type="password"
sx={classes.textField}
value={registerInfo.password}
onChange={(e) => {
setRegisterInfo({ ...registerInfo, password: e.target.value })
}}
/>
<TextField
variant="outlined"
size='small'
label="Mobile number"
type="number"
sx={classes.textField}
value={registerInfo.mobile}
onChange={(e) => {
setRegisterInfo({ ...registerInfo, mobile: e.target.value })
}}
/>
<FormControl fullWidth size="small">
<InputLabel>Select your units</InputLabel>
<Select
label="Select your units"
sx={classes.select}
value={registerInfo.units}
multiple
onChange={(e) => {
let units: string[] = typeof e.target.value === 'string' ? e.target.value.split(',') : e.target.value;
setRegisterInfo({...registerInfo, units})
}}
>
{buildingUnits.map((unit: any, index) => <MenuItem value={unit.address} key={index}>{unit.address}</MenuItem>)}
</Select>
</FormControl>
</div>
);
<Button sx={classes.registerButton} variant='contained'>Register</Button>
</div>
}
</>);
};
\ No newline at end of file
src/internal-types.ts 0 → 100644
View file @ 51cc0c3f
export type RegistrationInfo = {
name: string,
lastName: string,
email: string,
username: string,
password: string,
mobile: string,
units: string[]
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment