Merge pull request #953 from elitzer2/required-custom-fields

(v2) Required custom fields (client side validation only)

client/src/lists/fields/CUD.js

@@ -173,7 +173,7 @@ export default class CUD extends Component {
             data.orderManageBefore = Number.parseInt(data.orderManageBefore) || data.orderManageBefore;
         }
 
-        return filterData(data, ['name', 'help', 'key', 'default_value', 'type', 'group', 'settings',
+        return filterData(data, ['name', 'help', 'key', 'default_value', 'required', 'type', 'group', 'settings',
             'orderListBefore', 'orderSubscribeBefore', 'orderManageBefore']);
     }
 
@@ -187,6 +187,7 @@ export default class CUD extends Component {
                 type: 'text',
                 key: '',
                 default_value: '',
+                required: false,
                 help: '',
                 group: null,
                 isInGroup: false,
@@ -513,6 +514,8 @@ export default class CUD extends Component {
 
                     <TextArea id="help" label={t('helpText')}/>
 
+                    <CheckBox id="required" label={t('requiredClientSideValidation')}/>
+
                     {fieldSettings}
 
                     {type !== 'option' &&

client/static/subscription/form-input-style.css

@@ -44,6 +44,16 @@ label {
     margin-left: .3em;
 }
 
+form button {
+    background: #2D3E4F;
+    color: white;
+    font-size: 16px;
+    font-weight: normal;
+    padding: 16px 24px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+}
 
 /* --- Inputs ------------- */
 

locales/de-DE/common.json

@@ -38,6 +38,7 @@
   "yourPersonalAccessToken": "Persönlicher Zugriffs-Token",
   "subscribersEmailAddress": "Abonnenten E-Mail-Adresse",
   "required": "benötigt",
+  "requiredClientSideValidation": "Erforderlich (nur clientseitige Validierung)",
   "subscribersFirstName": "Abonnenten Vorname",
   "subscribersLastName": "Abonnenten Familienname",
   "subscribersTimezoneEgEuropeTallinnPstOr": "Abonnenten Zeitzone (bsp. \"Europe/Tallinn\", \"PST\" oder \"UTC\"). Standardwert \"UTC\"",

locales/en-US/common.json

@@ -38,6 +38,7 @@
   "yourPersonalAccessToken": "your personal access token",
   "subscribersEmailAddress": "subscriber's email address",
   "required": "required",
+  "requiredClientSideValidation": "Required (client-side validation only)",
   "subscribersFirstName": "subscriber's first name",
   "subscribersLastName": "subscriber's last name",
   "subscribersTimezoneEgEuropeTallinnPstOr": "subscriber's timezone (eg. \"Europe/Tallinn\", \"PST\" or \"UTC\"). If not set defaults to \"UTC\"",

locales/es-ES/common.json

@@ -38,6 +38,7 @@
   "yourPersonalAccessToken": "tu token de acceso personal",
   "subscribersEmailAddress": "email del suscriptor",
   "required": "requerido",
+  "requiredClientSideValidation": "Obligatorio (solo validación del lado del cliente)",
   "subscribersFirstName": "nombre del suscriptor",
   "subscribersLastName": "apellidos del suscriptor",
   "subscribersTimezoneEgEuropeTallinnPstOr": "zona horaria del suscriptor (eg. \"Europe/Tallinn\", \"PST\" or \"UTC\"). Si no, asigna por defecto a \"UTC\"",

locales/fr-FR/common.json

@@ -38,6 +38,7 @@
   "yourPersonalAccessToken": "votre jeton d'accès personnel",
   "subscribersEmailAddress": "adresse e-mail de l'abonné",
   "required": "obligatoire",
+  "requiredClientSideValidation": "Obligatoire (validation côté client uniquement)",
   "subscribersFirstName": "prénom de l'abonné",
   "subscribersLastName": "nom de l'abonné",
   "subscribersTimezoneEgEuropeTallinnPstOr": "fuseau horaire de l'abonné (par exemple. \"Europe / Tallinn\", \"PST\" ou \"UTC\"). S'il n'est pas défini par défaut sur \"UTC\"",

locales/pt-BR/common.json

@@ -38,6 +38,7 @@
   "yourPersonalAccessToken": "seu token de acesso pessoal",
   "subscribersEmailAddress": "endereço de e-mail do assinante",
   "required": "obrigatório",
+  "requiredClientSideValidation": "Obrigatório (apenas validação do lado do cliente)",
   "subscribersFirstName": "primeiro nome do assinante",
   "subscribersLastName": "sobrenome do assinante",
   "subscribersTimezoneEgEuropeTallinnPstOr": "Fuso horário do assinante (por exemplo, \"Europe/Tallinn\", \"PST\"ou \"UTC\"). Se não for definido será considerado \"UTC\"",

server/models/fields.js

@@ -19,9 +19,8 @@ const { getMergeTagsForBases } = require('../../shared/templates');
 const {ListActivityType} = require('../../shared/activity-log');
 const activityLog = require('../lib/activity-log');
 
-
+const allowedKeysCreate = new Set(['name', 'help', 'key', 'default_value', 'required', 'type', 'group', 'settings']);
-const allowedKeysCreate = new Set(['name', 'help', 'key', 'default_value', 'type', 'group', 'settings']);
+const allowedKeysUpdate = new Set(['name', 'help', 'key', 'default_value', 'required', 'group', 'settings']);
-const allowedKeysUpdate = new Set(['name', 'help', 'key', 'default_value', 'group', 'settings']);
 const hashKeys = allowedKeysCreate;
 
 const fieldTypes = {};
@@ -304,7 +303,7 @@ async function getById(context, listId, id) {
 }
 
 async function listTx(tx, listId) {
-    return await tx('custom_fields').where({list: listId}).select(['id', 'name', 'type', 'help', 'key', 'column', 'settings', 'group', 'default_value', 'order_list', 'order_subscribe', 'order_manage']).orderBy(knex.raw('-order_list'), 'desc').orderBy('id', 'asc');
+    return await tx('custom_fields').where({list: listId}).select(['id', 'name', 'type', 'help', 'key', 'column', 'settings', 'group', 'default_value', 'required', 'order_list', 'order_subscribe', 'order_manage']).orderBy(knex.raw('-order_list'), 'desc').orderBy('id', 'asc');
 }
 
 async function list(context, listId) {
@@ -664,6 +663,7 @@ function forHbsWithFieldsGrouped(fieldsGrouped, subscription) { // assumes group
             help: fld.help,
             field: fld,
             [type.getHbsType(fld)]: true,
+            required: fld.required,
             order_subscribe: fld.order_subscribe,
             order_manage: fld.order_manage
         };
@@ -690,6 +690,7 @@ function forHbsWithFieldsGrouped(fieldsGrouped, subscription) { // assumes group
                     key: opt.key,
                     name: opt.name,
                     help: opt.help,
+                    required: opt.required,
                     value: isEnabled
                 });
             }
@@ -705,7 +706,8 @@ function forHbsWithFieldsGrouped(fieldsGrouped, subscription) { // assumes group
                     key: opt.key,
                     name: opt.label,
                     help: opt.help,
-                    value: value === opt.key
+                    value: value === opt.key,
+                    required: fld.required
                 });
             }
 

server/setup/knex/migrations/20200830140000_required_custom_fields.js

@@ -0,0 +1,8 @@
+exports.up = (knex, Promise) => (async() => {
+    await knex.schema.table('custom_fields', function(t) {
+        t.boolean('required').notNull().defaultTo(0).after('default_value');
+    });
+})();
+
+exports.down = (knex, Promise) => (async() => {
+})();

server/views/subscription/partials/subscription-custom-fields.hbs

@@ -18,7 +18,7 @@
     {{#if typeText}}
         <div class="form-group text {{key}}">
             <label for="{{key}}">{{name}}</label>
-            <input type="text" name="{{key}}" value="{{value}}">
+            <input type="text" name="{{key}}" value="{{value}}" {{#if required}} required {{/if}}>
             <small class="form-text text-muted">{{help}}</small>
         </div>
     {{/if}}
@@ -26,7 +26,7 @@
     {{#if typeNumber}}
         <div class="form-group number {{key}}">
             <label for="{{key}}">{{name}}</label>
-            <input type="number" name="{{key}}" value="{{value}}">
+            <input type="number" name="{{key}}" value="{{value}}" {{#if required}} required {{/if}}>
             <small class="form-text text-muted">{{help}}</small>
         </div>
     {{/if}}
@@ -34,7 +34,7 @@
     {{#if typeWebsite}}
         <div class="form-group url {{key}}">
             <label for="{{key}}">{{name}}</label>
-            <input type="url" name="{{key}}" value="{{value}}">
+            <input type="url" name="{{key}}" value="{{value}}" {{#if required}} required {{/if}}>
             <small class="form-text text-muted">{{help}}</small>
         </div>
     {{/if}}
@@ -42,7 +42,7 @@
     {{#if typeLongtext}}
         <div class="form-group longtext {{key}}">
             <label for="{{key}}">{{name}}</label>
-            <textarea rows="3" name="{{key}}">{{value}}</textarea>
+            <textarea rows="3" name="{{key}}" {{#if required}} required {{/if}}>{{value}}</textarea>
             <small class="form-text text-muted">{{help}}</small>
         </div>
     {{/if}}
@@ -50,7 +50,7 @@
     {{#if typeJson}}
         <div class="form-group json {{key}}">
             <label for="{{key}}">{{name}}</label>
-            <textarea class="gpg-text" rows="3" name="{{key}}" placeholder="{&quot;data&quot;:&quot;value&quot;}">{{value}}</textarea>
+            <textarea class="gpg-text" rows="3" name="{{key}}" placeholder="{&quot;data&quot;:&quot;value&quot;}" {{#if required}} required {{/if}}>{{value}}</textarea>
             <small class="form-text text-muted">{{help}}</small>
         </div>
     {{/if}}
@@ -59,7 +59,7 @@
         <div class="form-group checkbox">
             <label>{{name}}</label>
             <label class="label-checkbox">
-                <input type="checkbox" name="{{key}}" value="1" {{#if value}} checked {{/if}}> {{field.settings.checkedLabel}}
+                <input type="checkbox" name="{{key}}" value="1" {{#if value}} checked {{/if}} {{#if required}} required {{/if}}> {{field.settings.checkedLabel}}
             </label>
             <input type="hidden" value="0" name="{{key}}">
             <small class="form-text text-muted">{{help}}</small>
@@ -72,7 +72,7 @@
             {{#if ../hasPubkey}}
                 <button class="btn-download-pubkey" type="submit" form="download-pubkey">{{#translate}}downloadSignatureVerificationKey{{/translate}}</button>
             {{/if}}
-            <textarea class="form-control gpg-text" rows="4" name="{{key}}" placeholder="{{#translate}}beginsWithAnd#39BeginPgpPublicKeyBloc{{/translate}}">{{value}}</textarea>
+            <textarea class="form-control gpg-text" rows="4" name="{{key}}" placeholder="{{#translate}}beginsWithAnd#39BeginPgpPublicKeyBloc{{/translate}}" {{#if required}} required {{/if}}>{{value}}</textarea>
             <small class="form-text text-muted">{{#translate}}insertYourGpgPublicKeyHereToEncrypt{{/translate}}</small>
             <small class="form-text text-muted">{{help}}</small>
         </div>
@@ -81,7 +81,7 @@
     {{#if typeDateUs}}
         <div class="form-group date fm-date-us {{key}}">
             <label for="{{key}}">{{name}}</label>
-            <input type="text" name="{{key}}" placeholder="MM/DD/YYYY" value="{{value}}">
+            <input type="text" name="{{key}}" placeholder="MM/DD/YYYY" value="{{value}}" {{#if required}} required {{/if}}>
             <small class="form-text text-muted">{{help}}</small>
         </div>
     {{/if}}
@@ -89,7 +89,7 @@
     {{#if typeDateEur}}
         <div class="form-group date fm-date-eur {{key}}">
             <label for="{{key}}">{{name}}</label>
-            <input type="text" name="{{key}}" placeholder="DD/MM/YYYY" value="{{value}}">
+            <input type="text" name="{{key}}" placeholder="DD/MM/YYYY" value="{{value}}" {{#if required}} required {{/if}}>
             <small class="form-text text-muted">{{help}}</small>
         </div>
     {{/if}}
@@ -97,7 +97,7 @@
     {{#if typeBirthdayUs}}
         <div class="form-group date fm-birthday-us {{key}}">
             <label for="{{key}}">{{name}}</label>
-            <input type="text" name="{{key}}" placeholder="MM/DD" value="{{value}}">
+            <input type="text" name="{{key}}" placeholder="MM/DD" value="{{value}}" {{#if required}} required {{/if}}>
             <small class="form-text text-muted">{{help}}</small>
         </div>
     {{/if}}
@@ -105,7 +105,7 @@
     {{#if typeBirthdayEur}}
         <div class="form-group date fm-birthday-eur {{key}}">
             <label for="{{key}}">{{name}}</label>
-            <input type="text" name="{{key}}" placeholder="DD/MM" value="{{value}}">
+            <input type="text" name="{{key}}" placeholder="DD/MM" value="{{value}}" {{#if required}} required {{/if}}>
             <small class="form-text text-muted">{{help}}</small>
         </div>
     {{/if}}
@@ -113,7 +113,7 @@
     {{#if typeDropdownGrouped }}
         <div class="form-group dropdown {{key}}">
             <label for="{{key}}">{{name}}</label>
-            <select name="{{key}}" class="form-control">
+            <select name="{{key}}" class="form-control" {{#if required}} required {{/if}}>
                 <option value="">
                     {{#translate}}––Select ––{{/translate}}
                 </option>
@@ -130,7 +130,7 @@
             <label for="{{key}}">{{name}}</label>
             {{#each options}}
                 <label class="label-radio">
-                    <input type="radio" name="{{../key}}" value="{{key}}" {{#if value}} checked {{/if}}> {{name}}
+                    <input type="radio" name="{{../key}}" value="{{key}}" {{#if value}} checked {{/if}} {{#if required}} required {{/if}}> {{name}}
                 </label>
             {{/each}}
             <small class="form-text text-muted">{{help}}</small>
@@ -143,7 +143,7 @@
             <label>{{name}}</label>
             {{#each options}}
                 <label class="label-checkbox">
-                    <input type="checkbox" name="{{key}}" value="1" {{#if value}} checked {{/if}}> {{name}}
+                    <input type="checkbox" name="{{key}}" value="1" {{#if value}} checked {{/if}} {{#if required}} required {{/if}}> {{name}}
                 </label>
                 <small class="option-help-block form-text text-muted">{{help}}</small>
             {{/each}}
@@ -153,7 +153,7 @@
     {{#if typeDropdownEnum }}
         <div class="form-group dropdown {{key}}">
             <label for="{{key}}">{{name}}</label>
-            <select name="{{key}}" class="form-control">
+            <select name="{{key}}" class="form-control" {{#if required}} required {{/if}}>
                 <option value="">
                     –– Select ––
                 </option>
@@ -170,7 +170,7 @@
             <label for="{{key}}">{{name}}</label>
             {{#each options}}
                 <label class="label-radio">
-                    <input type="radio" name="{{../key}}" value="{{key}}" {{#if value}} checked {{/if}}> {{name}}
+                    <input type="radio" name="{{../key}}" value="{{key}}" {{#if value}} checked {{/if}} {{#if required}} required {{/if}}> {{name}}
                 </label>
             {{/each}}
             <small class="form-text text-muted">{{help}}</small>

server/views/subscription/partials/subscription-manage-form.hbs

@@ -12,7 +12,7 @@
 
 {{> subscription_custom_fields}}
 
-    <button type="submit" style="position: absolute; top: -9999px; left: -9999px;">{{#translate}}updateProfile{{/translate}}</button>
+    <button type="submit">{{#translate}}updateProfile{{/translate}}</button>
 </form>
 
 <script src="/moment/moment.min.js"></script>

server/views/subscription/partials/subscription-subscribe-form.hbs

@@ -14,7 +14,7 @@
 
 {{> subscription_custom_fields}}
 
-    <button type="submit" style="position: absolute; top: -9999px; left: -9999px;">{{#translate}}subscribeToList{{/translate}}</button>
+    <button type="submit">{{#translate}}subscribeToList{{/translate}}</button>
 </form>
 
 <script>

server/views/subscription/web-manage.mjml.hbs

@@ -6,9 +6,6 @@
         <mj-text>
 {{> subscription_manage_form}}<!-- don't indent me! -->
         </mj-text>
-        <mj-button mj-class="button" href="#submit">
-            Update Profile
-        </mj-button>
         <mj-text mj-class="p">
             <a href="/subscription/{{lcid}}/unsubscribe/{{cid}}">Unsubscribe</a>
         </mj-text>

server/views/subscription/web-subscribe.mjml.hbs

@@ -6,8 +6,5 @@
         <mj-text>
 {{> subscription_subscribe_form}}<!-- don't indent me! -->
         </mj-text>
-        <mj-button mj-class="button" href="#submit">
-            Subscribe to list
-        </mj-button>
     </mj-column>
 </mj-section>