Skip to content

Commit ded2de9

Browse files
author
Phil
committed
validations and extra fields including binding to inner objects.
1 parent 2a186f9 commit ded2de9

File tree

4 files changed

+78
-21
lines changed

4 files changed

+78
-21
lines changed

‎src/App.css

+13-7
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,28 @@
3333
margin: 5%;
3434
}
3535

36-
FormInput {
37-
display: inline-block;
38-
/* margin: 10px; */
39-
}
40-
4136
.error-placeholder {
42-
display: inline-block;
37+
text-align: left;
4338
color: red;
4439
font-size: x-small;
4540
/* margin: 10px; */
4641
}
4742

4843
placeholder {
49-
font-size: larger;
44+
font-size: small;
5045
}
46+
5147
td {
5248
text-align: left;
5349
padding: 5px;
5450
}
51+
52+
.labeltext {
53+
font-size: small;
54+
}
55+
56+
.formheader {
57+
font-size: xx-large;
58+
color: darkblue;
59+
text-align: center;
60+
}

‎src/adduser.js

+50-7
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
import * as React from 'react';
33
import Link from 'valuelink';
44
import {Input, isEmail} from 'valuelink/tags';
5-
import {isDate} from './utilities.js';
5+
import {isDate, isStrongPassword, isValidPostcode} from './utilities.js';
66
import './App.css';
77

88
const FormInput = (props) => {
99
const {label, ...rest} = props;
1010
return (
1111
<tr>
12-
<td>
12+
<td className='labeltext'>
1313
{label}
1414
</td>
1515
<td>
@@ -41,15 +41,22 @@ class AddUser extends React.Component {
4141
this.state = {
4242
name : '',
4343
email : '',
44+
emailCheck: '',
45+
password: '',
4446
dob: '',
47+
address : {
48+
line1: '',
49+
line2: '',
50+
suburb: '',
51+
postcode: ''
52+
},
4553
isActive : true
4654
};
55+
console.log(this.state);
4756
}
4857

4958
onSubmit = e => {
50-
console.log('pressed');
51-
this.setState({name: '', email: '', dob: '', isActive: true});
52-
console.log(this.state);
59+
this.setState({name: '', email: '', emailCheck: '', password: '',dob: '', isActive: true, address : {line1: '', line2: '', suburb: '', postcode: ''}});
5360
e.preventDefault();
5461
};
5562

@@ -61,24 +68,60 @@ class AddUser extends React.Component {
6168
const emailLink = Link.state(this, 'email')
6269
.check(x => x, 'Email is required')
6370
.check(x => isEmail(x) ,'Must be a valid email address');
71+
72+
const emailCheckLink = Link.state(this,'emailCheck')
73+
.check(x => x, 'Re-enter Email is required')
74+
.check(x => x = this.state.email, 'Emails addresses do not match');
75+
76+
const passwordLink = Link.state(this, 'password')
77+
.check(x => x, 'password is required')
78+
.check(x => isStrongPassword(x), 'Must be 8 characters ');
6479

6580
const dobLink = Link.state(this,'dob')
6681
.check(x => x, 'DOB is required')
6782
.check(x => isDate(x), 'Must be a valid date in format yyyy-mm-dd');
6883

84+
const addressLine1Link = Link.state(this,'address').at('line1')
85+
.check(x => x, 'Address Line 1 is required');
86+
87+
const addressLine2Link = Link.state(this,'address').at('line2');
88+
89+
const addressSuburbLink = Link.state(this,'address').at('suburb')
90+
.check(x => x, 'Suburb is required');;
91+
92+
const addressPostcodeLink = Link.state(this, 'address').at('postcode')
93+
.check(x => x, 'Postcode is required')
94+
.check(x => isValidPostcode(x), 'Postcode should be 4 digits only');
95+
6996
const isActiveLink = Link.state(this,'isActive');
7097

7198
return (
7299
<div className='divStyle'>
73-
<h2>Add User</h2>
100+
{/* <h2>Add User</h2> */}
74101
<form onSubmit={ this.onSubmit }>
75102
<table>
103+
<thead>
104+
<tr />
105+
<tr>
106+
<td />
107+
<td className='formheader'>Add User</td>
108+
<td />
109+
</tr>
110+
<tr />
111+
</thead>
76112
<tbody>
77113
<FormInput label="Name:" valueLink={nameLink} type="text" placeholder="username" size="30" />
78114
<FormInput label="Email:" valueLink={emailLink} type="text" placeholder="email" size="30" />
115+
<FormInput label="Re-Enter Email:" valueLink={emailCheckLink} type="text" placeholder="Re-enter email" size="30" />
116+
<FormInput label="Password:" valueLink={passwordLink} type="password" placeholder="password" />
79117
<FormInput label="DOB:" valueLink={dobLink} type="text" placeholder="Date of Birth - yyyy-mm-dd" size="30" />
80118
<FormInput label="Is active:" valueLink={isActiveLink} type="checkbox" />
81-
<FormButton buttonText="Add User" type="submit" disabled = { nameLink.error || emailLink.error || dobLink.error } />
119+
<FormInput label="Address Line 1:" valueLink={addressLine1Link} type="text" placeholder="Address Line 1" size="30" />
120+
<FormInput label="Address Line 2:" valueLink={addressLine2Link} type="text" placeholder="Address Line 2" size="30" />
121+
<FormInput label="Suburb:" valueLink={addressSuburbLink} type="text" placeholder="Suburb" size="30" />
122+
<FormInput label="Postcode:" valueLink={addressPostcodeLink} type="text" placeholder="Postcode" size="30" />
123+
<FormButton buttonText="Add" type="submit" disabled = { nameLink.error || emailLink.error || dobLink.error } />
124+
<FormButton buttonText="Cancel" />
82125
</tbody>
83126
</table>
84127
</form>

‎src/utilities.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,6 @@
11
var datePattern = /^(\d{4})(\/|-)(\d{1,2})(\/|-)(\d{1,2})$/;
2-
exports.isDate = function (x) { return Boolean(x.match(datePattern)); };
2+
exports.isDate = function (x) { return Boolean(x.match(datePattern)); };
3+
var validPasswordPattern = /^((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])|(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%&\/=?_.,:;\\-])|(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%&\/=?_.,:;\\-])|(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%&\/=?_.,:;\\-])).{8,}$/;
4+
exports.isStrongPassword = function (x) { return Boolean(x.match(validPasswordPattern)); };
5+
var validPostcodePattern = /^(\d{4})$/;
6+
exports.isValidPostcode = function (x) { return Boolean(x.match(validPostcodePattern)); };

