@tapni/auth 0.0.169 → 0.0.171

package/src/views/Login.vue

@@ -1,400 +1,228 @@
 <template>
-  <form
-    class="page-login content-boxed content-boxed-padding"
-    @submit.prevent="submit"
-    autocomplete="on"
-    :style="isModal ? 'max-width: 500px;' : ''"
-  >
-    <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>
-    <h1 class="bold no-bottom center-text" style="margin-top: 63px;">
-      {{ this.ssoLang[this.appLanguage].login }}
-    </h1>
-    <p class="half-bottom small-top center-text color-black"></p>
-
-    <span v-if="displayFormLogin">
-      <div class="page-login-field half-top">
-        <i style="padding-top: 15px">
-          <img
-            src="https://cdn.tapni.co/icons/user.png"
-            class="responsive-image"
-            style="width: 50%"
-          />
-        </i>
-        <input
-          v-model="emailOrUsername"
-          @keydown.space.prevent
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-          type="text"
-          name="email"
-          :placeholder="ssoLang[this.appLanguage].email_username"
-          required
-        />
-        <em></em>
-      </div>
-      <div 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="password"
-          :type="revealPassword ? 'text' : 'password'"
-          :placeholder="ssoLang[this.appLanguage].password"
-          name="password"
-          required
-          minlength="8"
-        />
-        <em @click="revealPassword = !revealPassword" class="pointer">
-          <img
-            v-show="!revealPassword"
-            src="https://cdn.tapni.co/icons/reveal-password.png"
-            class="responsive-image password-reveal-icon"
-          />
-          <img
-            v-show="revealPassword"
-            src="https://cdn.tapni.co/icons/hide-password.png"
-            class="responsive-image password-reveal-icon"
-          />
-        </em>
-      </div>
-      <button
-        type="submit"
-        class="button black-button google-button bg-tapni-grey button-90 button-center uppercase bold full-top"
-      >
-        <span v-if="!submitted">{{ ssoLang[appLanguage].login }}</span>
-        <span v-else class="button--loading button__loader"></span>
-      </button>
-    </span>
-    <div class="decoration decoration-lines-thin half-top half-bottom"></div>
-    <!-- Apple Login Button -->
-    <a
-      @click="appleLogin"
-      v-if="displayAppleLogin"
-      class="button-center button button-90 google-button pointer"
-    >
-      <img
-        src="https://cdn.tapni.co/icons/apple-logo.png"
-        style="
-          position: absolute;
-          margin-left: -11px;
-          padding: 8px 0;
-          height: 100%;
-        "
-      />
-      <span v-if="!appleLoad">{{ ssoLang[appLanguage].sign_in_with }} Apple</span>
-      <span v-else class="button--loading-black button__loader"></span>
-    </a>
-
-    <!-- Google Login Button -->
-    <a
-      @click="googleLogin"
-      v-if="displayGoogleLogin"
-      class="button-center button button-90 google-button pointer"
-    >
-      <img
-        src="https://cdn.tapni.co/icons/g-logo.png"
-        style="
-          position: absolute;
-          margin-left: -10px;
-          padding: 8px 0;
-          height: 100%;
-        "
-      />
-      <span v-if="!googleLoad"
-        >{{ ssoLang[appLanguage].sign_in_with }} Google</span
-      >
-      <span v-else class="button--loading-black button__loader"></span>
-    </a>
-
-    <!-- Facebook Login Button -->
-    <a
-      @click="facebookLogin"
-      v-if="displayFacebookLogin"
-      class="button-center button button-90 google-button pointer"
-    >
-      <img
-        src="https://cdn.tapni.co/icons/facebook-blue.png"
-        style="
-          position: absolute;
-          margin-left: -9px;
-          padding: 10px 0;
-          height: 100%;
-        "
-      />
-      <span v-if="!facebookLoad"
-        >{{ ssoLang[appLanguage].sign_in_with }} Facebook</span
-      >
-      <span v-else class="button--loading-black button__loader"></span>
-    </a>
-
-    <!-- Microsoft Login Button -->
-    <a
-      @click="microsoftLogin"
-      v-if="!displayMicrosoftSSOLogin"
-      class="button-center button button-90 google-button pointer"
-    >
-      <img
-        src="https://cdn.tapni.co/icons/outlook.png"
-        style="
-          position: absolute;
-          margin-left: -8px;
-          padding: 10px 0;
-          height: 100%;
-        "
-      />
-      <span v-if="!microsoftLoad"
-        >{{ ssoLang[appLanguage].sign_in_with }} Outlook</span
-      >
-      <span v-else class="button--loading-black button__loader"></span>
-    </a>
-
-    <!-- Microsoft SSO Button -->
-    <a
-      @click="ssoLogin"
-      v-if="!displayMicrosoftSSOLogin"
-      class="button-center button button-90 google-button pointer"
-    >
-      <img
-        src="https://cdn.tapni.co/icons/sso-key.png"
-        style="
-          position: absolute;
-          margin-left: -8px;
-          padding: 10px 0;
-          height: 100%;
-        "
-      />
-      <span v-if="!microsoftSSOLoad">{{ ssoLang[appLanguage].sign_in_with }} SSO</span>
-      <span v-else class="button--loading-black button__loader"></span>
-    </a>
-    <!-- Microsoft SSO Button -->
-    <a
-      @click="microsoftLogin('sso')"
-      v-if="displayMicrosoftSSOLogin"
-      class="button-center button button-90 google-button pointer"
-    >
-      <img
-        src="https://cdn.tapni.co/icons/sso-key.png"
-        style="
-          position: absolute;
-          margin-left: -8px;
-          padding: 10px 0;
-          height: 100%;
-        "
-      />
-      <span v-if="microsoftSSOLoad">{{ ssoLang[appLanguage].sign_in_with }} SSO</span>
-      <span v-else class="button--loading-black button__loader"></span>
-    </a>
-
-    <!-- Email Login Button -->
-    <a
-      @click="emailLogin = true"
-      v-if="!displayFormLogin"
-      class="button-center button button-90 google-button pointer"
-    >
-      <img
-        src="https://cdn.tapni.co/icons/mail.png"
-        style="
-          position: absolute;
-          margin-left: -8px;
-          padding: 12px 0;
-          height: 100%;
-        "
-      />
-      <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.com/policies/terms-of-service">{{
-        ssoLang[this.appLanguage].terms_of_service
-      }}</a>
-      {{ ssoLang[appLanguage].and }}
-      <a href="https://tapni.com/policies/privacy-policy">{{
-        ssoLang[this.appLanguage].privacy_policy
-      }}</a>
-    </p>
-    <div class="decoration decoration-lines-thin no-bottom"></div>
-    <div v-if="!isModal" class="page-login-links">
-      <router-link
-        v-if="displayRegisterLogin"
-        class="forgot float-right"
-        to="/register"
-        >{{ ssoLang[appLanguage].create_account }}</router-link
-      >
-      <router-link
-        v-if="displayResetPasswordLogin"
-        class="create float-left"
-        to="/reset"
-        >{{ ssoLang[appLanguage].reset_password }}</router-link
-      >
-      <div class="clear"></div>
-    </div>
-    <div v-else class="page-login-links" @click="createAccountModal">
-      <a class="forgot center-text pointer small-top"
-        >{{ ssoLang[appLanguage].or }} <br />
-        {{ ssoLang[appLanguage].create_new_account }}</a
-      >
-      <div class="clear"></div>
-    </div>
-  </form>
+	<form class="page-login content-boxed content-boxed-padding" @submit.prevent="submit" autocomplete="on" :style="isModal ? 'max-width: 500px;' : ''">
+		<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>
+		<h1 class="bold no-bottom center-text" style="margin-top: 63px">
+			{{ this.ssoLang[this.appLanguage].login }}
+		</h1>
+		<p class="half-bottom small-top center-text color-black"></p>
+
+		<span v-if="displayFormLogin">
+			<div class="page-login-field half-top">
+				<i style="padding-top: 15px">
+					<img src="https://cdn.tapni.co/icons/user.png" class="responsive-image" style="width: 50%" />
+				</i>
+				<input v-model="emailOrUsername" @keydown.space.prevent autocorrect="off" autocapitalize="off" spellcheck="false" type="text" name="email" :placeholder="ssoLang[this.appLanguage].email_username" required />
+				<em></em>
+			</div>
+			<div 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="password" :type="revealPassword ? 'text' : 'password'" :placeholder="ssoLang[this.appLanguage].password" name="password" required minlength="8" />
+				<em @click="revealPassword = !revealPassword" class="pointer">
+					<img v-show="!revealPassword" src="https://cdn.tapni.co/icons/reveal-password.png" class="responsive-image password-reveal-icon" />
+					<img v-show="revealPassword" src="https://cdn.tapni.co/icons/hide-password.png" class="responsive-image password-reveal-icon" />
+				</em>
+			</div>
+			<button type="submit" class="button black-button google-button bg-tapni-grey button-90 button-center uppercase bold full-top">
+				<span v-if="!submitted">{{ ssoLang[appLanguage].login }}</span>
+				<span v-else class="button--loading button__loader"></span>
+			</button>
+		</span>
+		<div class="decoration decoration-lines-thin half-top half-bottom"></div>
+		<!-- Apple Login Button -->
+		<a @click="appleLogin" v-if="displayAppleLogin" class="button-center button button-90 google-button pointer">
+			<img src="https://cdn.tapni.co/icons/apple-logo.png" style="position: absolute; margin-left: -11px; padding: 8px 0; height: 100%" />
+			<span v-if="!appleLoad">{{ ssoLang[appLanguage].sign_in_with }} Apple</span>
+			<span v-else class="button--loading-black button__loader"></span>
+		</a>
+
+		<!-- Google Login Button -->
+		<a @click="googleLogin" v-if="displayGoogleLogin" class="button-center button button-90 google-button pointer">
+			<img src="https://cdn.tapni.co/icons/g-logo.png" style="position: absolute; margin-left: -10px; padding: 8px 0; height: 100%" />
+			<span v-if="!googleLoad">{{ ssoLang[appLanguage].sign_in_with }} Google</span>
+			<span v-else class="button--loading-black button__loader"></span>
+		</a>
+
+		<!-- Facebook Login Button -->
+		<a @click="facebookLogin" v-if="displayFacebookLogin" class="button-center button button-90 google-button pointer">
+			<img src="https://cdn.tapni.co/icons/facebook-blue.png" style="position: absolute; margin-left: -9px; padding: 10px 0; height: 100%" />
+			<span v-if="!facebookLoad">{{ ssoLang[appLanguage].sign_in_with }} Facebook</span>
+			<span v-else class="button--loading-black button__loader"></span>
+		</a>
+
+		<!-- Microsoft Login Button -->
+		<a @click="microsoftLogin" v-if="!displayMicrosoftSSOLogin" class="button-center button button-90 google-button pointer">
+			<img src="https://cdn.tapni.co/icons/outlook.png" style="position: absolute; margin-left: -8px; padding: 10px 0; height: 100%" />
+			<span v-if="!microsoftLoad">{{ ssoLang[appLanguage].sign_in_with }} Outlook</span>
+			<span v-else class="button--loading-black button__loader"></span>
+		</a>
+
+		<!-- Microsoft SSO Button -->
+		<a @click="ssoLogin" v-if="!displayMicrosoftSSOLogin" class="button-center button button-90 google-button pointer">
+			<img src="https://cdn.tapni.co/icons/sso-key.png" style="position: absolute; margin-left: -8px; padding: 10px 0; height: 100%" />
+			<span v-if="!microsoftSSOLoad">{{ ssoLang[appLanguage].sign_in_with }} SSO</span>
+			<span v-else class="button--loading-black button__loader"></span>
+		</a>
+		<!-- Microsoft SSO Button -->
+		<a @click="microsoftLogin('sso')" v-if="displayMicrosoftSSOLogin" class="button-center button button-90 google-button pointer">
+			<img src="https://cdn.tapni.co/icons/sso-key.png" style="position: absolute; margin-left: -8px; padding: 10px 0; height: 100%" />
+			<span v-if="microsoftSSOLoad">{{ ssoLang[appLanguage].sign_in_with }} SSO</span>
+			<span v-else class="button--loading-black button__loader"></span>
+		</a>
+
+		<!-- Email Login Button -->
+		<a @click="emailLogin = true" v-if="!displayFormLogin" class="button-center button button-90 google-button pointer">
+			<img src="https://cdn.tapni.co/icons/mail.png" style="position: absolute; margin-left: -8px; padding: 12px 0; height: 100%" />
+			<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.com/policies/terms-of-service">{{ ssoLang[this.appLanguage].terms_of_service }}</a>
+			{{ ssoLang[appLanguage].and }}
+			<a href="https://tapni.com/policies/privacy-policy">{{ ssoLang[this.appLanguage].privacy_policy }}</a>
+		</p>
+		<div class="decoration decoration-lines-thin no-bottom"></div>
+		<div v-if="!isModal" class="page-login-links">
+			<router-link v-if="displayRegisterLogin" class="forgot float-right" to="/register">{{ ssoLang[appLanguage].create_account }}</router-link>
+			<router-link v-if="displayResetPasswordLogin" class="create float-left" to="/reset">{{ ssoLang[appLanguage].reset_password }}</router-link>
+			<div class="clear"></div>
+		</div>
+		<div v-else class="page-login-links" @click="createAccountModal">
+			<a class="forgot center-text pointer small-top"
+				>{{ ssoLang[appLanguage].or }} <br />
+				{{ ssoLang[appLanguage].create_new_account }}</a
+			>
+			<div class="clear"></div>
+		</div>
+	</form>
 </template>
 
 <script>
