FEATURE: basic UI to view user api keys

app/assets/javascripts/discourse/models/user.js.es6

@@ -73,6 +73,46 @@ const User = RestModel.extend({
     return Discourse.getURL(`/users/${this.get('username_lower')}`);
   },
 
+  @computed()
+  userApiKeys() {
+    const keys = this.get('user_api_keys');
+    if (keys) {
+      return keys.map((raw)=>{
+        let obj = Em.Object.create(
+          raw
+        );
+
+        obj.revoke = () => {
+          this.revokeApiKey(obj);
+        };
+
+        obj.undoRevoke = () => {
+          this.undoRevokeApiKey(obj);
+        };
+
+        return obj;
+      });
+    }
+  },
+
+  revokeApiKey(key) {
+    return ajax("/user-api-key/revoke", {
+      type: 'POST',
+      data: { id: key.get('id') }
+    }).then(()=>{
+      key.set('revoked', true);
+    });
+  },
+
+  undoRevokeApiKey(key){
+    return ajax("/user-api-key/undo-revoke", {
+      type: 'POST',
+      data: { id: key.get('id') }
+    }).then(()=>{
+      key.set('revoked', false);
+    });
+  },
+
   pmPath(topic) {
     const userId = this.get('id');
     const username = this.get('username_lower');

app/assets/javascripts/discourse/routes/user.js.es6

@@ -19,7 +19,15 @@ export default Discourse.Route.extend({
       const isIndexStream = INDEX_STREAM_ROUTES.indexOf(transition.targetName) !== -1;
       this.controllerFor('user').set('indexStream', isIndexStream);
       return true;
-    }
+    },
+
+    undoRevokeApiKey(key) {
+      key.undoRevoke();
+    },
+
+    revokeApiKey(key) {
+      key.revoke();
+    },
   },
 
   beforeModel() {

app/assets/javascripts/discourse/templates/user/preferences.hbs

@@ -319,6 +319,26 @@
     </div>
     {{/if}}
 
+    {{#if model.userApiKeys}}
+    <div class="control-group apps">
+      <label class="control-label">{{i18n 'user.apps'}}</label>
+      <div class="controls">
+        {{#each model.userApiKeys as |key|}}
+        <div>
+          <span>{{key.application_name}}</span>
+          {{#if key.revoked}}
+            {{d-button action="undoRevokeApiKey" actionParam=key class="btn" label="user.undo_revoke_access"}}
+          {{else}}
+            {{d-button action="revokeApiKey" actionParam=key class="btn" label="user.revoke_access"}}
+          {{/if}}
+          <p><span>{{i18n "user.api_permissions"}}</span> {{#if key.write}}{{i18n "user.api_read_write"}}{{else}}{{i18n "user.api_read"}}{{/if}}</p>
+          <p><span>{{i18n "user.api_approved"}}</span> {{bound-date key.created_at}}</p>
+        </div>
+        {{/each}}
+      </div>
+    </div>
+    {{/if}}
+
     {{plugin-outlet "user-custom-controls"}}
 
     <div class="control-group save-button">