@tapni/auth 1.0.4 → 1.0.5

package/dist/style.css

@@ -1 +1 @@
-.app-store-icon[data-v-7aad6400]{box-shadow:0 4px 10px #00000017;border-radius:12px}#codeInput[data-v-89d98ef3],#emailInput[data-v-89d98ef3]{text-align:center;padding-right:15%;font-size:17px}.firstRow img[data-v-04b9da4f]{width:25px;height:25px;position:absolute;top:50%;right:0;transform:translate(-50%,-50%)}#emailInput[data-v-69a9cfa3]{text-align:center;padding-right:15%;font-size:17px}.fade-enter-to[data-v-e5fbde19]{opacity:1}.sso-img[data-v-11f19a09]{margin:2px auto 0;width:35px}input[data-v-11f19a09]{margin:0 auto;height:25px}.sso-img[data-v-4f821f65]{margin:2px auto 0;width:35px}input[data-v-4f821f65]{margin:0 auto;height:25px}.link-grid,.user-link-img{width:100%;display:inline-table;position:relative}.link-grid{width:30%;margin:1.6%;padding:1.6%}.link-grid .user-link-img img{border-radius:25%!important}.link-grid .edit-icon{border-radius:20px;right:-3%;top:-3%;position:absolute;z-index:3;max-width:23%;overflow:hidden;min-width:30px}.link-grid .direct-icon{border-radius:20px;left:-3%;top:-3%;position:absolute;z-index:555;max-width:23%;overflow:hidden;min-width:30px}.link-grid .link-text{min-height:20px;margin-top:3px!important;display:block;text-align:center;line-height:normal;overflow-wrap:anywhere}.link-list{width:93%;max-height:67px!important;margin:0 auto;display:flex;border-radius:15px!important;background-color:#fff;border:solid 1px #e8e8e8;position:relative;align-items:center}.link-list .user-link-img{display:inline-block;width:65px;border-radius:25%!important}.link-list .link-text{display:inline-block;padding:18px 0% 17px 10%;font-size:15px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;text-align:left;border-radius:15px!important}.link-list .edit-icon{border-radius:20px;right:7%;top:30%;position:absolute;z-index:3;width:26px;overflow:hidden}.link-list .switching{width:45px}.link-list .direct-icon{border-radius:20px;left:-2%;top:-13%;position:absolute;z-index:555;width:26px;overflow:hidden}.small{width:22%!important;margin:2% 4% 0%;padding:0%}.small .link-text{margin-top:0!important;font-size:13px}.linkExternal{margin-right:20px;width:20px;display:inline-block!important;height:20px;background:#000;-webkit-mask:url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;mask:url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;transform:scale(1.5)}.user-img[data-v-ce677789]{margin:2px auto 0;width:65px}input[data-v-ce677789]{margin:0 auto;height:25px}html *{font-family:Inter,sans-serif}#bodyId{padding-top:3%;max-width:667px!important;margin:1.5% auto auto;height:95%!important;border-radius:20px}.action-block-top .default-text,.action-block-top .default-text:after{border-radius:50%;width:10em!important;height:10em!important}.action-block-top .default-text{margin:10px auto;font-size:3px;position:relative;text-indent:-9999em;border-left:.5em solid #000000;border-top:.5em solid rgba(0,0,0,.2);border-right:.5em solid rgba(0,0,0,.2);border-bottom:.5em solid rgba(0,0,0,.2);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.smartbanner-ios{background:linear-gradient(to bottom,#f4f4f4,#f4f4f4);box-shadow:0 0 #fff;border-bottom:1px solid #dddddd}.smartbanner-icon{border-radius:16px}.smartbanner-ios .smartbanner-button{font-size:13px;padding:9px 0;height:40px;border-radius:13px;background:#f4f4f4;color:#0a99d2;border:none;box-shadow:none;text-transform:uppercase}.snack-body{display:none;border-radius:40px;font-size:15px!important}#errorSnack{background-color:#fee3e3!important;border:2px solid #edd9d9!important;color:#000}#successSnack{background-color:#eff5eb!important;border:2px solid #e3ecd7!important;color:#000}.grecaptcha-badge{visibility:hidden}.header-logo{position:absolute;left:50%;transform:translate(-50%,-50%);margin-top:0;z-index:2}.header-logo-img{height:40px;margin-top:10px}.withBackground[data-v-3e0687c7],.withBackground[data-v-851bd608]{height:50px}[data-v-a6dcb82a] .vue-select{padding:5px 0}[data-v-a6dcb82a] .vue-select .dropdown-icon{color:#1d1d1d;width:25px!important;height:25px!important}[data-v-a6dcb82a] .vue-select .menu-option:hover{background-color:#d9d9d9}[data-v-a6dcb82a] .vue-select .menu-option.focused{background-color:#f4f4f4}[data-v-a6dcb82a] .vue-select .menu-option{border-bottom:1px solid #D9D9D9;font-size:15px;color:#151515}[data-v-a6dcb82a] .vue-select .menu-option:last-child{border-bottom:none}[data-v-a6dcb82a] .vue-select .menu{border-radius:10px;border:none}[data-v-a6dcb82a] .vue-select .control.focused{border:none;box-shadow:none}[data-v-a6dcb82a] .vue-select .control{min-height:54px!important;background-color:#f4f4f4;border:none;border-radius:10px}[data-v-a6dcb82a] .vue-select .menu-option.selected{background-color:#e4e4e4}[data-v-a6dcb82a] .vue-select .indicators-container{padding:5px 15px!important}[data-v-a6dcb82a] .vue-select .value-container{padding:5px 15px}[data-v-a6dcb82a] .vue-select .menu-option{background-color:#f4f4f4}
+.container{padding:10px 0 100px!important;display:flex;flex-direction:column;gap:10px}.settingsCard{background-color:#fff;padding:20px;border-radius:26px;align-items:center}.device{display:flex;align-items:center}h4{margin-left:20px;font-weight:700}.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}.settingRow{background-color:#f4f4f4;padding:10px 9px;border-radius:15px;cursor:pointer}.settingRow .firstRow,.settingRow .secondRow{display:flex;align-items:center;min-height:35px}.settingRow .firstRow h4{text-align:left;flex:1;margin-left:20px;font-weight:600;margin-bottom:0}.settingRow .secondRow{font-size:8px;margin-top:20px}.settingRow .secondRow p{flex:1;color:#999}.withBackground{background-color:#fff;border-radius:10px;padding:10px;width:50px}.ios-switch{position:relative;width:60px;padding-top:4px;padding-right:4px;margin-left:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.ios-switch-checkbox{display:none}.ios-switch-label{background-color:#e3e3e3;display:block;overflow:initial;cursor:pointer;height:30px;padding:0;line-height:20px;border:1px solid #e3e3e3;border-radius:25px;transition:all .25s ease}.ios-switch-label:before{content:"";display:block;width:30px;margin:0;position:absolute;top:0;bottom:0;right:24px;background-size:15px;background-repeat:no-repeat;background-position:center;border:2px solid #e3e3e3;border-radius:25px;transition:all .25s ease}.ios-switch-checkbox:checked+.ios-switch-label{background-color:#151515}.ios-switch-checkbox:checked+.ios-switch-label,.ios-switch-checkbox:checked+.ios-switch-label:before{border-color:#151515}.ios-switch-checkbox:checked+.ios-switch-label:before{right:-1px}.subheaderContainer{display:flex;align-items:center;position:relative;padding:15px 25px}.subheaderContainer .left-button{width:40px!important;height:40px!important;margin:0;border-radius:50%;background:#f4f4f4;display:flex;align-items:center;justify-content:center;position:absolute;left:20px}.subheaderContainer .button{width:40px!important;height:40px!important;margin:0;border-radius:50%;background:#f4f4f4;display:flex;align-items:center;justify-content:center;position:absolute}.subheaderContainer .button img{top:0!important;margin-right:3px!important}.subheaderContainer .left-button{left:20px}.subheaderContainer .right-button{right:20px}.transition-icon{transition:.5s}.rotate-icon{transform:translate(-50%,-50%) rotate(180deg)!important}.app-store-icon[data-v-7aad6400]{box-shadow:0 4px 10px #00000017;border-radius:12px}#codeInput[data-v-89d98ef3],#emailInput[data-v-89d98ef3]{text-align:center;padding-right:15%;font-size:17px}.firstRow img[data-v-5caa3239]{width:25px;height:25px;position:absolute;top:50%;right:0;transform:translate(-50%,-50%)}#emailInput[data-v-69a9cfa3]{text-align:center;padding-right:15%;font-size:17px}.fade-enter-to[data-v-e5fbde19]{opacity:1}.sso-img[data-v-6ebe2dcb]{margin:2px auto 0;width:35px}input[data-v-6ebe2dcb]{margin:0 auto;height:25px}.sso-img[data-v-767d5ebb]{margin:2px auto 0;width:35px}input[data-v-767d5ebb]{margin:0 auto;height:25px}.link-grid,.user-link-img{width:100%;display:inline-table;position:relative}.link-grid{width:30%;margin:1.6%;padding:1.6%}.link-grid .user-link-img img{border-radius:25%!important}.link-grid .edit-icon{border-radius:20px;right:-3%;top:-3%;position:absolute;z-index:3;max-width:23%;overflow:hidden;min-width:30px}.link-grid .direct-icon{border-radius:20px;left:-3%;top:-3%;position:absolute;z-index:555;max-width:23%;overflow:hidden;min-width:30px}.link-grid .link-text{min-height:20px;margin-top:3px!important;display:block;text-align:center;line-height:normal;overflow-wrap:anywhere}.link-list{width:93%;max-height:67px!important;margin:0 auto;display:flex;border-radius:15px!important;background-color:#fff;border:solid 1px #e8e8e8;position:relative;align-items:center}.link-list .user-link-img{display:inline-block;width:65px;border-radius:25%!important}.link-list .link-text{display:inline-block;padding:18px 0% 17px 10%;font-size:15px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;text-align:left;border-radius:15px!important}.link-list .edit-icon{border-radius:20px;right:7%;top:30%;position:absolute;z-index:3;width:26px;overflow:hidden}.link-list .switching{width:45px}.link-list .direct-icon{border-radius:20px;left:-2%;top:-13%;position:absolute;z-index:555;width:26px;overflow:hidden}.small{width:22%!important;margin:2% 4% 0%;padding:0%}.small .link-text{margin-top:0!important;font-size:13px}.linkExternal{margin-right:20px;width:20px;display:inline-block!important;height:20px;background:#000;-webkit-mask:url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;mask:url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;transform:scale(1.5)}.user-img[data-v-ce677789]{margin:2px auto 0;width:65px}input[data-v-ce677789]{margin:0 auto;height:25px}html *{font-family:Inter,sans-serif}#bodyId{padding-top:3%;max-width:667px!important;margin:1.5% auto auto;height:95%!important;border-radius:20px}.action-block-top .default-text,.action-block-top .default-text:after{border-radius:50%;width:10em!important;height:10em!important}.action-block-top .default-text{margin:10px auto;font-size:3px;position:relative;text-indent:-9999em;border-left:.5em solid #000000;border-top:.5em solid rgba(0,0,0,.2);border-right:.5em solid rgba(0,0,0,.2);border-bottom:.5em solid rgba(0,0,0,.2);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.smartbanner-ios{background:linear-gradient(to bottom,#f4f4f4,#f4f4f4);box-shadow:0 0 #fff;border-bottom:1px solid #dddddd}.smartbanner-icon{border-radius:16px}.smartbanner-ios .smartbanner-button{font-size:13px;padding:9px 0;height:40px;border-radius:13px;background:#f4f4f4;color:#0a99d2;border:none;box-shadow:none;text-transform:uppercase}.snack-body{display:none;border-radius:40px;font-size:15px!important}#errorSnack{background-color:#fee3e3!important;border:2px solid #edd9d9!important;color:#000}#successSnack{background-color:#eff5eb!important;border:2px solid #e3ecd7!important;color:#000}.grecaptcha-badge{visibility:hidden}.header-logo{position:absolute;left:50%;transform:translate(-50%,-50%);margin-top:0;z-index:2}.header-logo-img{height:40px;margin-top:10px}@media (max-width: 768px){#bodyId{margin-top:0;border-radius:0;height:100%!important}.header-logo{margin-top:15px}}.withBackground[data-v-2f7f5584],.withBackground[data-v-4d3e1bec],.withBackground[data-v-36b27d1f]{height:50px}[data-v-9dc93691] .vue-select{padding:5px 0}[data-v-9dc93691] .vue-select .dropdown-icon{color:#1d1d1d;width:25px!important;height:25px!important}[data-v-9dc93691] .vue-select .menu-option:hover{background-color:#d9d9d9}[data-v-9dc93691] .vue-select .menu-option.focused{background-color:#f4f4f4}[data-v-9dc93691] .vue-select .menu-option{border-bottom:1px solid #D9D9D9;font-size:15px;color:#151515}[data-v-9dc93691] .vue-select .menu-option:last-child{border-bottom:none}[data-v-9dc93691] .vue-select .menu{border-radius:10px;border:none}[data-v-9dc93691] .vue-select .control.focused{border:none;box-shadow:none}[data-v-9dc93691] .vue-select .control{min-height:54px!important;background-color:#f4f4f4;border:none;border-radius:10px}[data-v-9dc93691] .vue-select .menu-option.selected{background-color:#e4e4e4}[data-v-9dc93691] .vue-select .indicators-container{padding:5px 15px!important}[data-v-9dc93691] .vue-select .value-container{padding:5px 15px}[data-v-9dc93691] .vue-select .menu-option{background-color:#f4f4f4}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapni/auth",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "main": "./dist/TapniAuth.umd.js",
   "module": "./dist/TapniAuth.es.js",

package/src/App.vue

@@ -70,6 +70,7 @@ document.addEventListener('DOMContentLoaded', function() {
 </template>
 
 <script>
+import "../public/index.css";
 import AuthWelcome from "@/views/Welcome.vue";
 import AuthLogin from "@/views/Login.vue";
 import AuthRegister from "@/views/Register.vue";
@@ -78,8 +79,8 @@ import AuthSecurity from "@/views/Security.vue";
 import AuthReset from "@/views/Reset.vue";
 import AuthCallback from "@/views/Callback.vue";
 import ModalOverlay from "@/components/DELETE_ModalOverlay.vue";
-import SSO from "@/components/SSO.vue";
-import SSOPick from "@/components/SSOPick.vue";
+import SSO from "@/components/DELETE_SSO.vue";
+import SSOPick from "@/components/DELETE_SSOPick.vue";
 import {EventBus} from "./store/event-bus.js";
 import AuthMixin from "@/mixins/auth.mixin.js";
 import Language from "@/components/DELETE_Language.vue";
@@ -319,4 +320,16 @@ html * {
   height: 40px;
   margin-top: 10px;
 }
+
+@media (max-width: 768px) {
+  #bodyId {
+    margin-top: 0;
+    border-radius: 0;
+    height: 100%!important;
+  }
+
+  .header-logo {
+    margin-top: 15px;
+  }
+}
 </style>

package/src/components/{SSO.vue → DELETE_SSO.vue}

@@ -91,18 +91,12 @@ export default {
         if (!ssoTypes.length) {
           this.forceClose();
           return this.errorSnack(this.ssoLang[this.appLanguage].no_sso_logins);
-        } else if (ssoTypes.length <= 1) {
+        } 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);
-        } else {
-          this.forceClose();
-          EventBus.$emit("toggleSSOPickModal", {
-            sso: response.sso,
-            email: this.email,
-          });
         }
       }
     },

