diff options
Diffstat (limited to 'ui/app/components/login.js')
| -rw-r--r-- | ui/app/components/login.js | 130 |
1 files changed, 115 insertions, 15 deletions
diff --git a/ui/app/components/login.js b/ui/app/components/login.js index fe4ef5b..562ab5a 100644 --- a/ui/app/components/login.js +++ b/ui/app/components/login.js @@ -14,7 +14,9 @@ class Login extends React.Component { static get defaultProps() {return{ rememberAllowed: false, // if set, show remember password checkbox domain: null, // if set, only allow this domain - onLogin: null + address: null, // if set, only allow this username@domain + onLogin: null, // callback + mode: "login" // one of "login" or "signup" }} constructor(props) { @@ -27,14 +29,18 @@ class Login extends React.Component { authError: false, // authentication error message - username: "etest1@riseup.net", + username: this.props.address, usernameState: null, // username validation state usernameError: false, // username help message - password: "whatever", + password: null, passwordState: null, // password validation state passwordError: false, // password help message + password2: null, // password confirmation + password2State: null, // password confirm validation state + password2Error: false, // password confirm help message + disabled: false, remember: false // remember is checked? } @@ -42,9 +48,10 @@ class Login extends React.Component { // prebind: this.onUsernameChange = this.onUsernameChange.bind(this) this.onUsernameBlur = this.onUsernameBlur.bind(this) - this.onPassword = this.onPassword.bind(this) - this.onSubmit = this.onSubmit.bind(this) - this.onRemember = this.onRemember.bind(this) + this.onPassword = this.onPassword.bind(this) + this.onPassword2 = this.onPassword2.bind(this) + this.onSubmit = this.onSubmit.bind(this) + this.onRemember = this.onRemember.bind(this) } componentDidMount() { @@ -56,8 +63,14 @@ class Login extends React.Component { let submitButton = "" let usernameHelp = null let passwordHelp = null + let password2Help = null + let password2Elem = null let message = null + let buttonText = "Log In" + /* + * disabled for now + * if (this.props.rememberAllowed) { let props = { style: {marginTop: "0px"}, @@ -74,6 +87,7 @@ class Login extends React.Component { </Checkbox> } } + */ if (this.state.authError) { // style may be: success, warning, danger, info @@ -108,6 +122,25 @@ class Login extends React.Component { //passwordHelp = <HelpBlock> </HelpBlock> } + if (this.props.mode == 'signup') { + buttonText = 'Sign Up' + if (this.state.password2Error) { + + } + password2Elem = ( + <FormGroup controlId="loginPassword2" validationState={this.state.password2State}> + <ControlLabel>Repeat Password</ControlLabel> + <FormControl + type="password" + ref="password" + value={this.state.password2 || ""} + onChange={this.onPassword2} /> + {this.state.password2State == 'success' ? null : <FormControl.Feedback/>} + {password2Help} + </FormGroup> + ) + } + let buttonProps = { type: "button", onClick: this.onSubmit, @@ -116,11 +149,16 @@ class Login extends React.Component { if (this.state.loading) { submitButton = <Button block {...buttonProps}><Spinner /></Button> } else { - submitButton = <Button block {...buttonProps}>Log In</Button> + submitButton = <Button block {...buttonProps}>{buttonText}</Button> } let usernameref = null - if (this.props.domain) { + let usernameDisabled = false + let usernameValue = this.state.username || "" + if (this.props.address) { + usernameDisabled = true + usernameValue = this.props.address + } else if (this.props.domain) { usernameref = function(c) { if (c != null) { let textarea = ReactDOM.findDOMNode(c) @@ -142,7 +180,8 @@ class Login extends React.Component { rows="1" ref={usernameref} autoFocus - value={this.state.username} + value={usernameValue} + disabled={usernameDisabled} onChange={this.onUsernameChange} onBlur={this.onUsernameBlur} /> {this.state.usernameState == 'success' ? null : <FormControl.Feedback/>} @@ -154,12 +193,13 @@ class Login extends React.Component { <FormControl type="password" ref="password" - value={this.state.password} + value={this.state.password || ""} onChange={this.onPassword} /> {this.state.passwordState == 'success' ? null : <FormControl.Feedback/>} {passwordHelp} </FormGroup> + {password2Elem} {submitButton} {rememberCheck} </form> @@ -226,6 +266,12 @@ class Login extends React.Component { } } + onPassword2(e) { + let password2 = e.target.value + this.setState({password2: password2}) + this.validatePassword2(password2, this.state.password) + } + onRemember(e) { let currentValue = e.target.value == 'on' ? true : false let value = !currentValue @@ -258,15 +304,43 @@ class Login extends React.Component { passwordState: state, passwordError: message }) + this.validatePassword2(this.state.password2, password) + } + + validatePassword2(password2, password) { + if (password2) { + if (password != password2) { + this.setState({ + password2State: 'error', + password2Error: "Does not match" + }) + } else { + this.setState({ + password2State: 'success', + password2Error: null + }) + } + } else { + this.setState({ + password2State: null, + password2Error: null + }) + } } maySubmit() { - return( + let ok = ( !this.stateLoading && !this.state.usernameError && - this.state.username != "" && - this.state.password != "" + this.state.username && + this.state.password ) + + if (this.props.mode == 'login') { + return ok + } else if (this.props.mode == 'signup') { + return ok && this.state.password2 == this.state.password + } } onSubmit(e) { @@ -274,6 +348,14 @@ class Login extends React.Component { if (!this.maySubmit()) { return } this.setState({loading: true}) + if (this.props.mode == 'login') { + this.doLogin() + } else if (this.props.mode == 'signup') { + this.doSignup() + } + } + + doLogin() { let account = Account.find(this.state.username) account.login(this.state.password).then( account => { @@ -283,9 +365,27 @@ class Login extends React.Component { } }, error => { - console.log(error) if (error == "") { - error = 'Something failed, but we did not get a message' + error = "Something failed, but we did not get a message" + } + this.setState({ + loading: false, + usernameState: 'error', + passwordState: 'error', + authError: error + }) + } + ) + } + + doSignup() { + Account.create(this.state.username, this.state.password).then( + account => { + this.doLogin() + }, + error => { + if (error == "") { + error = "Something failed, but we did not get a message" } this.setState({ loading: false, |