‎yarn.lock

+10-6
Original file line numberDiff line numberDiff line change
@@ -5616,9 +5616,9 @@ react-dev-utils@^5.0.1:
56165616
strip-ansi "3.0.1"
56175617
text-table "0.2.0"
56185618

5619-
react-dom@16.4.0:
5620-
version "16.4.0"
5621-
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.0.tgz#099f067dd5827ce36a29eaf9a6cdc7cbf6216b1e"
5619+
react-dom@^16.4.0:
5620+
version "16.4.1"
5621+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.1.tgz#7f8b0223b3a5fbe205116c56deb85de32685dad6"
56225622
dependencies:
56235623
fbjs "^0.8.16"
56245624
loose-envify "^1.1.0"
@@ -5674,9 +5674,9 @@ react-scripts@1.1.4:
56745674
optionalDependencies:
56755675
fsevents "^1.1.3"
56765676

5677-
react@16.4.0:
5678-
version "16.4.0"
5679-
resolved "https://registry.yarnpkg.com/react/-/react-16.4.0.tgz#402c2db83335336fba1962c08b98c6272617d585"
5677+
react@^16.4.0:
5678+
version "16.4.1"
5679+
resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
56805680
dependencies:
56815681
fbjs "^0.8.16"
56825682
loose-envify "^1.1.0"
@@ -6891,6 +6891,10 @@ validate-npm-package-license@^3.0.1:
68916891
spdx-correct "^3.0.0"
68926892
spdx-expression-parse "^3.0.0"
68936893

6894+
valuelink@^1.5.5:
6895+
version "1.5.5"
6896+
resolved "https://registry.yarnpkg.com/valuelink/-/valuelink-1.5.5.tgz#c5eff9e2f5c184ba25c4f4ece2b1138b31e3008e"
6897+
68946898
vary@~1.1.2:
68956899
version "1.1.2"
68966900
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"

0 commit comments

Comments
 (0)