@tapni/auth 0.0.168 → 1.0.2

package/src/views/Login.vue

@@ -80,9 +80,27 @@
           />
         </em>
       </div>
+      <div v-if="showOTP" class="page-login-field half-bottom">
+        <i style="padding-top: 15px">
+          <img
+              src="https://cdn.tapni.co/icons/padlock.png"
+              class="responsive-image"
+              style="width: 50%"
+          />
+        </i>
+        <input
+            v-model="otpToken"
+            type="text"
+            :placeholder="ssoLang[this.appLanguage].otp_code"
+            name="otpToken"
+            required
+            minlength="6"
+        />
+        <em></em>
+      </div>
       <button
         type="submit"
-        class="button black-button google-button bg-tapni-grey button-90 button-center uppercase bold full-top"
+        class="button black-button google-button bg-tapni-grey button-90 button-center uppercase bold full-top pointer"
       >
         <span v-if="!submitted">{{ ssoLang[appLanguage].login }}</span>
         <span v-else class="button--loading button__loader"></span>
@@ -290,20 +308,12 @@ import MicrosoftMixin from "../mixins/microsoft.mixin";
 import OktaMixin from "../mixins/okta.mixin";
 import SamlMixin from "../mixins/saml.mixin";
 import AuthMixin from "../mixins/auth.mixin";
