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

package/browser/form/fields/organization-title.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="organizationTitle"
+      class="form-control"
+      type="text"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="organization-title"
+    >
+  </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: 'Job Title',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-organization-title',
+  }),
+  computed: {
+    organizationTitle: {
+      get() {
+        return this.value || '';
+      },
+      set(organizationTitle) {
+        this.$emit('input', organizationTitle || null);
+      },
+    },
+  },
+};
+</script>

package/browser/form/fields/organization.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="organization"
+      class="form-control"
+      type="text"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="organization"
+    >
+  </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: 'Company Name',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-organization',
+  }),
+  computed: {
+    organization: {
+      get() {
+        return this.value || '';
+      },
+      set(organization) {
+        this.$emit('input', organization || null);
+      },
+    },
+  },
+};
+</script>

package/browser/form/fields/phone-number.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="phoneNumber"
+      class="form-control"
+      type="tel"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="phone"
+    >
+  </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: 'Phone Number',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-phone',
+  }),
+  computed: {
+    phoneNumber: {
+      get() {
+        return this.value || '';
+      },
+      set(phoneNumber) {
+        this.$emit('input', phoneNumber || null);
+      },
+    },
+  },
+};
+</script>

package/browser/form/fields/postal-code.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="postalCode"
+      class="form-control"
+      type="text"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="postal-code"
+    >
+  </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: 'Postal/ZIP Code',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    className: {
+      type: String,
+      default: 'col-md-12',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-postal-code',
+  }),
+  computed: {
+    postalCode: {
+      get() {
+        return this.value || '';
+      },
+      set(postalCode) {
+        this.$emit('input', postalCode || null);
+      },
+    },
+  },
+};
+</script>

package/browser/form/fields/receive-email.vue

