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

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">

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');

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]);
+});