From be30d62f6fa48f365d37969610af834e7c1439eb Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Mon, 16 Jul 2018 18:29:14 +0200
Subject: [PATCH] Reduced the amount of duplicated code in CreateServer
 component

---
 src/servers/CreateServer.js   | 47 ++++++++++++++---------------------
 src/servers/CreateServer.scss |  1 +
 2 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/src/servers/CreateServer.js b/src/servers/CreateServer.js
index 7782d34f..1d290fcd 100644
--- a/src/servers/CreateServer.js
+++ b/src/servers/CreateServer.js
@@ -16,39 +16,28 @@ export class CreateServer extends React.Component {
       e.preventDefault();
       this.props.createServer(this.state);
     };
-    const renderInput = (id, placeholder, type = 'text') =>
-      <input
-        type={type}
-        className="form-control"
-        id={id}
-        placeholder={placeholder}
-        value={this.state[id]}
-        onChange={e => this.setState({ [id]: e.target.value })}
-      />;
+    const renderInputGroup = (id, placeholder, type = 'text') =>
+      <div className="form-group row">
+        <label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">{placeholder}:</label>
+        <div className="col-lg-11 col-md-10">
+          <input
+            type={type}
+            className="form-control"
+            id={id}
+            placeholder={placeholder}
+            value={this.state[id]}
+            onChange={e => this.setState({ [id]: e.target.value })}
+            required
+          />
+        </div>
+      </div>;
 
     return (
       <div className="create-server">
         <form onSubmit={submit}>
-          <div className="form-group row">
-            <label htmlFor="name" className="col-lg-1 col-md-2 col-form-label create-server__label">Name:</label>
-            <div className="col-lg-11 col-md-10">
-              {renderInput('name', 'Name')}
-            </div>
-          </div>
-
-          <div className="form-group row">
-            <label htmlFor="url" className="col-lg-1 col-md-2 col-form-label create-server__label">URL:</label>
-            <div className="col-lg-11 col-md-10">
-              {renderInput('url', 'URL', 'url')}
-            </div>
-          </div>
-
-          <div className="form-group row">
-            <label htmlFor="apiKey" className="col-lg-1 col-md-2 col-form-label create-server__label">API key:</label>
-            <div className="col-lg-11 col-md-10">
-              {renderInput('apiKey', 'API key')}
-            </div>
-          </div>
+          {renderInputGroup('name', 'Name')}
+          {renderInputGroup('url', 'URL', 'url')}
+          {renderInputGroup('apiKey', 'API key')}
 
           <div className="text-right">
             <button className="btn btn-primary btn-outline-primary">Create server</button>
diff --git a/src/servers/CreateServer.scss b/src/servers/CreateServer.scss
index 73cbf36a..e4b760ad 100644
--- a/src/servers/CreateServer.scss
+++ b/src/servers/CreateServer.scss
@@ -6,6 +6,7 @@
 
 .create-server__label {
   font-weight: bold;
+  cursor: pointer;
 
   @media (min-width: $mdMin) {
     text-align: right;