-import GoogleMixin from "../mixins/google.mixin";
-import FacebookMixin from "../mixins/facebook.mixin";
-import AppleMixin from "../mixins/apple.mixin";
-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 GoogleMixin from '../mixins/google.mixin';
+import FacebookMixin from '../mixins/facebook.mixin';
+import AppleMixin from '../mixins/apple.mixin';
+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,
-    },
-  },
-  data() {
-    return {
-      loading: true,
-      submitted: false,
-      emailOrUsername: "",
-      password: "",
-      captcha: "",
-      revealPassword: false,
-      emailLogin: true,
-    };
-  },
-  computed: {
-    displayFormLogin() {
-      return this.emailLogin;
-    },
-    displayResetPasswordLogin() {
-      return true;
-    },
-    displayRegisterLogin() {
-      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();
-
-
-      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: {
-    async submit() {
-      // if (this.captcha === '') return this._vm.errorHandler({ message: 'Please select recaptcha' });
-      if (this.submitted) return;
-      this.submitted = true;
-
-      this.emailOrUsername = this.emailOrUsername.trim();
-
-      let response_type = this.$route.query.response_type;
-
-      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) {
-        loginData.email = this.emailOrUsername;
-      } else {
-        loginData.username = this.emailOrUsername;
-      }
-
-      const [err, result] = await to(this.login(loginData));
-      if (err) console.error(err);
-
-      this.submitted = false;
-
-      if (result === true) {
-        this.emailOrUsername = "";
-        this.password = "";
-      }
-    },
-    close() {
-      EventBus.$emit('ssoEvent', {name: 'toggleAuthModal', data: true})
-    },
-    createAccountModal() {
-      EventBus.$emit('ssoEvent', {name: 'toggleAddAccountModalRegister', data: {}})
-    },
-  },
-  watch: {
-    emailOrUsername(nv) {
-      if (nv.includes("@")) {
-        this.$storex.verifyEmail = nv;
-      }
-    },
-    '$route.path': async function(routePath) {
-      if(routePath === '/login/callback/okta') return await this.handleOktaRedirect();
-      if(routePath === '/login/callback/saml') return await this.handleSamlRedirect();
-    }
-  },
+	name: 'AuthLogin',
+	mixins: [GoogleMixin, FacebookMixin, AppleMixin, MicrosoftMixin, OktaMixin, SamlMixin, AuthMixin, QRAuthMixin, MFAMixin],
+	props: {
+		isModal: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	data() {
+		return {
+			loading: true,
+			submitted: false,
+			emailOrUsername: '',
+			password: '',
+			captcha: '',
+			revealPassword: false,
+			emailLogin: true
+		};
+	},
+	computed: {
+		displayFormLogin() {
+			return this.emailLogin;
+		},
+		displayResetPasswordLogin() {
+			return true;
+		},
+		displayRegisterLogin() {
+			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();
+
+			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: {
+		async submit() {
+			// if (this.captcha === '') return this._vm.errorHandler({ message: 'Please select recaptcha' });
+			if (this.submitted) return;
+			this.submitted = true;
+
+			this.emailOrUsername = this.emailOrUsername.trim();
+
+			let response_type = this.$route.query.response_type;
+
+			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) {
+				loginData.email = this.emailOrUsername;
+			} else {
+				loginData.username = this.emailOrUsername;
+			}
+
+			const [err, result] = await to(this.login(loginData));
+			if (err) console.error(err);
+
+			this.submitted = false;
+
+			if (result === true) {
+				this.emailOrUsername = '';
+				this.password = '';
+			}
+		},
+		close() {
+			EventBus.$emit('ssoEvent', { name: 'toggleAuthModal', data: true });
+		},
+		createAccountModal() {
+			EventBus.$emit('ssoEvent', { name: 'toggleAddAccountModalRegister', data: {} });
+		}
+	},
+	watch: {
+		emailOrUsername(nv) {
+			if (nv.includes('@')) {
+				this.$storex.verifyEmail = nv;
+			}
+		},
+		'$route.path': async function (routePath) {
+			if (routePath === '/login/callback/okta') return await this.handleOktaRedirect();
+			if (routePath === '/login/callback/saml') return await this.handleSamlRedirect();
+		}
+	}
 };
 </script>