@mindful-web/marko-web-identity-x 1.0.0

package/browser/form/common/checkbox-group.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="checkbox-group">
+    <div
+      v-for="option in options"
+      :key="option.id"
+      class="custom-control custom-checkbox"
+    >
+      <input
+        :id="createId(option.id)"
+        v-model="checked"
+        :required="isRequired"
+        :value="option.id"
+        type="checkbox"
+        class="custom-control-input"
+      >
+      <label
+        :for="createId(option.id)"
+        class="custom-control-label w-100"
+        :class="{ 'has-write-in': showWriteIn(option.id) }"
+      >
+        <custom-select-write-in-inline
+          v-if="showWriteIn(option.id)"
+          :answer="writeInAnswer"
+          :placeholder="writeInLabel"
+          @change="$emit('change', $event)"
+        />
+        <span v-else>
+          {{ option.label }}
+        </span>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script>
+import CustomSelectWriteInInline from '../fields/custom-select-write-in-inline.vue';
+
+export default {
+  components: {
+    CustomSelectWriteInInline,
+  },
+  props: {
+    /**
+     * The wrapping field group identifier.
+     */
+    groupId: {
+      type: String,
+      required: true,
+    },
+
+    /**
+     * Whether the checkbox group is required.
+     */
+    required: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * An array of option objects:
+     * [
+     *   { id: 'some-id', label: 'Some label' },
+     * ]
+     */
+    options: {
+      type: Array,
+      default: () => [],
+    },
+
+    /**
+     * An array of selected option IDs.
+     * ['some-id']
+     */
+    selected: {
+      type: Array,
+      default: () => [],
+    },
+
+    canWriteIn: {
+      type: Boolean,
+      default: false,
+    },
+    writeInLabel: {
+      type: String,
+      default: 'Other',
+    },
+    writeInAnswer: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    /**
+     * This is used internally as the `v-model` for the checkboxes.
+     * The value is then watched to emit the change event.
+     */
+    checked: {
+      get() {
+        return [...this.selected];
+      },
+      set(value) {
+        this.$emit('change', value);
+      },
+    },
+    /**
+     * Determines if the checkboxes are required from a
+     * validation perspective. Because HTML5 doesn't support
+     * checkbox groups out-of-the-box, this will make all the boxes
+     * required when none are checked, but optional when at least one
+     * is checked.
+     *
+     * This only applies when the overall group `required` prop is set to true.
+     */
+    isRequired() {
+      if (!this.required) return false;
+      if (this.selected.length) return false;
+      return true;
+    },
+  },
+
+  methods: {
+    createId(optionId) {
+      return `checkbox-${this.groupId}-${optionId}`;
+    },
+    showWriteIn(optionId) {
+      return this.canWriteIn && this.writeInAnswer.id === optionId;
+    },
+  },
+};
+</script>
+
+<style>
+.custom-control-label.has-write-in::before {
+  top: calc(0.125rem + 3px);
+}
+.custom-control-label.has-write-in::after {
+  top: calc(0.125rem + 3px);
+}
+</style>

package/browser/form/common/form-group.vue

@@ -0,0 +1,24 @@
+<template>
+  <div :class="classNames">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    classNames() {
+      const classNames = ['form-group'];
+      const { className } = this;
+      if (className) classNames.push(className);
+      return classNames;
+    },
+  },
+};
+</script>

package/browser/form/common/form-label.vue

