Add the dialog to login

gulpfile.js

@@ -85,7 +85,7 @@ gulp.task('build', ['sync-meta', 'webpack', 'copy'], function() {
 gulp.task('webpack', ['webpack:main', 'webpack:browser', 'webpack:webview']);
 
 gulp.task('webpack:browser', function() {
-  return gulp.src('src/browser/**/*.jsx')
+  return gulp.src('src/browser/*.jsx')
     .pipe(named())
     .pipe(webpack({
       module: {

src/browser/components/loginModal.jsx

@@ -0,0 +1,59 @@
+const React = require('react');
+const ReactDOM = require('react-dom');
+const ReactBootstrap = require('react-bootstrap');
+const Modal = ReactBootstrap.Modal;
+const Form = ReactBootstrap.Form;
+const FormGroup = ReactBootstrap.FormGroup;
+const FormControl = ReactBootstrap.FormControl;
+const ControlLabel = ReactBootstrap.ControlLabel;
+const Col = ReactBootstrap.Col;
+
+const Button = ReactBootstrap.Button;
+
+const LoginModal = React.createClass({
+  handleLogin: function() {
+    if (this.props.onLogin) {
+      const username = ReactDOM.findDOMNode(this.refs.username).value;
+      const password = ReactDOM.findDOMNode(this.refs.password).value;
+      this.props.onLogin(this.props.request, username, password);
+    }
+  },
+  render: function() {
+    return (
+      <Modal show={ this.props.show }>
+        <Modal.Header>
+          <Modal.Title>Authentication Required</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <p>The server
+            { ' ' + this.props.authServerURL } requires a username and password.</p>
+          <Form horizontal onSubmit={ this.handleSubmit }>
+            <FormGroup>
+              <Col componentClass={ ControlLabel } sm={ 2 }>User&nbsp;Name</Col>
+              <Col sm={ 10 }>
+              <FormControl type="text" placeholder="User Name" ref="username" />
+              </Col>
+            </FormGroup>
+            <FormGroup>
+              <Col componentClass={ ControlLabel } sm={ 2 }>Password</Col>
+              <Col sm={ 10 }>
+              <FormControl type="password" placeholder="Password" ref="password" />
+              </Col>
+            </FormGroup>
+            <FormGroup>
+              <Col sm={ 12 }>
+              <div className="pull-right">
+                <Button bsStyle="primary" onClick={ this.handleLogin }>Login</Button>
+                { ' ' }
+                <Button onClick={ this.props.onCancel }>Cancel</Button>
+              </div>
+              </Col>
+            </FormGroup>
+          </Form>
+        </Modal.Body>
+      </Modal>
+      );
+  }
+});
+
+module.exports = LoginModal;

src/browser/index.jsx

@@ -13,6 +13,8 @@ const Badge = ReactBootstrap.Badge;
 const ListGroup = ReactBootstrap.ListGroup;
 const ListGroupItem = ReactBootstrap.ListGroupItem;
 
+const LoginModal = require('./components/loginModal.jsx');
+
 const electron = require('electron');
 const remote = electron.remote;
 const ipcRenderer = electron.ipcRenderer;
@@ -26,12 +28,6 @@ const settings = require('../common/settings');
 
 remote.getCurrentWindow().removeAllListeners('focus');
 
-ipcRenderer.on('login-request', function(event, request, authInfo) {
-  setTimeout(() => {
-    ipcRenderer.send('login-credentials', request, 'user', 'password');
-  }, 10000);
-});
-
 // New window should disable nodeIntergration.
 const originalWindowOpen = window.open;
 window.open = function(url, name, features) {
@@ -49,11 +45,26 @@ var MainPage = React.createClass({
       unreadCounts: new Array(this.props.teams.length),
       mentionCounts: new Array(this.props.teams.length),
       unreadAtActive: new Array(this.props.teams.length),
-      mentionAtActiveCounts: new Array(this.props.teams.length)
+      mentionAtActiveCounts: new Array(this.props.teams.length),
+      loginQueue: []
     };
   },
   componentDidMount: function() {
     var thisObj = this;
+    ipcRenderer.on('login-request', function(event, request, authInfo) {
+      thisObj.setState({
+        loginRequired: true
+      });
+      const loginQueue = thisObj.state.loginQueue;
+      loginQueue.push({
+        request: request,
+        authInfo: authInfo
+      });
+      thisObj.setState({
+        loginQueue: loginQueue
+      });
+    });
+
     var focusListener = function() {
       var webview = document.getElementById('mattermostView' + thisObj.state.key);
       webview.focus();
@@ -141,6 +152,18 @@ var MainPage = React.createClass({
       visibility: visibility
     };
   },
+
+  handleLogin: function(request, username, password) {
+    ipcRenderer.send('login-credentials', request, username, password);
+    const loginQueue = this.state.loginQueue;
+    loginQueue.shift();
+    this.setState(loginQueue);
+  },
+  handleLoginCancel: function() {
+    const loginQueue = this.state.loginQueue;
+    loginQueue.shift();
+    this.setState(loginQueue);
+  },
   render: function() {
     var thisObj = this;
 
@@ -168,11 +191,22 @@ var MainPage = React.createClass({
     var views_row = (<Row>
                        { views }
                      </Row>);
+
+    var request = null;
+    var authServerURL = null;
+    if (this.state.loginQueue.length !== 0) {
+      request = this.state.loginQueue[0].request;
+      const tmp_url = url.parse(this.state.loginQueue[0].request.url);
+      authServerURL = `${tmp_url.protocol}//${tmp_url.host}`;
+    }
     return (
+      <div>
+        <LoginModal show={ this.state.loginQueue.length !== 0 } request={ request } authServerURL={ authServerURL } onLogin={ this.handleLogin } onCancel={ this.handleLoginCancel }></LoginModal>
         <Grid fluid>
           { tabs_row }
           { views_row }
         </Grid>
+      </div>
       );
   }
 });