@tapni/auth 1.0.3 → 1.0.5

package/src/views/Billing.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="page-login content-boxed content-boxed-padding">
+        <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>
+      <div class="subheaderContainer full-top">
+        <!-- Back Button -->
+        <router-link v-if="!isModal" to="/account" class="button gray-button pointer left-button">
+          <img
+              :src="getIcon('arrow-gray-right.svg')"
+              height="20"
+              width="20"
+              class="btn-icon"
+              style="rotate: 180deg;"
+          />
+        </router-link>
+
+        <!-- Centered Text -->
+        <h2 class="center-text" style="flex-grow: 1; text-align: center; margin: 0; font-weight: 600;">
+          {{ssoLang[appLanguage].billing }}
+        </h2>
+      </div>
+
+      <div class="container left-text">
+        <p class="center-text">{{ssoLang[appLanguage].billing_p }}</p>
+
+        <div class="full-top">
+          <h3 v-if="false" class="full-top bold small-bottom">{{ssoLang[appLanguage].apps_my}}</h3>
+
+          {{account.billing}}
+
+          <div v-for="sub in subscriptions" :key="sub.id" class="settingRow half-bottom">
+            <div class="firstRow">
+              <img
+                  :src="getIcon(app.t_apps_icon)"
+                  class="withBackground"
+              />
+              <h4>{{ sub.t_subscriptions_name }}</h4>
+
+              <img :src="getIcon('arrow-gray-right.svg')" />
+            </div>
+          </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 {
+  name: "AuthBilling",
+  mixins: [AuthMixin],
+  props: {
+    payload: {
+      type: Object,
+      default: {}
+    },
+  },
+  data () {
+    return {
+      loading: false,
+      subscriptions: []
+    }
+  },
+  async mounted() {
+    if (!this.isLoggedIn) this.$router.push('/login');
+
+
+    const response = await AuthService.getRecords({
+      objectId: '6dc545ea-2e2f-4720-b4fe-c5ebdd8af066',
+      query: {
+        where: {
+          account: this.account.id,
+        },
+        fields: ['t_subscriptions_name', 't_subscriptions_desc', 't_subscriptions_type', 't_subscriptions_active', 't_subscriptions_app'],
+        relations: {
+          t_subscriptions_app: {
+            fields: [
+              "t_apps_name",
+              "t_apps_icon",
+              "t_apps_url"
+            ],
+            relations: {},
+          }
+        }
+      }
+    })
+    this.subscriptions = response.data.records;
+  },
+  methods: {
+    close () {
+      EventBus.$emit('ssoEvent', {name: 'toggleAuthModal', data: true})
+    },
+  }
+};
+</script>
+
+<style scoped>
+.withBackground {
+  height: 50px;
+}
+</style>

package/src/views/CustomApp.vue

@@ -7,7 +7,7 @@
         </a>
       <div class="subheaderContainer full-top">
         <!-- Back Button -->
-        <router-link to="/account" class="button gray-button pointer left-button">
+        <router-link v-if="!isModal" to="/apps" class="button gray-button pointer left-button">
           <img
               :src="getIcon('arrow-gray-right.svg')"
               height="20"
@@ -19,7 +19,7 @@
 
         <!-- Centered Text -->
         <h2 class="center-text" style="flex-grow: 1; text-align: center; margin: 0; font-weight: 600;">
-          {{$route.params.app }}
+          {{ app.t_apps_name }}
         </h2>
       </div>
 
@@ -27,43 +27,7 @@
         <p class="center-text">{{ssoLang[appLanguage].apps_p }}</p>
 
         <div class="full-top">
-          <h3 v-if="false" class="full-top bold small-bottom">{{ssoLang[appLanguage].apps_my}}</h3>
 
