[feat] the setup wizard for the new ui

1 files changed, 115 insertions, 15 deletions

diff --git a/ui/app/components/login.js b/ui/app/components/login.js
index fe4ef5b2..562ab5ac 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,