@tapni/auth 0.0.108 → 0.0.118

package/src/views/Account.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="page-login content-boxed content-boxed-padding center-text" style="margin-top: -1px; overflow: hidden; border: solid 0px #ffffff;">
+    <br>
+    <h1 class="bold full-top no-bottom center-text">{{ssoLang[appLanguage].welcome}}, {{account.name}}</h1>
+    <p class="full-bottom half-top center-text color-black font-16">{{account.email}}</p>
+
+    <div v-if="display !== 'npm' && false" class="full-top full-bottom">
+      <a @click="continueTo('app')" class="button-center button button-90 google-button bg-tapni-grey pointer">
+        <span> {{ssoLang[appLanguage].continue}} </span>
+      </a>
+
+      <div class="page-login-links center-text">
+        <a @click="continueTo('admin')">Looking for Admin Dashboard? <b>{{ssoLang[appLanguage].click_here}}</b></a>
+        <div class="clear"></div>
+      </div>
+    </div>
+
+    <div class="container">
+      <div v-if="false" class="accountCard pointer" @click="expanded = !expanded">
+        <div class="activeAccount">
+          <div class="left" v-if="$storex.username">
+            <img
+                :src="loggedInAccounts[$storex.username]?.photo"
+                :alt="loggedInAccounts[$storex.username]?.name"
+                style="width: 50px; border-radius: 20px"
+            />
+          </div>
+          <div class="middle" v-if="$storex.username">
+            <h4>{{ loggedInAccounts[$storex.username]?.name }}</h4>
+            <div>@{{ $storex.username }}</div>
+          </div>
+          <div class="right" v-show="addAccountReady">
+            <img
+                src="https://cdn.tapni.co/icons/newArrowRight.svg"
+                alt="Right arrow"
+                :style="{ transform: expanded ? 'rotate(90deg)' : '' }"
+            />
+          </div>
+        </div>
+        <div class="otherAccounts" v-if="expanded && loggedInAccounts">
+          <template v-for="(username, index) in Object.keys(loggedInAccounts)">
+            <div
+                class="activeAccount"
+                :key="index"
+                v-if="username !== $storex.username"
+                @click="switchAccount(username)"
+            >
+              <div class="left">
+                <img
+                    :src="loggedInAccounts[username].photo"
+                    :alt="loggedInAccounts[username].name"
+                    style="width: 50px; border-radius: 20px"
+                />
+              </div>
+              <div class="middle">
+                <h4>{{ loggedInAccounts[username].name }}</h4>
+                <div>@ {{ username }}</div>
+              </div>
+            </div>
+          </template>
+          <div class="activeAccount newAccount" @click="addAccount">
+            <div class="left">
+              <img
+                  src="https://cdn.tapni.co/icons/Add.png"
+                  style="width: 50px; border-radius: 20px"
+              />
+            </div>
+            <div class="middle">
+              <h4>{{ssoLang[appLanguage].add_account }}</h4>
+            </div>
+            <div class="right">
+              <img
+                  src="https://cdn.tapni.co/icons/Plus.png"
+                  width="30px"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="settingsCard pointer left-text">
+        <div class="device" @click="toggleAccountSettingsModal">
+          <div class="left">
+            <img
+                src="https://cdn.tapni.co/icons/newSettings.svg"
+                style="width: 50px; border-radius: 20px"
+            />
+          </div>
+          <div class="middle">
+            <h4>{{ssoLang[appLanguage].mfa }}</h4>
+          </div>
+          <div class="right">
+            <img
+                src="https://cdn.tapni.co/icons/newArrowRight.svg"
+            />
+          </div>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="device" @click="toggleLanguageModal">
+          <div class="left">
+            <img
+                src="https://cdn.tapni.co/icons/newPublicProfile.svg"
+                style="width: 50px; border-radius: 20px"
+            />
+          </div>
+          <div class="middle">
+            <h4>{{ssoLang[appLanguage].change_language }}</h4>
+          </div>
+          <div class="right">
+            <img
+                src="https://cdn.tapni.co/icons/newArrowRight.svg"
+            />
+          </div>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="device" @click="logout">
+          <div class="left">
+            <img
+                src="https://cdn.tapni.co/icons/newLogout.svg"
+                style="width: 50px; border-radius: 20px"
+            />
+          </div>
+          <div class="middle">
+            <h4>{{ssoLang[appLanguage].logout }}</h4>
+          </div>
+          <div class="right">
+            <img
+                src="https://cdn.tapni.co/icons/newArrowRight.svg"
+            />
+          </div>
+        </div>
+
+        <!-- Additional items can be added here in the future -->
+        <div v-if="false" class="moreFooter">
+          <p class="app-version" style="margin-top: 10px">
+            {{ssoLang[appLanguage].version }}: {{ appVersion }}
+          </p>
+          <h4 v-if="false">{{ssoLang[appLanguage].terms_and_privacy }}</h4>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import AuthMixin from "../mixins/auth.mixin";
+import { EventBus } from "../store/event-bus.js";
+import AuthService from "../services/AuthService.js";
+export default {
+  mixins: [AuthMixin],
+  data () {
+    return {
+      expanded: false,
+      addAccountReady: false,
+      appVersion: import.meta.env.APP_VERSION,
+    }
+  },
+  async mounted () {
+    this.getAccountSettings();
+  },
+  methods: {
+    continueTo (realm) {
+      console.log('continue to ' + realm);
+    },
+    addAccount () {
+      this.$router.push('/login');
+    },
+    switchAccount (username) {
+      console.log('switch', username);
+    },
+    toggleAccountSettingsModal () {
+      this.$router.push('/mfa');
+      // EventBus.$emit('toggleAccountSettingsModal')
+    },
+    toggleLanguageModal () {
+      EventBus.$emit('toggleSSOLanguageModal')
+    },
+    logout () {
+      this.logout()
+    },
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  padding: 20px !important;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding-bottom: 100px !important;
+}
+.settingsCard {
+  background-color: white;
+  padding: 20px;
+  border-radius: 26px;
+  align-items: center;
+}
+
+.device {
+  display: flex;
+  align-items: center;
+}
+
+h4 {
+  margin-left: 20px;
+  font-weight: bold;
+}
+
+.middle {
+  flex: 1;
+}
+
+.left img {
+  background-color: #f7f8f9;
+  border-radius: 20px;
+  padding: 10px;
+}
+
+.divider {
+  height: 1px;
+  background-color: #f0f0f0;
+  margin: 20px 0;
+}
+
+.moreFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+</style>

package/src/views/Login.vue

@@ -226,15 +226,33 @@
       <span>{{ ssoLang[appLanguage].sign_in_with }} Email</span>
     </a>
 
+    <!-- Google Login Button -->
+    <a
+        @click="$router.push('/qr')"
+        v-if="displayQRLogin"
+        class="button-center button button-90 google-button pointer"
+    >
+      <img
+          src="https://cdn.tapni.co/icons/qr.png"
+          style="
+          position: absolute;
+          margin-left: -5px;
+          padding: 15px 0;
+          height: 100%;
+        "
+      />
+      <span>{{ ssoLang[appLanguage].sign_in_with }} QR</span>
+    </a>
+
     <div class="decoration decoration-lines-thin no-bottom"></div>
 
     <p class="close-text center-text half-top color-black">
       {{ ssoLang[appLanguage].terms_by_signing_in }} <br />
-      <a class="" href="https://tapni.co/policies/terms-of-service">{{
+      <a class="" href="https://tapni.com/policies/terms-of-service">{{
         ssoLang[this.appLanguage].terms_of_service
       }}</a>
       {{ ssoLang[appLanguage].and }}
-      <a href="https://tapni.co/policies/privacy-policy">{{
+      <a href="https://tapni.com/policies/privacy-policy">{{
         ssoLang[this.appLanguage].privacy_policy
       }}</a>
     </p>
@@ -272,13 +290,13 @@ 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";
-import AuthService from "@/services/AuthService";
 export default {
   name: "AuthLogin",
-  mixins: [GoogleMixin, FacebookMixin, AppleMixin, MicrosoftMixin, OktaMixin, SamlMixin, AuthMixin, QRAuthMixin],
+  mixins: [GoogleMixin, FacebookMixin, AppleMixin, MicrosoftMixin, OktaMixin, SamlMixin, AuthMixin, QRAuthMixin, MFAMixin],
   props: {
     isModal: {
       type: Boolean,
@@ -299,32 +317,30 @@ export default {
   },
   computed: {
     displayFormLogin() {
-      return (
-        (this.ssoCompany?.login?.form_login && !this.isModal) ?? this.emailLogin
-      );
+      return this.emailLogin;
     },
     displayResetPasswordLogin() {
-      return (this.ssoCompany?.login?.reset_password && !this.isModal) ?? true;
+      return true;
     },
     displayRegisterLogin() {
-      return (this.ssoCompany?.login?.create_account && !this.isModal) ?? true;
+      return true;
     },
   },
   async mounted() {
     if (!this.isModal) {
       if(this.$route.path === '/login/callback/okta') return await this.handleOktaRedirect();
       if(this.$route.path === '/login/callback/saml') return await this.handleSamlRedirect();
+      if (this.$route.query.qrLogin) this.changeLoginToQr();
 
-      if (this.isLoggedIn) {
-        if (import.meta.env.VITE_APP_MODE === 'npm') this.$router.push(this.home);
-        else if (import.meta.env.VITE_APP_MODE === 'redirect') location.href = this.home
-      } else if (
-        !this.$route.query.state &&
-        !this.$route.query.oauth &&
-        !this.$route.params.oauth
-      ) {
-        EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
-      }
+
+      setTimeout(() => {
+        if (this.$storex && this.$storex.token) {
+          if (import.meta.env.VITE_APP_MODE === 'npm') this.$router.push(this.home);
+          else if (import.meta.env.VITE_APP_MODE === 'redirect') location.href = this.home
+        } else {
+          EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+        }
+      }, 2500)
     }
   },
   methods: {
@@ -337,15 +353,12 @@ export default {
 
       let response_type = this.$route.query.response_type;
 
-      if (import.meta.env.VITE_APP_MODE === 'redirect') {
-        response_type = 'code'
-      }
-
       let loginData = {
         response_type: response_type || 'token',
         isModal: this.isModal,
         captcha: this.captcha,
         password: this.password,
+        otpToken: this.otpToken,
         // captchaToken: await this.getCaptchaToken('account_verify')
       };
       if (this.emailOrUsername.indexOf("@") !== -1) {
@@ -374,7 +387,7 @@ export default {
   watch: {
     emailOrUsername(nv) {
       if (nv.includes("@")) {
-        this.$storage.verifyEmail = nv;
+        this.$storex.verifyEmail = nv;
       }
     },
     '$route.path': async function(routePath) {

package/src/views/MFA.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="page-login content-boxed content-boxed-padding">
+        <h4 style="text-align: center; width: 80%; margin: 0 auto; margin-top: 50px;">
+          2-Step Verification
+        </h4>
+        <br>
+
+        <div class="qrCodeLoginContainer center-text">
+
+          <div>
+            Enable Multi-Factor Authentication
+            <div class="ios-switch" style="display: inline-block;float: right">
+              <input
+                  v-model="mfaEnable"
+                  type="checkbox"
+                  name="ios-switch"
+                  class="ios-switch-checkbox"
+                  :id="'mfa-open-switch'"
+              />
+              <label class="ios-switch-label" :for="'mfa-open-switch'"></label>
+            </div>
+          </div>
+          <br>
+          <div v-show="mfaEnable && !account.mfaEnabled" style="text-align: center;">
+            <div id="qrCodeContainer"
+                 class="qrCodeRounded"
+                 style="max-width: 100%;"/>
+            <br>
+            <p class="bold pointer font-16 underline" @click="copy(otpSecret)"> {{ otpSecret }}</p>
+            <br>
+            <br>
+            <div style="margin: 0 auto; width: 85%; text-align: center;">
+              <h5 class="">Scan the QR code above or enter the secret key into your authenticator app.</h5>
+              <br>
+            </div>
+          </div>
+          <form @submit.prevent="validateMFA" v-if="account.mfaEnabled !== mfaEnable">
+            <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>
+            <a href="javascript:;" @click="cancelMFA">Cancel</a>
+          </form>
+          <div v-else style="margin: 0 auto; width: 100%; text-align: center;">
+            <div>
+              <h5 v-if="mfaEnable" class="">
+                Your account is protected via <br> multi-factor authentication (MFA) ✅
+              </h5>
+              <h5 v-else class="">Protect your account from unauthorized access by enabling multi-factor authentication (MFA)</h5>
+
+              <a class="half-top" href="javascript:;" @click="cancelMFA">Go Back to Account Settings</a>
+            </div>
+          </div>
+        </div>
+    </div>
+</template>
+
+
+<script>
+import MFAAuthMixin from "../mixins/mfa-auth.mixin";
+import AuthMixin from "../mixins/auth.mixin";
+import AuthService from '../services/AuthService'
+import to from "await-to-js";
+import {EventBus} from "@/store/event-bus.js";
+
+export default {
+  name: "AuthMFA",
+  mixins: [AuthMixin, MFAAuthMixin],
+  props: {
+    payload: {
+      type: Object,
+      default: {}
+    },
+  },
+  mounted() {
+    if (!this.isLoggedIn) this.$router.push('/login');
+  },
+  methods: {
+    async submit() {
+      let data = {
+        otpToken: this.otpToken,
+        otpSecret: this.otpSecret,
+        enable: this.mfaEnable,
+      };
+
+      if (!this.mfaEnable) {
+        delete data.otpSecret;
+      }
+
+      this.loading = true;
+      const [err, response] = await to(AuthService.setMfa(data, this.$storex))
+      this.loading = false;
+      if (err) {
+        EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+        return this.errorHandler(err)
+      }
+      if (response.data.success) {
+        this.getAccountSettings();
+        this.successSnack(response.data.message);
+      }
+    },
+  }
+};
+</script>
+
+<style scoped></style>

package/src/views/Register.vue

@@ -114,7 +114,7 @@ export default {
   props: {
   	isModal: {
   	  type: Boolean,
-	  required: false,
+	    required: false,
   	  default: false
   	},
   },
@@ -128,7 +128,7 @@ export default {
       email: '',
       password: '',
       revealPassword: false,
-	  emailLogin: true,
+	    emailLogin: true,
       invitationCode: '',
       referral: ''
     }
@@ -146,15 +146,15 @@ export default {
 	  // Username Registration for Link-In-Bio
 	  if (this.$route.query.username) {
 	  	this.usernameRegister = true
-		this.emailLogin = true
+		  this.emailLogin = true
 	  	this.username = this.$route.query.username
 	  }
 
 	  // Track Referrals from Query or Local Storage
 	  if (this.$route.query.ref) {
-		this.referral = this.$route.query.ref
-	  } else if (this.$storage.referral) {
-	  	this.referral = this.$storage.referral
+		  this.referral = this.$route.query.ref
+	  } else if (this.$storex.referral) {
+	  	this.referral = this.$storex.referral
 	  }
 	}
   },
@@ -172,13 +172,13 @@ export default {
       this.username = this.username.trim()
 
       let data = {
-		response_type: this.response_type,
+		    response_type: this.response_type,
         email: this.email,
         username: this.username,
         password: this.password,
         ic: this.invitationCode,
         captchaToken: await this.getCaptchaToken('account_verify'),
-		ref: this.referral
+		    ref: this.referral
       };
 
       let response = await this.register(data);
@@ -207,8 +207,8 @@ export default {
 	}
   },
   watch: {
-    email(nv) { this.$storage.verifyEmail = nv },
-    referral(nv) { this.$storage.referral = nv }
+    email(nv) { this.$storex.verifyEmail = nv },
+    referral(nv) { this.$storex.referral = nv }
   }
 }
 </script>

package/src/views/Reset.vue

@@ -82,8 +82,8 @@ export default {
     }
   },
   mounted () {
-    if (this.$storage.verifyEmail) {
-      this.email = this.$storage.verifyEmail
+    if (this.$storex.verifyEmail) {
+      this.email = this.$storex.verifyEmail
     }
     if (this.$route.query.c) {
       this.code = this.$route.query.c;
@@ -141,7 +141,7 @@ export default {
     },
   },
   watch: {
-    email(nv) { this.$storage.verifyEmail = nv }
+    email(nv) { this.$storex.verifyEmail = nv }
   }
 }
 </script>

package/src/views/Verify.vue

@@ -69,7 +69,7 @@ export default {
     }
   },
   mounted () {
-	  if (this.$storage.verifyEmail) this.email = this.$storage.verifyEmail
+	  if (this.$storex.verifyEmail) this.email = this.$storex.verifyEmail
     if (this.$route) this.init()
   },
   methods: {
@@ -77,8 +77,8 @@ export default {
       if (this.isLoggedIn) {
         this.$router.push(this.home)
       } else {
-        if (this.$storage.verifyEmail) {
-          this.email = this.$storage.verifyEmail
+        if (this.$storex.verifyEmail) {
+          this.email = this.$storex.verifyEmail
         }
         if (this.$route.hash === '#reset') {
           this.action = 'reset'
@@ -125,7 +125,7 @@ export default {
           }
           await this.loginSetup(response)
           await this.getLoggedInAccounts()
-          this.$storage.verifyEmail = '';
+          this.$storex.verifyEmail = '';
           this.$router.push('/' + response.data.data.username + '#edit')
           this.successSnack(this.ssoLang[this.appLanguage].verify_account_success2)
         }

package/src/views/Welcome.vue

@@ -42,6 +42,7 @@ export default {
     }
   },
   async mounted () {
+    console.log('yoo');
     // Autoplay video - iOS 12 controls fix
     let videoElement = document.getElementById('tapniVideo');
     // Ensure the video is ready to play
@@ -57,12 +58,13 @@ export default {
     });
 
     setTimeout(() => {
-      if (this.$storage.token) {
-        this.$router.push(this.home)
+      if (this.$storex && this.$storex.token) {
+        if (import.meta.env.VITE_APP_MODE === 'npm') this.$router.push(this.home);
+        else if (import.meta.env.VITE_APP_MODE === 'redirect') location.href = this.home
       } else {
         EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
       }
-    }, 2500)
+    }, 500)
   },
   methods: {
   }