UX: Show passphrase-based key and recommend deletion.

UX: Show passphrase-based key and recommend deletion.

diff --git a/assets/javascripts/discourse/controllers/manage-paperkeys.js.es6 b/assets/javascripts/discourse/controllers/manage-paperkeys.js.es6
index b538f61..dd529e8 100644
--- a/assets/javascripts/discourse/controllers/manage-paperkeys.js.es6
+++ b/assets/javascripts/discourse/controllers/manage-paperkeys.js.es6
@@ -5,17 +5,26 @@ import computed from "ember-addons/ember-computed-decorators";
 
 export default Ember.Controller.extend(ModalFunctionality, {
   @computed("model.custom_fields.encrypt_private")
-  labels() {
-    const labels = [];
+  keys() {
+    const keys = [];
     if (this.model.custom_fields.encrypt_private) {
       const privateKeys = JSON.parse(this.model.custom_fields.encrypt_private);
-      Object.keys(privateKeys).forEach(key => {
-        if (key.startsWith("paper_")) {
-          labels.push(key.substr("paper_".length));
+      Object.keys(privateKeys).forEach(label => {
+        if (label.startsWith("paper_")) {
+          keys.push({
+            isPaper: true,
+            label,
+            name: label.substr("paper_".length)
+          });
+        } else if (label === "passphrase") {
+          keys.unshift({
+            isPassphrase: true,
+            label: "passphrase"
+          });
         }
       });
     }
-    return labels;
+    return keys;
   },
 
   actions: {
@@ -28,9 +37,8 @@ export default Ember.Controller.extend(ModalFunctionality, {
       });
     },
 
-    delete(firstWord) {
-      const label = "paper_" + firstWord.toLowerCase();
-      ajax("/encrypt/keys", {
+    delete(label) {
+      return ajax("/encrypt/keys", {
         type: "DELETE",
         data: { label }
       }).then(() => {
diff --git a/assets/javascripts/discourse/templates/modal/manage-paperkeys.hbs b/assets/javascripts/discourse/templates/modal/manage-paperkeys.hbs
index fc58365..11648d8 100644
--- a/assets/javascripts/discourse/templates/modal/manage-paperkeys.hbs
+++ b/assets/javascripts/discourse/templates/modal/manage-paperkeys.hbs
@@ -1,20 +1,27 @@
 {{#d-modal-body title="encrypt.manage_paperkeys.title"}}
   <div>
-    {{#if labels}}
+    {{#if keys}}
       <p>{{i18n 'encrypt.manage_paperkeys.instructions'}}</p>
       <table class="paperkeys">
-        {{#each labels as |label|}}
+        {{#each keys as |key|}}
           <tr>
             <td>
               {{d-icon "key"}}
-              <span class="paperkey-label">{{label}}</span>
-              ...
+              {{#if key.isPaper}}
+                <span class="paperkey">{{key.name}}</span>
+                ...
+              {{else if key.isPassphrase}}
+                <span class="passphrase">
+                  {{i18n 'encrypt.manage_paperkeys.passphrase'}}
+                  <i>{{i18n 'encrypt.manage_paperkeys.not_recommended'}}</i>
+                </span>
+              {{/if}}
             </td>
             <td>
               {{d-button
                 icon="far-trash-alt"
                 action=(action "delete")
-                actionParam=label
+                actionParam=key.label
                 class="btn-danger pull-right"
                 title="encrypt.manage_paperkeys.delete"}}
             </td>
diff --git a/assets/stylesheets/common/encrypt.scss b/assets/stylesheets/common/encrypt.scss
index 9282c35..10f191b 100644
--- a/assets/stylesheets/common/encrypt.scss
+++ b/assets/stylesheets/common/encrypt.scss
@@ -32,7 +32,7 @@ pre.exported-keypair {
   font-size: 1.5em;
 }
 
-table.paperkeys {
+.modal .modal-body table.paperkeys {
   width: 100%;
 
   tr {
@@ -47,11 +47,16 @@ table.paperkeys {
     }
   }
 
-  .paperkey-label {
+  span.paperkey {
     background-color: lighten($primary, 80%);
+    border-radius: 5px;
+    font-size: 1em;
     margin: 0 0.5em;
     padding: 0.3em;
-    border-radius: 5px;
+  }
+
+  span.passphrase {
+    margin: 0 0.5em;
   }
 }
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 0059a67..720b8aa 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -60,6 +60,8 @@ en:
         instructions: "Below you can delete any of the previously generated paper keys. Once deleted, the paper key cannot be recovered, so please make sure you have at least one paper key or other active devices."
         delete: "Delete"
         no_key: "You have no paperkeys. Make sure you have at least one paper key or other active devices."
+        passphrase: "passphrase-based"
+        not_recommended: "(not recommended)"
 
       export:
         title: "Export Encryption Keypair"

GitHub sha: b0bdd085