@tapni/auth 0.0.2 → 0.0.4

package/src/views/Login.vue

@@ -0,0 +1,389 @@
+<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.appLang].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.appLang].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.appLang].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[appLang].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[appLang].sign_in_with }} Apple</span>
+      <span v-else class="button--loading 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[appLang].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[appLang].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[appLang].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[appLang].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[appLang].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[appLang].sign_in_with }} Email</span>
+    </a>
+
+    <div class="decoration decoration-lines-thin no-bottom"></div>
+
+    <p class="close-text center-text half-top color-black">
+      {{ ssoLang[appLang].terms_by_signing_in }} <br />
+      <a class="" href="https://tapni.co/policies/terms-of-service">{{
+        ssoLang[this.appLang].terms_of_service
+      }}</a>
+      {{ ssoLang[appLang].and }}
+      <a href="https://tapni.co/policies/privacy-policy">{{
+        ssoLang[this.appLang].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[appLang].create_account }}</router-link
+      >
+      <router-link
+        v-if="displayResetPasswordLogin"
+        class="create float-left"
+        to="/reset"
+        >{{ ssoLang[appLang].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[appLang].or }} <br />
+        {{ ssoLang[appLang].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 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],
+  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.company?.login?.form_login && !this.isModal) ?? this.emailLogin
+      );
+    },
+    displayResetPasswordLogin() {
+      return (this.company?.login?.reset_password && !this.isModal) ?? true;
+    },
+    displayRegisterLogin() {
+      return (this.company?.login?.create_account && !this.isModal) ?? 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.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})
+      }
+      EventBus.$emit('ssoEvent', {name: 'setInitialize', data: true})
+    }
+  },
+  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;
+
+      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,
+        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: 'toggleAddAccountModal', data: true})
+    },
+    createAccountModal() {
+      EventBus.$emit('ssoEvent', {name: 'toggleAddAccountModalRegister', data: {}})
+    },
+  },
+  watch: {
+    emailOrUsername(nv) {
+      if (nv.includes("@")) {
+        this.storage.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>
+
+<style scoped></style>

package/src/views/QR.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="page-login content-boxed content-boxed-padding">
+        <h5 style="text-align: center; width: 80%; margin: 0 auto; margin-top: 130px;">
+            {{ ssoLang[appLang].use_tapni_on_the_web }}
+        </h5>
+        <br>
+
+        <div class="qrCodeLoginContainer center-text">
+            <div id="qrCodeContainer"
+                 class="qrCodeRounded"
+                 style="max-width: 100%;"/>
+            <br>
+            <br>
+            <div style="margin: 0 auto; width: 85%; text-align: left;">
+                <h2 class="center-text">{{ ssoLang[appLang].login_by_scanning_qr_code }}</h2>
+                <br>
+                <h4>{{ ssoLang[appLang].open_tapni_app_on_your_phone }}</h4>
+                <h4>{{ ssoLang[appLang].go_to_settings_link_a_device }}</h4>
+                <h4>{{ ssoLang[appLang].point_your_phone_at_this_qr_code }}</h4>
+                <br>
+                <br>
+            </div>
+            <router-link to="/login">{{ ssoLang[appLang].choose_other_login_methods }}</router-link>
+        </div>
+    </div>
+</template>
+
+
+<script>
+import QRAuthMixin from "../mixins/qr-auth.mixin";
+import AuthMixin from "../mixins/auth.mixin";
+
+export default {
+  name: "AuthQR",
+  mixins: [AuthMixin, QRAuthMixin],
+};
+</script>
+
+<style scoped></style>

package/src/views/Register.vue

@@ -0,0 +1,217 @@
+<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;">{{ssoLang[this.appLang].register}}</h1>
+    <p class="half-bottom small-top center-text color-black">
+		<span v-if="usernameRegister">
+			t.link/{{username}} {{ssoLang[this.appLang].username_is_free}} ✅
+			<br>
+
+		</span>
+	</p>
+
+	<span v-if="emailLogin">
+		<div class="page-login-field half-top">
+		  <i style="padding-top: 15px;">
+			  <img src="https://cdn.tapni.co/icons/mail.png" class="responsive-image" style="width: 60%;">
+		  </i>
+		  <input v-model="email" @keydown.space.prevent type="email" :placeholder="ssoLang[this.appLang].email" name="email" required>
+		  <em></em>
+		</div>
+		<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="username" @keydown.space.prevent type="text"
+				 autocorrect="off" autocapitalize="off" spellcheck="false"
+				 :placeholder="ssoLang[this.appLang].username" name="username" required :disabled="usernameRegister"
+				 :class="{'input-disabled': usernameRegister}"
+		  >
+		  <em></em>
+		</div>
+		<div class="page-login-field half-top 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.appLang].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 pointer button-90 button-center uppercase button-rounded bold full-top">
+		  <span v-if="!submitted">{{formButtonText}}</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[this.appLang].sign_up_with}} Apple</span>
+		<span v-else class="button--loading button__loader"></span>
+	</a>
+
+	<!-- Google Login Button -->
+	<a @click="googleLogin"
+		 class="button-center button button-90 google-button pointer ">
+		  <img src="https://cdn.tapni.co/icons/g-logo.png" style="position: absolute; margin-left: -9px; padding: 8px 0; height: 100%;"/>
+		  <span v-if="!googleLoad">{{ssoLang[this.appLang].sign_up_with}} Google</span>
+		<span v-else class="button--loading button__loader"></span>
+	</a>
+
+	<!-- Facebook Login Button -->
+	<a v-if="displayFacebookLogin"
+	   @click="facebookLogin"
+		 class="button-center button button-90 google-button pointer">
+		  <img src="https://cdn.tapni.co/icons/facebook-blue.png" style="position: absolute; margin-left: -10px; padding: 10px 0; height: 100%;"/>
+		  <span v-if="!facebookLoad">{{ssoLang[this.appLang].sign_up_with}} Facebook</span>
+		<span v-else class="button--loading button__loader"></span>
+	</a>
+
+	<!-- Email Login Button -->
+	<a @click="emailLogin = true" v-if="!emailLogin"
+	   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[this.appLang].sign_up_with}} Email</span>
+	</a>
+
+	<div class="decoration decoration-lines-thin no-bottom"></div>
+
+    <p class="close-text center-text half-top color-black">
+		{{ssoLang[this.appLang].terms_by_registering}} <br>
+		<a class="" href="https://tapni.co/policies/terms-of-service">{{ssoLang[this.appLang].terms_of_service}}</a> {{ssoLang[this.appLang].and}} <a href="https://tapni.co/policies/privacy-policy">{{ssoLang[this.appLang].privacy_policy}}</a>
+    </p>
+    <div class="decoration decoration-lines-thin no-bottom"></div>
+    <div v-if="!isModal" class="page-login-links">
+	  <router-link class="create float-right" to="/verify">{{ssoLang[this.appLang].verify_account}}</router-link>
+	  <router-link class="forgot float-left" to="/login">{{ssoLang[this.appLang].sign_in}}</router-link>
+	  <div class="clear"></div>
+	</div>
+	<div v-else class="page-login-links" @click="loginAccountModal">
+	  <a class="forgot center-text pointer small-top">{{ssoLang[this.appLang].or}} <br> {{ssoLang[this.appLang].sign_in_with_new}}</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 {EventBus} from "../store/event-bus";
+import AuthMixin from "../mixins/auth.mixin";
+export default {
+  name: 'AuthRegister',
+  mixins: [GoogleMixin, FacebookMixin, AppleMixin, MicrosoftMixin, AuthMixin],
+  props: {
+  	isModal: {
+  	  type: Boolean,
+	  required: false,
+  	  default: false
+  	},
+  },
+  data () {
+    return {
+      usernameRegister: false,
+      loading: true,
+      submitted: false,
+      formButtonText: 'REGISTER',
+      username: '',
+      email: '',
+      password: '',
+      revealPassword: false,
+	  emailLogin: true,
+      invitationCode: '',
+      referral: ''
+    }
+  },
+  mounted () {
+  	if (!this.isModal) {
+	  if (this.isLoggedIn) {
+	  	this.$router.push(this.home)
+	  } else if (!this.$route.query.state && !this.$route.query.oauth && !this.$route.params.oauth) {
+	  	EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+	  }
+
+	  this.invitationCode = this.$route.query.ic || ''
+
+	  // Username Registration for Link-In-Bio
+	  if (this.$route.query.username) {
+	  	this.usernameRegister = 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
+	  }
+	}
+  },
+  methods: {
+    async submit() {
+      if (this.password.length < 8) return this.errorSnack(this.ssoLang[this.appLang].password_8_chars);
+      if (this.password.search(/[a-z]/) < 0) return this.errorSnack(this.ssoLang[this.appLang].password_least_one_lowercase);
+      if (this.password.search(/[A-Z]/) < 0) return this.errorSnack(this.ssoLang[this.appLang].password_least_one_uppercase);
+      if (this.password.search(/[0-9]/) < 0) return this.errorSnack(this.ssoLang[this.appLang].password_least_one_number);
+
+      if (this.submitted) return
+      this.submitted = true
+
+      this.email = this.email.trim()
+      this.username = this.username.trim()
+
+      let data = {
+		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
+      };
+
+      let response = await this.register(data);
+	    this.submitted = false
+	    if (response.data && response.data.success) {
+	      if (response.data.message === 'SUCCESS_REGISTER') {
+	      	if (this.isModal) EventBus.$emit('ssoEvent', {name: 'toggleAddAccountModalVerify', data: false})
+	      	else this.$router.push('/verify')
+	        this.successSnack(this.ssoLang[this.appLang].register_success);
+	        this.formButtonText = this.ssoLang[this.appLang].check_your_inbox
+	      } else if (response.data.message === 'SUCCESS_LOGIN') {
+			  if (this.display === 'npm') {
+				  await this.loginSetup({ ...response, isModal: data.isModal });
+				  this.getLoggedInAccounts();
+			  }
+
+			  await this.loginSuccess({ ...response, isModal: data.isModal });
+		  }
+      }
+    },
+	close () {
+		EventBus.$emit('ssoEvent', {name: 'toggleAddAccountModal', data: true})
+	},
+	loginAccountModal () {
+		EventBus.$emit('ssoEvent', {name: 'toggleAddAccountModalLogin', data: false})
+	}
+  },
+  watch: {
+    email(nv) { this.storage.verifyEmail = nv },
+    referral(nv) { this.storage.referral = nv }
+  }
+}
+</script>
+
+<style scoped>
+</style>