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

package/browser/comments/stream.vue

@@ -0,0 +1,319 @@
+<template>
+  <div :class="classNames">
+    <div :class="element('header')">
+      {{ headerText }}
+    </div>
+
+    <div :class="element('body')">
+      <div
+        v-if="hasActiveUser"
+        :class="element('create-post')"
+      >
+        <p :class="element('login-message')">
+          <span :class="element(`login-message--cta`)">
+            Post a Comment
+          </span>
+        </p>
+        <div v-if="archived" :class="element('archived')">
+          This thread is archived and is no longer accepting comments.
+        </div>
+        <create
+          v-else
+          :display-name="activeUser.displayName"
+          :stream="{ identifier, title, description, url }"
+          @comment-post-submitted="load"
+        />
+      </div>
+      <div v-else :class="element('login-form-wrapper')">
+        <p v-if="showLoginMessage" :class="element('login-message')">
+          <span :class="element(`login-message--cta`)">
+            Post a Comment
+          </span>
+          You must be signed in to leave a comment.
+          To sign in or create an account,
+          enter your email address and we'll send you a one-click sign-in link.
+        </p>
+        <login
+          :class="element('login-form')"
+          :additional-event-data="additionalEventData"
+          :source="loginSource"
+          :active-user="activeUser"
+          :endpoints="endpoints"
+          :consent-policy="consentPolicy"
+          :app-context-id="appContextId"
+          :regional-consent-policies="regionalConsentPolicies"
+          :button-labels="loginButtonLabels"
+          :required-create-fields="requiredCreateFields"
+          :default-field-labels="defaultFieldLabels"
+          @login-link-sent="showLoginMessage = false"
+        />
+      </div>
+
+      <h5
+        v-if="latestCommentsHeader && approvedComments.length"
+        :class="element('latest-comments')"
+      >
+        {{ latestCommentsHeader }} ({{ approvedComments.length }})
+      </h5>
+    </div>
+    <div v-if="isLoading" :class="element('loading')">
+      Loading comments...
+    </div>
+    <div v-else-if="error" :class="element('error')">
+      Unable to load comments: {{ error.message }}
+    </div>
+    <div v-else-if="approvedComments.length === 0" :class="element('no-posts')">
+      {{ noCommentsMessage }}
+    </div>
+    <div v-else :class="element('posts')">
+      <div
+        v-for="comment in approvedComments"
+        :key="comment.id"
+        :class="element('post')"
+      >
+        <post
+          :id="comment.id"
+          :additional-event-data="additionalEventData"
+          :body="comment.body"
+          :display-name="comment.user.displayName"
+          :created-at="comment.createdAt"
+          :approved="comment.approved"
+          :flagged="comment.flagged"
+          :date-format="dateFormat"
+          :active-user="activeUser"
+          @comment-report-submitted="load"
+        />
+      </div>
+      <div v-if="hasNextPage" :class="element('post')">
+        <button :class="loadMoreButtonClass" :disabled="isLoadingMore" @click.prevent="loadMore">
+          <span v-if="isLoadingMore">Loading...</span>
+          <span v-else>{{ loadMoreCommentsMessage }}</span>
+        </button>
+      </div>
+    </div>
+    <div :class="element('bottom')" />
+  </div>
+</template>
+
+<script>
+import get from '../utils/get';
+import Login from '../login.vue';
+import Post from './post.vue';
+import Create from './create.vue';
+import EventEmitter from '../mixins/global-event-emitter';
+
+export default {
+  /**
+   *
+   */
+  components: { Login, Post, Create },
+
+  /**
+   *
+   */
+  mixins: [EventEmitter],
+
+  /**
+   *
+   */
+  props: {
+    loginSource: {
+      type: String,
+      default: 'comments',
+    },
+    activeUser: {
+      type: Object,
+      default: () => {},
+    },
+    identifier: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: undefined,
+    },
+    description: {
+      type: String,
+      default: undefined,
+    },
+    url: {
+      type: String,
+      default: undefined,
+    },
+    endpoints: {
+      type: Object,
+      required: true,
+    },
+    headerText: {
+      type: String,
+      default: 'Comments',
+    },
+    loadMoreButtonClass: {
+      type: String,
+      default: 'btn btn-primary',
+    },
+    loadMoreCommentsMessage: {
+      type: String,
+      default: 'Show More Comments',
+    },
+    latestCommentsHeader: {
+      type: String,
+      default: 'All Comments',
+    },
+    loginButtonLabels: {
+      type: Object,
+      default: () => ({
+        submit: 'Login / Register',
+        continue: 'Continue',
+        logout: 'Logout',
+      }),
+    },
+    noCommentsMessage: {
+      type: String,
+      default: 'This article hasn’t received any comments yet. Want to start the conversation?',
+    },
+    modifiers: {
+      type: Array,
+      default: () => [],
+    },
+    consentPolicy: {
+      type: String,
+      default: null,
+    },
+    dateFormat: {
+      type: String,
+      default: undefined,
+    },
+    appContextId: {
+      type: String,
+      default: null,
+    },
+    regionalConsentPolicies: {
+      type: Array,
+      default: () => [],
+    },
+    requiredCreateFields: {
+      type: Array,
+      default: () => [],
+    },
+    defaultFieldLabels: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data: () => ({
+    blockName: 'idx-comment-stream',
+    isLoading: false,
+    isLoadingMore: false,
+    showLoginMessage: true,
+    error: null,
+    comments: [],
+    archived: false,
+    hasNextPage: false,
+    endCursor: null,
+    totalCount: 0,
+  }),
+
+  computed: {
+    /**
+     *
+     */
+    classNames() {
+      const { blockName } = this;
+      const classNames = [blockName];
+      this.modifiers.map((mod) => classNames.push(`${blockName}--${mod}`));
+      classNames.push(`${blockName}__counter--${this.comments.length}`);
+      return classNames;
+    },
+
+    /**
+     *
+     */
+    hasActiveUser() {
+      return this.activeUser && this.activeUser.email;
+    },
+    /**
+     *
+     */
+    approvedComments() {
+      return this.comments.filter((comment) => comment.approved);
+    },
+  },
+
+  /**
+   *
+   */
+  created() {
+    this.load();
+  },
+
+  /**
+   *
+   */
+  mounted() {
+    this.emit('comment-stream-mounted', { identifier: this.identifier });
+  },
+
+  /**
+   *
+   */
+  methods: {
+    /**
+     *
+     */
+    element(name) {
+      return `${this.blockName}__${name}`;
+    },
+
+    /**
+     *
+     */
+    async load() {
+      this.error = null;
+      this.isLoading = true;
+      try {
+        const res = await get(`/comments/${this.identifier}`);
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.message);
+        this.totalCount = data.totalCount;
+        this.comments = data.edges.map((edge) => edge.node);
+        this.hasNextPage = data.pageInfo.hasNextPage;
+        this.endCursor = data.pageInfo.endCursor;
+        this.archived = data.stream ? data.stream.archived : false;
+        this.emit('comment-stream-loaded', { hasNextPage: this.hasNextPage });
+      } catch (e) {
+        this.error = e;
+        this.emit('comment-stream-errored', { message: e.message });
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    /**
+     *
+     */
+    async loadMore() {
+      this.error = null;
+      this.isLoadingMore = true;
+      try {
+        const res = await get(`/comments/${this.identifier}?after=${this.endCursor}`);
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.message);
+        this.totalCount = data.totalCount;
+        const comments = data.edges.map((edge) => edge.node);
+        this.comments.push(...comments);
+        this.hasNextPage = data.pageInfo.hasNextPage;
+        this.endCursor = data.pageInfo.endCursor;
+        this.emit('comment-stream-loaded-more', { hasNextPage: this.hasNextPage });
+      } catch (e) {
+        this.error = e;
+        this.emit('comment-stream-errored', { message: e.message });
+      } finally {
+        this.isLoadingMore = false;
+      }
+    },
+  },
+};
+</script>

