@tapni/auth 0.0.2 → 0.0.3

package/src/components/LinkIcon.vue

@@ -0,0 +1,288 @@
+<template>
+  <a
+    class="disable-select"
+    :class="linkStyle + (disabled ? ' opacity-50' : '')"
+    :style="
+      (editing ? 'cursor: move' : 'cursor: pointer') +
+      '!important; overflow: visible;'
+    "
+  >
+
+    <span
+      :class="{
+        'user-link-img': true,
+        'pulse pulse-border': pulse,
+        'link-drag': editing,
+      }"
+      :style="{ ...customLinkStyle?.linkIcon }"
+    >
+      <img
+        v-if="!data.custom_icon && data.type !== 'customlink'"
+        :src="'https://cdn.tapni.co/icons/' + data.type + '.png'"
+        class="responsive-image"
+        :alt="data.text"
+        @load="$emit('loaded')"
+        @error="$emit('loaded')"
+      />
+      <img
+        v-else-if="
+          !data.custom_icon && data.type === 'customlink' && linkAdding
+        "
+        :src="'https://cdn.tapni.co/icons/custom-icon-128.gif'"
+        class="responsive-image"
+        :alt="data.text"
+        @load="$emit('loaded')"
+        @error="$emit('loaded')"
+      />
+      <img
+        v-else-if="
+          !data.custom_icon && data.type === 'customlink' && !linkAdding
+        "
+        :src="'https://cdn.tapni.co/icons/customlink.png'"
+        class="responsive-image"
+        :alt="data.text"
+        @load="$emit('loaded')"
+        @error="$emit('loaded')"
+      />
+      <img
+        v-else
+        :src="data.style.custom_icon"
+        style="border-radius: 22.46%"
+        class="responsive-image"
+        :alt="data.text"
+        @load="$emit('loaded')"
+        @error="$emit('loaded')"
+      />
+    </span>
+
+    <span
+      class="link-text link-drag color-black"
+      :style="{ color: customLinkStyle?.color }"
+    >
+      {{ linkText }}
+    </span>
+  </a>
+</template>
+
+<script>
+import AuthMixin from '../mixins/auth.mixin';
+
+export default {
+  name: "LinkIcon",
+  mixins: [AuthMixin],
+  props: {
+    linkAdding: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    hideExternalIcon: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    switching: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    pulse: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    editing: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    directPick: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    to: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    linkStyle: {
+      type: String,
+      required: false,
+      default: "link-grid",
+    },
+    data: {
+      type: Object,
+      required: true,
+    },
+    customLinkStyle: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
+    shareIconStyle: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
+  },
+  computed: {
+    linkText() {
+      if (this.appLang !== "en" && this.data.text) {
+        return (
+          this.ssoLang[this.appLang][
+            "link_text_" +
+              this.data.text.toLowerCase().trim().replace(/ /g, "_")
+          ] || this.data.text
+        );
+      }
+      return this.data.text;
+    },
+  },
+  methods: {
+  },
+};
+</script>
+
+<style>
+/* ********* */
+/* Link Grid */
+/* ********* */
+.link-grid,
+.user-link-img {
+  width: 100%;
+  display: inline-table;
+  position: relative;
+}
+
+.link-grid {
+  width: 30%;
+  margin: 1.6%;
+  padding: 1.6%;
+}
+
+.link-grid .user-link-img img {
+  /* box-shadow: 0px 2px 10px rgba(200,200,200,0.8); */
+  /* border: 1px solid #e8e8e8; */
+  border-radius: 25% !important;
+}
+
+.link-grid .edit-icon {
+  border-radius: 20px;
+  right: -3%;
+  top: -3%;
+  position: absolute;
+  z-index: 3;
+  max-width: 23%;
+  overflow: hidden;
+  min-width: 30px;
+}
+
+.link-grid .direct-icon {
+  border-radius: 20px;
+  left: -3%;
+  top: -3%;
+  position: absolute;
+  z-index: 555;
+  max-width: 23%;
+  overflow: hidden;
+  min-width: 30px;
+}
+
+.link-grid .link-text {
+  min-height: 20px;
+  margin-top: 3px !important;
+  display: block;
+  text-align: center;
+  line-height: normal;
+  overflow-wrap: anywhere;
+}
+
+/* ********* */
+/* Link List */
+/* ********* */
+.link-list {
+  width: 93%;
+  max-height: 67px !important;
+  margin: 0px auto;
+  display: flex;
+  border-radius: 15px !important;
+  background-color: #ffffff;
+  /* box-shadow: 0px 2px 5px rgba(0,0,0,0.15); */
+  border: solid 1px #e8e8e8;
+  position: relative;
+  align-items: center;
+}
+
+.link-list .user-link-img {
+  display: inline-block;
+  width: 65px;
+  /* box-shadow: 0px 3px 6px rgba(0,0,0,0.16); */
+  border-radius: 25% !important;
+}
+
+.link-list .link-text {
+  display: inline-block;
+  padding: 18px 0% 17px 10%;
+  font-size: 15px;
+  font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex: 1;
+  text-align: left;
+  border-radius: 15px !important;
+}
+
+.link-list .edit-icon {
+  border-radius: 20px;
+  right: 7%;
+  top: 30%;
+  position: absolute;
+  z-index: 3;
+  width: 26px;
+  overflow: hidden;
+}
+
+.link-list .switching {
+  width: 45px;
+}
+
+.link-list .direct-icon {
+  border-radius: 20px;
+  left: -2%;
+  top: -13%;
+  position: absolute;
+  z-index: 555;
+  width: 26px;
+  overflow: hidden;
+}
+/* ********* */
+
+.small {
+  width: 22% !important;
+  margin: 2% 4% 0%;
+  padding: 0%;
+}
+.small .link-text {
+  margin-top: 0px !important;
+  font-size: 13px;
+}
+
+.linkExternal {
+  margin-right: 20px;
+  width: 20px;
+  display: inline-block !important;
+  height: 20px;
+  background: black;
+  -webkit-mask: url(https://cdn.tapni.co/icons/link-external.svg) no-repeat
+    center;
+  mask: url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;
+  transform: scale(1.5);
+}
+</style>

package/src/components/ModalOverlay.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    :class="{ 'pointer delete-menu': true, 'delete-menu-active': toggle }"
+    @click="toggleEmit"
+  ></div>
+
+  <!--
+  <transition name="fade">
+    <div v-if="toggle" class="pointer delete-menu" @click="toggleEmit"></div>
+  </transition>
+  -->
+</template>
+
+<script>
+import { EventBus } from "../store/event-bus";
+import AuthMixin from "../mixins/auth.mixin";
+
+export default {
+  name: "ModalOverlay",
+  mixins: [AuthMixin],
+  data() {
+    return {
+      toggle: false,
+    };
+  },
+  mounted() {
+    EventBus.$on("closeModal", () => {
+      this.toggle = false;
+      window.document.body.style.overflow = "auto";
+      window.document.body.style.height = "auto";
+    });
+    EventBus.$on("openModalOverlay", () => {
+      this.toggle = true;
+    });
+    // EventBus.$on('togglePasswordModal', this.toggleModal)
+    // EventBus.$on('toggleAddAccountModal', this.toggleModal)
+    // EventBus.$on("toggleAccountSettingsModal", this.toggleModal);
+    EventBus.$on("toggleLanguageModal", this.toggleModal);
+    EventBus.$on("toggleSSOModal", this.toggleModal);
+    EventBus.$on("toggleSSOPickModal", this.toggleModal);
+  },
+  methods: {
+    toggleModal(shouldToggle = true) {
+      if (shouldToggle) {
+        this.toggle = !this.toggle;
+        if (this.toggle) {
+          window.document.body.style.overflow = "hidden";
+          window.document.body.style.height = "100vh";
+        } else {
+          window.document.body.style.overflow = "auto";
+          window.document.body.style.height = "auto";
+        }
+      }
+    },
+    toggleEmit() {
+      if(!this.isLoggedIn && this.user?.lead_form?.forceFilling) return;
+      EventBus.$emit("closeModal");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.fade-enter-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 1;
+}
+</style>

package/src/components/SSO.vue

@@ -0,0 +1,126 @@
+<template>
+  <form
+    @submit.prevent="submit"
+    class="menu-wrapper menu-light menu-modal center-text activate-page"
+    :class="{ 'active-menu': toggle }"
+    style="height: auto; margin-top: -172.5px"
+  >
+    <a
+      @click="forceClose"
+      class="color-black pull-right pointer"
+      style="margin-top: 5px; position: absolute; right: 5px"
+    >
+      <i class="font-17 color-black">
+        <img
+          src="https://cdn.tapni.co/icons/down-arrow.png"
+          class="responsive-image"
+          style="width: 45%"
+        />
+      </i>
+    </a>
+    <h3 class="bold center-text color-black half-top half-bottom">
+      {{ ssoLang[appLang].enter_company_email }}
+    </h3>
+    <div>
+      <input
+        type="text"
+        v-model="email"
+        :placeholder="ssoLang[this.appLang].email"
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+        class="edit-input h-40 lh-40"
+        style="width: 80%"
+        required
+        @keydown.space.prevent
+      />
+    </div>
+
+    <button
+      type="submit"
+      class="button black-button white-button button-full"
+      style="margin: 0 auto; margin-top: 25px; margin-bottom: 30px"
+    >
+      <span v-if="!loading">{{ ssoLang[appLang].continue }} </span>
+      <span v-else class="button--loading button__loader"></span>
+    </button>
+  </form>
+</template>
+
+<script>
+import { EventBus } from "../store/event-bus";
+import MicrosoftMixin from "../mixins/microsoft.mixin";
+import OktaMixin from "../mixins/okta.mixin";
+import SamlMixin from "../mixins/saml.mixin";
+import AuthMixin from "../mixins/auth.mixin";
+export default {
+  name: "SSO",
+  mixins: [MicrosoftMixin, OktaMixin, SamlMixin, AuthMixin],
+  data() {
+    return {
+      toggle: false,
+      email: "",
+      loading: false,
+    };
+  },
+  mounted() {
+    EventBus.$on("toggleSSOModal", this.toggleModal);
+    EventBus.$on("closeModal", () => {
+      this.toggle = false;
+    });
+  },
+  beforeDestroy() {
+    EventBus["_events"]["toggleSSOModal"].pop();
+  },
+  methods: {
+    forceClose() {
+      EventBus.$emit("closeModal");
+    },
+    close() {
+      this.toggleModal();
+    },
+    async submit() {
+      this.loading = true;
+      const response = await this.getCompanyBySSOEmail({ email: this.email });
+      this.loading = false;
+      let ssoTypes;
+      if (!response || response.error) return;
+      else {
+        ssoTypes = Object.keys(response.sso);
+        if (!ssoTypes.length) {
+          this.forceClose();
+          return this.errorSnack(this.ssoLang[this.appLang].no_sso_logins);
+        } else if (ssoTypes.length <= 1) {
+          if (ssoTypes[0] === "azure")
+            this.microsoftLogin("sso", response.sso.azure.sso);
+          if (ssoTypes[0] === "okta") this.oktaLogin(response.sso.okta.sso);
+          if (ssoTypes[0] === "saml")
+            this.samlLogin(response.sso.saml.sso.loginUrl);
+        } else {
+          this.forceClose();
+          EventBus.$emit("toggleSSOPickModal", {
+            sso: response.sso,
+            email: this.email,
+          });
+        }
+      }
+    },
+    toggleModal() {
+      this.toggle = !this.toggle;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.sso-img {
+  margin: 0 auto;
+  margin-top: 2px;
+  width: 35px;
+}
+input {
+  margin: 0 auto;
+  height: 25px;
+}
+</style>

package/src/components/SSOPick.vue

@@ -0,0 +1,166 @@
+<template>
+  <form
+    @submit.prevent
+    class="menu-wrapper menu-light menu-modal center-text activate-page"
+    :class="{ 'active-menu': toggle }"
+    style="height: auto; margin-top: -172.5px"
+  >
+    <a
+      @click="forceClose"
+      class="color-black pull-right pointer"
+      style="margin-top: 5px; position: absolute; right: 5px"
+    >
+      <i class="font-17 color-black">
+        <img
+          src="https://cdn.tapni.co/icons/down-arrow.png"
+          class="responsive-image"
+          style="width: 45%"
+        />
+      </i>
+    </a>
+    <h3 class="bold center-text color-black half-top half-bottom">
+      {{ ssoLang[appLang].select_sign_method }}
+    </h3>
+
+    <!-- Azure Login Button -->
+    <a
+      v-if="sso?.azure"
+      @click="ssoLogin('azure')"
+      class="button-center button black-button button-90 google-button pointer"
+    >
+      <img
+        src="https://cdn.tapni.co/icons/azure.png"
+        style="
+          position: absolute;
+          margin-left: -11px;
+          padding: 8px 0;
+          height: 100%;
+        "
+      />
+      <span v-if="!azureLoad"
+        >{{ ssoLang[appLang].sign_in_with }} Azure</span
+      >
+      <span v-else class="button--loading button__loader"></span>
+    </a>
+
+    <!-- Okta Login Button -->
+    <a
+      v-if="sso?.okta"
+      @click="ssoLogin('okta')"
+      class="button-center button black-button button-90 google-button pointer"
+    >
+      <img
+        src="https://cdn.tapni.co/icons/okta.png"
+        style="
+          position: absolute;
+          margin-left: -11px;
+          padding: 8px 0;
+          height: 100%;
+        "
+      />
+      <span v-if="!oktaLoad"
+        >{{ ssoLang[appLang].sign_in_with }} Okta</span
+      >
+      <span v-else class="button--loading button__loader"></span>
+    </a>
+
+    <!-- SAML Login Button -->
+    <a
+      v-if="sso?.saml"
+      @click="ssoLogin('saml')"
+      class="button-center button black-button button-90 google-button pointer"
+    >
+      <img
+        src="https://cdn.tapni.co/icons/saml.png"
+        style="
+          position: absolute;
+          margin-left: -11px;
+          padding: 8px 0;
+          height: 100%;
+        "
+      />
+      <span v-if="!samlLoad"
+        >{{ ssoLang[appLang].sign_in_with }} SAML</span
+      >
+      <span v-else class="button--loading button__loader"></span>
+    </a>
+  </form>
+</template>
+
+<script>
+import { EventBus } from "../store/event-bus";
+import MicrosoftMixin from "../mixins/microsoft.mixin";
+import OktaMixin from "../mixins/okta.mixin";
+import SamlMixin from "../mixins/saml.mixin";
+import AuthMixin from "../mixins/auth.mixin";
+export default {
+  name: "SSOPick",
+  mixins: [MicrosoftMixin, OktaMixin, SamlMixin, AuthMixin],
+  data() {
+    return {
+      toggle: false,
+      sso: null,
+      email: null,
+      azureLoad: false,
+      oktaLoad: false,
+      samlLoad: false,
+    };
+  },
+  mounted() {
+    EventBus.$on("toggleSSOPickModal", this.toggleModal);
+    EventBus.$on("closeModal", () => {
+      this.toggle = false;
+    });
+  },
+  beforeDestroy() {
+    EventBus["_events"]["toggleSSOPickModal"].pop();
+  },
+  methods: {
+    forceClose() {
+      EventBus.$emit("closeModal");
+    },
+    close() {
+      this.toggleModal();
+    },
+    async ssoLogin(type) {
+      if (type === "azure") {
+        this.microsoftLogin("sso", this.sso.azure.sso);
+        this.azureLoad = true;
+      }
+      if (type === "okta") {
+        this.oktaLogin(this.sso.okta.sso);
+        this.oktaLoad = true;
+      }
+      if (type === "saml") {
+        this.samlLogin(this.sso.saml.sso.loginUrl);
+        this.samlLoad = true;
+      }
+    },
+    toggleModal(data) {
+      this.azureLoad = false;
+      this.oktaLoad = false;
+      this.samlLoad = false;
+      this.sso = null;
+      this.email = null;
+
+      if (data) {
+        this.sso = data.sso;
+        this.email = data.email;
+      }
+      this.toggle = !this.toggle;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.sso-img {
+  margin: 0 auto;
+  margin-top: 2px;
+  width: 35px;
+}
+input {
+  margin: 0 auto;
+  height: 25px;
+}
+</style>

package/src/install.js

@@ -0,0 +1,8 @@
+import App from "./App.vue";
+
+// Export the component by default
+export default {
+    install: (app, options) => {
+        app.component('TapniAuth', App)
+    }
+};