summaryrefslogtreecommitdiff
path: root/ui/app/components/login.js
diff options
context:
space:
mode:
authorelijah <elijah@riseup.net>2016-09-21 15:39:03 -0700
committerKali Kaneko (leap communications) <kali@leap.se>2016-09-22 11:40:14 -0400
commit7569ac8bd58174095f3f897548e26d0ba905236c (patch)
tree839c300d7dff62900bcc91672a3b55cf62c31f6c /ui/app/components/login.js
parent61b5734c12d6ab6733d3a832df8d99f1041bf355 (diff)
[feat] the setup wizard for the new ui
Diffstat (limited to 'ui/app/components/login.js')
-rw-r--r--ui/app/components/login.js130
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>&nbsp;</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,