API Admin client-side cleanups

assets/javascripts/discourse/controllers/admin-wizards-api.js.es6

@@ -10,15 +10,20 @@ export default Ember.Controller.extend({
   notAuthorized: Ember.computed.not('api.authorized'),
   authorizationTypes: ['oauth', 'basic'],
   isOauth: Ember.computed.equal('api.authType', 'oauth'),
+  isBasicAuth: Ember.computed.equal('api.authType', 'basic'),
   endpointMethods: ['GET', 'PUT', 'POST', 'PATCH', 'DELETE'],
-  saveDisabled: Ember.computed.empty('api.name'),
   showRemove: Ember.computed.not('isNew'),
 
-  @computed('saveDisabled', 'authType', 'authUrl')
+  @computed('saveDisabled', 'api.authType', 'api.authUrl')
   authDisabled(saveDisabled, authType, authUrl) {
     return saveDisabled || !authType || !authUrl;
   },
 
+  @computed('api.name', 'api.authType')
+  saveDisabled(name, authType) {
+    return !name || !authType;
+  },
+
   @observes('api.title')
   titleWatcher() {
     const title = this.get('api.title');
@@ -48,19 +53,20 @@ export default Ember.Controller.extend({
     authorize() {
       const api = this.get('api');
       const { authType, authUrl, authParams } = api;
+
+      if (authType !== 'oauth') return;
+
       let query = '?';
 
-      if (authType === 'oauth') {
+      query += `client_id=${api.clientId}`;
-        query += `client_id=${api.clientId}&redirect_uri=${encodeURIComponent(api.redirectUri)}&response_type=code`;
+      query += `&redirect_uri=${encodeURIComponent(api.redirectUri)}`;
+      query += `&response_type=code`;
 
       if (authParams) {
         authParams.forEach(p => {
           query += `&${p.key}=${encodeURIComponent(p.value)}`;
         });
       }
-      } else {
-        // basic auth - no need to authorize separately
-      }
 
       window.location.href = authUrl + query;
     },
@@ -68,15 +74,18 @@ export default Ember.Controller.extend({
     save() {
       const api = this.get('api');
       const name = api.name;
+      const authType = api.authType;
       let refreshList = false;
 
-      if (!name ) return;
+      if (!name || !authType) return;
 
       let data = {
-        title: api.title
+        auth_type: authType
       };
 
-      if (this.get('isNew') || (api.title !== this.get('originalTitle'))) {
+      if (api.title) data['title'] = api.title;
+
+      if (api.get('isNew') || (api.title !== this.get('originalTitle'))) {
         refreshList = true;
       }
 
@@ -84,10 +93,8 @@ export default Ember.Controller.extend({
         data['new'] = true;
       };
 
-      if (api.authType) data['auth_type'] = api.authType;
+      if (authType === 'oauth') {
-      if (api.authUrl) data['auth_url'] = api.authUrl;
+        data['auth_url'] = api.authUrl;
-
-      if (data.auth_type === 'oauth') {
         data['client_id'] = api.clientId;
         data['client_secret'] = api.clientSecret;
 
@@ -98,7 +105,7 @@ export default Ember.Controller.extend({
         }
 
         data['token_url'] = api.tokenUrl;
-      } else {
+      } else if (authType === 'basic') {
         data['username'] = api.username;
         data['password'] = api.password;
       }

assets/javascripts/discourse/templates/admin-wizards-api.hbs

@@ -34,7 +34,12 @@
   </div>
 
   <div class="actions">
-    {{d-button label="admin.wizard.api.auth.btn" action="authorize" disabled=authDisabled class="btn-primary"}}
+    {{#if isOauth}}
+      {{d-button label="admin.wizard.api.auth.btn"
+                 action="authorize"
+                 disabled=authDisabled
+                 class="btn-primary"}}
+    {{/if}}
   </div>
 </div>
 
@@ -107,7 +112,9 @@
           {{d-button label='admin.wizard.api.auth.params.new' icon='plus' action='addParam'}}
         </div>
       </div>
-    {{else}}
+    {{/if}}
+
+    {{#if isBasicAuth}}
       <div class="control-group">
         <label>{{i18n 'admin.wizard.api.auth.username'}}</label>
         <div class="controls">

assets/stylesheets/wizard_custom_admin.scss

@@ -334,9 +334,6 @@
   margin-bottom: 20px;
 
   .settings {
-    border-right: 1px solid #333;
-    margin-right: 20px;
-    padding-right: 20px;
     width: 50%;
     max-width: 50%;
   }
@@ -352,6 +349,9 @@
   }
 
   .status {
+    border-left: 1px solid $primary;
+    margin-left: 20px;
+    padding-left: 20px;
     width: 50%;
     max-width: 50%;
 
@@ -384,6 +384,7 @@
 
   .endpoint {
     display: flex;
+    margin-top: 20px;
 
     .combo-box {
       width: 200px;