package/src/main.js

@@ -1,5 +1,4 @@
 import "@tapni/styles/dist/index.css";
-import "../public/index.css";
 import { createApp } from 'vue'
 import RootApp from './App.vue'
 import router from './router'

package/src/mixins/microsoft.mixin.js

@@ -75,8 +75,5 @@ export default {
         EventBus.$emit("ssoEvent", { name: "setLoading", data: false });
       }
     },
-    ssoLogin() {
-      EventBus.$emit("toggleSSOModal");
-    },
   },
 };

package/src/mixins/okta.mixin.js

@@ -121,7 +121,7 @@ export default {
 				window.opener.postMessage(postMessageData, location.origin);
 				window.close()
 			} else {
-				if(this.isNative && this.isIOS) await Browser.close();
+				if(this.isNative && this.isiOS) await Browser.close();
 				EventBus.$emit('ssoEvent', {name: 'setLoading', data: true})
 				if (code && clientID && domain) await this.exchangeCode({code, clientID, domain, platform});
 				localStorage.removeItem("pkce_code_verifier");

package/src/mixins/saml.mixin.js

@@ -68,7 +68,7 @@ export default {
 				window.opener.postMessage(postMessageData, location.origin);
 				window.close()
 			} else {
-				if(this.isNative && this.isIOS) await Browser.close();
+				if(this.isNative && this.isiOS) await Browser.close();
 				EventBus.$emit('ssoEvent', {name: 'setLoading', data: true})
 				if (this.$route.query.code) code = this.$route.query.code
 

package/src/routes.js

@@ -8,6 +8,7 @@ const Callback = () => import("./views/Callback.vue");
 const QR = () => import("./views/QR.vue");
 const Security = () => import("./views/Security.vue");
 const Apps = () => import("./views/Apps.vue");
+const Billing = () => import("./views/Billing.vue");
 const CustomApp = () => import("./views/CustomApp.vue");
 const General = () => import("./views/General.vue");
 
@@ -38,6 +39,11 @@ export default [
     name: "AuthSecurity",
     component: Security,
   },
+  {
+    path: "/billing",
+    name: "AuthBilling",
+    component: Billing,
+  },
   {
     path: "/apps",
     name: "AuthApps",

package/src/services/AuthService.js

@@ -78,4 +78,10 @@ export default {
   getAccountSettings() {
     return api().get("/users/settings");
   },
+  async getRecordById(data) {
+    return api().post("/objects/record/" + data.id, data);
+  },
+  async getRecords(data) {
+    return api().post("/objects/records", data);
+  }
 }

package/src/services/MetadataService.js

@@ -0,0 +1,10 @@
+import api from './Api';
+
+export default {
+    async getRecordById(data) {
+        return api().post("/objects/record/" + data.id, data);
+    },
+    async getRecords(data) {
+        return api().post("/objects/records", data);
+    }
+}

package/src/store/locales/en.js

@@ -400,7 +400,7 @@ export default {
     update_p3: "Please update the app to the newest version",
     company_domain: "Your company domain",
     search_company_domain: "Search your company domain",
-    enter_company_email: "Enter company e-mail",
+    enter_company_email: "Enter business email",
     company_not_found: "Company not found",
     ik_company_domain: "I know the company domain",
     idk_company_domain: "I don't know the company domain",
@@ -523,6 +523,7 @@ export default {
     general: "General",
     general_p: "Manage your personal details & other preferences",
     billing: "Billing",
+    billing_p: "Manage your subscriptions & payment profiles",
     apps: "Apps",
     apps_p: "View your active apps & explore other",
     apps_my: "My apps",

package/src/views/Apps.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"
@@ -29,41 +29,17 @@
         <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">
+          <a v-for="app in apps" :key="app.id" :href="app.t_apps_url" target="_blank" class="settingRow half-bottom">
             <div class="firstRow">
               <img
-                  :src="getIcon('tapni-logo-small-black.png')"
+                  :src="getIcon(app.t_apps_icon)"
                   class="withBackground"
               />
-              <h4>Tapni</h4>
+              <h4>{{ app.t_apps_name }}</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>
+          </a>
         </div>
       </div>
     </div>
@@ -73,9 +49,10 @@
 <script>
 import AuthMixin from "../mixins/auth.mixin";
 import {EventBus} from "@/store/event-bus.js";
+import MetadataService from "@/services/MetadataService.js";
 
 export default {
-  name: "AuthSecurity",
+  name: "AuthApps",
   mixins: [AuthMixin],
   props: {
     payload: {
@@ -86,10 +63,20 @@ export default {
   data () {
     return {
       loading: false,
+      apps: []
     }
   },
   async mounted() {
     if (!this.isLoggedIn) this.$router.push('/login');
+
+    const response = await MetadataService.getRecords({
+      objectId: '6dc545ea-2e2f-4720-b4fe-c5ebdd8af063',
+      query: {
+        fields: ['t_apps_name', 't_apps_icon', 't_apps_url'],
+        relations: []
+      }
+    })
+    this.apps = response.data.records;
   },
   methods: {
     close () {

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 () {