From bec71d78401f227a82652c6c8e194e811bddaea1 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Fri, 7 Apr 2023 17:15:15 +0200
Subject: [PATCH] Added maximum signup terms count in HTML

refs https://github.com/TryGhost/Team/issues/2680

- Includes a new helper that is able to count HTML characters
- Prevent saving portal settings when maximum length is exceeded
---
 .../app/components/modal-portal-settings.hbs  |  8 +++++--
 .../app/components/modal-portal-settings.js   | 22 +++++++++++++++++++
 .../helpers/gh-count-down-html-characters.js  | 16 ++++++++++++++
 3 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 ghost/admin/app/helpers/gh-count-down-html-characters.js

diff --git a/ghost/admin/app/components/modal-portal-settings.hbs b/ghost/admin/app/components/modal-portal-settings.hbs
index 4bd85deb4b..63914f2d3d 100644
--- a/ghost/admin/app/components/modal-portal-settings.hbs
+++ b/ghost/admin/app/components/modal-portal-settings.hbs
@@ -140,7 +140,7 @@
                                     </div>
 
                                     {{#if (feature "makingItRain")}}
-                                        <GhFormGroup class="gh-stack-item mt5 mb5">
+                                        <GhFormGroup class="gh-stack-item mt5 mb5" @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}}>
                                             <label class="modal-fullsettings-title">Notice on signup</label>
                                             <KoenigBasicHtmlInput
                                                 @name="footer"
@@ -148,7 +148,11 @@
                                                 @class="miw-100 form-text gh-members-emailsettings-footer-input"
                                                 @onChange={{action "setTermsHtml"}}
                                             />
-                                            <p>Select any text to add a link</p>
+                                            <GhErrorMessage @errors={{this.settings.errors}} @property="portalSignupTermsHtml" />
+                                            <p>
+                                                Recommended: <strong>{{this.maxTermsLength}}</strong> characters.
+                                                You've used {{gh-count-down-html-characters this.settings.portalSignupTermsHtml this.maxTermsLength}}
+                                            </p>
                                         </GhFormGroup>
 
                                         <GhFormGroup class="gh-members-subscribed-checkbox gh-portal-setting-first mb0 b--whitegrey space-l">
diff --git a/ghost/admin/app/components/modal-portal-settings.js b/ghost/admin/app/components/modal-portal-settings.js
index f11a76d0e9..5a994deaec 100644
--- a/ghost/admin/app/components/modal-portal-settings.js
+++ b/ghost/admin/app/components/modal-portal-settings.js
@@ -29,6 +29,7 @@ export default ModalComponent.extend({
     openSection: null,
     portalPreviewGuid: 'modal-portal-settings',
     closeOnEnter: false,
+    maxTermsLength: 115,
 
     confirm() {},
 
@@ -268,6 +269,26 @@ export default ModalComponent.extend({
 
         toggleSignupCheckboxRequired(checked) {
             this.settings.portalSignupCheckboxRequired = checked;
+        },
+
+        validateTermsHtml() {
+            let content = this.settings.portalSignupTermsHtml ?? '';
+
+            // Strip HTML-tags and characters from content so we have a reliable character count
+            content = content.replace(/<[^>]*>?/gm, '');
+            content = content.replace(/&nbsp;/g, ' ');
+            content = content.replace(/&amp;/g, '&');
+            content = content.replace(/&quot;/g, '"');
+            content = content.replace(/&lt;/g, '<');
+            content = content.replace(/&gt;/g, '>');
+
+            this.settings.errors.remove('portalSignupTermsHtml');
+            this.settings.hasValidated.removeObject('portalSignupTermsHtml');
+
+            if (content.length > this.maxTermsLength) {
+                this.settings.errors.add('portalSignupTermsHtml', 'Too many characters');
+                this.settings.hasValidated.pushObject('portalSignupTermsHtml');
+            }
         }
     },
 
@@ -367,6 +388,7 @@ export default ModalComponent.extend({
     saveTask: task(function* () {
         this.send('validateFreeSignupRedirect');
         this.send('validatePaidSignupRedirect');
+        this.send('validateTermsHtml');
 
         this.settings.errors.remove('members_support_address');
         this.settings.hasValidated.removeObject('members_support_address');
diff --git a/ghost/admin/app/helpers/gh-count-down-html-characters.js b/ghost/admin/app/helpers/gh-count-down-html-characters.js
new file mode 100644
index 0000000000..7af8e98577
--- /dev/null
+++ b/ghost/admin/app/helpers/gh-count-down-html-characters.js
@@ -0,0 +1,16 @@
+import {countDownCharacters} from './gh-count-down-characters';
+import {helper} from '@ember/component/helper';
+
+export default helper(function (params) {
+    let [content, maxCharacters] = params;
+
+    // Strip HTML-tags and characters from content so we have a reliable character count
+    content = content.replace(/<[^>]*>?/gm, '');
+    content = content.replace(/&nbsp;/g, ' ');
+    content = content.replace(/&amp;/g, '&');
+    content = content.replace(/&quot;/g, '"');
+    content = content.replace(/&lt;/g, '<');
+    content = content.replace(/&gt;/g, '>');
+
+    return countDownCharacters([content, maxCharacters]);
+});