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

package/browser/index.js

@@ -0,0 +1,110 @@
+import IdentityX from './service';
+import createGraphqlClient from './graphql/create-client';
+
+const Access = () => import(/* webpackChunkName: "identity-x-form-access" */ './access.vue');
+const Authenticate = () => import(/* webpackChunkName: "identity-x-authenticate" */ './authenticate.vue');
+const ChangeEmailConfirm = () => import(/* webpackChunkName: "identity-x-change-email-confirm" */ './change-email-confirm.vue');
+const ChangeEmailInit = () => import(/* webpackChunkName: "identity-x-change-email-init" */ './change-email-init.vue');
+const Download = () => import(/* webpackChunkName: "identity-x-download" */ './download.vue');
+const Logout = () => import(/* webpackChunkName: "identity-x-logout" */ './logout.vue');
+const Login = () => import(/* webpackChunkName: "identity-x-login" */ './login.vue');
+const Profile = () => import(/* webpackChunkName: "identity-x-profile" */ './profile.vue');
+const CommentStream = () => import(/* webpackChunkName: "identity-x-comment-stream" */ './comments/stream.vue');
+
+const $graphql = createGraphqlClient({ uri: '/__graphql' });
+
+const { log } = console;
+
+export default (Browser, {
+  CustomAccessComponent,
+  CustomAuthenticateComponent,
+  CustomChangeEmailConfirmComponent,
+  CustomChangeEmailInitComponent,
+  CustomCommentStreamComponent,
+  CustomDownloadComponent,
+  CustomLoginComponent,
+  CustomLogoutComponent,
+  CustomProfileComponent,
+} = {}) => {
+  const AccessComponent = CustomAccessComponent || Access;
+  const AuthenticateComponent = CustomAuthenticateComponent || Authenticate;
+  const ChangeEmailConfirmComponent = CustomChangeEmailConfirmComponent || ChangeEmailConfirm;
+  const ChangeEmailInitComponent = CustomChangeEmailInitComponent || ChangeEmailInit;
+  const CommentStreamComponent = CustomCommentStreamComponent || CommentStream;
+  const DownloadComponent = CustomDownloadComponent || Download;
+  const LoginComponent = CustomLoginComponent || Login;
+  const LogoutComponent = CustomLogoutComponent || Logout;
+  const ProfileComponent = CustomProfileComponent || Profile;
+
+  window.IdentityX = new IdentityX();
+
+  const { EventBus } = Browser;
+  Browser.register('IdentityXAccess', AccessComponent, { provide: { EventBus, $graphql } });
+  Browser.register('IdentityXAuthenticate', AuthenticateComponent, { provide: { EventBus } });
+  Browser.register('IdentityXChangeEmailConfirm', ChangeEmailConfirmComponent, { provide: { EventBus } });
+  Browser.register('IdentityXChangeEmailInit', ChangeEmailInitComponent, { provide: { EventBus } });
+  Browser.register('IdentityXCommentStream', CommentStreamComponent, { provide: { EventBus } });
+  Browser.register('IdentityXDownload', DownloadComponent, { provide: { EventBus, $graphql } });
+  Browser.register('IdentityXLogin', LoginComponent, { provide: { EventBus } });
+  Browser.register('IdentityXLogout', LogoutComponent, { provide: { EventBus } });
+  Browser.register('IdentityXProfile', ProfileComponent, { provide: { EventBus } });
+
+  // Ensure the client-side IdX context is refreshed when the authentication event occurs
+  EventBus.$on('identity-x-authenticated', () => window.IdentityX.refreshContext());
+
+  // Send emitted IdentityX events to the datalayer
+  window.dataLayer = window.dataLayer || [];
+  [
+    // Views
+    'identity-x-access-mounted',
+    'identity-x-authenticate-mounted',
+    'identity-x-change-email-mounted',
+    'identity-x-comment-create-mounted',
+    'identity-x-comment-post-mounted',
+    'identity-x-comment-stream-mounted',
+    'identity-x-download-mounted',
+    'identity-x-login-mounted',
+    'identity-x-logout-mounted',
+    'identity-x-profile-mounted',
+    // Actions/submissions
+    'identity-x-access-submitted',
+    'identity-x-authenticated',
+    'identity-x-auto-signup',
+    'identity-x-change-email',
+    'identity-x-comment-post-submitted',
+    'identity-x-comment-report-submitted',
+    'identity-x-comment-stream-loaded',
+    'identity-x-comment-stream-loaded-more',
+    'identity-x-download-submitted',
+    'identity-x-login-link-sent',
+    'identity-x-logout',
+    'identity-x-profile-updated',
+    // Errors
+    'identity-x-access-errored',
+    'identity-x-authenticate-errored',
+    'identity-x-change-email-errored',
+    'identity-x-comment-post-errored',
+    'identity-x-comment-report-errored',
+    'identity-x-comment-stream-errored',
+    'identity-x-download-errored',
+    'identity-x-login-errored',
+    'identity-x-logout-errored',
+    'identity-x-profile-errored',
+  ].forEach((event) => {
+    EventBus.$on(event, (args) => {
+      if (!window.IdentityX) return;
+      const payload = {
+        event,
+        'identity-x': {
+          ...args,
+          event,
+        },
+      };
+      const { searchParams } = new URL(window.location.href);
+      if (searchParams.has('idxDebugger')) {
+        log(`identity-x event: ${event} `, payload);
+      }
+      window.dataLayer.push(payload);
+    });
+  });
+};

