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

package/browser/change-email-confirm.vue

@@ -0,0 +1,120 @@
+<template>
+  <div v-if="isRedirecting">
+    <p>You've successfully changed your email. Redirecting you...</p>
+  </div>
+  <div v-else-if="isLoading">
+    <p>Changing your email...</p>
+  </div>
+  <div v-else-if="error" class="alert alert-danger" role="alert">
+    <h5 class="alert-heading">
+      Unable to change email
+    </h5>
+    <p>{{ error.message }}</p>
+    <hr>
+    <p class="mb-0">
+      Please try <a :href="endpoints.login" class="alert-link">logging in</a> again.
+    </p>
+  </div>
+</template>
+
+<script>
+import redirect from './utils/redirect';
+import cookiesEnabled from './utils/cookies-enabled';
+import post from './utils/post';
+import AuthenticationError from './errors/authentication';
+import FeatureError from './errors/feature';
+import EventEmitter from './mixins/global-event-emitter';
+
+export default {
+  /**
+   *
+   */
+  mixins: [EventEmitter],
+
+  /**
+   *
+   */
+  props: {
+    token: {
+      type: String,
+      required: true,
+    },
+    endpoints: {
+      type: Object,
+      required: true,
+    },
+    redirectTo: {
+      type: String,
+      default: '/',
+    },
+    buttonLabel: {
+      type: String,
+      default: 'Submit',
+    },
+  },
+
+  /**
+   *
+   */
+  data: () => ({
+    error: null,
+    isLoading: false,
+    isRedirecting: false,
+  }),
+
+  /**
+   *
+   */
+  mounted() {
+    if (cookiesEnabled()) {
+      this.emit('change-email-mounted');
+      this.changeEmail();
+    } else {
+      this.error = new FeatureError('Your browser does not support cookies. Please enable cookies to use this feature.');
+      this.emit('change-email-errored', { message: this.error.message });
+    }
+  },
+
+  /**
+   *
+   */
+  methods: {
+    /**
+     *
+     */
+    async changeEmail() {
+      this.isLoading = true;
+      try {
+        const { token } = this;
+        if (!token) throw new Error('No change email token was provided.');
+
+        const res = await post('/change-email/confirm', { token });
+        const data = await res.json();
+
+        if (!res.ok) throw new AuthenticationError(data.message, res.status);
+
+        this.emit('change-email', { data }, data.entity);
+
+        this.redirect();
+      } catch (e) {
+        if (/no token was found/i.test(e.message)) {
+          e.message = 'This change email link has either expired or was already used.';
+        }
+        this.error = e;
+        this.emit('change-email-errored', { message: e.message });
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    /**
+     *
+     */
+    redirect() {
+      this.isRedirecting = true;
+      const redirectTo = this.isUserRedirect ? '/' : this.redirectTo;
+      redirect(redirectTo);
+    },
+  },
+};
+</script>

package/browser/change-email-init.vue

@@ -0,0 +1,179 @@
+<template>
+  <div v-if="!hasActiveUser">
+    <p>Please log in before accessing this page.</p>
+    <a
+      :href="endpoints.login"
+      class="btn btn-secondary"
+      role="button"
+    >
+      {{ buttonLabels.login || "Log in" }}
+    </a>
+  </div>
+  <div v-else-if="complete">
+    <h4>Almost Done!</h4>
+    <p>
+      We just sent an email to <em>{{ email }}</em> with your confirmation link.
+      To finish changing your email, open the email message and click the
+      link within.
+    </p>
+    <p>You have now been logged out. To continue, click the link in your inbox.</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 {{ senderEmailAddress }} to your whitelist and try registering again.
+    </p>
+  </div>
+  <div v-else>
+    <form @submit.prevent="handleSubmit">
+      <email
+        v-model="email"
+        :placeholder="activeUser.email"
+        :disabled="loading"
+        :label="loginEmailLabel"
+      />
+
+      <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 post from './utils/post';
+import cookiesEnabled from './utils/cookies-enabled';
+import FormError from './errors/form';
+import FeatureError from './errors/feature';
+import EventEmitter from './mixins/global-event-emitter';
+
+export default {
+  /**
+   *
+   */
+  components: {
+    Email,
+  },
+
+  /**
+   *
+   */
+  mixins: [EventEmitter],
+
+  /**
+   *
+   */
+  props: {
+    activeUser: {
+      type: Object,
+      default: () => {},
+    },
+    endpoints: {
+      type: Object,
+      required: true,
+    },
+    buttonLabels: {
+      type: Object,
+      default: () => ({
+        continue: 'Continue',
+        login: 'Log in',
+      }),
+    },
+    consentPolicy: {
+      type: String,
+      default: null,
+    },
+    consentPolicyEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    appContextId: {
+      type: String,
+      default: null,
+    },
+    senderEmailAddress: {
+      type: String,
+      default: 'noreply@identity-x.parameter1.com',
+    },
+    loginEmailLabel: {
+      type: String,
+      default: 'Email Address',
+    },
+  },
+
+  /**
+   *
+   */
+  data: () => ({
+    email: null,
+    complete: false,
+    error: null,
+    loading: false,
+  }),
+
+  /**
+   *
+   */
+  computed: {
+    /**
+     *
+     */
+    hasActiveUser() {
+      return this.activeUser && this.activeUser.email;
+    },
+  },
+
+  /**
+   *
+   */
+  mounted() {
+    if (cookiesEnabled()) {
+      this.emit('change-email-mounted');
+    } else {
+      this.error = new FeatureError('Your browser does not support cookies. Please enable cookies to use this feature.');
+      this.emit('change-email-errored', { message: this.error.message });
+    }
+  },
+
+  /**
+   *
+   */
+  methods: {
+    /**
+     *
+     */
+    async handleSubmit() {
+      try {
+        this.error = null;
+        this.loading = true;
+        const res = await post('/change-email/initiate', {
+          email: this.email,
+          appContextId: this.appContextId,
+        });
+        const data = await res.json();
+        if (!res.ok) throw new FormError(data.message, res.status);
+        this.complete = true;
+        this.emit('change-email-link-sent', { data, email: this.email }, data.entity);
+      } catch (e) {
+        this.error = e;
+        this.emit('change-email-errored', { message: e.message });
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>

package/browser/comments/create.vue

@@ -0,0 +1,107 @@
+<template>
+  <form :class="blockName" @submit.prevent="handleSubmit">
+    <fieldset :disabled="isLoading">
+      <display-name v-model="currentDisplayName" label="Posting As" />
+      <comment-body v-model="body" />
+      <button
+        type="submit"
+        class="btn btn-primary"
+      >
+        Submit
+      </button>
+    </fieldset>
+    <p v-if="error" class="mb-0 mt-3">
+      Error: {{ error.message }}
+    </p>
+  </form>
+</template>
+
+<script>
+import post from '../utils/post';
+import FormError from '../errors/form';
+import DisplayName from '../form/fields/display-name.vue';
+import CommentBody from '../form/fields/comment-body.vue';
+import EventEmitter from '../mixins/global-event-emitter';
+
+export default {
+  /**
+   *
+   */
+  components: { DisplayName, CommentBody },
+
+  /**
+   *
+   */
+  mixins: [EventEmitter],
+
+  /**
+   *
+   */
+  props: {
+    stream: {
+      type: Object,
+      required: true,
+    },
+
+    displayName: {
+      type: String,
+      required: true,
+    },
+  },
+
+  /**
+   *
+   */
+  data: () => ({
+    blockName: 'idx-create-comment',
+    isLoading: false,
+    error: null,
+    body: '',
+    updatedDisplayName: undefined,
+  }),
+
+  computed: {
+    /**
+     *
+     */
+    currentDisplayName: {
+      get() {
+        return this.updatedDisplayName || this.displayName;
+      },
+      set(displayName) {
+        this.updatedDisplayName = displayName;
+      },
+    },
+  },
+
+  /**
+   *
+   */
+  methods: {
+    /**
+     *
+     */
+    async handleSubmit() {
+      this.error = null;
+      this.isLoading = true;
+      const { currentDisplayName, body, stream } = this;
+      try {
+        const res = await post('/comment', {
+          displayName: currentDisplayName,
+          body,
+          stream,
+        });
+        const data = await res.json();
+        if (!res.ok) throw new FormError(data.message, res.status);
+        this.body = '';
+        this.emit('comment-post-submitted');
+      } catch (e) {
+        this.error = e;
+        this.emit('comment-post-errored', { message: e.message });
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>

package/browser/comments/post.vue

@@ -0,0 +1,151 @@
+<template>
+  <div :class="blockName" :data-id="id">
+    <div :class="element('header')">
+      <div :class="element('display-name')">
+        <span>Posted by {{ displayName }}</span>
+      </div>
+      <div>
+        <span :class="element('created-at')">
+          {{ postedAt }}
+        </span>
+        <span v-if="hasActiveUser && !flagged">
+          <a
+            href="#report-post"
+            title="Report post as inappropriate."
+            :disabled="isReporting"
+            @click.prevent="reportComment"
+          >
+            Report
+          </a>
+          <span v-if="isReporting">Reporting...</span>
+          <span v-if="error" class="text-danger">Error, try again</span>
+        </span>
+      </div>
+    </div>
+    <div :class="element('body')">
+      <p v-if="flagged" :class="element('flagged')">
+        This comment has been reported.
+      </p>
+      <!-- eslint-disable-next-line -->
+      <div v-html="bodyHtml" />
+    </div>
+  </div>
+</template>
+
+<script>
+import dayjs from '../dayjs';
+import post from '../utils/post';
+import FormError from '../errors/form';
+import EventEmitter from '../mixins/global-event-emitter';
+
+export default {
+  /**
+   *
+   */
+  mixins: [EventEmitter],
+
+  /**
+   *
+   */
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    body: {
+      type: String,
+      required: true,
+    },
+    displayName: {
+      type: String,
+      required: true,
+    },
+    createdAt: {
+      type: Number,
+      required: true,
+    },
+    approved: {
+      type: Boolean,
+      default: true,
+    },
+    flagged: {
+      type: Boolean,
+      default: false,
+    },
+    dateFormat: {
+      type: String,
+      default: 'MMM Do, YYYY h:mma',
+    },
+    activeUser: {
+      type: Object,
+      default: () => {},
+    },
+  },
+
+  /**
+   *
+   */
+  data: () => ({
+    blockName: 'idx-comment-post',
+    isReporting: false,
+    error: null,
+  }),
+
+  /**
+   *
+   */
+  computed: {
+    /**
+     *
+     */
+    postedAt() {
+      const { createdAt } = this;
+      if (!createdAt) return null;
+      return dayjs(createdAt).format(this.dateFormat);
+    },
+
+    /**
+     *
+     */
+    hasActiveUser() {
+      return this.activeUser && this.activeUser.email;
+    },
+
+    /**
+     *
+     */
+    bodyHtml() {
+      return this.body.replace(/\n/g, '<br>');
+    },
+  },
+
+  /**
+   *
+   */
+  methods: {
+    /**
+     *
+     */
+    element(name) {
+      return `${this.blockName}__${name}`;
+    },
+
+    async reportComment() {
+      if (this.isReporting) return;
+      this.error = null;
+      this.isReporting = true;
+      try {
+        const res = await post(`/comment/flag/${this.id}`);
+        const data = await res.json();
+        if (!res.ok) throw new FormError(data.message, res.status);
+        this.emit('comment-report-submitted', { id: this.id });
+      } catch (e) {
+        this.error = e;
+        this.emit('comment-report-errored', { message: e.message, id: this.id });
+      } finally {
+        this.isReporting = false;
+      }
+    },
+  },
+};
+</script>