@mindful-web/marko-web-identity-x 1.20.3 → 1.31.2

package/api/queries/get-active-context.js

@@ -1,9 +1,44 @@
 const gql = require('graphql-tag');
 const userFragment = require('../fragments/active-user');
 
-module.exports = gql`
+const fieldsQuery = `
+  fields {
+    edges {
+      node {
+        id
+        label
+        active
+        required
+        externalId {
+          id
+          namespace { provider tenant type }
+          identifier { value type }
+        }
+        ... on SelectField {
+          multiple
+          options: choices {
+            id
+            label
+            ... on SelectFieldOption {
+              canWriteIn
+            }
+            ... on SelectFieldOptionGroup {
+              options {
+                id
+                label
+                canWriteIn
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
 
+module.exports = ({ withFields = false }) => gql`
 query GetActiveAppContext {
+  ${withFields ? fieldsQuery : ''}
   activeAppContext {
     application {
       id

package/browser/custom-column.vue

@@ -127,7 +127,7 @@
       :selected="customField.answers"
       :options="customField.field.options"
       :lang="lang"
-      @change="onCustomSelectChange(customField.answers, $event)"
+      @change="onCustomSelectChange(customField, $event)"
     />
     <custom-boolean
       v-else-if="type === 'custom-boolean' && customField"
@@ -138,6 +138,15 @@
       :value="customField.answer"
       @input="onCustomBooleanChange(customField.id, $event)"
     />
+    <custom-text
+      v-else-if="type === 'custom-text' && customField"
+      :id="fieldId"
+      :class-name="className"
+      :label="label"
+      :required="required"
+      :value="customField.value"
+      @change="onCustomTextChange(customField, $event)"
+    />
     <pre v-else>
       label: {{ label }}
       key: {{ fieldKey }}
@@ -156,6 +165,7 @@ import City from './form/fields/city.vue';
 import CountryCode from './form/fields/country.vue';
 import CustomBoolean from './form/fields/custom-boolean.vue';
 import CustomSelect from './form/fields/custom-select.vue';
+import CustomText from './form/fields/custom-text.vue';
 import FamilyName from './form/fields/family-name.vue';
 import FormLabel from './form/common/form-label.vue';
 import GivenName from './form/fields/given-name.vue';
@@ -177,6 +187,7 @@ export default {
     CountryCode,
     CustomSelect,
     CustomBoolean,
+    CustomText,
     FamilyName,
     FormLabel,
     GivenName,
@@ -208,7 +219,7 @@ export default {
       type: String,
       required: true,
       validator(value) {
-        return ['built-in', 'custom-select', 'custom-boolean'].includes(value);
+        return ['built-in', 'custom-select', 'custom-boolean', 'custom-text'].includes(value);
       },
     },
     required: {
@@ -266,7 +277,20 @@ export default {
      */
     customField() {
       const { fieldId, user, type } = this;
-      const key = type === 'custom-select' ? 'customSelectFieldAnswers' : 'customBooleanFieldAnswers';
+
+      let key = 'customSelectFieldAnswers';
+
+      switch (type) {
+        case 'custom-text':
+          key = 'customTextFieldAnswers';
+          break;
+        case 'custom-boolean':
+          key = 'customBooleanFieldAnswers';
+          break;
+        // ... more cases
+        default:
+          // Code to execute if no case matches the expression
+      }
       const found = user[key].find((ans) => ans.id === fieldId);
       return found;
     },
@@ -325,16 +349,34 @@ export default {
       const objIndex = this.customBooleanFieldAnswers.findIndex(((obj) => obj.id === id));
       const answer = !this.customBooleanFieldAnswers[objIndex].answer;
       this.customBooleanFieldAnswers[objIndex].answer = answer;
+      this.customBooleanFieldAnswers[objIndex].hasAnswered = true;
       this.user.customBooleanFieldAnswers = this.customBooleanFieldAnswers;
     },
 
     /**
      *
      */
-    onCustomSelectChange(answers, $event) {
+    onCustomSelectChange(field, $event) {
       const ids = Array.isArray($event) ? [...$event] : [...($event ? [$event] : [])];
-      answers.splice(0);
-      if (ids.length) answers.push(...ids.map((id) => ({ id })));
+      field.answers.splice(0);
+      if (ids.length) {
+        // eslint-disable-next-line no-param-reassign
+        field.hasAnswered = true;
+        field.answers.push(...ids.map((id) => ({ id })));
+      }
+    },
+
+    /**
+     *
+     */
+    onCustomTextChange(field, $event) {
+      // hack to prevent on focus out with no value from resetting value
+      // @todo find a better solution!!!
+      const value = $event === '' && field.value !== '' ? field.value : $event;
+      this.customField.value = $event;
+      // eslint-disable-next-line max-len
+      const customTextFieldAnswers = this.user.customTextFieldAnswers.map((obj) => (obj.id === field.id ? { ...obj, value, hasAnswered: value !== '' } : obj));
+      this.user.customTextFieldAnswers = customTextFieldAnswers;
     },
   },
 };

package/browser/login.vue

@@ -31,24 +31,23 @@
       <p v-if="requiresUserInput">
         Thanks! Additional information is required to continue:
       </p>
-      <div v-if="requiresUserInput" class="row form-group">
-        <div v-if="requiredCreateFields.includes('givenName')" class="col">
-          <given-name
-            v-model="givenName"
-            :required="true"
-            :disabled="loading"
-            :label="defaultFieldLabels.givenName || 'First Name'"
+      <fieldset v-if="requiresUserInput" :disabled="loading" class="form-group">
+        <div v-for="(row, ridx) in requiredCreateFieldRows" :key="ridx" class="row">
+          <custom-column
+            v-for="(col, cidx) in row"
+            :key="`${ridx}_${cidx}`"
+            :label="col.label || defaultFieldLabels[col.key]"
+            :field-key="col.key"
+            :field-id="col.id"
+            :type="col.type"
+            :required="col.required"
+            :width="col.width || 1"
+            :user="activeUser"
+            :endpoints="endpoints"
+            :lang="lang"
           />
         </div>
-        <div v-if="requiredCreateFields.includes('familyName')" class="col">
-          <family-name
-            v-model="familyName"
-            :required="true"
-            :disabled="loading"
-            :label="defaultFieldLabels.familyName || 'Last Name'"
-          />
-        </div>
-      </div>
+      </fieldset>
 
       <small
         v-if="emailConsentRequestEnabled && emailConsentRequest"
@@ -77,8 +76,7 @@
 
 <script>
 import Email from './form/fields/email.vue';
-import GivenName from './form/fields/given-name.vue';
-import FamilyName from './form/fields/family-name.vue';
+import CustomColumn from './custom-column.vue';
 
 import cleanPath from './utils/clean-path';
 import post from './utils/post';
@@ -94,8 +92,7 @@ export default {
    */
   components: {
     Email,
-    GivenName,
-    FamilyName,
+    CustomColumn,
   },
 
   /**
@@ -185,7 +182,7 @@ export default {
       default: () => [],
     },
 
-    requiredCreateFields: {
+    requiredCreateFieldRows: {
       type: Array,
       default: () => [],
     },
@@ -201,8 +198,6 @@ export default {
    */
   data: () => ({
     email: null,
-    givenName: null,
-    familyName: null,
     complete: false,
     error: null,
     loading: false,
@@ -311,9 +306,8 @@ export default {
         this.error = null;
         this.loading = true;
         const res = await post('/login', {
+          ...this.activeUser,
           email: this.email,
-          // Append any additional required fields
-          ...(this.requiredCreateFields.reduce((obj, key) => ({ ...obj, [key]: this[key] }), {})),
           source: this.source,
           redirectTo: this.redirectTo,
           authUrl: this.authUrl,

package/components/access.marko.js

@@ -2,7 +2,7 @@
 "use strict";
 
 var marko_template = module.exports = require("marko/dist/html").t(__filename),
-    marko_componentType = "/@mindful-web/marko-web-identity-x$1.20.3/components/access.marko",
+    marko_componentType = "/@mindful-web/marko-web-identity-x$1.31.2/components/access.marko",
     marko_component = require("./access.marko"),
     marko_renderer = require("marko/dist/runtime/components/renderer"),
     module_objectPath_module = require("@mindful-web/object-path"),
@@ -53,7 +53,7 @@ marko_template._ = marko_renderer(render, {
   }, marko_component);
 
 marko_template.meta = {
-    id: "/@mindful-web/marko-web-identity-x$1.20.3/components/access.marko",
+    id: "/@mindful-web/marko-web-identity-x$1.31.2/components/access.marko",
     component: "./access.marko",
     tags: [
       "@mindful-web/marko-core/components/resolve.marko"

package/components/comment-stream.marko

@@ -24,7 +24,7 @@ $ const dateFormat = input.dateFormat || defaultValue(site.config.dateFormat, "M
       consentPolicy: get(application, "organization.consentPolicy"),
       regionalConsentPolicies: get(application, "organization.regionalConsentPolicies"),
       appContextId: identityX.config.get("appContextId"),
-      requiredCreateFields: identityX.config.getRequiredCreateFields(),
+      requiredCreateFieldRows: identityX.config.getRequiredCreateFieldRows(),
       defaultFieldLabels: identityX.config.get("defaultFieldLabels"),
       headerText: get(site, 'config.comments.headerText'),
       loadMoreCommentsMessage: get(site, 'config.comments.loadMoreCommentsMessage'),

package/components/comment-stream.marko.js

@@ -2,7 +2,7 @@
 "use strict";
 
 var marko_template = module.exports = require("marko/dist/html").t(__filename),
-    marko_componentType = "/@mindful-web/marko-web-identity-x$1.20.3/components/comment-stream.marko",
+    marko_componentType = "/@mindful-web/marko-web-identity-x$1.31.2/components/comment-stream.marko",
     marko_component = require("./comment-stream.marko"),
     marko_renderer = require("marko/dist/runtime/components/renderer"),
     module_objectPath_module = require("@mindful-web/object-path"),
@@ -47,7 +47,7 @@ function render(input, out, __component, component, state) {
       consentPolicy: get(application, "organization.consentPolicy"),
       regionalConsentPolicies: get(application, "organization.regionalConsentPolicies"),
       appContextId: identityX.config.get("appContextId"),
-      requiredCreateFields: identityX.config.getRequiredCreateFields(),
+      requiredCreateFieldRows: identityX.config.getRequiredCreateFieldRows(),
       defaultFieldLabels: identityX.config.get("defaultFieldLabels"),
       headerText: get(site, 'config.comments.headerText'),
       loadMoreCommentsMessage: get(site, 'config.comments.loadMoreCommentsMessage'),
@@ -77,7 +77,7 @@ marko_template._ = marko_renderer(render, {
   }, marko_component);
 
 marko_template.meta = {
-    id: "/@mindful-web/marko-web-identity-x$1.20.3/components/comment-stream.marko",
+    id: "/@mindful-web/marko-web-identity-x$1.31.2/components/comment-stream.marko",
     component: "./comment-stream.marko",
     tags: [
       "@mindful-web/marko-web/components/browser-component.marko",

package/components/context.marko

@@ -1,15 +1,17 @@
 $ const { req } = out.global;
 $ const { identityX } = req;
 $ const isEnabled = Boolean(req.identityX);
-$ const loadContext = async () => (isEnabled ? identityX.loadActiveContext() : {
+$ const { withFields = false } = input;
+$ const loadContext = async ({ withFields }) => (isEnabled ? identityX.loadActiveContext({ withFields }) : {
   user: null,
   mergedAccessLevels: [],
   mergedTeams: [],
   hasTeams: false,
   hasUser: false,
+  fields: [],
 });
 
-<marko-web-resolve|{ resolved }| promise=loadContext()>
+<marko-web-resolve|{ resolved }| promise=loadContext({ withFields })>
   $ const output = { ...resolved, isEnabled };
   <${input.renderBody} ...output />
 </marko-web-resolve>

package/components/context.marko.js

@@ -2,7 +2,7 @@
 "use strict";
 
 var marko_template = module.exports = require("marko/dist/html").t(__filename),
-    marko_componentType = "/@mindful-web/marko-web-identity-x$1.20.3/components/context.marko",
+    marko_componentType = "/@mindful-web/marko-web-identity-x$1.31.2/components/context.marko",
     marko_component = require("./context.marko"),
     marko_renderer = require("marko/dist/runtime/components/renderer"),
     marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
@@ -19,16 +19,21 @@ function render(input, out, __component, component, state) {
 
   const isEnabled = Boolean(req.identityX);
 
-  const loadContext = async () => (isEnabled ? identityX.loadActiveContext() : {
+  const { withFields = false } = input;
+
+  const loadContext = async ({ withFields }) => (isEnabled ? identityX.loadActiveContext({ withFields }) : {
   user: null,
   mergedAccessLevels: [],
   mergedTeams: [],
   hasTeams: false,
   hasUser: false,
+  fields: [],
 });
 
   marko_web_resolve_tag({
-      promise: loadContext(),
+      promise: loadContext({
+          withFields: withFields
+        }),
       renderBody: function(out, { resolved }) {
         const output = { ...resolved, isEnabled };
 
@@ -44,7 +49,7 @@ marko_template._ = marko_renderer(render, {
   }, marko_component);
 
 marko_template.meta = {
-    id: "/@mindful-web/marko-web-identity-x$1.20.3/components/context.marko",
+    id: "/@mindful-web/marko-web-identity-x$1.31.2/components/context.marko",
     component: "./context.marko",
     tags: [
       "@mindful-web/marko-core/components/resolve.marko"

package/components/form-access.marko

@@ -48,7 +48,7 @@ $ const loginButtonLabels = defaultValue(input.loginButtonLabels, {
       defaultFieldLabels: identityX.config.get("defaultFieldLabels"),
       enableChangeEmail: identityX.config.get("enableChangeEmail"),
       endpoints: identityX.config.getEndpoints(),
-      requiredCreateFields: identityX.config.getRequiredCreateFields(),
+      requiredCreateFieldRows: identityX.config.getRequiredCreateFieldRows(),
 
       // Consent
       consentPolicy: consentPolicy,

package/components/form-access.marko.js

@@ -2,7 +2,7 @@
 "use strict";
 
 var marko_template = module.exports = require("marko/dist/html").t(__filename),
-    marko_componentType = "/@mindful-web/marko-web-identity-x$1.20.3/components/form-access.marko",
+    marko_componentType = "/@mindful-web/marko-web-identity-x$1.31.2/components/form-access.marko",
     marko_renderer = require("marko/dist/runtime/components/renderer"),
     module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
     defaultValue = module_defaultValue.default || module_defaultValue,
@@ -80,7 +80,7 @@ function render(input, out, __component, component, state) {
       defaultFieldLabels: identityX.config.get("defaultFieldLabels"),
       enableChangeEmail: identityX.config.get("enableChangeEmail"),
       endpoints: identityX.config.getEndpoints(),
-      requiredCreateFields: identityX.config.getRequiredCreateFields(),
+      requiredCreateFieldRows: identityX.config.getRequiredCreateFieldRows(),
 
       // Consent
       consentPolicy: consentPolicy,
@@ -114,7 +114,7 @@ marko_template._ = marko_renderer(render, {
   });
 
 marko_template.meta = {
-    id: "/@mindful-web/marko-web-identity-x$1.20.3/components/form-access.marko",
+    id: "/@mindful-web/marko-web-identity-x$1.31.2/components/form-access.marko",
     tags: [
       "@mindful-web/marko-web/components/browser-component.marko"
     ]

package/components/form-authenticate.marko.js

@@ -2,7 +2,7 @@
 "use strict";
 
 var marko_template = module.exports = require("marko/dist/html").t(__filename),
-    marko_componentType = "/@mindful-web/marko-web-identity-x$1.20.3/components/form-authenticate.marko",
+    marko_componentType = "/@mindful-web/marko-web-identity-x$1.31.2/components/form-authenticate.marko",
     marko_component = require("./form-authenticate.marko"),
     marko_renderer = require("marko/dist/runtime/components/renderer"),
     module_objectPath_module = require("@mindful-web/object-path"),
@@ -68,7 +68,7 @@ marko_template._ = marko_renderer(render, {
   }, marko_component);
 
 marko_template.meta = {
-    id: "/@mindful-web/marko-web-identity-x$1.20.3/components/form-authenticate.marko",
+    id: "/@mindful-web/marko-web-identity-x$1.31.2/components/form-authenticate.marko",
     component: "./form-authenticate.marko",
     tags: [
       "@mindful-web/marko-web/components/browser-component.marko",

package/components/form-change-email.marko.js

@@ -2,7 +2,7 @@
 "use strict";
 
 var marko_template = module.exports = require("marko/dist/html").t(__filename),
-    marko_componentType = "/@mindful-web/marko-web-identity-x$1.20.3/components/form-change-email.marko",
+    marko_componentType = "/@mindful-web/marko-web-identity-x$1.31.2/components/form-change-email.marko",
     marko_component = require("./form-change-email.marko"),
     marko_renderer = require("marko/dist/runtime/components/renderer"),
     module_objectPath_module = require("@mindful-web/object-path"),
@@ -59,7 +59,7 @@ marko_template._ = marko_renderer(render, {
   }, marko_component);
 
 marko_template.meta = {
-    id: "/@mindful-web/marko-web-identity-x$1.20.3/components/form-change-email.marko",
+    id: "/@mindful-web/marko-web-identity-x$1.31.2/components/form-change-email.marko",
     component: "./form-change-email.marko",
     tags: [
       "@mindful-web/marko-web/components/browser-component.marko",

package/components/form-login.marko

@@ -5,24 +5,43 @@ $ const { req, site } = out.global;
 $ const { identityX } = req;
 $ const additionalEventData = defaultValue(input.additionalEventData, {});
 $ const lang = input.lang || defaultValue(site.config.lang, "en");
+$ const withFields = defaultValue(input.withFields, false);
+
+
 
 <if(Boolean(identityX))>
-  <marko-web-identity-x-context|{ user, isEnabled, application }|>
+  <marko-web-identity-x-context|{ user, isEnabled, application, fields }| with-fields=true>
+    $ const customBooleanFieldAnswers = fields.filter((f) => f.__typename === 'BooleanField').map((f) => {
+      return { id: f.id, hasAnswered: false, answer: null, value: null, field: f };
+    });
+    $ const customSelectFieldAnswers = fields.filter((f) => f['__typename'] == 'SelectField').map((f) => {
+      return { id: f.id, hasAnswered: false, answers: [], field: f };
+    });
+    $ const customTextFieldAnswers = fields.filter((f) => f['__typename'] == 'TextField').map((f) => {
+      return { id: f.id, hasAnswered: false, value: null, field: f };
+    });
+    $ const activeUser = user ? user : {
+      email: null,
+      customSelectFieldAnswers,
+      customBooleanFieldAnswers,
+      customTextFieldAnswers,
+    } 
     $ const props = {
       additionalEventData,
       source: input.source,
       actionText: input.actionText,
-      activeUser: user,
+      activeUser,
       endpoints: identityX.config.getEndpoints(),
       buttonLabels: input.buttonLabels,
       redirect: input.redirect,
       loginEmailLabel: input.loginEmailLabel,
       loginEmailPlaceholder: input.loginEmailPlaceholder,
       defaultFieldLabels: identityX.config.get("defaultFieldLabels"),
-      requiredCreateFields: identityX.config.getRequiredCreateFields(),
+      requiredCreateFieldRows: identityX.config.getRequiredCreateFieldRows(),
       consentPolicy: identityX.config.get("consentPolicy") || get(application, "organization.consentPolicy"),
       regionalConsentPolicies: get(application, "organization.regionalConsentPolicies"),
       appContextId: identityX.config.get("appContextId"),
+      fields,
       lang,
     };
     <if(isEnabled)>

package/components/form-login.marko.js

@@ -2,7 +2,7 @@
 "use strict";
 
 var marko_template = module.exports = require("marko/dist/html").t(__filename),
-    marko_componentType = "/@mindful-web/marko-web-identity-x$1.20.3/components/form-login.marko",
+    marko_componentType = "/@mindful-web/marko-web-identity-x$1.31.2/components/form-login.marko",
     marko_component = require("./form-login.marko"),
     marko_renderer = require("marko/dist/runtime/components/renderer"),
     module_objectPath_module = require("@mindful-web/object-path"),
@@ -27,24 +27,47 @@ function render(input, out, __component, component, state) {
 
   const lang = input.lang || defaultValue(site.config.lang, "en");
 
+  const withFields = defaultValue(input.withFields, false);
+
   if (Boolean(identityX)) {
     marko_web_identity_x_context_tag({
-        renderBody: function(out, { user, isEnabled, application }) {
+        withFields: true,
+        renderBody: function(out, { user, isEnabled, application, fields }) {
+          const customBooleanFieldAnswers = fields.filter((f) => f.__typename === 'BooleanField').map((f) => {
+      return { id: f.id, hasAnswered: false, answer: null, value: null, field: f };
+    });
+
+          const customSelectFieldAnswers = fields.filter((f) => f['__typename'] == 'SelectField').map((f) => {
+      return { id: f.id, hasAnswered: false, answers: [], field: f };
+    });
+
+          const customTextFieldAnswers = fields.filter((f) => f['__typename'] == 'TextField').map((f) => {
+      return { id: f.id, hasAnswered: false, value: null, field: f };
+    });
+
+          const activeUser = user ? user : {
+      email: null,
+      customSelectFieldAnswers,
+      customBooleanFieldAnswers,
+      customTextFieldAnswers,
+    } 
+
           const props = {
       additionalEventData,
       source: input.source,
       actionText: input.actionText,
-      activeUser: user,
+      activeUser,
       endpoints: identityX.config.getEndpoints(),
       buttonLabels: input.buttonLabels,
       redirect: input.redirect,
       loginEmailLabel: input.loginEmailLabel,
       loginEmailPlaceholder: input.loginEmailPlaceholder,
       defaultFieldLabels: identityX.config.get("defaultFieldLabels"),
-      requiredCreateFields: identityX.config.getRequiredCreateFields(),
+      requiredCreateFieldRows: identityX.config.getRequiredCreateFieldRows(),
       consentPolicy: identityX.config.get("consentPolicy") || get(application, "organization.consentPolicy"),
       regionalConsentPolicies: get(application, "organization.regionalConsentPolicies"),
       appContextId: identityX.config.get("appContextId"),
+      fields,
       lang,
     };
 
@@ -64,7 +87,7 @@ marko_template._ = marko_renderer(render, {
   }, marko_component);
 
 marko_template.meta = {
-    id: "/@mindful-web/marko-web-identity-x$1.20.3/components/form-login.marko",
+    id: "/@mindful-web/marko-web-identity-x$1.31.2/components/form-login.marko",
     component: "./form-login.marko",
     tags: [
       "@mindful-web/marko-web/components/browser-component.marko",

package/components/form-logout.marko.js

@@ -2,7 +2,7 @@
 "use strict";
 
 var marko_template = module.exports = require("marko/dist/html").t(__filename),
-    marko_componentType = "/@mindful-web/marko-web-identity-x$1.20.3/components/form-logout.marko",
+    marko_componentType = "/@mindful-web/marko-web-identity-x$1.31.2/components/form-logout.marko",
     marko_renderer = require("marko/dist/runtime/components/renderer"),
     module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
     defaultValue = module_defaultValue.default || module_defaultValue,
@@ -29,7 +29,7 @@ marko_template._ = marko_renderer(render, {
   });
 
 marko_template.meta = {
-    id: "/@mindful-web/marko-web-identity-x$1.20.3/components/form-logout.marko",
+    id: "/@mindful-web/marko-web-identity-x$1.31.2/components/form-logout.marko",
     tags: [
       "@mindful-web/marko-web/components/browser-component.marko"
     ]

package/components/form-profile.marko

@@ -14,7 +14,7 @@ $ const lang = input.lang || defaultValue(site.config.lang, "en");
       activeUser: user,
       requiredServerFields: identityX.config.getRequiredServerFields(),
       requiredClientFields: identityX.config.getRequiredClientFields(),
-      requiredCreateFields: identityX.config.getRequiredCreateFields(),
+      requiredCreateFieldRows: identityX.config.getRequiredCreateFieldRows(),
       activeCustomFieldIds: identityX.config.getActiveCustomFieldIds(),
       defaultFieldLabels: identityX.config.get("defaultFieldLabels"),
       hiddenFields: identityX.config.getHiddenFields(),

package/components/form-profile.marko.js

@@ -2,7 +2,7 @@
 "use strict";
 
 var marko_template = module.exports = require("marko/dist/html").t(__filename),
-    marko_componentType = "/@mindful-web/marko-web-identity-x$1.20.3/components/form-profile.marko",
+    marko_componentType = "/@mindful-web/marko-web-identity-x$1.31.2/components/form-profile.marko",
     marko_component = require("./form-profile.marko"),
     marko_renderer = require("marko/dist/runtime/components/renderer"),
     module_objectPath_module = require("@mindful-web/object-path"),
@@ -36,7 +36,7 @@ function render(input, out, __component, component, state) {
       activeUser: user,
       requiredServerFields: identityX.config.getRequiredServerFields(),
       requiredClientFields: identityX.config.getRequiredClientFields(),
-      requiredCreateFields: identityX.config.getRequiredCreateFields(),
+      requiredCreateFieldRows: identityX.config.getRequiredCreateFieldRows(),
       activeCustomFieldIds: identityX.config.getActiveCustomFieldIds(),
       defaultFieldLabels: identityX.config.get("defaultFieldLabels"),
       hiddenFields: identityX.config.getHiddenFields(),
@@ -73,7 +73,7 @@ marko_template._ = marko_renderer(render, {
   }, marko_component);
 
 marko_template.meta = {
-    id: "/@mindful-web/marko-web-identity-x$1.20.3/components/form-profile.marko",
+    id: "/@mindful-web/marko-web-identity-x$1.31.2/components/form-profile.marko",
     component: "./form-profile.marko",
     tags: [
       "@mindful-web/marko-web/components/browser-component.marko",

package/components/form-register.marko.js

@@ -2,7 +2,7 @@
 "use strict";
 
 var marko_template = module.exports = require("marko/dist/html").t(__filename),
-    marko_componentType = "/@mindful-web/marko-web-identity-x$1.20.3/components/form-register.marko",
+    marko_componentType = "/@mindful-web/marko-web-identity-x$1.31.2/components/form-register.marko",
     marko_renderer = require("marko/dist/runtime/components/renderer"),
     marko_assign = require("marko/dist/runtime/helpers/assign"),
     marko_web_identity_x_form_login_template = require("./form-login.marko"),
@@ -25,7 +25,7 @@ marko_template._ = marko_renderer(render, {
   });
 
 marko_template.meta = {
-    id: "/@mindful-web/marko-web-identity-x$1.20.3/components/form-register.marko",
+    id: "/@mindful-web/marko-web-identity-x$1.31.2/components/form-register.marko",
     tags: [
       "./form-login.marko"
     ]

package/components/identify.marko.js

@@ -2,7 +2,7 @@
 "use strict";
 
 var marko_template = module.exports = require("marko/dist/html").t(__filename),
-    marko_componentType = "/@mindful-web/marko-web-identity-x$1.20.3/components/identify.marko",
+    marko_componentType = "/@mindful-web/marko-web-identity-x$1.31.2/components/identify.marko",
     marko_component = require("./identify.marko"),
     marko_renderer = require("marko/dist/runtime/components/renderer"),
     module_objectPath_module = require("@mindful-web/object-path"),
@@ -50,7 +50,7 @@ marko_template._ = marko_renderer(render, {
   }, marko_component);
 
 marko_template.meta = {
-    id: "/@mindful-web/marko-web-identity-x$1.20.3/components/identify.marko",
+    id: "/@mindful-web/marko-web-identity-x$1.31.2/components/identify.marko",
     component: "./identify.marko",
     tags: [
       "@mindful-web/marko-web-gtm/components/push.marko",

package/components/non-auth-identify.marko.js

@@ -2,7 +2,7 @@
 "use strict";
 
 var marko_template = module.exports = require("marko/dist/html").t(__filename),
-    marko_componentType = "/@mindful-web/marko-web-identity-x$1.20.3/components/non-auth-identify.marko",
+    marko_componentType = "/@mindful-web/marko-web-identity-x$1.31.2/components/non-auth-identify.marko",
     marko_component = require("./non-auth-identify.marko"),
     marko_renderer = require("marko/dist/runtime/components/renderer"),
     marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
@@ -45,7 +45,7 @@ marko_template._ = marko_renderer(render, {
   }, marko_component);
 
 marko_template.meta = {
-    id: "/@mindful-web/marko-web-identity-x$1.20.3/components/non-auth-identify.marko",
+    id: "/@mindful-web/marko-web-identity-x$1.31.2/components/non-auth-identify.marko",
     component: "./non-auth-identify.marko",
     tags: [
       "@mindful-web/marko-core/components/resolve.marko"

package/components/subscribe.marko

@@ -0,0 +1,41 @@
+import { get } from "@mindful-web/object-path";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { req, site } = out.global;
+$ const { identityX, query } = req;
+$ const additionalEventData = defaultValue(input.additionalEventData, {});
+$ const lang = input.lang || defaultValue(site.config.lang, "en");
+
+<if(Boolean(identityX))>
+  <marko-web-identity-x-context|{ user, isEnabled, application }|>
+    $ const props = {
+      additionalEventData: additionalEventData,
+      loginSource: input.loginSource,
+      activeUser: user,
+      requiredServerFields: identityX.config.getRequiredServerFields(),
+      requiredClientFields: identityX.config.getRequiredClientFields(),
+      requiredCreateFieldRows: identityX.config.getRequiredCreateFieldRows(),
+      activeCustomFieldIds: identityX.config.getActiveCustomFieldIds(),
+      defaultFieldLabels: identityX.config.get("defaultFieldLabels"),
+      hiddenFields: identityX.config.getHiddenFields(),
+      defaultCountryCode: identityX.config.get('defaultCountryCode'),
+      booleanQuestionsLabel: identityX.config.get('booleanQuestionsLabel'),
+      callToAction: input.callToAction,
+      reloadPageOnSubmit: input.reloadPageOnSubmit,
+      buttonLabel: input.buttonLabel,
+      loginButtonLabels: input.loginButtonLabels,
+      endpoints: identityX.config.getEndpoints(),
+      consentPolicy: identityX.config.get("consentPolicy") || get(application, "organization.consentPolicy"),
+      emailConsentRequest: get(application, "organization.emailConsentRequest"),
+      appContextId: identityX.config.get("appContextId"),
+      regionalConsentPolicies: get(application, "organization.regionalConsentPolicies"),
+      returnTo: query.returnTo,
+      returnToDelay: input.returnToDelay,
+      enableChangeEmail: identityX.config.get("enableChangeEmail"),
+      lang,
+    };
+    <if(isEnabled)>
+      <marko-web-browser-component name="IdentityXSubscribe" props=props />
+    </if>
+  </marko-web-identity-x-context>
+</if>

package/components/subscribe.marko.js

@@ -0,0 +1,82 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-identity-x$1.31.2/components/subscribe.marko",
+    marko_component = require("./subscribe.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    get = module_objectPath_module.get,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    marko_web_browser_component_template = require("@mindful-web/marko-web/components/browser-component.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_browser_component_tag = marko_loadTag(marko_web_browser_component_template),
+    marko_web_identity_x_context_template = require("./context.marko"),
+    marko_web_identity_x_context_tag = marko_loadTag(marko_web_identity_x_context_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { req, site } = out.global;
+
+  const { identityX, query } = req;
+
+  const additionalEventData = defaultValue(input.additionalEventData, {});
+
+  const lang = input.lang || defaultValue(site.config.lang, "en");
+
+  if (Boolean(identityX)) {
+    marko_web_identity_x_context_tag({
+        renderBody: function(out, { user, isEnabled, application }) {
+          const props = {
+      additionalEventData: additionalEventData,
+      loginSource: input.loginSource,
+      activeUser: user,
+      requiredServerFields: identityX.config.getRequiredServerFields(),
+      requiredClientFields: identityX.config.getRequiredClientFields(),
+      requiredCreateFieldRows: identityX.config.getRequiredCreateFieldRows(),
+      activeCustomFieldIds: identityX.config.getActiveCustomFieldIds(),
+      defaultFieldLabels: identityX.config.get("defaultFieldLabels"),
+      hiddenFields: identityX.config.getHiddenFields(),
+      defaultCountryCode: identityX.config.get('defaultCountryCode'),
+      booleanQuestionsLabel: identityX.config.get('booleanQuestionsLabel'),
+      callToAction: input.callToAction,
+      reloadPageOnSubmit: input.reloadPageOnSubmit,
+      buttonLabel: input.buttonLabel,
+      loginButtonLabels: input.loginButtonLabels,
+      endpoints: identityX.config.getEndpoints(),
+      consentPolicy: identityX.config.get("consentPolicy") || get(application, "organization.consentPolicy"),
+      emailConsentRequest: get(application, "organization.emailConsentRequest"),
+      appContextId: identityX.config.get("appContextId"),
+      regionalConsentPolicies: get(application, "organization.regionalConsentPolicies"),
+      returnTo: query.returnTo,
+      returnToDelay: input.returnToDelay,
+      enableChangeEmail: identityX.config.get("enableChangeEmail"),
+      lang,
+    };
+
+          if (isEnabled) {
+            marko_web_browser_component_tag({
+                name: "IdentityXSubscribe",
+                props: props
+              }, out, __component, "1");
+          }
+        }
+      }, out, __component, "0");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-identity-x$1.31.2/components/subscribe.marko",
+    component: "./subscribe.marko",
+    tags: [
+      "@mindful-web/marko-web/components/browser-component.marko",
+      "./context.marko"
+    ]
+  };

package/config.js

@@ -12,7 +12,7 @@ class IdentityXConfiguration {
    * @param {string} [options.apiToken] An API token to use. Only required when doing write ops.
    * @param {string[]} [options.requiredServerFields] Required fields, server enforced.
    * @param {string[]} [options.requiredClientFields] Required fields, client-side only.
-   * @param {string[]} [options.requiredCreateFields] Required fields, when creating a new user.
+   * @param {string[]} [options.requiredCreateFieldRows] Required fields, when creating a new user.
    * @param {string[]} [options.activeCustomFieldIds] Limit displayed custom fields, if present.
    * @param {string[]} [options.hiddenFields] The fields to hide from the profile.
    * @param {function} [options.onHookError]
@@ -23,7 +23,7 @@ class IdentityXConfiguration {
     apiToken,
     requiredServerFields = [],
     requiredClientFields = [],
-    requiredCreateFields = [],
+    requiredCreateFieldRows = [],
     activeCustomFieldIds = [],
     additionalCustomFieldIds = [],
     defaultFieldLabels = {},
@@ -41,7 +41,7 @@ class IdentityXConfiguration {
       enableChangeEmail: false,
       requiredServerFields,
       requiredClientFields,
-      requiredCreateFields,
+      requiredCreateFieldRows,
       activeCustomFieldIds,
       additionalCustomFieldIds,
       defaultFieldLabels,
@@ -129,8 +129,8 @@ class IdentityXConfiguration {
     return this.getAsArray('requiredClientFields');
   }
 
-  getRequiredCreateFields() {
-    return this.getAsArray('requiredCreateFields');
+  getRequiredCreateFieldRows() {
+    return this.getAsArray('requiredCreateFieldRows');
   }
 
   getHiddenFields() {

package/index.js

@@ -28,3 +28,13 @@ module.exports = (app, config, {
     });
   });
 };
+
+/**
+ * @typedef CustomColumnDefinition
+ * @prop {("built-in"|"custom-select"|"custom-boolean"|"custom-text")} type The field type
+ * @prop {string} [key] The "built-in" field key (givenName, etc)
+ * @prop {string} [id] The custom field id
+ * @prop {string} [label] The displayed field label
+ * @prop {boolean} [required] If the field should be required
+ * @prop {number} [width] Column width (percentage specified as decimal)
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindful-web/marko-web-identity-x",
-  "version": "1.20.3",
+  "version": "1.31.2",
   "description": "Marko Wrapper for IdentityX",
   "repository": "https://github.com/parameter1/mindful-web/tree/main/packages/marko-web-identity-x",
   "author": "Josh Worden <josh@parameter1.com>",
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c2c60b99628dc560b6cd1fe0b3d64b3bd9a69daf"
+  "gitHead": "b939602557484645950c536d00366b76e9ea8fca"
 }

package/routes/login.js

@@ -1,5 +1,6 @@
 const gql = require('graphql-tag');
 const { asyncRoute } = require('@mindful-web/utils');
+const generateRequiredFieldPayload = require('../utils/generate-required-field-payload');
 
 const mutation = gql`
   mutation SetPreLoginFields($input: SetAppUserUnverifiedDataMutationInput!) {
@@ -30,20 +31,28 @@ module.exports = asyncRoute(async (req, res) => {
   } = body;
   let appUser = await identityX.loadAppUserByEmail(email);
 
-  // Check for required creation fields
-  const required = identityX.config.getRequiredCreateFields();
-  if (required.length) {
-    // If we don't have a user, or the user is missing some of the required fields
-    if (!appUser || (appUser && !required.every((key) => appUser[key]))) {
-      additionalEventData.createdNewUser = true;
-      // And they weren't presented in the login request, require them.
-      if (!required.every((key) => body[key])) {
-        return res.status(400).json({ ok: false, requiresUserInput: true });
-      }
-    }
+  const definitions = (identityX.config.getRequiredCreateFieldRows() || []).flat();
+
+  const {
+    appUserHasAllRequiredFields,
+    hasAllRequiredFields,
+    payload: requiredFieldPayload,
+  } = generateRequiredFieldPayload({ appUser, body, definitions });
+
+  const isVerified = appUser && appUser.verified;
+
+  // Force reverification (skip login form) for previously verified users that are missing fields
+  if (isVerified && !appUserHasAllRequiredFields) {
+    additionalEventData.forceProfileReVerification = true;
+  }
+
+  // If the user and/or payload is missing some of the required fields, present additional fields
+  if (!isVerified && !hasAllRequiredFields) {
+    return res.status(400).json({ ok: false, requiresUserInput: true });
   }
 
-  if (!appUser || (appUser && !required.every((key) => appUser[key]))) {
+  // If the user is new, or *was* missing fields, mark them as 'created'
+  if (!isVerified || !appUserHasAllRequiredFields) {
     // Create the user.
     appUser = await identityX.createAppUser({ email });
     additionalEventData.createdNewUser = true;
@@ -58,12 +67,12 @@ module.exports = asyncRoute(async (req, res) => {
   }
 
   // Set the fields as unverified app data and continue login.
-  if (required.length && additionalEventData.createdNewUser) {
+  if (Object.keys(requiredFieldPayload).length && !isVerified) {
     const regionalConsentAnswers = Array.isArray(body.regionalConsentAnswers)
       ? body.regionalConsentAnswers
       : [];
     const input = {
-      ...(required.reduce((obj, key) => ({ ...obj, [key]: body[key] }), {})),
+      ...requiredFieldPayload,
       regionalConsentAnswers: regionalConsentAnswers
         .map((answer) => ({ policyId: answer.id, given: answer.given })),
       email,

package/service.js

@@ -1,4 +1,4 @@
-const { get, getAsObject } = require('@mindful-web/object-path');
+const { get, getAsArray, getAsObject } = require('@mindful-web/object-path');
 const { getResponseCookies } = require('@mindful-web/utils');
 const createClient = require('./utils/create-client');
 const getActiveContext = require('./api/queries/get-active-context');
@@ -142,19 +142,20 @@ class IdentityX {
    *
    * @returns {Promise<ActiveContext>}
    */
-  async loadActiveContext({ forceQuery = false } = {}) {
+  async loadActiveContext({ forceQuery = false, withFields = false } = {}) {
     // Only run the active context query once
-    if (!this.activeContextQuery || forceQuery) {
-      this.activeContextQuery = this.client.query({ query: getActiveContext });
+    if (!this.activeContextQuery || forceQuery || withFields) {
+      this.activeContextQuery = this.client.query({ query: getActiveContext({ withFields }) });
     }
     const { data = {} } = await this.activeContextQuery;
     const activeContext = data.activeAppContext || {};
+    const fields = getAsArray(data, 'fields.edges').map((f) => f.node);
     await callHooksFor(this, 'onLoadActiveContext', {
       req: this.req,
       res: this.res,
       activeContext,
     });
-    return activeContext;
+    return { ...activeContext, fields };
   }
 
   /**

package/utils/generate-required-field-payload.js

@@ -0,0 +1,123 @@
+const { get } = require('@mindful-web/object-path');
+
+// eslint-disable-next-line max-len
+const hasAnswered = (ans) => ans && ans.hasAnswered && (ans.value || (ans.answers && ans.answers.length));
+
+const hasMappedAnswers = (map) => (id) => {
+  const ans = map.get(id);
+  return hasAnswered(ans);
+};
+
+/**
+ * Generates field requirement payload from supplied user/payload state
+ *
+ * @param {FieldRequirementArgs} arg
+ * @returns {FieldRequirementState}
+ */
+module.exports = ({ appUser, body, definitions }) => {
+  // Check for required creation fields
+  const requiredFieldKeys = [...definitions.reduce((set, def) => {
+    if (def.type === 'built-in') set.add(def.key);
+    return set;
+  }, new Set())];
+
+  // const requiredCustomBooleans = [...definitions.reduce((set, def) => {
+  //   if (def.type === 'custom-boolean') set.add(def.id);
+  //   return set;
+  // }, new Set())];
+
+  const requiredCustomSelects = [...definitions.reduce((set, def) => {
+    if (def.type === 'custom-select') set.add(def.id);
+    return set;
+  }, new Set())];
+
+  const requiredCustomTexts = [...definitions.reduce((set, def) => {
+    if (def.type === 'custom-text') set.add(def.id);
+    return set;
+  }, new Set())];
+
+  const userCustomFieldAnswers = new Map([
+    // ...(get(appUser, 'customBooleanFieldAnswers') || []).map((a) => [a.field.id, a]),
+    ...(get(appUser, 'customSelectFieldAnswers') || []).map((a) => [a.field.id, a]),
+    ...(get(appUser, 'customTextFieldAnswers') || []).map((a) => [a.field.id, a]),
+  ]);
+
+  const customFieldAnswers = new Map([
+    ...userCustomFieldAnswers,
+    // ...(get(body, 'customBooleanFieldAnswers') || [])
+    //   .filter(hasAnswered).map((a) => [a.field.id, a]),
+    ...(get(body, 'customSelectFieldAnswers') || []).filter(hasAnswered).map((a) => [a.field.id, a]),
+    ...(get(body, 'customTextFieldAnswers') || [])
+      .filter(hasAnswered).map((a) => [a.field.id, a]),
+  ]);
+
+  const appUserHasAllRequiredFields = [
+    requiredFieldKeys.every(
+      (key) => get(appUser, key),
+    ),
+    // requiredCustomBooleans.every(
+    //   (id) => userCustomFieldAnswers.has(id) && userCustomFieldAnswers.get(id).hasAnswered,
+    // ),
+    requiredCustomSelects.every(hasMappedAnswers(userCustomFieldAnswers)),
+    requiredCustomTexts.every(
+      (id) => userCustomFieldAnswers.has(id) && userCustomFieldAnswers.get(id).hasAnswered,
+    ),
+  ].every((v) => v);
+
+  const hasAllRequiredFields = [
+    requiredFieldKeys.every(
+      (key) => get(appUser, key) || get(body, key),
+    ),
+    // requiredCustomBooleans.every(hasMappedAnswers(customFieldAnswers)),
+    requiredCustomSelects.every(hasMappedAnswers(customFieldAnswers)),
+    requiredCustomTexts.every(hasMappedAnswers(customFieldAnswers)),
+  ].every((v) => v);
+
+  const payload = {
+    ...(requiredFieldKeys.reduce((obj, key) => ({ ...obj, [key]: body[key] }), {})),
+    // customBooleanFieldAnswers: [], // @todo
+    customSelectFieldAnswers: requiredCustomSelects
+      .filter(hasMappedAnswers(customFieldAnswers))
+      .map((id) => {
+        const answer = customFieldAnswers.get(id);
+        const writeInValues = answer.answers.reduce((arr, { id: optionId, writeInValue }) => ([
+          ...arr,
+          ...(writeInValue ? [{ optionId, value: writeInValue }] : []),
+        ]), []);
+        return {
+          fieldId: answer.field.id,
+          optionIds: answer.answers.map((a) => a.id),
+          ...(writeInValues && { writeInValues }),
+        };
+      }),
+    customTextFieldAnswers: requiredCustomTexts
+      .filter(hasMappedAnswers(customFieldAnswers))
+      .map((id) => {
+        const answer = customFieldAnswers.get(id);
+        return {
+          fieldId: answer.field.id,
+          value: answer.value,
+        };
+      }), // @todo
+  };
+
+  return {
+    appUserHasAllRequiredFields,
+    hasAllRequiredFields,
+    payload,
+    requiredFieldKeys,
+  };
+};
+
+/**
+ * @typedef FieldRequirementArgs
+ * @prop {import('../utils/create-identity-builder').IdentityXAppUser?} [appUser]
+ * @prop {object} body The submitted kv payload
+ * @prop {import('..').CustomColumnDefinition[]} definitions The required field definitions
+ *
+ * @typedef FieldRequirementState
+ * @prop {boolean} appUserHasAllRequiredFields If the app user data met requirements
+ * @prop {boolean} hasAllRequiredFields If the submitted data meets requirements
+ * @prop {object} payload A crafted payload to update required fields
+ * @prop {string} requiredFieldKeys If present, the required built-in field keys
+ */