package/browser/login-fields.vue

@@ -0,0 +1,214 @@
+<template>
+  <form @submit.prevent="$emit('submit', values)">
+    <p>{{ callToAction }}</p>
+    <fieldset :disabled="disabled">
+      <div class="row">
+        <!-- common, loopable fields -->
+        <div
+          v-for="fieldKey in componentFields"
+          :key="fieldKey"
+          class="col-md-6"
+        >
+          <component
+            :is="components[fieldKey]"
+            v-model="values[fieldKey]"
+            required
+          />
+        </div>
+
+        <!-- locale dependent fields -->
+        <div v-if="displayCountryField" class="col-md-6">
+          <country-code v-model="values.countryCode" required />
+        </div>
+        <div v-if="displayRegionField" class="col-md-6">
+          <region-code v-model="values.regionCode" :country-code="values.countryCode" required />
+        </div>
+        <div v-if="displayPostalCodeField" class="col-md-6">
+          <postal-code v-model="values.postalCode" required />
+        </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"
+        v-html="consentPolicy"
+      />
+
+      <button
+        type="submit"
+        class="btn btn-primary"
+      >
+        {{ buttonLabel }}
+      </button>
+    </fieldset>
+  </form>
+</template>
+
+<script>
+import GivenName from './form/fields/given-name.vue';
+import FamilyName from './form/fields/family-name.vue';
+import Organization from './form/fields/organization.vue';
+import OrganizationTitle from './form/fields/organization-title.vue';
+import CountryCode from './form/fields/country.vue';
+import RegionCode from './form/fields/region.vue';
+import PostalCode from './form/fields/postal-code.vue';
+
+import RegionalPolicy from './form/fields/regional-policy.vue';
+
+import regionCountryCodes from './utils/region-country-codes';
+
+export default {
+  components: {
+    CountryCode,
+    RegionCode,
+    PostalCode,
+    RegionalPolicy,
+  },
+
+  props: {
+    /**
+     * The field keys to display on the pre-login form.
+     * All will be set as required.
+     *
+     * Example:
+     * [
+     *   'countryCode',
+     *   'regionCode',
+     * ]
+     */
+    fields: {
+      type: Array,
+      required: true,
+    },
+
+    /**
+     * The form button label
+     */
+    buttonLabel: {
+      type: String,
+      default: 'Submit',
+    },
+
+    /**
+     * The form call-to-action
+     */
+    callToAction: {
+      type: String,
+      default: 'To complete your login/registration, please fill out the fields below.',
+    },
+
+    /**
+     * The form submit consent policy, if present.
+     */
+    consentPolicy: {
+      type: String,
+      default: null,
+    },
+
+    /**
+     * Whether the form's fieldset is disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Regional consent policies to display, if any.
+     */
+    regionalConsentPolicies: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  data: () => ({
+    components: {
+      givenName: GivenName,
+      familyName: FamilyName,
+      organization: Organization,
+      organizationTitle: OrganizationTitle,
+    },
+    values: { regionalConsentAnswers: [] },
+  }),
+
+  computed: {
+    /**
+     * Returns fields that have a matching, loopable component.
+     */
+    componentFields() {
+      return this.fields.filter((field) => this.components[field]);
+    },
+
+    /**
+     *
+     */
+    displayCountryField() {
+      return this.fields.includes('countryCode');
+    },
+
+    /**
+     *
+     */
+    displayRegionField() {
+      const { countryCode } = this.values;
+      return this.fields.includes('regionCode') && regionCountryCodes.includes(countryCode);
+    },
+
+    /**
+     *
+     */
+    displayPostalCodeField() {
+      return this.fields.includes('postalCode') && this.displayRegionField;
+    },
+
+    /**
+     *
+     */
+    regionalPolicyFields() {
+      const { regionalConsentPolicies } = this;
+      const { countryCode } = this.values;
+      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.values.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.values.regionalConsentAnswers.push({ id: policyId, given });
+      }
+    },
+  },
+};
+</script>

