UX: Add a notice to inform users if they have no paper key.

UX: Add a notice to inform users if they have no paper key.

diff --git a/assets/javascripts/discourse/connectors/top-notices/encrypt.hbs b/assets/javascripts/discourse/connectors/top-notices/encrypt.hbs
new file mode 100644
index 0000000..bf835e5
--- /dev/null
+++ b/assets/javascripts/discourse/connectors/top-notices/encrypt.hbs
@@ -0,0 +1,10 @@
+{{#if showNoBackupWarning}}
+  <div class="row">
+    <div class="alert alert-warn">
+      <div class="close" {{action (mut noticeStatus) 'dismissed'}}>
+        {{d-icon "times"}}
+      </div>
+      {{{i18n "encrypt.no_backup_warn"}}}
+    </div>
+  </div>
+{{/if}}
diff --git a/assets/javascripts/discourse/connectors/top-notices/encrypt.js.es6 b/assets/javascripts/discourse/connectors/top-notices/encrypt.js.es6
new file mode 100644
index 0000000..a6f82c6
--- /dev/null
+++ b/assets/javascripts/discourse/connectors/top-notices/encrypt.js.es6
@@ -0,0 +1,69 @@
+import { getOwner } from "discourse-common/lib/get-owner";
+import {
+  ENCRYPT_ACTIVE,
+  ENCRYPT_DISABLED,
+  getEncryptionStatus
+} from "discourse/plugins/discourse-encrypt/lib/discourse";
+
+const NO_BACKUP_WARN_NOTICE_KEY = "discourse-encrypt-no-backup-warn";
+
+export default {
+  setupComponent(args, component) {
+    const currentUser = getOwner(component).lookup("current-user:main");
+    const status = getEncryptionStatus(currentUser);
+
+    component.setProperties({
+      model: args.model,
+      isEncryptEnabled: status !== ENCRYPT_DISABLED,
+      isEncryptActive: status === ENCRYPT_ACTIVE,
+      showNoBackupWarning: 15,
+
+      /** Listens for encryption status updates. */
+      listener() {
+        const newStatus = getEncryptionStatus(currentUser);
+        component.setProperties({
+          isEncryptEnabled: newStatus !== ENCRYPT_DISABLED,
+          isEncryptActive: newStatus === ENCRYPT_ACTIVE
+        });
+      },
+
+      didInsertElement() {
+        this._super(...arguments);
+        this.appEvents.on("encrypt:status-changed", this, this.listener);
+      },
+
+      willDestroyElement() {
+        this._super(...arguments);
+        this.appEvents.off("encrypt:status-changed", this, this.listener);
+      }
+    });
+
+    Ember.defineProperty(component, "noticeStatus", {
+      set(value) {
+        window.localStorage.setItem(NO_BACKUP_WARN_NOTICE_KEY, value);
+        return window.localStorage.getItem(NO_BACKUP_WARN_NOTICE_KEY);
+      },
+      get() {
+        return window.localStorage.getItem(NO_BACKUP_WARN_NOTICE_KEY);
+      }
+    });
+
+    Ember.defineProperty(
+      component,
+      "showNoBackupWarning",
+      Ember.computed(
+        "isEncryptActive",
+        "noticeStatus",
+        "currentUser.custom_fields.encrypt_private",
+        () => {
+          const ids = this.get("currentUser.custom_fields.encrypt_private");
+          return (
+            this.isEncryptActive &&
+            !this.noticeStatus &&
+            (!ids || Object.keys(JSON.parse(ids)).length === 0)
+          );
+        }
+      )
+    );
+  }
+};
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 61e6df7..5327176 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -5,6 +5,8 @@ en:
       decrypting: "Decrypting..."
       decryption_failed: "This message could not be decrypted."
 
+      no_backup_warn: "You enabled encryption, but did not generate any paper keys. Without any paper keys, you risk losing access to your encrypted messages. To generate one, please navigate to <a href='/my/preferences/account'>user preferences page</a>, press the <kbd>Generate Paper Key</kbd> button and follow the instructions."
+
       integrity_check_pass: "The integrity check for this post has passed."
       integrity_check_fail: "The integrity check for this post has failed ({{fields}} mismatch)."
       integrity_check_warn_updated_at: "Post metadata was updated without being signed again."

GitHub sha: 340deb3b

1 Like

I like the modern ember code! Nice.