@@ -0,0 +1,17 @@
+<template>
+  <label>
+    <slot />
+    <strong v-if="required" class="text-danger">*</strong>
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    required: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/browser/form/consent.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div v-if="emailConsentRequest" class="row mt-3">
+      <div class="col-12">
+        <receive-email
+          v-model="user.receiveEmail"
+          :email-consent-request="emailConsentRequest"
+        />
+      </div>
+    </div>
+    <div v-if="regionalPolicyFields.length" class="row mt-3">
+      <div class="col-12">
+        <regional-policy
+          v-for="policy in regionalPolicyFields"
+          :id="policy.id"
+          :key="policy.id"
+          :message="policy.message"
+          :required="policy.required"
+          :value="getRegionalPolicyAnswerValue(policy.id)"
+          @input="setPolicyAnswer(policy.id, $event)"
+        />
+      </div>
+    </div>
+    <small
+      v-if="consentPolicy"
+      class="text-muted mb-3 d-inline-block"
+      v-html="consentPolicy"
+    />
+  </div>
+</template>
+<script>
+import ReceiveEmail from './fields/receive-email.vue';
+import RegionalPolicy from './fields/regional-policy.vue';
+
+export default {
+  components: {
+    ReceiveEmail,
+    RegionalPolicy,
+  },
+  props: {
+    user: {
+      type: Object,
+      default: () => ({}),
+    },
+    consentPolicy: {
+      type: String,
+      default: null,
+    },
+    consentPolicyEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    emailConsentRequest: {
+      type: String,
+      default: null,
+    },
+    emailConsentRequestEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    regionalConsentPolicies: {
+      type: Array,
+      default: () => [],
+    },
+    countryCode: {
+      type: String,
+      default: null,
+    },
+  },
+
+  /**
+   *
+   */
+  computed: {
+  /**
+   *
+   */
+    regionalPolicyFields() {
+      const { regionalConsentPolicies, countryCode } = this;
+      if (!regionalConsentPolicies.length || !countryCode) return [];
+      return regionalConsentPolicies.filter((policy) => {
+        const countryCodes = policy.countries.map((country) => country.id);
+        return countryCodes.includes(countryCode);
+      });
+    },
+  },
+
+  /**
+   *
+   */
+  methods: {
+    /**
+     *
+     */
+    getRegionalPolicyAnswer(policyId) {
+      return this.user.regionalConsentAnswers.find((a) => a.id === policyId);
+    },
+
+    /**
+     *
+     */
+    getRegionalPolicyAnswerValue(policyId) {
+      const answer = this.getRegionalPolicyAnswer(policyId);
+      if (answer) return answer.given;
+      return false;
+    },
+
+    /**
+     *
+     */
+    setPolicyAnswer(policyId, given) {
+      const answer = this.getRegionalPolicyAnswer(policyId);
+      if (answer) {
+        answer.given = given;
+      } else {
+        this.user.regionalConsentAnswers.push({ id: policyId, given });
+      }
+    },
+  },
+};
+</script>

package/browser/form/fields/address-extra.vue

@@ -0,0 +1,68 @@
+<template>
+  <form-group :class-name="className">
+    <form-label :for="id" :required="required">
+      {{ label }}
+    </form-label>
+    <input
+      :id="id"
+      v-model="addressExtra"
+      class="form-control"
+      type="text"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="address-extra"
+    >
+  </form-group>
+</template>
+
+<script>
+import FormGroup from '../common/form-group.vue';
+import FormLabel from '../common/form-label.vue';
+
+export default {
+  components: {
+    FormGroup,
+    FormLabel,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: 'Extra (Apt, Suite, etc.)',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    className: {
+      type: String,
+      default: 'col-md-4',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-address-extra',
+  }),
+  computed: {
+    addressExtra: {
+      get() {
+        return this.value || '';
+      },
+      set(addressExtra) {
+        this.$emit('input', addressExtra || null);
+      },
+    },
+  },
+};
+</script>

package/browser/form/fields/city.vue

@@ -0,0 +1,68 @@
+<template>
+  <form-group :class-name="className">
+    <form-label :for="id" :required="required">
+      {{ label }}
+    </form-label>
+    <input
+      :id="id"
+      v-model="city"
+      class="form-control"
+      type="text"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="city"
+    >
+  </form-group>
+</template>
+
+<script>
+import FormGroup from '../common/form-group.vue';
+import FormLabel from '../common/form-label.vue';
+
+export default {
+  components: {
+    FormGroup,
+    FormLabel,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: 'City',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    className: {
+      type: String,
+      default: 'col-md-6',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-city',
+  }),
+  computed: {
+    city: {
+      get() {
+        return this.value || '';
+      },
+      set(city) {
+        this.$emit('input', city || null);
+      },
+    },
+  },
+};
+</script>

