UX: Show icon if encryption is enabled, but inactive.

UX: Show icon if encryption is enabled, but inactive.

diff --git a/assets/javascripts/discourse/connectors/composer-action-after/encrypt.hbs b/assets/javascripts/discourse/connectors/composer-action-after/encrypt.hbs
index 4f7c4de..cbe4217 100644
--- a/assets/javascripts/discourse/connectors/composer-action-after/encrypt.hbs
+++ b/assets/javascripts/discourse/connectors/composer-action-after/encrypt.hbs
@@ -1,11 +1,15 @@
-{{#if isEncryptActive}}
-  {{#if (or model.creatingPrivateMessage model.topic.encrypted_title)}}
-    <a {{action clicked}}>
+{{#if (or model.creatingPrivateMessage model.topic.encrypted_title)}}
+  {{#if isEncryptActive}}
+    <a {{action clicked}} title={{i18n title}}>
       {{d-icon (if model.isEncrypted "lock" "unlock") class=(if model.isEncryptedDisabled "disabled")}}
     </a>
 
     {{#if model.showEncryptError}}
       <span class="error">{{model.encryptError}}</span>
     {{/if}}
+  {{else if isEncryptEnabled}}
+    <span title="{{i18n "encrypt.preferences.status_enabled_but_inactive"}}">
+      {{d-icon "unlock" class="disabled"}}
+    </span>
   {{/if}}
 {{/if}}
diff --git a/assets/javascripts/discourse/connectors/composer-action-after/encrypt.js.es6 b/assets/javascripts/discourse/connectors/composer-action-after/encrypt.js.es6
index 79b6ed6..5d44f38 100644
--- a/assets/javascripts/discourse/connectors/composer-action-after/encrypt.js.es6
+++ b/assets/javascripts/discourse/connectors/composer-action-after/encrypt.js.es6
@@ -1,21 +1,27 @@
+import { getOwner } from "discourse-common/lib/get-owner";
 import {
   ENCRYPT_ACTIVE,
+  ENCRYPT_DISABLED,
   getEncryptionStatus
 } from "discourse/plugins/discourse-encrypt/lib/discourse";
 
 export default {
   setupComponent(args, component) {
-    const currentUser = Discourse.User.current();
+    const currentUser = getOwner(component).lookup("current-user:main");
+    const status = getEncryptionStatus(currentUser);
+
     component.setProperties({
       model: args.model,
-
-      /** @var Whether the encryption is active on this device. */
-      isEncryptActive: getEncryptionStatus(currentUser) === ENCRYPT_ACTIVE,
+      isEncryptEnabled: status !== ENCRYPT_DISABLED,
+      isEncryptActive: status === ENCRYPT_ACTIVE,
 
       /** Listens for encryption status updates. */
       listener() {
         const newStatus = getEncryptionStatus(currentUser);
-        component.set("isEncryptActive", newStatus === ENCRYPT_ACTIVE);
+        component.setProperties({
+          isEncryptEnabled: newStatus !== ENCRYPT_DISABLED,
+          isEncryptActive: newStatus === ENCRYPT_ACTIVE,
+        });
       },
 
       didInsertElement() {
@@ -35,5 +41,23 @@ export default {
         }
       }
     });
+
+    Ember.defineProperty(
+      component,
+      "title",
+      Ember.computed(
+        "model.isEncrypted",
+        "model.isEncryptedDisabled",
+        () => {
+          if (this.model.isEncryptedDisabled) {
+            return "encrypt.checkbox.disabled";
+          } else if (this.model.isEncrypted) {
+            return "encrypt.checkbox.checked";
+          } else {
+            return "encrypt.checkbox.unchecked";
+          }
+        }
+      )
+    );
   }
 };

GitHub sha: 38b343c0