package/browser/custom-column.vue

@@ -0,0 +1,314 @@
+<template>
+  <div :class="colClasses">
+    <!-- @todo compute and dynamic render this if the props are the same? -->
+    <given-name
+      v-if="fieldKey === 'givenName'"
+      v-model="user.givenName"
+      :class-name="className"
+      :required="required"
+      :label="label"
+    />
+    <family-name
+      v-else-if="fieldKey === 'familyName'"
+      v-model="user.familyName"
+      :class-name="className"
+      :required="required"
+      :label="label"
+    />
+    <div v-else-if="fieldKey === 'email'">
+      <form-label :for="fieldKey" :required="required">
+        {{ label }}
+      </form-label>
+      <div class="form-group">
+        <div class="input-group">
+          <input disabled :value="user.email" class="form-control">
+          <div v-if="enableChangeEmail" class="input-group-append">
+            <a
+              :href="endpoints.changeEmail"
+              class="btn btn-outline-secondary d-flex justify-content-center flex-column"
+              title="Change your login email address"
+            >
+              Change
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <organization
+      v-else-if="fieldKey === 'organization'"
+      v-model="user.organization"
+      :class-name="className"
+      :required="required"
+      :label="label"
+    />
+    <organization-title
+      v-else-if="fieldKey === 'organizationTitle'"
+      v-model="user.organizationTitle"
+      :class-name="className"
+      :required="required"
+      :label="label"
+    />
+    <phone-number
+      v-else-if="fieldKey === 'phoneNumber'"
+      v-model="user.phoneNumber"
+      :class-name="className"
+      :required="required"
+      :label="label"
+    />
+    <phone-number
+      v-else-if="fieldKey === 'mobileNumber'"
+      v-model="user.mobileNumber"
+      :class-name="className"
+      :required="required"
+      :label="label"
+    />
+    <country-code
+      v-else-if="fieldKey === 'countryCode'"
+      v-model="user.countryCode"
+      :class-name="className"
+      :required="required"
+      :label="label"
+    />
+    <street
+      v-else-if="fieldKey === 'street'"
+      v-model="user.street"
+      :class-name="className"
+      :required="required"
+      :label="label"
+    />
+    <address-extra
+      v-else-if="fieldKey === 'addressExtra'"
+      v-model="user.addressExtra"
+      :class-name="className"
+      :required="required"
+      :label="label"
+    />
+    <city
+      v-else-if="fieldKey === 'city'"
+      v-model="user.city"
+      :class-name="className"
+      :required="required"
+      :label="label"
+    />
+    <template v-else-if="fieldKey === 'regionCode'">
+      <region-code
+        v-if="showCountryCodeFields"
+        v-model="user.regionCode"
+        :country-code="user.countryCode"
+        :class-name="className"
+        :required="required"
+        :label="label"
+      />
+    </template>
+    <template v-else-if="fieldKey === 'postalCode'">
+      <postal-code
+        v-if="showCountryCodeFields"
+        v-model="user.postalCode"
+        :class-name="className"
+        :required="required"
+        :label="label"
+      />
+    </template>
+    <custom-select
+      v-else-if="type === 'custom-select' && customField"
+      :id="fieldId"
+      :label="label"
+      :required="required"
+      :multiple="customField.field.multiple"
+      :selected="customField.answers"
+      :options="customField.field.options"
+      @change="onCustomSelectChange(customField.answers, $event)"
+    />
+    <custom-boolean
+      v-else-if="type === 'custom-boolean' && customField"
+      :id="fieldId"
+      :label="label"
+      :message="label"
+      :required="required"
+      :value="customField.answer"
+      @input="onCustomBooleanChange(customField.id, $event)"
+    />
+    <pre v-else>
+      label: {{ label }}
+      key: {{ fieldKey }}
+      id: {{ fieldId }}
+      type: {{ type }}
+      required: {{ required }}
+      width: {{ width }}
+    </pre>
+  </div>
+</template>
+
+<script>
+import regionCountryCodes from './utils/region-country-codes';
+import AddressExtra from './form/fields/address-extra.vue';
+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 FamilyName from './form/fields/family-name.vue';
+import FormLabel from './form/common/form-label.vue';
+import GivenName from './form/fields/given-name.vue';
+import Organization from './form/fields/organization.vue';
+import OrganizationTitle from './form/fields/organization-title.vue';
+import PhoneNumber from './form/fields/phone-number.vue';
+import PostalCode from './form/fields/postal-code.vue';
+import RegionCode from './form/fields/region.vue';
+import Street from './form/fields/street.vue';
+
+export default {
+  /**
+   *
+   */
+  components: {
+    AddressExtra,
+    City,
+    CountryCode,
+    CustomSelect,
+    CustomBoolean,
+    FamilyName,
+    FormLabel,
+    GivenName,
+    Organization,
+    OrganizationTitle,
+    PhoneNumber,
+    PostalCode,
+    RegionCode,
+    Street,
+  },
+  /**
+   *
+   */
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    fieldKey: {
+      type: String,
+      default: null,
+    },
+    fieldId: {
+      type: String,
+      default: null,
+    },
+    type: {
+      type: String,
+      required: true,
+      validator(value) {
+        return ['built-in', 'custom-select', 'custom-boolean'].includes(value);
+      },
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    width: {
+      type: Number,
+      default: 1,
+      validator(value) {
+        return [0.25, 0.33, 0.5, 0.66, 1].includes(value);
+      },
+    },
+    user: {
+      type: Object,
+      required: true,
+    },
+    endpoints: {
+      type: Object,
+      required: true,
+    },
+    enableChangeEmail: {
+      type: Boolean,
+      default: false,
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+  /**
+   *
+   */
+  computed: {
+    countryCode() {
+      return this.user.countryCode;
+    },
+    /**
+     *
+     */
+    showCountryCodeFields() {
+      return regionCountryCodes.includes(this.user.countryCode);
+    },
+
+    /**
+     *
+     */
+    customField() {
+      const { fieldId, user, type } = this;
+      const key = type === 'custom-select' ? 'customSelectFieldAnswers' : 'customBooleanFieldAnswers';
+      const found = user[key].find((ans) => ans.id === fieldId);
+      return found;
+    },
+    /**
+     *
+     */
+    colClasses() {
+      const classes = ['col'];
+      switch (this.width) {
+        case 0.25:
+          classes.push('col-md-3');
+          break;
+        case 0.33:
+          classes.push('col-md-4');
+          break;
+        case 0.5:
+          classes.push('col-md-6');
+          break;
+        case 0.66:
+          classes.push('col-md-8');
+          break;
+        default:
+          break;
+      }
+      return classes;
+    },
+  },
+  /**
+   *
+   */
+  watch: {
+    /**
+     * Clear region and postal codes on country code change.
+     */
+    countryCode() {
+      this.user.regionCode = null;
+      this.user.postalCode = null;
+    },
+  },
+
+  /**
+   *
+   */
+  methods: {
+    /**
+     *
+     */
+    onCustomBooleanChange(id) {
+      const objIndex = this.customBooleanFieldAnswers.findIndex(((obj) => obj.id === id));
+      const answer = !this.customBooleanFieldAnswers[objIndex].answer;
+      this.customBooleanFieldAnswers[objIndex].answer = answer;
+      this.user.customBooleanFieldAnswers = this.customBooleanFieldAnswers;
+    },
+
+    /**
+     *
+     */
+    onCustomSelectChange(answers, $event) {
+      const ids = Array.isArray($event) ? [...$event] : [...($event ? [$event] : [])];
+      answers.splice(0);
+      if (ids.length) answers.push(...ids.map((id) => ({ id })));
+    },
+  },
+};
+</script>

package/browser/dayjs.js

@@ -0,0 +1,6 @@
+import dayjs from 'dayjs';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+
+dayjs.extend(advancedFormat);
+
+export default dayjs;