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 = () => { ...@@ -7,7 +7,7 @@ export const Register = () => {
return ( return (
<div className="RegisterWrapper"> <div className="RegisterWrapper">
<div className="Logo"> <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>
<div className="Form"> <div className="Form">
<RegisterForm /> <RegisterForm />
......
src/components/register/RegisterForm.tsx
View file @ 51cc0c3f
import { TextField, Box, Typography, Button, styled, ButtonProps, Select, FormControl, InputLabel, MenuItem } from "@mui/material"; import { TextField, Box, Typography, Button, styled, ButtonProps, Select, FormControl, InputLabel, MenuItem } from "@mui/material";
import { red } from "@mui/material/colors"; import { red } from "@mui/material/colors";
import React from "react"; import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { getPreRegisterData } from "../../actions/data-manager";
import { RegistrationInfo } from "../../internal-types";
const classes = { const classes = {
textField: { textField: {
...@@ -10,6 +12,9 @@ const classes = { ...@@ -10,6 +12,9 @@ const classes = {
color: 'rgb(30, 41, 60)' color: 'rgb(30, 41, 60)'
}, },
'& .MuiOutlinedInput-root': { '& .MuiOutlinedInput-root': {
'& input': {
zIndex: '5'
},
'& fieldset': { '& fieldset': {
borderColor: 'rgb(203, 213, 224)', borderColor: 'rgb(203, 213, 224)',
backgroundColor: 'white' backgroundColor: 'white'
...@@ -36,7 +41,10 @@ const classes = { ...@@ -36,7 +41,10 @@ const classes = {
}, },
'& svg': { '& svg': {
zIndex: 2 zIndex: 2
} },
'& div': {
zIndex: 3
},
}, },
registerButton: { registerButton: {
...@@ -54,38 +62,111 @@ export const RegisterForm = () => { ...@@ -54,38 +62,111 @@ export const RegisterForm = () => {
let { buildingId } = useParams(); let { buildingId } = useParams();
console.log(buildingId); const [buildingUnits, setBuildingUnits] = useState([]);
const [registerInfo, setRegisterInfo] = useState<RegistrationInfo>({ name: '', lastName: '', email: '', username: '', password: '', mobile: '', units: [] });
return ( useEffect(() => {
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}> getPreRegisterData(buildingId, (err: any, data: any, dsp: any) => {
<Typography sx={{ fontFamily: 'Inter', fontWeight: 'bold' }} variant='h4'>Create Account</Typography> if (err) {
<Box sx={{ display: 'flex', gap : '20px' }}> return;
<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>
<TextField variant="outlined" size='small' label="Email" sx={classes.textField} /> setBuildingUnits(data.units);
<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>
<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