@@ -0,0 +1,58 @@
+<template>
+  <form-group>
+    <div class="custom-control custom-checkbox">
+      <input
+        :id="`custom-boolean-${id}`"
+        v-model="receiveEmail"
+        :disabled="disabled"
+        :required="required"
+        type="checkbox"
+        class="custom-control-input"
+      >
+      <form-label class="custom-control-label" :for="`custom-boolean-${id}`" :required="required">
+        <!-- eslint-disable-next-line -->
+        <span v-html="emailConsentRequest" />
+      </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: {
+    emailConsentRequest: {
+      type: String,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data: () => ({
+    id: 'sign-on-receive-email',
+  }),
+  computed: {
+    receiveEmail: {
+      get() {
+        return this.value;
+      },
+      set(receiveEmail) {
+        this.$emit('input', receiveEmail);
+      },
+    },
+  },
+};
+</script>

package/browser/form/fields/region.vue

@@ -0,0 +1,106 @@
+<template>
+  <form-group :class-name="className">
+    <form-label :for="id" :required="required">
+      {{ label }}
+    </form-label>
+    <select
+      :id="id"
+      v-model="regionCode"
+      :readonly="isLoading"
+      :disabled="disabled"
+      :required="required"
+      class="custom-select"
+      autocomplete="address-level1"
+    >
+      <option disabled value="">
+        Select state/region...
+      </option>
+      <option v-for="region in countryRegions" :key="region.id" :value="region.code">
+        {{ region.name }}
+      </option>
+    </select>
+    <p v-if="error">
+      Unable to load regions: {{ 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';
+import regionCountryCodes from '../../utils/region-country-codes';
+
+export default {
+  components: {
+    FormGroup,
+    FormLabel,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: 'State / Region',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    countryCode: {
+      type: String,
+      default: '',
+    },
+    className: {
+      type: String,
+      default: 'col-md-6',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-region',
+    isLoading: false,
+    error: null,
+    regions: [],
+  }),
+  computed: {
+    regionCode: {
+      get() {
+        return this.value || '';
+      },
+      set(regionCode) {
+        this.$emit('input', regionCode || null);
+      },
+    },
+    hasValidCountryCode() {
+      return regionCountryCodes.includes(this.countryCode);
+    },
+    countryRegions() {
+      if (!this.hasValidCountryCode) return [];
+      return this.regions.filter((region) => region.country.id === this.countryCode);
+    },
+  },
+  created() {
+    this.load();
+  },
+  methods: {
+    async load() {
+      this.error = null;
+      this.isLoading = true;
+      try {
+        const res = await get('/regions');
+        this.regions = await res.json();
+      } catch (e) {
+        this.error = e;
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>

package/browser/form/fields/regional-policy.vue

@@ -0,0 +1,59 @@
+<template>
+  <form-group>
+    <div class="custom-control custom-checkbox">
+      <input
+        :id="`policy-${id}`"
+        v-model="given"
+        :disabled="disabled"
+        :required="required"
+        type="checkbox"
+        class="custom-control-input"
+      >
+      <form-label class="custom-control-label" :for="`policy-${id}`" :required="required">
+        <!-- eslint-disable-next-line -->
+        <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 this.value;
+      },
+      set(given) {
+        this.$emit('input', given);
+      },
+    },
+  },
+};
+</script>

package/browser/form/fields/street.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="street"
+      class="form-control"
+      type="text"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="street"
+    >
+  </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: 'Street',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    className: {
+      type: String,
+      default: 'col-md-12',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-street',
+  }),
+  computed: {
+    street: {
+      get() {
+        return this.value || '';
+      },
+      set(street) {
+        this.$emit('input', street || null);
+      },
+    },
+  },
+};
+</script>

package/browser/graphql/create-client.js

@@ -0,0 +1,65 @@
+const getOperationName = (string) => {
+  const matches = /query\s+([a-z0-9]+)[(]?.+{/gi.exec(string);
+  if (matches && matches[1]) return matches[1];
+  return undefined;
+};
+
+const { warn } = console;
+
+const sha1 = async (string) => {
+  try {
+    const buffer = new TextEncoder('utf-8').encode(string);
+    const digest = await crypto.subtle.digest('SHA-1', buffer);
+    const hexCodes = [];
+    const view = new DataView(digest);
+    for (let i = 0; i < view.byteLength; i += 1) {
+      const byte = view.getUint8(i).toString(16).padStart(2, '0');
+      hexCodes.push(byte);
+    }
+    return hexCodes.join('');
+  } catch (e) {
+    warn('Unable to create SHA1 - GraphQL cache will be disabled.', e.message);
+    return null;
+  }
+};
+
+export default ({ uri, headers: globalHeaders }) => {
+  const cache = new Map();
+  return Object.create({
+    query: async ({ query, variables, headers }) => {
+      const body = JSON.stringify({
+        operationName: getOperationName(query),
+        variables,
+        query,
+      });
+      const hash = await sha1(body);
+      if (hash && cache.has(hash)) return cache.get(hash);
+
+      const res = await fetch(uri, {
+        method: 'POST',
+        headers: {
+          ...globalHeaders,
+          ...headers,
+          'content-type': 'application/json',
+        },
+        body,
+      });
+      const json = await res.json();
+      if (!res.ok || (json && json.errors)) {
+        if (!json || !json.errors) {
+          const err = new Error(`An unknown, fatal GraphQL error was encountered (${res.status})`);
+          err.statusCode = res.status;
+          throw err;
+        }
+        const [networkError] = json.errors;
+        const err = new Error(networkError.message);
+        const { extensions } = networkError;
+        if (extensions) err.code = extensions.code;
+        if (extensions && extensions.exception) err.statusCode = extensions.exception.statusCode;
+        throw err;
+      }
+      if (hash) cache.set(hash, json);
+      return json;
+    },
+  });
+};

package/browser/graphql/parse.js

@@ -0,0 +1 @@
+export default (strings, ...rest) => [...strings, ...rest].join('\n');

package/browser/graphql/queries/download-related-content.js

@@ -0,0 +1,38 @@
+import gql from '../parse';
+
+const fragment = gql`
+fragment DownloadRelatedContentFragment on Content {
+  id
+  type
+  name
+  siteContext { path }
+  primaryImage {
+    id
+    src(input: { options: { auto: "format,compress" } })
+    alt
+  }
+  company {
+    id
+    name
+    siteContext { path }
+  }
+  ...on Media {
+    fileSrc
+  }
+}
+`;
+
+export default gql`
+query DownloadRelatedAllPublishedContent ($input: AllPublishedContentQueryInput!) {
+  allPublishedContent(input: $input) {
+    totalCount
+    edges {
+      node {
+        ...DownloadRelatedContentFragment
+      }
+    }
+  }
+}
+
+${fragment}
+`;