-          <router-link to="/apps/tapni" class="settingRow">
-            <div class="firstRow">
-              <img
-                  :src="getIcon('tapni-logo-small-black.png')"
-                  class="withBackground"
-              />
-              <h4>Tapni</h4>
-
-              <img :src="getIcon('arrow-gray-right.svg')" />
-            </div>
-          </router-link>
-
-          <router-link to="/apps/mailsign" class="settingRow half-top">
-            <div class="firstRow">
-              <img
-                  :src="getIcon('app-logo-mailsign.svg')"
-                  class="withBackground"
-              />
-              <h4>MailSign</h4>
-
-              <img :src="getIcon('arrow-gray-right.svg')" />
-            </div>
-          </router-link>
-
-          <router-link v-if="false" to="/apps/qrcodetoolkit" class="settingRow half-top">
-            <div class="firstRow">
-              <img
-                  :src="getIcon('app-logo-qrcodetoolkit.svg')"
-                  class="withBackground"
-              />
-              <h4>QRCode Toolkit</h4>
-
-              <img :src="getIcon('arrow-gray-right.svg')" />
-            </div>
-          </router-link>
         </div>
       </div>
     </div>
@@ -73,9 +37,10 @@
 <script>
 import AuthMixin from "../mixins/auth.mixin";
 import {EventBus} from "@/store/event-bus.js";
+import AuthService from "@/services/AuthService.js";
 
 export default {
-  name: "AuthSecurity",
+  name: "AuthCustomApp",
   mixins: [AuthMixin],
   props: {
     payload: {
@@ -86,10 +51,20 @@ export default {
   data () {
     return {
       loading: false,
+      app: {}
     }
   },
   async mounted() {
     if (!this.isLoggedIn) this.$router.push('/login');
+
+    const response = await AuthService.getRecordById({
+      id: this.$route.params.app,
+      query: {
+        fields: ['t_apps_name', 't_apps_icon', 't_apps_url'],
+        relations: []
+      }
+    })
+    this.app = response.data.record;
   },
   methods: {
     close () {

package/src/views/General.vue

@@ -7,7 +7,7 @@
         </a>
       <div class="subheaderContainer full-top">
         <!-- Back Button -->
-        <router-link to="/account" class="button gray-button pointer left-button">
+        <router-link v-if="!isModal" to="/account" class="button gray-button pointer left-button">
           <img
               :src="getIcon('arrow-gray-right.svg')"
               height="20"
@@ -38,8 +38,8 @@
 
 
           <h3 class="full-top bold">{{ssoLang[appLanguage].app_region}}</h3>
-          <VueSelect
-              v-model="region"
+          <VueSelect v-if="account.billing"
+              v-model="account.billing.region"
               :options="[
               { label: 'United States', value: 'us' },
               { label: 'United Kingdom', value: 'uk' },
@@ -96,7 +96,7 @@ import {EventBus} from "@/store/event-bus.js";
 import VueSelect from "vue3-select-component";
 
 export default {
-  name: "AuthSecurity",
+  name: "AuthGeneral",
   mixins: [AuthMixin],
   components: {
     VueSelect
@@ -114,6 +114,7 @@ export default {
   },
   async mounted() {
     if (!this.isLoggedIn) this.$router.push('/login');
+    if (this.isEmpty(this.account)) this.$router.push('/account');
   },
   methods: {
     close () {

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" 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,170 @@
         <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"
+        <!-- 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="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 +288,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>
@@ -323,6 +335,7 @@ export default {
       captcha: "",
       revealPassword: false,
       emailLogin: true,
+      isSSOLogin: false,
 
       otpToken: '',
       showOTP: false
@@ -333,7 +346,7 @@ export default {
       return this.emailLogin;
     },
     displayResetPasswordLogin() {
-      return true;
+      return !this.isSSOLogin;
     },
     displayRegisterLogin() {
       return true;
@@ -361,11 +374,33 @@ 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) {
+          this.forceClose();
+          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/Security.vue

@@ -7,7 +7,7 @@
         </a>
       <div class="subheaderContainer full-top">
         <!-- Back Button -->
-        <router-link to="/account" class="button gray-button pointer left-button">
+        <router-link v-if="!isModal" to="/account" class="button gray-button pointer left-button">
           <img
               :src="getIcon('arrow-gray-right.svg')"
               height="20"