@tapni/auth 0.0.109 → 0.0.119

package/dist/style.css

@@ -1 +1 @@
-.app-store-icon[data-v-9c201b2d]{box-shadow:0 4px 10px #00000017;border-radius:12px}#codeInput[data-v-75db7f02],#emailInput[data-v-75db7f02],#emailInput[data-v-61e353a6]{text-align:center;padding-right:15%;font-size:17px}.fade-enter-to[data-v-6fff03da]{opacity:1}.sso-img[data-v-11f19a09]{margin:2px auto 0;width:35px}input[data-v-11f19a09]{margin:0 auto;height:25px}.sso-img[data-v-4f821f65]{margin:2px auto 0;width:35px}input[data-v-4f821f65]{margin:0 auto;height:25px}.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{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{width:93%;max-height:67px!important;margin:0 auto;display:flex;border-radius:15px!important;background-color:#fff;border:solid 1px #e8e8e8;position:relative;align-items:center}.link-list .user-link-img{display:inline-block;width:65px;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:0!important;font-size:13px}.linkExternal{margin-right:20px;width:20px;display:inline-block!important;height:20px;background:#000;-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)}.user-img[data-v-29699ad7]{margin:2px auto 0;width:65px}input[data-v-29699ad7]{margin:0 auto;height:25px}html *{font-family:Inter,sans-serif}#bodyId{padding-top:3%;max-width:550px!important;margin:1.5% auto auto;height:95%!important;border-radius:20px}.action-block-top .default-text,.action-block-top .default-text:after{border-radius:50%;width:10em!important;height:10em!important}.action-block-top .default-text{margin:10px auto;font-size:3px;position:relative;text-indent:-9999em;border-left:.5em solid #000000;border-top:.5em solid rgba(0,0,0,.2);border-right:.5em solid rgba(0,0,0,.2);border-bottom:.5em solid rgba(0,0,0,.2);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.smartbanner-ios{background:linear-gradient(to bottom,#f4f4f4,#f4f4f4);box-shadow:0 0 #fff;border-bottom:1px solid #dddddd}.smartbanner-icon{border-radius:16px}.smartbanner-ios .smartbanner-button{font-size:13px;padding:9px 0;height:40px;border-radius:13px;background:#f4f4f4;color:#0a99d2;border:none;box-shadow:none;text-transform:uppercase}.snack-body{display:none;border-radius:40px;font-size:15px!important}#errorSnack{background-color:#fee3e3!important;border:2px solid #edd9d9!important;color:#000}#successSnack{background-color:#eff5eb!important;border:2px solid #e3ecd7!important;color:#000}.grecaptcha-badge{visibility:hidden}.header-logo{position:absolute;left:50%;transform:translate(-50%,-50%);margin-top:0;z-index:2}.header-logo-img{height:40px;margin-top:10px}
+.app-store-icon[data-v-3d89d57a]{box-shadow:0 4px 10px #00000017;border-radius:12px}#codeInput[data-v-89d98ef3],#emailInput[data-v-89d98ef3],#emailInput[data-v-69a9cfa3]{text-align:center;padding-right:15%;font-size:17px}.fade-enter-to[data-v-17c95816]{opacity:1}.sso-img[data-v-11f19a09]{margin:2px auto 0;width:35px}input[data-v-11f19a09]{margin:0 auto;height:25px}.sso-img[data-v-2b6d6269]{margin:2px auto 0;width:35px}input[data-v-2b6d6269]{margin:0 auto;height:25px}.padlock-img[data-v-2b6d6269]{margin:2px auto 15px;width:40px}.sso-img[data-v-4f821f65]{margin:2px auto 0;width:35px}input[data-v-4f821f65]{margin:0 auto;height:25px}.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{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{width:93%;max-height:67px!important;margin:0 auto;display:flex;border-radius:15px!important;background-color:#fff;border:solid 1px #e8e8e8;position:relative;align-items:center}.link-list .user-link-img{display:inline-block;width:65px;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:0!important;font-size:13px}.linkExternal{margin-right:20px;width:20px;display:inline-block!important;height:20px;background:#000;-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)}.user-img[data-v-a49a90e5]{margin:2px auto 0;width:65px}input[data-v-a49a90e5]{margin:0 auto;height:25px}html *{font-family:Inter,sans-serif}#bodyId{padding-top:3%;max-width:667px!important;margin:1.5% auto auto;height:95%!important;border-radius:20px}.action-block-top .default-text,.action-block-top .default-text:after{border-radius:50%;width:10em!important;height:10em!important}.action-block-top .default-text{margin:10px auto;font-size:3px;position:relative;text-indent:-9999em;border-left:.5em solid #000000;border-top:.5em solid rgba(0,0,0,.2);border-right:.5em solid rgba(0,0,0,.2);border-bottom:.5em solid rgba(0,0,0,.2);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.smartbanner-ios{background:linear-gradient(to bottom,#f4f4f4,#f4f4f4);box-shadow:0 0 #fff;border-bottom:1px solid #dddddd}.smartbanner-icon{border-radius:16px}.smartbanner-ios .smartbanner-button{font-size:13px;padding:9px 0;height:40px;border-radius:13px;background:#f4f4f4;color:#0a99d2;border:none;box-shadow:none;text-transform:uppercase}.snack-body{display:none;border-radius:40px;font-size:15px!important}#errorSnack{background-color:#fee3e3!important;border:2px solid #edd9d9!important;color:#000}#successSnack{background-color:#eff5eb!important;border:2px solid #e3ecd7!important;color:#000}.grecaptcha-badge{visibility:hidden}.header-logo{position:absolute;left:50%;transform:translate(-50%,-50%);margin-top:0;z-index:2}.header-logo-img{height:40px;margin-top:10px}.container[data-v-99676a71]{padding:20px 20px 100px!important;display:flex;flex-direction:column;gap:20px}.settingsCard[data-v-99676a71]{background-color:#fff;padding:20px;border-radius:26px;align-items:center}.device[data-v-99676a71]{display:flex;align-items:center}h4[data-v-99676a71]{margin-left:20px;font-weight:700}.middle[data-v-99676a71]{flex:1}.left img[data-v-99676a71]{background-color:#f7f8f9;border-radius:20px;padding:10px}.divider[data-v-99676a71]{height:1px;background-color:#f0f0f0;margin:20px 0}.moreFooter[data-v-99676a71]{display:flex;align-items:center;justify-content:space-between;padding:0 10px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapni/auth",
-  "version": "0.0.109",
+  "version": "0.0.119",
   "type": "module",
   "main": "./dist/TapniAuth.umd.js",
   "module": "./dist/TapniAuth.es.js",
@@ -32,16 +32,19 @@
     "@capacitor/device": "^5.0.6",
     "@capacitor/preferences": "^5.0.6",
     "@codetrix-studio/capacitor-google-auth": "^3.3.6",
+    "@otplib/preset-browser": "^12.0.1",
     "@recognizebv/capacitor-plugin-msauth": "^3.5.1",
-    "@tapni/capacitor-reactive-localstorage-vue3": "^0.0.14",
+    "@tapni/capacitor-reactive-localstorage-vue3": "^0.0.15",
     "@tapni/styles": "^0.0.3",
     "await-to-js": "^3.0.0",
     "axios": "^1.6.5",
+    "buffer": "^6.0.3",
     "jwt-decode": "^4.0.0",
     "qr-code-styling": "^1.6.0-rc.1",
     "vue": "^3.3.11",
     "vue-cookies": "^1.8.3",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",

package/src/App.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { RouterView } from 'vue-router'
-
+// add Buffer globally
+import { Buffer } from 'buffer';
+import OTP from "@/components/OTP.vue";
+window.Buffer = Buffer;
 document.addEventListener('DOMContentLoaded', function() {
   const recaptchaScript = document.createElement('script');
   recaptchaScript.src = `https://www.google.com/recaptcha/api.js?render=${import.meta.env.VITE_GOOGLE_RECAPTCHA_SITE_KEY}`;
@@ -25,11 +28,13 @@ document.addEventListener('DOMContentLoaded', function() {
     <Language v-if="!isModal" />
     <SSO v-if="!isModal" />
     <SSOPick v-if="!isModal" />
+    <OTP />
 
     <AuthWelcome v-if="initialized && renderView === 'AuthWelcome'" />
     <AuthLogin v-else-if="initialized && renderView === 'AuthLogin'" :isModal="isModal" />
     <AuthRegister v-else-if="initialized && renderView === 'AuthRegister'" :isModal="isModal" />
     <AuthVerify v-else-if="initialized && renderView === 'AuthVerify'" :isModal="isModal" />
+    <AuthMFA v-else-if="initialized && renderView === 'AuthMFA'" :isModal="isModal" :payload="payload" />
     <AuthReset v-else-if="initialized && renderView === 'AuthReset'" />
     <AuthCallback v-else-if="initialized && renderView === 'AuthCallback'" />
     <RouterView v-else-if="display !== 'npm'" />
@@ -80,32 +85,37 @@ import AuthWelcome from "@/views/Welcome.vue";
 import AuthLogin from "@/views/Login.vue";
 import AuthRegister from "@/views/Register.vue";
 import AuthVerify from "@/views/Verify.vue";
+import AuthMFA from "@/views/MFA.vue";
 import AuthReset from "@/views/Reset.vue";
 import AuthCallback from "@/views/Callback.vue";
 import ModalOverlay from "@/components/ModalOverlay.vue";
 import SSO from "@/components/SSO.vue";
+import OTP from "@/components/OTP.vue";
 import SSOPick from "@/components/SSOPick.vue";
 import {EventBus} from "./store/event-bus.js";
 import AuthMixin from "@/mixins/auth.mixin.js";
 import Language from "@/components/Language.vue";
+import ReactiveStorage from '@tapni/capacitor-reactive-localstorage-vue3'
 
 export default {
   name: 'TapniAuth',
-  mixins: [AuthMixin],
+  mixins: [ReactiveStorage, AuthMixin],
   data () {
     return {
+      storeInterval: null,
       isSetup: false
     }
   },
   components: {
     Language,
+    OTP,
     SSOPick,
-    SSO, ModalOverlay, AuthCallback, AuthReset, AuthVerify, AuthRegister, AuthLogin, AuthWelcome
+    SSO, ModalOverlay, AuthCallback, AuthReset, AuthVerify, AuthMFA, AuthRegister, AuthLogin, AuthWelcome
   },
   props: {
-    view: {
+    viewProp: {
       type: String,
-      default: ''
+      default: 'AuthWelcome'
     },
     isModal: {
       type: Boolean,
@@ -114,6 +124,22 @@ export default {
     appLang: {
       type: String,
       default: 'en'
+    },
+    payload: {
+      type: Object,
+      default: {}
+    },
+    options: {
+      type: Object,
+      default: {
+        'token': '',
+        'refreshTokens': '',
+        'username': '',
+        'UserId': '',
+        'verifyEmail': '',
+        'subdomain': '',
+        'localUser': ''
+      }
     }
   },
   computed: {
@@ -122,28 +148,35 @@ export default {
     }
   },
   async mounted() {
+    console.log('eey');
     this.applyBgStyle()
+    this.$store.commit('setView', this.viewProp);
 
     EventBus.$on('ssoEvent', this.ssoOutgoingEvent)
     EventBus.$on('ssoLogout',(data) => this.logout(data.refreshToken))
     EventBus.$on('getLoggedInAccounts',(data) => this.getLoggedInAccounts(data))
-    EventBus.$on('refreshTokenAction',(data) => this.refreshTokenAction({...data, storage: this.$storage}))
+    EventBus.$on('refreshTokenAction',(data) => this.refreshTokenAction({...data, storage: this.$storex}))
     EventBus.$on('switchAccount',(data) => this.switchAccount(data))
     EventBus.$on('setToken',(data) => this.setToken(data))
   },
   methods: {
     async init () {
+      console.log('initt');
+
+      // Set $storage into vuex $storex
+      this.$store.commit('setStorage', this.storage);
+
       // Make sure the function is called just once
       if (this.isSetup) return;
       this.isSetup = true;
 
-      this.setToken(this.$storage.token);
+      this.setToken(this.$storex.token);
       const refreshTokens = this.getRefreshTokens();
       this.setRefreshToken(refreshTokens[0]);
       await this.getLoggedInAccounts(refreshTokens);
 
       // Let App know that the auth is ready
-      this.$emit('ssoLibraryReady', this.$storage);
+      this.$emit('ssoLibraryReady', this.$storex);
     },
     ssoOutgoingEvent (data) {
         this.$emit('ssoEvent', data)
@@ -166,13 +199,24 @@ export default {
     display () {
       this.applyBgStyle()
     },
-    '$storageReady.value' (nv) {
-      if (nv && this.display === 'npm') {
+    'storageReady.value' (nv) {
+      if (nv) {
         // Initialize Library after all event listeners & storage are set
         this.$nextTick(() => {
           this.init()
         })
       }
+    },
+    '$storex': {
+      handler(nv) {
+        clearInterval(this.storeInterval);
+        this.storeInterval = setTimeout(() => {
+          Object.keys(nv).forEach(key => {
+            this.storage[key] = nv[key];
+          });
+        }, 250)
+      },
+      deep: true
     }
   }
 }
@@ -185,7 +229,7 @@ html * {
 
 #bodyId {
   padding-top: 3%;
-  max-width: 550px !important;
+  max-width: 667px !important;
   margin: auto;
   height: 95%!important;
   margin-top: 1.5%;

package/src/components/Language.vue

@@ -135,7 +135,7 @@ export default {
       this.forceClose();
     },
     async updateLanguage(lang) {
-        EventBus.$emit("updateLang", lang);
+      this.updateLang(lang);
       EventBus.$emit("closeModal");
     },
     toggleModal() {

package/src/components/ModalOverlay.vue

@@ -36,6 +36,7 @@ export default {
     // EventBus.$on('toggleAddAccountModal', this.toggleModal)
     // EventBus.$on("toggleAccountSettingsModal", this.toggleModal);
     EventBus.$on("toggleSSOLanguageModal", this.toggleModal);
+    EventBus.$on("toggleOTPModal", this.toggleModal);
     EventBus.$on("toggleSSOModal", this.toggleModal);
     EventBus.$on("toggleSSOPickModal", this.toggleModal);
   },

package/src/components/OTP.vue

@@ -0,0 +1,120 @@
+<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>
+    <img
+        :src="'https://cdn.tapni.co/icons/padlock.png'"
+        class="padlock-img small-bottom"
+    />
+    <h3 class="bold center-text color-black half-top half-bottom">
+      {{ ssoLang[appLanguage].otp_title }}
+    </h3>
+    <p class="half-top full-bottom padding-left padding-right" v-html="ssoLang[appLanguage].otp_subtitle"></p>
+    <div>
+      <input
+        type="text"
+        v-model="otp"
+        :placeholder="ssoLang[appLanguage].otp_code"
+        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[appLanguage].continue }} </span>
+      <span v-else class="button--loading button__loader"></span>
+    </button>
+
+    <p class="close-text center-text half-top color-black">
+      <span v-html="ssoLang[this.appLanguage].otp_p1"></span>
+      <a href="mailto:support@tapni.com?subject=MFA Authentication Problem"> support@tapni.com</a>
+    </p>
+
+  </form>
+</template>
+
+<script>
+import { EventBus } from "../store/event-bus.js";
+import AuthMixin from "@/mixins/auth.mixin.js";
+export default {
+  name: "OTP",
+  mixins: [AuthMixin],
+  data() {
+    return {
+      toggle: false,
+      otp: "",
+      loading: false,
+    };
+  },
+  mounted() {
+    EventBus.$on("toggleOTPModal", this.toggleModal);
+    EventBus.$on("closeModal", () => {
+      this.toggle = false;
+    });
+  },
+  beforeDestroy() {
+    EventBus["_events"]["toggleOTPModal"].pop();
+  },
+  methods: {
+    forceClose() {
+      EventBus.$emit("closeModal");
+    },
+    close() {
+      this.toggleModal();
+    },
+    async submit() {
+      if (!this.otp || this.otp.length !== 6) {
+        return this.errorSnack(this.ssoLang[this.appLanguage].invalid_code)
+      }
+
+      this.loading = true;
+      EventBus.$emit('otpSubmitted', this.otp);
+      EventBus.$emit("toggleOTPModal")
+      this.loading = false;
+    },
+    toggleModal() {
+      this.toggle = !this.toggle;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.sso-img {
+  margin: 0 auto;
+  margin-top: 2px;
+  width: 35px;
+}
+input {
+  margin: 0 auto;
+  height: 25px;
+}
+.padlock-img {
+  margin: 0 auto;
+  margin-top: 2px;
+  margin-bottom: 15px;
+  width: 40px;
+}
+</style>

package/src/install.js

@@ -1,14 +1,11 @@
 import App from "./App.vue";
-import Api from './services/Api'
 import AuthMixin from './mixins/auth.mixin.js'
 
-
 // Export the component by default
 export default {
     TapniAuth: App,
     AuthMixin: AuthMixin,
     install: (app, options) => {
-        if (options && options.API_ROOT) Api.setApiRootFromOptions(options.API_ROOT);
         app.component('TapniAuth', App);
     }
 };

package/src/main.js

@@ -3,29 +3,21 @@ import { createApp } from 'vue'
 import RootApp from './App.vue'
 import router from './router'
 import VueCookies from 'vue-cookies'
-import ReactiveStorage from '@tapni/capacitor-reactive-localstorage-vue3'
 import { App } from '@capacitor/app';
 import { Browser } from '@capacitor/browser';
+import store from './store/store.js';
 
 const app = createApp(RootApp)
 
 app.config.productionTip = false
 
-app.use(ReactiveStorage, {
-    'token': '',
-    'refreshTokens': '',
-    'username': '',
-    'UserId': '',
-    'verifyEmail': '',
-    'subdomain': '',
-    'localUser': ''
-});
-
 // Cookies
 app.use(VueCookies)
 
 app.use(router)
 
+app.use(store)
+
 app.mount('#app')
 
 

package/src/mixins/apple.mixin.js

@@ -12,7 +12,7 @@ export default {
   },
   computed: {
     displayAppleLogin () {
-      return (this.ssoCompany?.login?.apple_login && !this.isModal) ?? ((Capacitor.isNativePlatform() && Capacitor.getPlatform() === 'ios') || (!Capacitor.isNativePlatform() && this.isiOS));
+      return ((Capacitor.isNativePlatform() && Capacitor.getPlatform() === 'ios') || (!Capacitor.isNativePlatform() && this.isiOS));
     }
   },
   methods: {
@@ -33,7 +33,7 @@ export default {
         // Code Login
         if (this.display === 'popup') user.response_type = 'code';
 
-        const [err, response] = await to(AuthService.appleSDK(user.response, this.$storage))
+        const [err, response] = await to(AuthService.appleSDK(user.response, this.$storex))
         if (err) {
           this.appleLoad = false
           EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})