-import MFAMixin from "../mixins/mfa-auth.mixin";
 import QRAuthMixin from "../mixins/qr-auth.mixin";
 import { EventBus } from "../store/event-bus";
 import to from "await-to-js";
 export default {
   name: "AuthLogin",
-  mixins: [GoogleMixin, FacebookMixin, AppleMixin, MicrosoftMixin, OktaMixin, SamlMixin, AuthMixin, QRAuthMixin, MFAMixin],
-  props: {
-    isModal: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
+  mixins: [GoogleMixin, FacebookMixin, AppleMixin, MicrosoftMixin, OktaMixin, SamlMixin, AuthMixin, QRAuthMixin],
   data() {
     return {
       loading: true,
@@ -313,6 +323,9 @@ export default {
       captcha: "",
       revealPassword: false,
       emailLogin: true,
+
+      otpToken: '',
+      showOTP: false
     };
   },
   computed: {
@@ -342,6 +355,10 @@ export default {
         }
       }, 2500)
     }
+
+    EventBus.$on("toggleOTPField", () => {
+      this.showOTP = !this.showOTP;
+    });
   },
   methods: {
     async submit() {

package/src/views/QR.vue

@@ -5,7 +5,7 @@
         </h5>
         <br>
 
-        <div class="qrCodeLoginContainer center-text">
+        <div class="center-text">
             <div id="qrCodeContainer"
                  class="qrCodeRounded"
                  style="max-width: 100%;"/>

package/src/views/Security.vue

@@ -0,0 +1,322 @@
+<template>
+    <div class="page-login content-boxed content-boxed-padding">
+        <a v-if="isModal" @click="close" class="color-black pull-right pointer" style="margin-top: 0px; position: absolute; right: -20px; text-align: right;">
+          <i class="font-17 color-black">
+            <img src="https://cdn.tapni.co/icons/down-arrow.png" class="responsive-image" style="width: 35%;"/>
+          </i>
+        </a>
+      <div class="subheaderContainer full-top">
+        <!-- Back Button -->
+        <router-link to="/account" class="button gray-button pointer left-button">
+          <img
+              :src="getIcon('arrow-gray-right.svg')"
+              height="20"
+              width="20"
+              class="btn-icon"
+              style="rotate: 180deg;"
+          />
+        </router-link>
+
+        <!-- Centered Text -->
+        <h2 class="center-text" style="flex-grow: 1; text-align: center; margin: 0; font-weight: 600;">
+          {{ssoLang[appLanguage].security }}
+        </h2>
+      </div>
+
+      <div class="container center-text">
+        <p>{{ssoLang[appLanguage].security_p }}</p>
+
+        <div class="full-top">
+          <!-- MFA -->
+          <div class="settingRow">
+            <div class="firstRow">
+              <h4>{{ssoLang[appLanguage].mfa_auth }}</h4>
+
+              <div class="ios-switch" style="display: inline-block">
+                <input
+                    type="checkbox"
+                    name="ios-switch"
+                    class="ios-switch-checkbox"
+                    :id="'mfa-open-switch'"
+                    v-model="mfaEnable"
+                />
+                <label class="ios-switch-label" :for="'mfa-open-switch'"></label>
+              </div>
+            </div>
+          </div>
+          <div v-show="mfaEnable && !account.mfaEnabled" class="center-text half-top">
+            <div id="qrCodeContainer"
+                 class="qrCodeRounded"
+                 style="max-width: 100%;"/>
+            <br>
+            <div class="settingRow" @click="copy(otpSecret)">
+              <div class="firstRow">
+                <h4 class="center-text no-margin">{{ otpSecret }}</h4>
+              </div>
+            </div>
+            <div class="margin-center left-text padding-left small-top">
+              <p class="">{{ssoLang[appLanguage].mfa_auth_qr }}</p>
+            </div>
+          </div>
+          <form @submit.prevent="validateMFA" v-if="account.mfaEnabled !== mfaEnable" class="half-top">
+            <div>
+              <input
+                  type="text"
+                  v-model="otp"
+                  :placeholder="ssoLang[appLanguage].otp_code"
+                  class="edit-input h-40 lh-40"
+                  style="margin: 0 auto; height: 25px; width: 100%;"
+                  required
+                  @keydown.space.prevent
+              />
+              <p class="small-top full-bottom padding-left left-text" v-html="ssoLang[appLanguage].otp_subtitle"></p>
+            </div>
+
+            <button
+                type="submit"
+                class="button black-button google-button bg-tapni-grey button-90 button-center uppercase bold full-top pointer"
+            >
+              <span v-if="!loading">{{ ssoLang[appLanguage].continue }}</span>
+              <span v-else class="button--loading button__loader"></span>
+            </button>
+
+            <p class="close-text center-text half-top">
+              <span v-html="ssoLang[appLanguage].otp_p1"></span>
+              <a href="mailto:support@tapni.com?subject=MFA Authentication Problem"> support@tapni.com</a>
+            </p>
+          </form>
+          <div v-else class="margin-center small-top" style="width: 100%;">
+            <div class="left-text">
+              <p v-if="mfaEnable">
+                {{ssoLang[appLanguage].mfa_auth_enabled }}
+              </p>
+              <p v-else>
+                {{ssoLang[appLanguage].mfa_auth_p }}
+              </p>
+            </div>
+          </div>
+
+          <!-- Password -->
+          <div class="settingRow full-top" @click="changePassword = !changePassword">
+            <div class="firstRow">
+              <h4>{{ssoLang[appLanguage].change_password }}</h4>
+
+              <img class="transition-icon" :class="{ 'rotate-icon': !!changePassword }" :src="getIcon('arrow-gray-down.svg')" />
+            </div>
+          </div>
+          <form v-show="changePassword" class="center-text half-top">
+            <form @submit.prevent="submitChangePassword">
+              <input type="password" v-model="currentPassword" :placeholder="ssoLang[appLanguage].password_current_p"
+                     class="edit-input h-40 lh-40" required minlength="8" style="width: 100%"/>
+              <p class="small-text small-top-padding small-bottom">{{ssoLang[appLanguage].password_current}}</p>
+
+              <input type="password" v-model="password" :placeholder="ssoLang[appLanguage].password_new_p"
+                     class="bg-white edit-input h-40 lh-40" required minlength="8" style="width: 100%"/>
+              <p class="small-text small-top-padding small-bottom">{{ssoLang[appLanguage].password_new}}</p>
+
+              <input type="password" v-model="passwordRepeat" :placeholder="ssoLang[appLanguage].password_new_repeat_p"
+                     class="edit-input h-40 lh-40" required minlength="8" style="width: 100%"/>
+              <p class="small-text small-top-padding small-bottom">{{ssoLang[appLanguage].password_new_repeat}}</p>
+
+              <button
+                  type="submit"
+                  class="button black-button google-button bg-tapni-grey button-90 button-center uppercase bold full-top pointer"
+              >
+                <span v-if="!loading">{{ ssoLang[appLanguage].password_update }}</span>
+                <span v-else class="button--loading button__loader"></span>
+              </button>
+
+              <p class="center-text font-13 half-top half-bottom">
+                <span v-html="ssoLang[appLanguage].password_reset"></span>
+                <router-link to="/reset" exact class="color-black">{{ssoLang[appLanguage].by_clicking_here}}</router-link>
+              </p>
+            </form>
+          </form>
+
+
+          <!-- Delete Account -->
+          <div class="settingRow full-top" @click="accountDelete = !accountDelete">
+            <div class="firstRow">
+              <h4 class="red-text">{{ssoLang[appLanguage].delete_account }}</h4>
+
+              <img class="transition-icon" :class="{ 'rotate-icon': !!accountDelete }" :src="getIcon('arrow-gray-down.svg')" />
+            </div>
+          </div>
+          <div v-show="accountDelete" class="center-text half-top">
+
+            <!-- Active Account -->
+            <div class="settingRow full-top">
+              <div class="firstRow">
+                <h4>{{ssoLang[appLanguage].active_account }}</h4>
+
+                <div class="ios-switch" style="display: inline-block">
+                  <input
+                      type="checkbox"
+                      name="ios-switch"
+                      class="ios-switch-checkbox"
+                      :id="'active-open-switch'"
+                      v-model="account.is_active"
+                  />
+                  <label class="ios-switch-label" :for="'active-open-switch'"></label>
+                </div>
+              </div>
+            </div>
+            <p class="left-text small-top">{{ssoLang[appLanguage].active_account_p }}</p>
+
+            <!-- Delete Account -->
+            <form @submit.prevent="deleteAccountSubmit">
+              <button
+                  type="submit"
+                  class="button black-button button-full google-button bg-tapni-grey button-90 button-center uppercase bold full-top pointer"
+              >
+                <span v-if="!loading">{{ ssoLang[appLanguage].permanent_delete }}</span>
+                <span v-else class="button--loading button__loader"></span>
+              </button>
+              <p class="small-bottom red-text">{{ssoLang[appLanguage].permanent_delete_p}}</p>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+
+
+<script>
+import AuthMixin from "../mixins/auth.mixin";
+import AuthService from '../services/AuthService'
+import to from "await-to-js";
+import {EventBus} from "@/store/event-bus.js";
+import {authenticator} from "@otplib/preset-browser";
+import QRCodeStyling from "qr-code-styling";
+
+export default {
+  name: "AuthSecurity",
+  mixins: [AuthMixin],
+  props: {
+    payload: {
+      type: Object,
+      default: {}
+    },
+  },
+  data () {
+    return {
+      accountDelete: false,
+
+      changePassword: false,
+      password: '',
+      passwordRepeat: '',
+      currentPassword: '',
+
+      otpSecret: null,
+      mfaEnable: false,
+      qrCodeHash: null,
+      qrCodeRefreshInterval: null,
+      poolingInterval: null,
+      loading: false,
+    }
+  },
+  async mounted() {
+    if (!this.isLoggedIn) this.$router.push('/login');
+
+    if (this.renderView === 'AuthSecurity') {
+      await this.getAccountSettings();
+      this.generateOTPQrCode();
+    }
+  },
+  methods: {
+    close () {
+      EventBus.$emit('ssoEvent', {name: 'toggleAuthModal', data: true})
+    },
+    async deleteAccountSubmit() {
+      const result = await this.deleteAccount();
+      if (result === true) {
+        this.successSnack(this.ssoLang[this.appLanguage].profile_delete_account_success);
+        setTimeout(this.$store.dispatch("logout"), 1000);
+      }
+    },
+    generateOTPQrCode() {
+      console.log('Generating QR code');
+      const user = this.account.email;
+
+      if (this.account.mfaEnabled) {
+        this.mfaEnable = true;
+      } else {
+        const service = "Tapni";
+
+        const secret = authenticator.generateSecret();
+        this.otpSecret = secret;
+
+        const otpQR = authenticator.keyuri(user, service, secret);
+
+        const otpQrCode = new QRCodeStyling({
+          width: 200,
+          height: 200,
+          data: otpQR,
+        });
+        otpQrCode.append(document.getElementById("qrCodeContainer"));
+      }
+    },
+    async cancelMFA() {
+      if (import.meta.env.VITE_APP_MODE === 'npm') {
+        EventBus.$emit('ssoEvent', {name: 'mfaCancel', data: true})
+      } else {
+        this.$router.push('/account');
+      }
+    },
+    async validateMFA() {
+      if (!this.otp || this.otp.length !== 6) {
+        return this.errorSnack(this.ssoLang[this.appLanguage].invalid_code)
+      }
+
+      this.loading = true;
+
+      let data = {
+        otpToken: this.otp,
+        otpSecret: this.otpSecret,
+        enable: this.mfaEnable,
+      };
+
+      if (!this.mfaEnable) {
+        delete data.otpSecret;
+      }
+
+      const [err, response] = await to(AuthService.setMfa(data, this.$storex))
+      if (err) {
+        EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+        return this.errorHandler(err)
+      }
+      if (response.data.success) {
+        this.getAccountSettings();
+        this.successSnack(response.data.message);
+      }
+
+      this.loading = false;
+    },
+    async submitChangePassword () {
+      if (this.password.length < 8) return this.errorSnack(this.ssoLang[this.appLanguage].password_8_chars)
+      if (this.password !== this.passwordRepeat) return this.errorSnack(this.ssoLang[this.appLanguage].password_not_match)
+
+      const result = await this.newPassword({
+        currentPassword: this.currentPassword,
+        password: this.password,
+        passwordRepeat: this.passwordRepeat
+      })
+      if (result === true) {
+        this.successSnack(this.ssoLang[this.appLanguage].password_change_success)
+        this.changePassword = false;
+      }
+    },
+  }
+};
+</script>
+
+<style scoped>
+.firstRow img {
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate(-50%, -50%);
+}
+</style>

package/src/views/Welcome.vue

@@ -17,10 +17,16 @@
      Test
     </button>
     -->
-	<div class="page-login-links center-text">
-	  <router-link to="/login">{{ssoLang[this.appLanguage].already_registered}}? <b>{{ssoLang[this.appLanguage].sign_in}}</b></router-link>
-	  <div class="clear"></div>
-	</div>
+    <div class="page-login-links center-text">
+      <router-link to="/login">{{ssoLang[this.appLanguage].already_registered}}? <b>{{ssoLang[this.appLanguage].sign_in}}</b></router-link>
+      <div class="clear"></div>
+    </div>
+    <a v-if="display === 'redirect'"
+       @click="toggleSSOLanguageModal"
+       class="font-18 no-border pointer color-black"
+       style="position: absolute; right: 20px; top: -10px; z-index: 1;">
+      <span class="lang-icon">{{ appLanguage.toUpperCase() }}</span>
+    </a>
     <div v-if=(!this.isNative) style="display: flex; flex-direction: row; justify-content: space-around; width: 90%; margin: 0 auto; margin-top: 40px;" >
       <a href="https://play.google.com/store/apps/details?id=co.tapni.app" target="_blank"><img src="https://cdn.tapni.co/images/playstore.png" class="app-store-icon pointer" style="width:55px"/></a>
       <a href="https://apps.apple.com/ag/app/tapni/id1552930233" target="_blank"><img src="https://cdn.tapni.co/images/appstore.png" class="app-store-icon pointer" style="width:55px"/></a>

package/dist/Account-uZVmDKkt.js

@@ -1,113 +0,0 @@
-import { _ as l, A as d, E as r } from "./install-KFv1Z6O7.js";
-import { openBlock as g, createElementBlock as u, createElementVNode as t, toDisplayString as i, createCommentVNode as a, pushScopeId as p, popScopeId as _ } from "vue";
-var h = { VITE_APP_MODE: "npm", VITE_APP_APP_ROOT: "https://t.link", VITE_APP_API_ROOT: "https://api.tapni.co", VITE_APP_GOOGLE_RECAPTCHA_SITE_KEY: "6LenkC0mAAAAADWBxPOhpmwXCwzCJd7cilNgtOLk", VITE_APP_SSO_ID: "9cd47053-080a-4df8-8fd8-ca4389163fde", VITE_APP_POPUP_LOGIN_ALLOWED_ORIGIN: "https://auth.tapni.com", BASE_URL: "/", MODE: "production", DEV: !1, PROD: !0, SSR: !1 };
-const m = {
-  mixins: [d],
-  data() {
-    return {
-      expanded: !1,
-      addAccountReady: !1,
-      appVersion: h.APP_VERSION
-    };
-  },
-  async mounted() {
-    if (!this.isLoggedIn)
-      return this.$router.push("/");
-    this.getAccountSettings();
-  },
-  methods: {
-    continueTo(e) {
-      console.log("continue to " + e);
-    },
-    addAccount() {
-      this.$router.push("/login");
-    },
-    switchAccount(e) {
-      console.log("switch", e);
-    },
-    toggleAccountSettingsModal() {
-      this.$router.push("/mfa");
-    },
-    toggleLanguageModal() {
-      r.$emit("toggleSSOLanguageModal");
-    },
-    logoutAccount() {
-      this.logout({ refreshToken: this.refreshTokens[0], sendRequest: !0 });
-    }
-  }
-}, o = (e) => (p("data-v-992c1e64"), e = e(), _(), e), f = {
-  class: "page-login content-boxed content-boxed-padding center-text",
-  style: { "margin-top": "-1px", overflow: "hidden", border: "solid 0px #ffffff" }
-}, v = /* @__PURE__ */ o(() => /* @__PURE__ */ t("br", null, null, -1)), A = { class: "bold full-top no-bottom center-text" }, E = { class: "full-bottom half-top center-text color-black font-16" };
-const L = { class: "container" }, P = { class: "settingsCard pointer left-text" }, b = /* @__PURE__ */ o(() => /* @__PURE__ */ t("div", { class: "left" }, [
-  /* @__PURE__ */ t("img", {
-    src: "https://cdn.tapni.co/icons/newSettings.svg",
-    style: { width: "50px", "border-radius": "20px" }
-  })
-], -1)), S = { class: "middle" }, k = /* @__PURE__ */ o(() => /* @__PURE__ */ t("div", { class: "right" }, [
-  /* @__PURE__ */ t("img", { src: "https://cdn.tapni.co/icons/newArrowRight.svg" })
-], -1)), w = /* @__PURE__ */ o(() => /* @__PURE__ */ t("div", { class: "divider" }, null, -1)), x = /* @__PURE__ */ o(() => /* @__PURE__ */ t("div", { class: "left" }, [
-  /* @__PURE__ */ t("img", {
-    src: "https://cdn.tapni.co/icons/newPublicProfile.svg",
-    style: { width: "50px", "border-radius": "20px" }
-  })
-], -1)), I = { class: "middle" }, O = /* @__PURE__ */ o(() => /* @__PURE__ */ t("div", { class: "right" }, [
-  /* @__PURE__ */ t("img", { src: "https://cdn.tapni.co/icons/newArrowRight.svg" })
-], -1)), V = /* @__PURE__ */ o(() => /* @__PURE__ */ t("div", { class: "divider" }, null, -1)), T = /* @__PURE__ */ o(() => /* @__PURE__ */ t("div", { class: "left" }, [
-  /* @__PURE__ */ t("img", {
-    src: "https://cdn.tapni.co/icons/newLogout.svg",
-    style: { width: "50px", "border-radius": "20px" }
-  })
-], -1)), N = { class: "middle" }, R = /* @__PURE__ */ o(() => /* @__PURE__ */ t("div", { class: "right" }, [
-  /* @__PURE__ */ t("img", { src: "https://cdn.tapni.co/icons/newArrowRight.svg" })
-], -1));
-function y(e, n, C, D, M, c) {
-  return g(), u("div", f, [
-    v,
-    t("h1", A, i(e.ssoLang[e.appLanguage].welcome), 1),
-    t("p", E, i(e.account.email), 1),
-    (e.display, a("", !0)),
-    t("div", L, [
-      a("", !0),
-      t("div", P, [
-        t("div", {
-          class: "device",
-          onClick: n[4] || (n[4] = (...s) => c.toggleAccountSettingsModal && c.toggleAccountSettingsModal(...s))
-        }, [
-          b,
-          t("div", S, [
-            t("h4", null, i(e.ssoLang[e.appLanguage].mfa), 1)
-          ]),
-          k
-        ]),
-        w,
-        t("div", {
-          class: "device",
-          onClick: n[5] || (n[5] = (...s) => c.toggleLanguageModal && c.toggleLanguageModal(...s))
-        }, [
-          x,
-          t("div", I, [
-            t("h4", null, i(e.ssoLang[e.appLanguage].change_language), 1)
-          ]),
-          O
-        ]),
-        V,
-        t("div", {
-          class: "device",
-          onClick: n[6] || (n[6] = (...s) => c.logoutAccount && c.logoutAccount(...s))
-        }, [
-          T,
-          t("div", N, [
-            t("h4", null, i(e.ssoLang[e.appLanguage].logout), 1)
-          ]),
-          R
-        ]),
-        a("", !0)
-      ])
-    ])
-  ]);
-}
-const U = /* @__PURE__ */ l(m, [["render", y], ["__scopeId", "data-v-992c1e64"]]);
-export {
-  U as default
-};

package/src/mixins/mfa-auth.mixin.js

@@ -1,76 +0,0 @@
-import QRCodeStyling from "qr-code-styling";
-import { authenticator } from "@otplib/preset-browser";
-import {EventBus} from "@/store/event-bus.js";
-
-export default {
-  data () {
-    return {
-      otpToken: null,
-      otpSecret: null,
-      mfaEnable: false,
-      qrCodeHash: null,
-      qrCodeRefreshInterval: null,
-      poolingInterval: null,
-      loading: false,
-    }
-  },
-  props: {
-    isModal: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    promptMFA () {
-      return false;
-    }
-  },
-  async mounted () {
-    if (this.renderView === 'AuthMFA') {
-      await this.getAccountSettings();
-      this.generateOTPQrCode();
-    }
-
-    EventBus.$on('otpSubmitted', this.otpSubmitted)
-  },
-  methods: {
-    otpSubmitted(code) {
-      this.otpToken = code;
-
-      // Assuming that the parent component had a method called submit
-      this.submit();
-    },
-    generateOTPQrCode() {
-      const user = this.account.email;
-
-      if (this.account.mfaEnabled) {
-        this.mfaEnable = true;
-      } else {
-        const service = "Tapni";
-
-        const secret = authenticator.generateSecret();
-        this.otpSecret = secret;
-
-        const otpQR = authenticator.keyuri(user, service, secret);
-
-        const otpQrCode = new QRCodeStyling({
-          width: 200,
-          height: 200,
-          data: otpQR,
-        });
-        otpQrCode.append(document.getElementById("qrCodeContainer"));
-      }
-    },
-    async cancelMFA() {
-      if (import.meta.env.VITE_APP_MODE === 'npm') {
-        EventBus.$emit('ssoEvent', {name: 'mfaCancel', data: true})
-      } else {
-        this.$router.push('/account');
-      }
-    },
-    async validateMFA() {
-      EventBus.$emit('toggleOTPModal', true);
-    },
-  }
-}