FIX: NaN issue and remaining not being tracked (#113)

With https://github.com/discourse/discourse-signatures/pull/105 we had an issue where the character count would show NaN when the signature was empty.

For some reason it was not being auto tracked so when you hit the keys now it should update the UI as expected.

assets/javascripts/discourse/connectors/user-custom-preferences/signature-preferences.gjs

@@ -1,14 +1,18 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import DEditor from "discourse/components/d-editor";
+import withEventValue from "discourse/helpers/with-event-value";
 import { i18n } from "discourse-i18n";
 
 export default class SignaturePreferences extends Component {
   @service currentUser;
   @service siteSettings;
 
+  @tracked _signatureRaw = this.args.model.custom_fields?.signature_raw || "";
+
   get canHaveSignature() {
     return this.currentUser?.can_have_signature !== false;
   }
@@ -18,8 +22,7 @@ export default class SignaturePreferences extends Component {
   }
 
   get charactersRemaining() {
-    const raw = this.args.model.custom_fields?.signature_raw || "";
-    return this.maxLength - raw.length;
+    return this.maxLength - this._signatureRaw.length;
   }
 
   @action
@@ -34,6 +37,12 @@ export default class SignaturePreferences extends Component {
     this.args.model.set("custom_fields.signature_url", event.target.value);
   }
 
+  @action
+  updateRawSignature(value) {
+    this._signatureRaw = value;
+    this.args.model.set("custom_fields.signature_raw", value);
+  }
+
   <template>
     {{#if this.siteSettings.signatures_enabled}}
       <div class="user-custom-preferences-outlet signature-preferences">
@@ -59,7 +68,10 @@ export default class SignaturePreferences extends Component {
               }}</label>
             <div class="controls input-xxlarge">
               {{#if this.siteSettings.signatures_advanced_mode}}
-                <DEditor @value={{@model.custom_fields.signature_raw}} />
+                <DEditor
+                  @value={{@model.custom_fields.signature_raw}}
+                  @change={{withEventValue this.updateRawSignature}}
+                />
                 <span class="signature-char-count">
                   {{i18n
                     "signatures.characters_remaining"

config/settings.yml

@@ -22,6 +22,7 @@ plugins:
     default: false
     client: true
   signatures_max_length:
+    client: true
     default: 500
     min: 50
     max: 10000

spec/system/signature_character_count_spec.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+RSpec.describe "Signature character count" do
+  fab!(:user)
+
+  before do
+    enable_current_plugin
+    SiteSetting.signatures_enabled = true
+    SiteSetting.signatures_advanced_mode = true
+    SiteSetting.signatures_max_length = 500
+  end
+
+  it "shows max length when user has no signature" do
+    sign_in(user)
+    visit "/my/preferences/profile"
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 500),
+    )
+  end
+
+  it "shows max length when user has a null signature_raw" do
+    user.custom_fields["signature_raw"] = nil
+    user.save_custom_fields
+
+    sign_in(user)
+    visit "/my/preferences/profile"
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 500),
+    )
+  end
+
+  it "shows correct remaining characters when user has an existing signature" do
+    user.custom_fields["signature_raw"] = "Hello world"
+    user.save_custom_fields
+
+    sign_in(user)
+    visit "/my/preferences/profile"
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 489),
+    )
+  end
+
+  it "updates remaining characters as user types" do
+    sign_in(user)
+    visit "/my/preferences/profile"
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 500),
+    )
+
+    find(".signature-preferences .d-editor-input").send_keys("Test signature")
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 486),
+    )
+  end
+end