Skip to content

Register Form #389

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Register Form #389

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5ea9f1f
UI Channel Form
hs05june May 12, 2023
0d5c121
Register Form
hs05june May 15, 2023
d934a16
Revert "UI Channel Form"
hs05june May 15, 2023
150d880
Merge branch 'hyperledger-labs:main' into main
hs05june Jun 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
221 changes: 132 additions & 89 deletions client/src/components/Register/Register.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ import { connect } from 'react-redux';

import { withStyles } from '@material-ui/core/styles';

import AccountCircle from '@material-ui/icons/AccountCircle';
import Add from '@material-ui/icons/Add';
import Avatar from '@material-ui/core/Avatar';
import Email from '@material-ui/icons/Email';
import Lock from '@material-ui/icons/Lock';
import Person from '@material-ui/icons/Person';
import Translate from '@material-ui/icons/Translate';
import { Box } from '@material-ui/core';
import Button from '@material-ui/core/Button';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
Expand Down Expand Up @@ -36,6 +44,14 @@ const styles = theme => ({
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing.unit
},
icons: {
marginRight: '5px',
marginBottom: '10px'
},
avatar: {
margin: theme.spacing.unit,
backgroundColor: theme.palette.secondary.main
},
title: {
marginTop: theme.spacing.unit * 2
},
Expand Down Expand Up @@ -258,6 +274,9 @@ export class Register extends Component {
return (
<Container>
<Paper className={classes.paper}>
<Avatar className={classes.avatar}>
<Add />
</Avatar>
<Typography className={classes.title} component="h5" variant="headline">
Register User
</Typography>
Expand All @@ -274,135 +293,159 @@ export class Register extends Component {
</MuiDialogTitle>
<form className={classes.form} onSubmit={this.submitForm}>
<FormControl margin="normal" required fullWidth>
<TextField
required
fullWidth
id="user"
name="user"
label="User"
disabled={isLoading}
value={user.value}
onChange={e => this.handleChange(e)}
margin="normal"
/>
{user.error && (
<Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
<AccountCircle
sx={{ color: 'action.active' }}
className={classes.icons}
/>
<TextField
required
fullWidth
id="user"
name="user"
label="User"
disabled={isLoading}
value={user.value}
onChange={e => this.handleChange(e)}
margin="normal"
/>
</Box>
{!user.error && (
<FormHelperText id="component-error-text" error>
{user.error}
</FormHelperText>
)}
</FormControl>
<FormControl margin="normal" required fullWidth>
<TextField
fullWidth
id="firstname"
name="firstname"
label="First name"
disabled={isLoading}
value={firstname.value}
onChange={e => this.handleChange(e)}
margin="normal"
/>
<Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
<Translate sx={{ color: 'action.active' }} className={classes.icons} />
<TextField
fullWidth
id="firstname"
name="firstname"
label="First name"
disabled={isLoading}
value={firstname.value}
onChange={e => this.handleChange(e)}
margin="normal"
/>
</Box>
{firstname.error && (
<FormHelperText id="component-error-text" error>
{firstname.error}
</FormHelperText>
)}
</FormControl>
<FormControl margin="normal" required fullWidth>
<TextField
fullWidth
id="lastname"
name="lastname"
label="Last name"
disabled={isLoading}
value={lastname.value}
onChange={e => this.handleChange(e)}
margin="normal"
/>
<Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
<Translate sx={{ color: 'action.active' }} className={classes.icons} />
<TextField
fullWidth
id="lastname"
name="lastname"
label="Last name"
disabled={isLoading}
value={lastname.value}
onChange={e => this.handleChange(e)}
margin="normal"
/>
</Box>
{lastname.error && (
<FormHelperText id="component-error-text" error>
{lastname.error}
</FormHelperText>
)}
</FormControl>
<FormControl margin="normal" required fullWidth>
<TextField
fullWidth
id="email"
name="email"
label="E-mail address"
disabled={isLoading}
value={email.value}
onChange={e => this.handleChange(e)}
margin="normal"
/>
<Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
<Email sx={{ color: 'action.active' }} className={classes.icons} />
<TextField
fullWidth
id="email"
name="email"
label="E-mail address"
disabled={isLoading}
value={email.value}
onChange={e => this.handleChange(e)}
margin="normal"
/>
</Box>
{email.error && (
<FormHelperText id="component-error-text" error>
{email.error}
</FormHelperText>
)}
</FormControl>
<FormControl margin="normal" required fullWidth>
<TextField
required
fullWidth
error={!!password.error}
id="password"
type="password"
name="password"
label="Password"
disabled={isLoading}
value={password.value}
onChange={e => this.handleChange(e)}
margin="normal"
/>
<Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
<Lock sx={{ color: 'action.active' }} className={classes.icons} />
<TextField
required
fullWidth
error={!!password.error}
id="password"
type="password"
name="password"
label="Password"
disabled={isLoading}
value={password.value}
onChange={e => this.handleChange(e)}
margin="normal"
/>
</Box>
{password.error && (
<FormHelperText id="component-error-text" error>
{password.error}
</FormHelperText>
)}
</FormControl>
<FormControl margin="normal" required fullWidth>
<TextField
error={!!password2.error}
required
fullWidth
id="password2"
type="password"
name="password2"
label="Password(confirm)"
disabled={isLoading}
value={password2.value}
onChange={e => this.handleChange(e)}
margin="normal"
/>
<Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
<Lock sx={{ color: 'action.active' }} className={classes.icons} />
<TextField
error={!!password2.error}
required
fullWidth
id="password2"
type="password"
name="password2"
label="Password(confirm)"
disabled={isLoading}
value={password2.value}
onChange={e => this.handleChange(e)}
margin="normal"
/>
</Box>
{password2.error && (
<FormHelperText id="component-error-text" error>
{password2.error}
</FormHelperText>
)}
</FormControl>
<FormControl margin="normal" required fullWidth>
<TextField
required
fullWidth
select
error={!!roles.error}
id="roles"
type="roles"
name="roles"
label="Roles"
disabled={isLoading}
value={roles.value}
onChange={e => this.handleChange(e)}
margin="normal"
>
{rolesList.map(item => (
<MenuItem key={item} value={item}>
{item}
</MenuItem>
))}
</TextField>
<Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
<Person sx={{ color: 'action.active' }} className={classes.icons} />
<TextField
required
fullWidth
select
error={!!roles.error}
id="roles"
type="roles"
name="roles"
label="Roles"
disabled={isLoading}
value={roles.value}
onChange={e => this.handleChange(e)}
margin="normal"
>
{rolesList.map(item => (
<MenuItem key={item} value={item}>
{item}
</MenuItem>
))}
</TextField>
</Box>
{roles.error && (
<FormHelperText id="component-error-text" error>
{roles.error}
Expand All @@ -428,7 +471,7 @@ export class Register extends Component {
container
spacing={16}
direction="row"
justify="flex-end"
justifyContent="space-between"
className={classes.actions}
>
<Grid item>
Expand Down