From c36f7f795d3e8654f5124d389ea53cd2b7ebc575 Mon Sep 17 00:00:00 2001
From: Jonas Schwabe <jonas@jnugh.de>
Date: Mon, 30 Jan 2017 20:45:47 +0100
Subject: [PATCH] Only validate new team modal input when save has been clicked

---
 src/browser/components/NewTeamModal.jsx | 25 ++++++++++++++++++-------
 test/specs/browser/settings_test.js     |  9 +++++++--
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/browser/components/NewTeamModal.jsx b/src/browser/components/NewTeamModal.jsx
index f1570802..96cefc98 100644
--- a/src/browser/components/NewTeamModal.jsx
+++ b/src/browser/components/NewTeamModal.jsx
@@ -8,11 +8,15 @@ class NewTeamModal extends React.Component {
     super();
     this.state = {
       teamName: '',
-      teamUrl: ''
+      teamUrl: '',
+      saveStarted: false
     };
   }
 
   getTeamNameValidationState() {
+    if (!this.state.saveStarted) {
+      return '';
+    }
     return this.state.teamName.length > 0 ? '' : 'error';
   }
 
@@ -23,6 +27,9 @@ class NewTeamModal extends React.Component {
   }
 
   getTeamUrlValidationState() {
+    if (!this.state.saveStarted) {
+      return '';
+    }
     if (this.state.teamUrl.length === 0) {
       return 'error';
     }
@@ -44,12 +51,16 @@ class NewTeamModal extends React.Component {
   }
 
   save() {
-    if (this.validateForm()) {
-      this.props.onSave({
-        url: this.state.teamUrl,
-        name: this.state.teamName
-      });
-    }
+    this.setState({
+      saveStarted: true
+    }, () => {
+      if (this.validateForm()) {
+        this.props.onSave({
+          url: this.state.teamUrl,
+          name: this.state.teamName
+        });
+      }
+    });
   }
 
   render() {
diff --git a/test/specs/browser/settings_test.js b/test/specs/browser/settings_test.js
index 58ca72dd..efc11036 100644
--- a/test/specs/browser/settings_test.js
+++ b/test/specs/browser/settings_test.js
@@ -266,18 +266,21 @@ describe('browser/settings.html', function desc() {
 
     it('should not be valid if no team name has been set', () => {
       return this.app.client.
+        click('#saveNewServerModal').
         isExisting('.has-error #teamNameInput').should.eventually.equal(true);
     });
 
     it('should not be valid if no server address has been set', () => {
       return this.app.client.
+        click('#saveNewServerModal').
         isExisting('.has-error #teamUrlInput').should.eventually.equal(true);
     });
 
     describe('Valid server name', () => {
       beforeEach(() => {
         return this.app.client.
-            setValue('#teamNameInput', 'TestTeam');
+            setValue('#teamNameInput', 'TestTeam').
+            click('#saveNewServerModal');
       });
 
       it('should not be marked invalid', () => {
@@ -294,7 +297,8 @@ describe('browser/settings.html', function desc() {
     describe('Valid server url', () => {
       beforeEach(() => {
         return this.app.client.
-            setValue('#teamUrlInput', 'http://example.org');
+            setValue('#teamUrlInput', 'http://example.org').
+            click('#saveNewServerModal');
       });
 
       it('should be valid', () => {
@@ -311,6 +315,7 @@ describe('browser/settings.html', function desc() {
     it('should not be valid if an invalid server address has been set', () => {
       return this.app.client.
         setValue('#teamUrlInput', 'superInvalid url').
+        click('#saveNewServerModal').
         isExisting('.has-error #teamUrlInput').should.eventually.equal(true);
     });