package/browser/login.vue

@@ -0,0 +1,331 @@
+<template>
+  <div v-if="hasActiveUser">
+    <p>You are currently logged in as {{ activeUser.email }}.</p>
+    <a
+      :href="endpoints.profile"
+      class="btn btn-secondary mb-2 mr-2"
+      role="button"
+    >
+      {{ buttonLabels.profile || "Modify Profile" }}
+    </a>
+    <a
+      :href="endpoints.logout"
+      class="btn btn-primary mb-2 mr-2"
+      role="button"
+    >
+      {{ buttonLabels.logout || "Log out" }}
+    </a>
+  </div>
+  <div v-else-if="complete" v-html="almostDoneVerbiage" />
+  <div v-else>
+    <form @submit.prevent="handleSubmit">
+      <email
+        :id="loginEmailId"
+        v-model="email"
+        :placeholder="loginEmailPlaceholder"
+        :disabled="loading"
+        :label="loginEmailLabel"
+        @focus="$emit('focus')"
+      />
+
+      <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'"
+          />
+        </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>
+
+      <small
+        v-if="emailConsentRequestEnabled && emailConsentRequest"
+        class="text-muted mb-1 d-block"
+        v-html="emailConsentRequest"
+      />
+
+      <small
+        v-if="consentPolicyEnabled && consentPolicy"
+        class="text-muted mb-1 d-block"
+        v-html="consentPolicy"
+      />
+      <button
+        type="submit"
+        class="btn btn-primary"
+        :disabled="loading"
+      >
+        {{ buttonLabels.continue || "Continue" }}
+      </button>
+      <p v-if="error" class="mt-3 text-danger">
+        An error occurred: {{ error.message }}
+      </p>
+    </form>
+  </div>
+</template>
+
+<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 cleanPath from './utils/clean-path';
+import post from './utils/post';
+import cookiesEnabled from './utils/cookies-enabled';
+import FormError from './errors/form';
+import FeatureError from './errors/feature';
+import AutoSignupEventEmitter from './mixins/global-auto-signup-event-emitter';
+import EventEmitter from './mixins/global-event-emitter';
+
+export default {
+  /**
+   *
+   */
+  components: {
+    Email,
+    GivenName,
+    FamilyName,
+  },
+
+  /**
+   *
+   */
+  mixins: [EventEmitter, AutoSignupEventEmitter],
+
+  /**
+   *
+   */
+  props: {
+    source: {
+      type: String,
+      default: 'default',
+    },
+    activeUser: {
+      type: Object,
+      default: () => {},
+    },
+    endpoints: {
+      type: Object,
+      required: true,
+    },
+    buttonLabels: {
+      type: Object,
+      default: () => ({
+        continue: 'Continue',
+        profile: 'Modify Profile',
+        logout: 'Logout',
+      }),
+    },
+    defaultFieldLabels: {
+      type: Object,
+      default: () => {},
+    },
+    consentPolicy: {
+      type: String,
+      default: null,
+    },
+    consentPolicyEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    emailConsentRequest: {
+      type: String,
+      default: null,
+    },
+    emailConsentRequestEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    redirect: {
+      type: String,
+      default: null,
+    },
+    appContextId: {
+      type: String,
+      default: null,
+    },
+    loginEmailPlaceholder: {
+      type: String,
+      default: null,
+    },
+    senderEmailAddress: {
+      type: String,
+      default: 'noreply@identity-x.parameter1.com',
+    },
+    actionText: {
+      type: String,
+      default: 'logging in',
+    },
+    loginEmailId: {
+      type: String,
+      default: 'sign-on-email',
+    },
+    loginEmailLabel: {
+      type: String,
+      default: 'Email Address',
+    },
+
+    /**
+     * Regional consent polices to display (if/when a user selects a country on login)
+     * if enabled.
+     */
+    regionalConsentPolicies: {
+      type: Array,
+      default: () => [],
+    },
+
+    requiredCreateFields: {
+      type: Array,
+      default: () => [],
+    },
+
+    lang: {
+      type: String,
+      default: 'en',
+    },
+  },
+
+  /**
+   *
+   */
+  data: () => ({
+    email: null,
+    givenName: null,
+    familyName: null,
+    complete: false,
+    error: null,
+    loading: false,
+    requiresUserInput: false,
+  }),
+
+  /**
+   *
+   */
+  computed: {
+    /**
+     *
+     */
+    authUrl() {
+      return `${window.location.origin}/${cleanPath(this.endpoints.authenticate)}`;
+    },
+
+    /**
+     *
+     */
+    hasActiveUser() {
+      return this.activeUser && this.activeUser.email;
+    },
+
+    almostDoneVerbiage() {
+      if (this.lang === 'es') {
+        return `<h4>Falta muy poco!</h4>
+        <p>
+          Enviamos un correo a <em>${this.email}</em> con su enlace de inicio de sesión único (caduca en una hora).
+          Para terminar de  ${this.actionText || 'logging in'}, abra el mensaje de correo electrónico y haga clic en el enlace que contiene.
+        </p>
+        <p>
+          Nota: por favor revise sus carpetas de spam/basura.
+          Si no recibe este correo electrónico, es probable que su firewall o ISP lo haya bloqueado.
+          Agregue ${this.senderEmailAddress} a su lista blanca e intente registrarse nuevamente.
+        </p>`;
+      }
+      return `<h4>Almost Done!</h4>
+      <p>
+        We just sent an email to <em>${this.email}</em> with your one-time login link (expires in one hour).
+        To finish ${this.actionText || 'logging in'}, open the email message and click the link within.
+      </p>
+      <p>
+        Note: please check your spam/junk folders.
+        If you do not receive this email, your firewall or ISP has likely blocked it.
+        Please add ${this.senderEmailAddress} to your whitelist and try registering again.
+      </p>`;
+    },
+
+    /**
+     *
+     */
+    redirectTo() {
+      const { redirect } = this;
+      if (redirect) return redirect;
+      const { pathname, search, hash } = window.location;
+      return `${pathname}${search}${hash}`;
+    },
+  },
+
+  /**
+   *
+   */
+  mounted() {
+    if (cookiesEnabled()) {
+      this.emit('login-mounted', { actionSource: this.source });
+    } else {
+      this.error = new FeatureError('Your browser does not support cookies. Please enable cookies to use this feature.');
+      this.emit('login-errored', { message: this.error.message });
+    }
+  },
+
+  /**
+   *
+   */
+  methods: {
+    /**
+     *
+     */
+    async handleSubmit() {
+      try {
+        this.error = null;
+        this.loading = true;
+        const res = await post('/login', {
+          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,
+          appContextId: this.appContextId,
+          additionalEventData: {
+            ...this.additionalEventData,
+            actionSource: this.source,
+          },
+        });
+        const data = await res.json();
+        const { entity } = data;
+        if (!res.ok) {
+          if (data.requiresUserInput) {
+            this.requiresUserInput = true;
+            return;
+          }
+          throw new FormError(data.message, res.status);
+        }
+        this.complete = true;
+        this.emitAutoSignup(data);
+        this.emit('login-link-sent', {
+          data,
+          email: this.email,
+          source: this.source,
+          additionalEventData: {
+            ...(this.additionalEventData || {}),
+            ...(data.additionalEventData || {}),
+          },
+        }, entity);
+      } catch (e) {
+        this.error = e;
+        this.emit('login-errored', { message: e.message });
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>