BE-783 Update User registration UI (#155)

Added the following input form: * Password(confirm) * First name(optional) * Last name(optional) * E-mail(optional) 'Affiliation' was deleted. Signed-off-by: Atsushi Neki <atsushin@fast.au.fujitsu.com>
hyperledger-labs · Jul 30, 2020 · 1f4e832 · 1f4e832
1 parent 5726187
commit 1f4e832
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 17 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -433,7 +433,9 @@
 					"_lifecycle",
 					"bcrypt",
 					"sequelize",
-					"fabricexplorer"
+					"fabricexplorer",
+					"firstname",
+					"lastname"
 				],
 				"skipIfMatch": ["http://[^s]*", "[a-z]scc"],
 				"skipWordIfMatch": ["^foobar.*$"],

diff --git a/app/model/User.js b/app/model/User.js
@@ -32,6 +32,9 @@ const attributes = {
 	password: {
 		type: Sequelize.STRING
 	},
+	roles: {
+		type: Sequelize.STRING
+	},
 	salt: {
 		type: Sequelize.STRING
 	}

diff --git a/app/persistence/fabric/postgreSQL/db/explorerpg.sql b/app/persistence/fabric/postgreSQL/db/explorerpg.sql
@@ -198,6 +198,7 @@ CREATE TABLE users
   "firstName" varchar(255),
   "lastName" varchar(255),
   "password" varchar(255),
+  "roles" varchar(255),
   salt varchar(255),
   "createdAt" timestamp NOT NULL,
   "updatedAt" timestamp NOT NULL

diff --git a/app/platform/fabric/rest/adminroutes.js b/app/platform/fabric/rest/adminroutes.js
@@ -29,6 +29,7 @@ const adminroutes = async function(router, platform) {
 		'/register',
 		responder(async req => {
 			const reqUser = await new User(req.body).asJson();
+			reqUser.network = req.network;
 			return await proxy.register(reqUser);
 		})
 	);

diff --git a/app/platform/fabric/service/UserService.js b/app/platform/fabric/service/UserService.js
@@ -116,7 +116,11 @@ class UserService {
 					username: combinedUserName,
 					salt: salt,
 					password: hashedPassword,
-					networkName: user.network
+					networkName: user.network,
+					firstName: user.firstname,
+					lastName: user.lastname,
+					email: user.email ? user.email : null,
+					roles: user.roles
 				};
 
 				await Model.User.create(newUser)

diff --git a/client/src/components/Register/Register.js b/client/src/components/Register/Register.js
@@ -90,22 +90,35 @@ export class Register extends Component {
 				error: null,
 				value: ''
 			},
+			firstname: {
+				error: null,
+				value: ''
+			},
+			lastname: {
+				error: null,
+				value: ''
+			},
+			email: {
+				error: null,
+				value: ''
+			},
 			password: {
 				error: null,
 				value: ''
 			},
-			affiliation: {
+			password2: {
 				error: null,
 				value: ''
 			},
 			roles: {
 				error: null,
 				value: ''
 			},
-			rolesList: ['admin', 'reader', 'user'],
+			rolesList: ['admin', 'user'],
 			error: '',
 			registered,
-			isLoading: false
+			isLoading: false,
+			allValid: false
 		};
 	}
 
@@ -124,19 +137,70 @@ export class Register extends Component {
 		this.setState({
 			[name]: { value }
 		});
+
+		let password2 = {};
+		if (name === 'password') {
+			if (
+				this.state.password2.value.length &&
+				value !== this.state.password2.value
+			) {
+				password2 = {
+					value: this.state.password2.value,
+					error: 'The password confirmation does not match.'
+				};
+			} else {
+				password2 = { value: this.state.password2.value, error: null };
+			}
+		} else if (name === 'password2') {
+			if (
+				this.state.password.value.length &&
+				value !== this.state.password.value
+			) {
+				password2 = { value, error: 'The password confirmation does not match.' };
+			} else {
+				password2 = { value, error: null };
+			}
+		} else {
+			password2 = this.state.password2;
+		}
+
+		this.setState({ password2 }, () => {
+			if (
+				this.state.user.value &&
+				this.state.password.value &&
+				this.state.password2.value &&
+				this.state.roles.value &&
+				!this.state.password2.error
+			) {
+				this.setState({ allValid: true });
+			} else if (this.state.allValid) {
+				this.setState({ allValid: false });
+			}
+		});
 	};
 
 	submitForm = async e => {
 		e.preventDefault();
 
 		const { register } = this.props;
-		const { user, password, affiliation, roles } = this.state;
+		const {
+			user,
+			password,
+			password2,
+			roles,
+			firstname,
+			lastname,
+			email
+		} = this.state;
 
 		const userInfo = {
 			user: user.value,
 			password: password.value,
-			affiliation: affiliation.value,
-			roles: roles.value
+			password2: password2.value,
+			roles: roles.value,
+			firstname: firstname.value,
+			lastname: lastname.value,
+			email: email.value
 		};
 
 		const info = await register(userInfo);
@@ -151,8 +215,11 @@ export class Register extends Component {
 			info,
 			user,
 			password,
-			affiliation,
+			password2,
 			roles,
+			firstname,
+			lastname,
+			email,
 			rolesList,
 			isLoading
 		} = this.state;
@@ -193,6 +260,57 @@ export class Register extends Component {
 								</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"
+							/>
+							{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"
+							/>
+							{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"
+							/>
+							{email.error && (
+								<FormHelperText id="component-error-text" error>
+									{email.error}
+								</FormHelperText>
+							)}
+						</FormControl>
 						<FormControl margin="normal" required fullWidth>
 							<TextField
 								required
@@ -215,20 +333,21 @@ export class Register extends Component {
 						</FormControl>
 						<FormControl margin="normal" required fullWidth>
 							<TextField
-								error={!!affiliation.error}
+								error={!!password2.error}
 								required
 								fullWidth
-								id="affiliation"
-								name="affiliation"
-								label="Affiliation"
+								id="password2"
+								type="password"
+								name="password2"
+								label="Password(confirm)"
 								disabled={isLoading}
-								value={affiliation.value}
+								value={password2.value}
 								onChange={e => this.handleChange(e)}
 								margin="normal"
 							/>
-							{affiliation.error && (
+							{password2.error && (
 								<FormHelperText id="component-error-text" error>
-									{affiliation.error}
+									{password2.error}
 								</FormHelperText>
 							)}
 						</FormControl>
@@ -287,7 +406,13 @@ export class Register extends Component {
 								</Button>
 							</Grid>
 							<Grid item>
-								<Button type="submit" fullWidth variant="contained" color="primary">
+								<Button
+									disabled={!this.state.allValid}
+									type="submit"
+									fullWidth
+									variant="contained"
+									color="primary"
+								>
 									Register
 								</Button>
 							</Grid>