@tapni/auth 1.0.4 → 1.0.6-3.dev

package/src/views/Login.vue

@@ -24,9 +24,10 @@
         />
       </i>
     </a>
-    <h1 class="bold no-bottom center-text" style="margin-top: 63px;">
-      {{ this.ssoLang[this.appLanguage].login }}
-    </h1>
+    <h2 class="bold no-bottom center-text text-[22px]" style="margin-top: 63px;">
+      <span v-if="isSSOLogin">{{ this.ssoLang[this.appLanguage].enter_company_email }}</span>
+      <span v-else>{{ this.ssoLang[this.appLanguage].login }}</span>
+    </h2>
     <p class="half-bottom small-top center-text color-black"></p>
 
     <span v-if="displayFormLogin">
@@ -46,12 +47,12 @@
           spellcheck="false"
           type="text"
           name="email"
-          :placeholder="ssoLang[this.appLanguage].email_username"
+          :placeholder="isSSOLogin ? ssoLang[this.appLanguage].email : ssoLang[this.appLanguage].email_username"
           required
         />
         <em></em>
       </div>
-      <div class="page-login-field half-bottom">
+      <div v-if="!isSSOLogin" class="page-login-field half-bottom">
         <i style="padding-top: 15px">
           <img
             src="https://cdn.tapni.co/icons/padlock.png"
@@ -106,163 +107,149 @@
         <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
+    <!-- Login Buttons -->
+    <span v-show="!isSSOLogin">
+      <!-- Apple Login Button -->
+      <a
+          @click="appleLogin"
+          v-if="displayAppleLogin"
+          class="button-center button button-90 google-button pointer"
       >
-      <span v-else class="button--loading-black button__loader"></span>
-    </a>
+        <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>
 
-    <!-- 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
+        <!-- Google Login Button -->
+      <a
+          @click="googleLogin"
+          v-if="displayGoogleLogin"
+          class="button-center button button-90 google-button pointer"
       >
-      <span v-else class="button--loading-black button__loader"></span>
-    </a>
+        <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>
 
-    <!-- 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"
+        <!-- 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="isSSOLogin = true"
+          v-if="!displayMicrosoftSSOLogin"
+          class="button-center button button-90 google-button pointer"
       >
-      <span v-else class="button--loading-black button__loader"></span>
-    </a>
+        <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="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>
+        <!-- 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>
+        <!-- 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>
+        <!-- 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>
+    </span>
 
-    <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 />
@@ -280,21 +267,25 @@
         v-if="displayRegisterLogin"
         class="forgot float-right"
         to="/register"
-        >{{ ssoLang[appLanguage].create_account }}</router-link
-      >
+        >{{ ssoLang[appLanguage].create_account }}
+      </router-link>
       <router-link
         v-if="displayResetPasswordLogin"
         class="create float-left"
         to="/reset"
-        >{{ ssoLang[appLanguage].reset_password }}</router-link
-      >
+        >{{ ssoLang[appLanguage].reset_password }}
+      </router-link>
+      <a v-if="isSSOLogin" @click="isSSOLogin = false"
+          class="create float-left pointer"
+      >{{ ssoLang[appLanguage].go_back }}
+      </a>
       <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
-      >
+      <a class="forgot center-text pointer small-top">
+        {{ ssoLang[appLanguage].or }} <br />
+        {{ ssoLang[appLanguage].create_new_account }}
+      </a>
       <div class="clear"></div>
     </div>
   </form>
@@ -302,7 +293,6 @@
 
 <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";
@@ -313,7 +303,7 @@ 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],
+  mixins: [GoogleMixin, AppleMixin, MicrosoftMixin, OktaMixin, SamlMixin, AuthMixin, QRAuthMixin],
   data() {
     return {
       loading: true,
@@ -323,6 +313,7 @@ export default {
       captcha: "",
       revealPassword: false,
       emailLogin: true,
+      isSSOLogin: false,
 
       otpToken: '',
       showOTP: false
@@ -333,7 +324,7 @@ export default {
       return this.emailLogin;
     },
     displayResetPasswordLogin() {
-      return true;
+      return !this.isSSOLogin;
     },
     displayRegisterLogin() {
       return true;
@@ -361,11 +352,32 @@ export default {
     });
   },
   methods: {
+    async ssoLoginSubmit () {
+      this.loading = true;
+      const response = await this.getCompanyBySSOEmail({ email: this.emailOrUsername });
+      this.loading = false;
+      let ssoTypes;
+      if (!response || response.error) return;
+      else {
+        ssoTypes = Object.keys(response.sso);
+        if (!ssoTypes.length) {
+          return this.errorSnack(this.ssoLang[this.appLanguage].no_sso_logins);
+        } else {
+          if (ssoTypes[0] === "azure")
+            this.microsoftLogin("sso", response.sso.azure.sso);
+          if (ssoTypes[0] === "okta") this.oktaLogin(response.sso.okta.sso);
+          if (ssoTypes[0] === "saml")
+            this.samlLogin(response.sso.saml.sso.loginUrl);
+        }
+      }
+    },
     async submit() {
       // if (this.captcha === '') return this._vm.errorHandler({ message: 'Please select recaptcha' });
       if (this.submitted) return;
       this.submitted = true;
 
+      if (this.isSSOLogin) return this.ssoLoginSubmit();
+
       this.emailOrUsername = this.emailOrUsername.trim();
 
       let response_type = this.$route.query.response_type;

package/src/views/Register.vue

@@ -5,7 +5,7 @@
 		  <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.appLanguage].register}}</h1>
+    <h1 class="bold no-bottom center-text text-[24px]" style="margin-top: 63px;">{{ssoLang[this.appLanguage].register}}</h1>
     <p class="half-bottom small-top center-text color-black">
 		<span v-if="usernameRegister">
 			t.link/{{username}} {{ssoLang[this.appLanguage].username_is_free}} ✅
@@ -66,15 +66,6 @@
 		<span v-else class="button--loading-black 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.appLanguage].sign_up_with}} Facebook</span>
-		<span v-else class="button--loading-black button__loader"></span>
-	</a>
-
 	<!-- Email Login Button -->
 	<a @click="emailLogin = true" v-if="!emailLogin"
 	   class="button-center button button-90 google-button pointer">
@@ -103,14 +94,13 @@
 
 <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],
+  mixins: [GoogleMixin, AppleMixin, MicrosoftMixin, AuthMixin],
   props: {
   	isModal: {
   	  type: Boolean,