Skip to content

Commit

Permalink
Merge pull request #92 from AugurProject/updateRegistrationFlow
Browse files Browse the repository at this point in the history 
Update registration flow
  • Loading branch information
@JohnDanz
JohnDanz committed Aug 29, 2016
2 parents 49d45ea + b2b6417 commit 3b2008b
Show file tree
Hide file tree
Showing 10 changed files with 121 additions and 75 deletions.
36 changes: 18 additions & 18 deletions build/components.jsx
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/styles.css
View file

Large diffs are not rendered by default.

11 changes: 7 additions & 4 deletions lib/assertions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,9 @@ exports.default = function (authForm) {
// assert.isDefined(authForm.className, `authForm.className isn't defined`);
// assert.isString(authForm.className, `authForm.className isn't a string`);

_chai.assert.isDefined(authForm.instruction, 'authForm.instruction isn\'t defined');
_chai.assert.isString(authForm.instruction, 'authForm.instruction isn\'t a string');

_chai.assert.isDefined(authForm.isVisibleName, 'authForm.isVisibleName isn\'t defined');
_chai.assert.isBoolean(authForm.isVisibleName, 'authForm.isVisibleName isn\'t a boolean');

Expand Down Expand Up @@ -1156,11 +1159,11 @@ exports.default = function (loginAccount) {
_chai.assert.isDefined(loginAccount.linkText, 'loginAccount.linkText isn\'t defined');
_chai.assert.isString(loginAccount.linkText, 'loginAccount.linkText isn\'t a string');

_chai.assert.isDefined(loginAccount.secureLoginID, 'loginAccount.secureLoginID isn\'t defined');
_chai.assert.isString(loginAccount.secureLoginID, 'loginAccount.secureLoginID isn\'t a string');
_chai.assert.isDefined(loginAccount.loginID, 'loginAccount.loginID isn\'t defined');
_chai.assert.isString(loginAccount.loginID, 'loginAccount.loginID isn\'t a string');

_chai.assert.isDefined(loginAccount.prettySecureLoginID, 'loginAccount.prettySecureLoginID isn\'t defined');
_chai.assert.isString(loginAccount.prettySecureLoginID, 'loginAccount.prettySecureLoginID isn\'t a string');
_chai.assert.isDefined(loginAccount.prettyLoginID, 'loginAccount.prettyLoginID isn\'t defined');
_chai.assert.isString(loginAccount.prettyLoginID, 'loginAccount.prettyLoginID isn\'t a string');

_chai.assert.isDefined(loginAccount.prettyAddress, 'loginAccount.prettyAddress isn\'t defined');
_chai.assert.isString(loginAccount.prettyAddress, 'loginAccount.prettyAddress isn\'t a string');
Expand Down
6 changes: 3 additions & 3 deletions src/modules/account/components/account-page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,15 +109,15 @@ export default class AccountPage extends Component {
</tr>

<tr className={classnames('account-info-item', { displayNone: p.account.localNode })}>
<th className="title">Secure Login ID:</th>
<th className="title">Login ID:</th>
<td className="item">
{!s.showFullID &&
<span>
{p.account.prettySecureLoginID}
{p.account.prettyLoginID}
</span>
}
{s.showFullID &&
<textarea className="full-secure-login-id" value={p.account.secureLoginID} readOnly />
<textarea className="full-secure-login-id" value={p.account.loginID} readOnly />
}
<button
className="link"
Expand Down
64 changes: 45 additions & 19 deletions src/modules/auth/components/auth-form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default class AuthForm extends Component {
static propTypes = {
className: PropTypes.string,
title: PropTypes.string,
secureLoginID: PropTypes.string,
loginID: PropTypes.string,
rememberMe: PropTypes.bool,
passwordPlaceholder: PropTypes.string,
password2Placeholder: PropTypes.string,
Expand All @@ -34,24 +34,26 @@ export default class AuthForm extends Component {
};

static defaultProps = {
rememberMe: false
rememberMe: true
};

constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.handlePasswordInput = this.handlePasswordInput.bind(this);
if (new FileReader()) {
this.fileReader = new FileReader();
}
this.state = {
msg: this.props.msg,
secureLoginID: this.props.secureLoginID,
rememberMe: this.props.rememberMe || true
loginID: this.props.loginID,
rememberMe: this.props.rememberMe,
disableInputs: false
};
}

componentWillReceiveProps(nextProps) {
this.setState({ msg: nextProps.msg, secureLoginID: nextProps.secureLoginID });
this.setState({ msg: nextProps.msg, showID: nextProps.isVisibleID });
}

componentDidUpdate() {
Expand All @@ -69,24 +71,39 @@ export default class AuthForm extends Component {

handleSubmit = (e) => {
e.preventDefault();
const name = this.refs.name.value;
const secureLoginID = this.state.secureLoginID;
const name = this.refs.accountName.value;
const loginID = this.state.loginID;
const password = this.refs.password.value;
const password2 = this.refs.password2.value;
const rememberMe = this.state.rememberMe;
const file = (this.refs.form[1].files[0] !== undefined);
console.log(file);
this.setState({ msg: '', disableInputs: false });

if (file && this.fileReader) {
this.fileReader.readAsText(this.refs.form[1].files[0]);
this.fileReader.onload = (e) => {
const importAccount = JSON.parse(e.target.result);
setTimeout(() => this.props.onSubmit(name, password, password2, secureLoginID, rememberMe, importAccount), 100);
setTimeout(() => this.props.onSubmit(name, password, password2, loginID, rememberMe, importAccount, undefined), 300);
};
} else {
setTimeout(() => this.props.onSubmit(name, password, password2, secureLoginID, rememberMe, undefined), 100);
setTimeout(() => this.props.onSubmit(name, password, password2, loginID, rememberMe, undefined, undefined), 300);
}
return false;
}

handlePasswordInput = (e) => {
e.preventDefault();
const name = this.refs.accountName.value;
const loginID = this.state.loginID;
const password = this.refs.password.value;
const password2 = this.refs.password2.value;
const rememberMe = this.state.rememberMe;

this.setState({ msg: '' });
if (password !== '' && password2 !== '') {
setTimeout(() => this.props.onSubmit(name, password, password2, loginID, rememberMe, undefined, (loginAccount) => {
this.setState({ loginID: loginAccount.loginID, disableInputs: true });
}), 300);
}
}

render() {
Expand All @@ -107,35 +124,39 @@ export default class AuthForm extends Component {
</Link>
}
</h1>
{p.instruction && <p className={classnames('instruction')}>{p.instruction}</p>}
{s.msg &&
<span className={classnames('msg', p.msgClass)}>
{s.msg}
</span>
}
<input
ref="name"
ref="accountName"
className={classnames('auth-input', { displayNone: !p.isVisibleName })}
type="text"
placeholder="name"
placeholder="account name"
maxLength="30"
autoFocus="autofocus"
disabled={s.disableInputs}
/>
<input
name="importAccount"
className={classnames('auth-input', { displayNone: !p.isVisibleFileInput })}
type="file"
placeholder="Import Account"
autoFocus="autofocus"
disabled={s.disableInputs}
/>
<Input
name="secureLoginID"
ref={(ref) => { if (ref && ref.state.value !== s.secureLoginID) { this.setState({ secureLoginID: ref.state.value }); } }}
className={classnames('secure-login-id-input', { displayNone: !p.isVisibleID })}
name="loginID"
ref={(ref) => { if (ref && ref.state.value !== s.loginID) { this.setState({ loginID: ref.state.value }); } }}
className={classnames('login-id-input', { displayNone: !p.isVisibleID })}
type="text"
value={s.secureLoginID}
placeholder="secure login ID"
value={s.loginID}
placeholder="Login ID"
autoFocus="autofocus"
onChange={(secureLoginID) => this.setState({ secureLoginID })}
onChange={(loginID) => this.setState({ loginID })}
disabled={s.disableInputs}
/>
<input
ref="password"
Expand All @@ -144,13 +165,17 @@ export default class AuthForm extends Component {
defaultValue={p.password}
placeholder={p.passwordPlaceholder || 'password'}
maxLength="256"
onChange={this.handlePasswordInput}
disabled={s.disableInputs}
/>
<input
ref="password2"
className={classnames('auth-input', { displayNone: !p.isVisiblePassword2 })}
type="password"
placeholder={p.password2Placeholder || 'confirm password'}
maxLength="256"
onChange={this.handlePasswordInput}
disabled={s.disableInputs}
/>
<div className={classnames('bottom-container')}>
<Link
Expand Down Expand Up @@ -182,6 +207,7 @@ export default class AuthForm extends Component {
>
&#xf057;
</Link>
<p className={classnames('instruction')}>Passwords must be at least 6 characters in length. Passwords should contain at least one number, one lowercase letter, and one uppercase letter.</p>
</form>
);
}
Expand Down
7 changes: 5 additions & 2 deletions src/modules/auth/less/auth.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@
margin: 1vmin 0 2vmin 0;
font-size: 140%;
}

.instruction {
margin: .5em 0;
font-size: .8em;
}
.msg {
display: inline-block; position: relative;
margin: 0; padding: 0 0 0 1.6vmin;
Expand Down Expand Up @@ -58,7 +61,7 @@
padding: 3vmin 3vmin;
}

.secure-login-id-input {
.login-id-input {
display: block; position: relative;
width: 100%;

Expand Down
55 changes: 33 additions & 22 deletions src/selectors/auth-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,19 @@ const loginParts = {
isVisiblePassword2: false,
isVisibleRememberMe: true,
topLinkText: 'Sign Up',
instruction: 'Please enter your Login ID and password below.'
};

const signUp = {
...Shared,
submitButtonClass: 'register-button',
submitButtonText: 'Generate Account',
submitButtonText: 'Sign In',
title: 'Sign Up',
isVisibleName: true,
isVisibleName: false,
isVisibleID: false,
isVisiblePassword2: true,
isVisibleRememberMe: false,
instruction: 'Please enter your password, then enter it again to generate an account. Once your account has been generated you can hit the Sign Up button to start using Augur. Don\'t forget to copy down your Login ID.',
topLinkText: 'login',
onSubmit: SignUpOnSubmit,
topLink: {
Expand All @@ -52,22 +54,22 @@ const signUp = {
}
};

const logIn = {
...Shared,
...loginParts,
topLink: {
href: '/register',
onClick: () => {
require('../selectors').update({ authForm: { ...signUp, clearPassword: true, clearName: true } });
}
},
onSubmit: (name, password, password2, secureLoginID, rememberMe) => {
require('../selectors').update({ authForm: { ...signUp, clearName: true,
clearPassword: true } });
loginAccount.signIn();
require('../selectors').update({ activePage: 'account' });
}
};
// const logIn = {
// ...Shared,
// ...loginParts,
// topLink: {
// href: '/register',
// onClick: () => {
// require('../selectors').update({ authForm: { ...signUp, clearPassword: true, clearName: true } });
// }
// },
// onSubmit: (name, password, password2, secureLoginID, rememberMe) => {
// require('../selectors').update({ authForm: { ...signUp, clearName: true,
// clearPassword: true } });
// loginAccount.signIn();
// require('../selectors').update({ activePage: 'account' });
// }
// };

const importAccount = {
...signUp,
Expand All @@ -77,6 +79,7 @@ const importAccount = {
bottomLinkText: 'Sign Up',
submitButtonClass: 'login-button',
submitButtonText: 'Import Account',
instruction: 'Please upload your account file and enter the password to unlock the uploaded account.',
bottomLink: {
href: '/register',
onClick: () => {
Expand All @@ -87,23 +90,31 @@ const importAccount = {
require('../selectors').update({ authForm: { ...signUp, clearName: true,
clearPassword: true } });
loginAccount.signIn();
require('../selectors').update({ activePage: 'account' });
return () => { require('../selectors').update({ activePage: 'account' }); };
}
};

const accountCreated = {
...logIn,
...signUp,
isVisibleID: true,
msg: 'Success! Your account has been generated locally. We do not retain a copy. *It is critical that you save this information in a safe place.*',
secureLoginID: 'testID123ASDW3N193NF7V123ADW25579130239SE1235189ADJWKRUY8123AOUELOREMIPSUMDOLORSITAMETCONSECTETURADIPISICINGELITSEDDOEIUSMODTEMPORINCIDIDUNTUTLABOREETDOLOREMAGNAALIQUAUTENIMADMINIMVENIAMQUISNOSTRUDEXERCITATIONULLAMCOLABORISNISIUTALIQUIPEXEACOMMODOCONSEQUATDUISAUTEIRUREDOLORINREPREHENDERITINVOLUPTATEVELITESSECILLUMDOLOREEUFUGIATNULLAPARIATUREXCEPTEURSINTOCCAECATCUPIDATATNONPROIDENTSUNTINCULPAQUIOFFICIADESERUNTMOLLITANIMIDESTLABORUM',
loginID: 'testID123ASDW3N193NF7V123ADW25579130239SE1235189ADJWKRUY8123AOUELOREMIPSUMDOLORSITAMETCONSECTETURADIPISICINGELITSEDDOEIUSMODTEMPORINCIDIDUNTUTLABOREETDOLOREMAGNAALIQUAUTENIMADMINIMVENIAMQUISNOSTRUDEXERCITATIONULLAMCOLABORISNISIUTALIQUIPEXEACOMMODOCONSEQUATDUISAUTEIRUREDOLORINREPREHENDERITINVOLUPTATEVELITESSECILLUMDOLOREEUFUGIATNULLAPARIATUREXCEPTEURSINTOCCAECATCUPIDATATNONPROIDENTSUNTINCULPAQUIOFFICIADESERUNTMOLLITANIMIDESTLABORUM',
};


function SignUpOnSubmit(name, password, password2) {
function SignUpOnSubmit(name, password, password2, secureLoginID, rememberMe, importedAccount, cb) {
require('../selectors').update({
authForm: {
...accountCreated,
}
});

if (typeof cb !== 'function') {
require('../selectors').update({ activePage: 'markets' });
} else {
cb(require('../selectors').loginAccount);
}
return false;
}

const AuthForm = {
Expand Down
4 changes: 2 additions & 2 deletions src/selectors/login-account.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ const loginAccount = {
id: '0x45a153fdd97836c2b349a5f53970dc44b0ef1efa',
prettyAddress: '0x45...1efa',
localNode: false,
secureLoginID: 'testID123ASDW3N193NF7V123ADW25579130239SE1235189ADJWKRUY8123AOUELOREMIPSUMDOLORSITAMETCONSECTETURADIPISICINGELITSEDDOEIUSMODTEMPORINCIDIDUNTUTLABOREETDOLOREMAGNAALIQUAUTENIMADMINIMVENIAMQUISNOSTRUDEXERCITATIONULLAMCOLABORISNISIUTALIQUIPEXEACOMMODOCONSEQUATDUISAUTEIRUREDOLORINREPREHENDERITINVOLUPTATEVELITESSECILLUMDOLOREEUFUGIATNULLAPARIATUREXCEPTEURSINTOCCAECATCUPIDATATNONPROIDENTSUNTINCULPAQUIOFFICIADESERUNTMOLLITANIMIDESTLABORUM',
prettySecureLoginID: 'test...ORUM',
loginID: 'testID123ASDW3N193NF7V123ADW25579130239SE1235189ADJWKRUY8123AOUELOREMIPSUMDOLORSITAMETCONSECTETURADIPISICINGELITSEDDOEIUSMODTEMPORINCIDIDUNTUTLABOREETDOLOREMAGNAALIQUAUTENIMADMINIMVENIAMQUISNOSTRUDEXERCITATIONULLAMCOLABORISNISIUTALIQUIPEXEACOMMODOCONSEQUATDUISAUTEIRUREDOLORINREPREHENDERITINVOLUPTATEVELITESSECILLUMDOLOREEUFUGIATNULLAPARIATUREXCEPTEURSINTOCCAECATCUPIDATATNONPROIDENTSUNTINCULPAQUIOFFICIADESERUNTMOLLITANIMIDESTLABORUM',
prettyLoginID: 'test...ORUM',
rep: makeNumber(47, ' REP'),
ether: makeNumber(10000, ' ETH'),
realEther: makeNumber(2.5, ' ETH'),
Expand Down
3 changes: 3 additions & 0 deletions test/assertions/auth-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ export default function(authForm) {
// assert.isDefined(authForm.className, `authForm.className isn't defined`);
// assert.isString(authForm.className, `authForm.className isn't a string`);

assert.isDefined(authForm.instruction, `authForm.instruction isn't defined`);
assert.isString(authForm.instruction, `authForm.instruction isn't a string`);

assert.isDefined(authForm.isVisibleName, `authForm.isVisibleName isn't defined`);
assert.isBoolean(authForm.isVisibleName, `authForm.isVisibleName isn't a boolean`);

Expand Down
8 changes: 4 additions & 4 deletions test/assertions/login-account.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ export default function(loginAccount) {
assert.isDefined(loginAccount.linkText, `loginAccount.linkText isn't defined`);
assert.isString(loginAccount.linkText, `loginAccount.linkText isn't a string`);

assert.isDefined(loginAccount.secureLoginID, `loginAccount.secureLoginID isn't defined`);
assert.isString(loginAccount.secureLoginID, `loginAccount.secureLoginID isn't a string`);
assert.isDefined(loginAccount.loginID, `loginAccount.loginID isn't defined`);
assert.isString(loginAccount.loginID, `loginAccount.loginID isn't a string`);

assert.isDefined(loginAccount.prettySecureLoginID, `loginAccount.prettySecureLoginID isn't defined`);
assert.isString(loginAccount.prettySecureLoginID, `loginAccount.prettySecureLoginID isn't a string`);
assert.isDefined(loginAccount.prettyLoginID, `loginAccount.prettyLoginID isn't defined`);
assert.isString(loginAccount.prettyLoginID, `loginAccount.prettyLoginID isn't a string`);

assert.isDefined(loginAccount.prettyAddress, `loginAccount.prettyAddress isn't defined`);
assert.isString(loginAccount.prettyAddress, `loginAccount.prettyAddress isn't a string`);
Expand Down

0 comments on commit 3b2008b

Please sign in to comment.