From 11b1d00640f7a17c2a6c393b26664da3cbd16a02 Mon Sep 17 00:00:00 2001
From: Recursive Madman <recursive.madman@gmx.de>
Date: Mon, 6 Apr 2015 18:28:32 +0200
Subject: [PATCH] advanced connection options

---
 src/app.js                 | 29 +++++++++---------
 src/authentication-view.js | 75 +++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 86 insertions(+), 18 deletions(-)

diff --git a/src/app.js b/src/app.js
index 8a4a668..f09062d 100644
--- a/src/app.js
+++ b/src/app.js
@@ -9,18 +9,25 @@ import AuthenticationView from './authentication-view';
 
 import Conversation from './conversation';
 
+const CLIENT_DEFAULTS = {
+  transport: "websocket",
+  wsURL: "ws://localhost:5280/xmpp-websocket",
+  useStreamManagement: true
+};
+
 export default React.createClass({
   render() {
     return this.state.client ?
       this.renderAuthenticated()
-    : <AuthenticationView onAuthenticate={this.authenticate}
+    : <AuthenticationView {...CLIENT_DEFAULTS}
+                          onAuthenticate={this.authenticate}
                           failed={this.state.authFailed} />
   },
 
   componentDidMount() {
     var savedState = this.loadSavedState();
-    if(savedState.credentials) {
-      this.authenticate(savedState.credentials);
+    if(savedState.clientOptions) {
+      this.authenticate(savedState.clientOptions);
     }
   },
 
@@ -153,17 +160,11 @@ export default React.createClass({
 
   logout() {
     this.setState({ client: null });
-    this.clearState({ credentials: true });
+    this.clearState({ clientOptions: true });
   },
 
-  authenticate(credentials) {
-    var client = XMPP.createClient({
-      jid: credentials.login + "@localhost",
-      password: credentials.password,
-      transport: "websocket",
-      wsURL: "ws://localhost:5280/xmpp-websocket",
-      useStreamManagement: true
-    });
+  authenticate(clientOptions) {
+    var client = XMPP.createClient(clientOptions);
     client.on('disconnected', () => this.setConnState('offline'));
     client.on('error', (e) => console.log('error!', e));
     client.on('connected', () => this.setConnState('connected', client.jid));
@@ -178,7 +179,7 @@ export default React.createClass({
     });
     this.setConnState('connecting', client.jid);
 
-    this.saveState({ credentials: credentials });
+    this.saveState({ clientOptions: clientOptions });
   },
 
   authFailed() {
@@ -186,7 +187,7 @@ export default React.createClass({
       client: null,
       authFailed: true
     });
-    this.clearState({ credentials: true });
+    this.clearState({ clientOptions: true });
   },
 
   saveState(object) {
diff --git a/src/authentication-view.js b/src/authentication-view.js
index 2143e77..5ba344c 100644
--- a/src/authentication-view.js
+++ b/src/authentication-view.js
@@ -2,29 +2,96 @@
 import React from 'react'
 
 export default React.createClass({
+  getInitialState() {
+    return { advanced: false };
+  },
+
   render() {
     return (
       <form id="authentication" onSubmit={this.submitForm}>
         {this.renderError()}
         <input type="text"
-               placeholder="Login"
-               ref="login" />
+               placeholder="JID"
+               onChange={this.guessUsername}
+               ref="jid" />
         <input type="password"
                placeholder="Password"
                ref="password" />
         <button type="submit">Login</button>
+        <div className="toggle-advanced"
+             onClick={this.toggleAdvanced}>
+          {this.state.advanced ? '▾' : '▸'}
+          Advanced
+        </div>
+        <div className="advanced" style={this.state.advanced ? {} : {display:'none'}}>
+          <input type="text"
+                 placeholder="Username"
+                 value={this.state.username}
+                 onChange={this.usernameChanged}
+                 onBlur={this.guessUsername}
+                 ref="username" />
+          <input type="text"
+                 placeholder="Websocket URL"
+                 defaultValue={this.props.wsURL}
+                 ref="wsURL" />
+        </div>
       </form>
     );
   },
 
+  toggleAdvanced() {
+    this.setState({ advanced: ! this.state.advanced });
+  },
+
+  guessUsername() {
+    var jid = this.getValue('jid');
+    var update = { jid: jid };
+    if(! this.state.usernameChanged) {
+      update.username = jid.split('@')[0];
+    }
+    this.setState(update);
+  },
+
+  usernameChanged() {
+    // username is equal to local part of JID, unless it was changed
+    // manually. When the input is cleared, it goes back to default
+    // behaviour.
+    var username = this.getValue('username');
+    if(username.length > 0) {
+      this.setState({
+        username: username,
+        usernameChanged: true
+      });
+    } else {
+      this.setState({
+        usernameChanged: false,
+        // this keeps the field cleared. Most likely the empty string
+        // is not a valid username (in fact we count on it here), so
+        // on blur jidChanged fills it back up. *Until* blur however,
+        // usual editing behaviour is preserved.
+        username: ''
+      });
+    }
+  },
+
   submitForm(event) {
     event.preventDefault();
     this.props.onAuthenticate({
-      login: this.refs.login.getDOMNode().value,
-      password: this.refs.password.getDOMNode().value
+      jid: this.getValue('jid'),
+      credentials: {
+        username: this.getValue('username'),
+        password: this.getValue('password')
+      },
+      wsURL: this.getValue('wsURL'),
+      transport: this.props.transport,
+      useStreamManagement: this.props.useStreamManagement
     });
   },
 
+  getValue(key) {
+    return this.refs[key].getDOMNode().value;
+  },
+
   renderError() {
     if(this.props.failed) {
       return <div className="error">Authentication failed</div>;
-- 
2.11.4.GIT