package/browser/form/fields/comment-body.vue

@@ -0,0 +1,63 @@
+<template>
+  <form-group>
+    <form-label :for="id" :required="required">
+      {{ label }}
+    </form-label>
+    <textarea
+      :id="id"
+      v-model="body"
+      class="form-control"
+      rows="3"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+    />
+  </form-group>
+</template>
+
+<script>
+import FormGroup from '../common/form-group.vue';
+import FormLabel from '../common/form-label.vue';
+
+export default {
+  components: {
+    FormGroup,
+    FormLabel,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: true,
+    },
+    label: {
+      type: String,
+      default: 'Your Comment',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    id: 'comment-body',
+  }),
+  computed: {
+    body: {
+      get() {
+        return this.value || '';
+      },
+      set(body) {
+        this.$emit('input', body || null);
+      },
+    },
+  },
+};
+</script>

package/browser/form/fields/country.vue

@@ -0,0 +1,94 @@
+<template>
+  <form-group :class-name="className">
+    <form-label :for="id" :required="required">
+      {{ label }}
+    </form-label>
+    <select
+      :id="id"
+      v-model="countryCode"
+      :readonly="isLoading"
+      :disabled="disabled"
+      :required="required"
+      class="custom-select"
+      autocomplete="country"
+    >
+      <option disabled value="">
+        Select country...
+      </option>
+      <option v-for="country in countries" :key="country.id" :value="country.id">
+        {{ country.name }} {{ country.flag }}
+      </option>
+    </select>
+    <p v-if="error">
+      Unable to load countries: {{ error.message }}
+    </p>
+  </form-group>
+</template>
+
+<script>
+import FormGroup from '../common/form-group.vue';
+import FormLabel from '../common/form-label.vue';
+import get from '../../utils/get';
+
+export default {
+  components: {
+    FormGroup,
+    FormLabel,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: 'Country',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-country',
+    isLoading: false,
+    error: null,
+    countries: [],
+  }),
+  computed: {
+    countryCode: {
+      get() {
+        return this.value || '';
+      },
+      set(countryCode) {
+        this.$emit('input', countryCode || null);
+      },
+    },
+  },
+  created() {
+    this.load();
+  },
+  methods: {
+    async load() {
+      this.error = null;
+      this.isLoading = true;
+      try {
+        const res = await get('/countries');
+        this.countries = await res.json();
+      } catch (e) {
+        this.error = e;
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>

package/browser/form/fields/custom-boolean.vue

@@ -0,0 +1,58 @@
+<template>
+  <form-group>
+    <div class="custom-control custom-checkbox">
+      <input
+        :id="`custom-boolean-${id}`"
+        v-model="given"
+        :disabled="disabled"
+        :required="required"
+        type="checkbox"
+        class="custom-control-input"
+      >
+      <form-label class="custom-control-label" :for="`custom-boolean-${id}`" :required="required">
+        <span v-html="message" />
+      </form-label>
+    </div>
+  </form-group>
+</template>
+
+<script>
+import FormGroup from '../common/form-group.vue';
+import FormLabel from '../common/form-label.vue';
+
+export default {
+  components: { FormGroup, FormLabel },
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    given: {
+      get() {
+        return Boolean(this.value);
+      },
+      set(given) {
+        this.$emit('input', Boolean(given));
+      },
+    },
+  },
+};
+</script>

package/browser/form/fields/custom-select-group.vue

@@ -0,0 +1,25 @@
+<template>
+  <fieldset class="csmulti-group">
+    <legend class="csmulti-legend">
+      {{ label }}
+    </legend>
+    <div class="pl-3 pb-2">
+      <slot />
+    </div>
+  </fieldset>
+</template>
+
+<script>
+export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>