@tapni/auth 0.0.169 → 1.0.3

package/src/store/locales/en.js

@@ -514,8 +514,33 @@ export default {
     mfa: "Multi-Factor Authentication",
     otp_title: "Enter MFA Code to continue",
     otp_code: "MFA Code",
-    otp_subtitle: "To continue, turn on or view your MFA device and type the authentication code below.",
-    otp_p1: "If you have trouble signing in, <br> please contact us at",
-    change_language: "Change language"
+    otp_subtitle: "Enter the code from your authenticator app",
+    otp_p1: "If you have trouble with MFA, <br> please contact us at",
+    change_language: "Change language",
+    welcome_account: "Welcome to Account Center",
+    security: "Security",
+    security_p: "Manage your authentication options & account status",
+    general: "General",
+    general_p: "Manage your personal details & other preferences",
+    billing: "Billing",
+    apps: "Apps",
+    apps_p: "View your active apps & explore other",
+    apps_my: "My apps",
+    mfa_auth: '2 Factor Authentication',
+    mfa_auth_enabled: 'Your account is protected via MFA.',
+    mfa_auth_p: 'Protect your account from unauthorized access by enabling multi-factor authentication (MFA)',
+    mfa_auth_qr: 'Scan the QR code above or enter the secret key into your authenticator app.',
+    change_password: 'Change Password',
+    active_account: 'Active Account',
+    active_account_p: 'When turned off, your account will be temporary deactivated until turned back on.',
+    delete_account: 'Delete Account',
+    delete_account_p: 'Delete Account',
+    permanent_delete: 'Permanent delete',
+    permanent_delete_p: 'If you delete your account, all your data will be permanently deleted. This action cannot be undone. If you are unsure, you can temporary deactivate your account.',
+
+    personal_details: 'Personal Details',
+    app_language_p: 'Translate the app on your preferred language',
+    app_region: 'Region',
+    app_region_p: 'Select your region for personalized billing and support experience',
   },
 };

package/src/views/Account.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="page-login content-boxed content-boxed-padding center-text" style="margin-top: -1px; overflow: hidden; border: solid 0px #ffffff;">
     <br>
-    <h1 class="bold full-top no-bottom center-text">{{ssoLang[appLanguage].welcome}}</h1>
-    <p class="full-bottom half-top center-text color-black font-16">{{account.email}}</p>
+    <img v-if="false" :src="account.photo" class="user-photo margin-center" style="max-width: 110px;" alt="">
+    <h1 class="bold full-top no-bottom center-text">{{ssoLang[appLanguage].welcome_account}}</h1>
+    <p class="full-bottom half-top center-text font-16">{{account.email}}</p>
 
     <div v-if="display !== 'npm' && false" class="full-top full-bottom">
       <a @click="continueTo('app')" class="button-center button button-90 google-button bg-tapni-grey pointer">
@@ -15,7 +16,7 @@
       </div>
     </div>
 
-    <div class="container">
+    <div class="container left-text">
       <div v-if="false" class="accountCard pointer" @click="expanded = !expanded">
         <div class="activeAccount">
           <div class="left" v-if="$storex.username">
@@ -78,69 +79,75 @@
         </div>
       </div>
 
-      <div class="settingsCard pointer left-text">
-        <div class="device" @click="toggleAccountSettingsModal">
-          <div class="left">
-            <img
-                src="https://cdn.tapni.co/icons/newSettings.svg"
-                style="width: 50px; border-radius: 20px"
-            />
-          </div>
-          <div class="middle">
-            <h4>{{ssoLang[appLanguage].mfa }}</h4>
-          </div>
-          <div class="right">
-            <img
-                src="https://cdn.tapni.co/icons/newArrowRight.svg"
-            />
-          </div>
+      <router-link to="/general" class="settingRow">
+        <div class="firstRow">
+          <img
+              :src="getIcon('user-black.svg')"
+              class="withBackground"
+          />
+          <h4>{{ssoLang[appLanguage].general }}</h4>
+
+          <img :src="getIcon('arrow-gray-right.svg')" />
         </div>
+      </router-link>
 
-        <div class="divider"></div>
+      <router-link to="/security" class="settingRow">
+        <div class="firstRow">
+          <img
+              :src="getIcon('shield-black.svg')"
+              class="withBackground"
+          />
+          <h4>{{ssoLang[appLanguage].security }}</h4>
 
-        <div class="device" @click="toggleLanguageModal">
-          <div class="left">
-            <img
-                src="https://cdn.tapni.co/icons/newPublicProfile.svg"
-                style="width: 50px; border-radius: 20px"
-            />
-          </div>
-          <div class="middle">
-            <h4>{{ssoLang[appLanguage].change_language }}</h4>
-          </div>
-          <div class="right">
-            <img
-                src="https://cdn.tapni.co/icons/newArrowRight.svg"
-            />
-          </div>
+          <img :src="getIcon('arrow-gray-right.svg')" />
         </div>
+      </router-link>
 
-        <div class="divider"></div>
+      <router-link to="/apps" class="settingRow">
+        <div class="firstRow">
+          <img
+              :src="getIcon('apps-black.svg')"
+              class="withBackground"
+          />
+          <h4>{{ssoLang[appLanguage].apps }}</h4>
 
-        <div class="device" @click="logoutAccount">
-          <div class="left">
-            <img
-                src="https://cdn.tapni.co/icons/newLogout.svg"
-                style="width: 50px; border-radius: 20px"
-            />
-          </div>
-          <div class="middle">
-            <h4>{{ssoLang[appLanguage].logout }}</h4>
-          </div>
-          <div class="right">
-            <img
-                src="https://cdn.tapni.co/icons/newArrowRight.svg"
-            />
-          </div>
+          <img :src="getIcon('arrow-gray-right.svg')" />
         </div>
+      </router-link>
 
-        <!-- Additional items can be added here in the future -->
-        <div v-if="false" class="moreFooter">
-          <p class="app-version" style="margin-top: 10px">
-            {{ssoLang[appLanguage].version }}: {{ appVersion }}
-          </p>
-          <h4 v-if="false">{{ssoLang[appLanguage].terms_and_privacy }}</h4>
+      <router-link to="/billing" class="settingRow">
+        <div class="firstRow">
+          <img
+              :src="getIcon('billing-card-black.svg')"
+              class="withBackground"
+          />
+          <h4>{{ssoLang[appLanguage].billing }}</h4>
+
+          <img :src="getIcon('arrow-gray-right.svg')" />
         </div>
+      </router-link>
+
+
+      <div class="settingRow" @click="logoutAccount">
+        <div class="firstRow">
+          <img
+              :src="getIcon('logout-red.svg')"
+              class="withBackground"
+          />
+          <h4 class="red-text">{{ssoLang[appLanguage].logout }}</h4>
+
+          <img
+              :src="getIcon('arrow-gray-right.svg')"
+          />
+        </div>
+      </div>
+
+      <!-- Additional items can be added here in the future -->
+      <div class="moreFooter">
+        <p class="app-version" style="margin-top: 10px">
+          {{ssoLang[appLanguage].version }}: {{ appVersion }}
+        </p>
+        <h4 v-if="false">{{ssoLang[appLanguage].terms_and_privacy }}</h4>
       </div>
     </div>
   </div>
@@ -149,16 +156,20 @@
 <script>
 import AuthMixin from "../mixins/auth.mixin";
 import { EventBus } from "../store/event-bus.js";
-import AuthService from "../services/AuthService.js";
+import CONSTANTS from "../store/constants.js";
 export default {
   mixins: [AuthMixin],
   data () {
     return {
       expanded: false,
       addAccountReady: false,
-      appVersion: import.meta.env.APP_VERSION,
     }
   },
+  computed: {
+    appVersion() {
+      return CONSTANTS.WEB_VERSION;
+    },
+  },
   async mounted () {
     if (!this.isLoggedIn) {
       return this.$router.push('/');
@@ -175,10 +186,6 @@ export default {
     switchAccount (username) {
       console.log('switch', username);
     },
-    toggleAccountSettingsModal () {
-      this.$router.push('/mfa');
-      // EventBus.$emit('toggleAccountSettingsModal')
-    },
     toggleLanguageModal () {
       EventBus.$emit('toggleSSOLanguageModal')
     },
@@ -189,51 +196,6 @@ export default {
 };
 </script>
 
-<style scoped>
-.container {
-  padding: 20px !important;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding-bottom: 100px !important;
-}
-.settingsCard {
-  background-color: white;
-  padding: 20px;
-  border-radius: 26px;
-  align-items: center;
-}
-
-.device {
-  display: flex;
-  align-items: center;
-}
-
-h4 {
-  margin-left: 20px;
-  font-weight: bold;
-}
-
-.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;
-}
+<style>
+
 </style>

package/src/views/Apps.vue

@@ -0,0 +1,106 @@
+<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 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].apps }}
+        </h2>
+      </div>
+
+      <div class="container left-text">
+        <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>
+</template>
+
+
+<script>
+import AuthMixin from "../mixins/auth.mixin";
+import {EventBus} from "@/store/event-bus.js";
+
+export default {
+  name: "AuthSecurity",
+  mixins: [AuthMixin],
+  props: {
+    payload: {
+      type: Object,
+      default: {}
+    },
+  },
+  data () {
+    return {
+      loading: false,
+    }
+  },
+  async mounted() {
+    if (!this.isLoggedIn) this.$router.push('/login');
+  },
+  methods: {
+    close () {
+      EventBus.$emit('ssoEvent', {name: 'toggleAuthModal', data: true})
+    },
+  }
+};
+</script>
+
+<style scoped>
+.withBackground {
+  height: 50px;
+}
+</style>

package/src/views/CustomApp.vue

@@ -0,0 +1,106 @@
+<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 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;">
+          {{$route.params.app }}
+        </h2>
+      </div>
+
+      <div class="container left-text">
+        <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>
+</template>
+
+
+<script>
+import AuthMixin from "../mixins/auth.mixin";
+import {EventBus} from "@/store/event-bus.js";
+
+export default {
+  name: "AuthSecurity",
+  mixins: [AuthMixin],
+  props: {
+    payload: {
+      type: Object,
+      default: {}
+    },
+  },
+  data () {
+    return {
+      loading: false,
+    }
+  },
+  async mounted() {
+    if (!this.isLoggedIn) this.$router.push('/login');
+  },
+  methods: {
+    close () {
+      EventBus.$emit('ssoEvent', {name: 'toggleAuthModal', data: true})
+    },
+  }
+};
+</script>
+
+<style scoped>
+.withBackground {
+  height: 50px;
+}
+</style>

package/src/views/General.vue

@@ -0,0 +1,192 @@
+<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 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].general }}
+        </h2>
+      </div>
+
+      <div class="container left-text">
+        <p class="center-text">{{ssoLang[appLanguage].general_p }}</p>
+
+        <form class="full-top" @submit.prevent="submitGeneralUpdate">
+
+          <h3 class="full-top bold small-bottom">{{ssoLang[appLanguage].personal_details}}</h3>
+
+          <input type="text" v-model="account.name" :placeholder="ssoLang[appLanguage].name"
+                 class="edit-input h-40 lh-40 small-bottom" required style="width: 100%"/>
+
+          <input disabled type="email" v-model="account.email" :placeholder="ssoLang[appLanguage].email"
+                 class="bg-white edit-input h-40 lh-40 small-bottom" required style="width: 100%"/>
+
+
+          <h3 class="full-top bold">{{ssoLang[appLanguage].app_region}}</h3>
+          <VueSelect
+              v-model="region"
+              :options="[
+              { label: 'United States', value: 'us' },
+              { label: 'United Kingdom', value: 'uk' },
+              { label: 'European Union', value: 'eu' },
+              { label: 'Mexico', value: 'mx' },
+              { label: 'Mauritius', value: 'mu' },
+              { label: 'Colombia', value: 'co' },
+              { label: 'Serbia', value: 'sr' },
+              { label: 'China', value: 'cn' },
+            ]"
+              :isClearable="false"
+              placeholder="Select region"
+          />
+          <p>Default currency for this region is {{account.billing?.currency?.toUpperCase()}}</p>
+
+
+          <h3 class="full-top bold">{{ssoLang[appLanguage].app_language}}</h3>
+          <VueSelect
+              v-model="account.lang"
+              :options="[
+              { label: ssoLang[appLanguage].english, value: 'en' },
+              { label: ssoLang[appLanguage].german, value: 'de' },
+              { label: ssoLang[appLanguage].spanish, value: 'es' },
+              { label: ssoLang[appLanguage].italian, value: 'it' },
+              { label: ssoLang[appLanguage].french, value: 'fr' },
+              { label: ssoLang[appLanguage].turkish, value: 'tr' },
+              { label: ssoLang[appLanguage].serbian, value: 'sr' },
+              { label: ssoLang[appLanguage].korean, value: 'kr' },
+              { label: ssoLang[appLanguage].chinese, value: 'cn' },
+            ]"
+              :isClearable="false"
+              placeholder="Select language"
+          />
+          <p>Translate the app on your preferred language.</p>
+
+          <button
+              type="submit"
+              class="button black-button button-full google-button bg-tapni-grey button-90 button-center uppercase bold full-top pointer"
+          >
+            <span v-if="!loading">{{ ssoLang[appLanguage].save }}</span>
+            <span v-else class="button--loading button__loader"></span>
+          </button>
+        </form>
+      </div>
+    </div>
+</template>
+
+
+<script>
+import AuthMixin from "../mixins/auth.mixin";
+import AuthService from '../services/AuthService'
+import to from "await-to-js";
+import {EventBus} from "@/store/event-bus.js";
+import VueSelect from "vue3-select-component";
+
+export default {
+  name: "AuthSecurity",
+  mixins: [AuthMixin],
+  components: {
+    VueSelect
+  },
+  props: {
+    payload: {
+      type: Object,
+      default: {}
+    },
+  },
+  data () {
+    return {
+      loading: false,
+    }
+  },
+  async mounted() {
+    if (!this.isLoggedIn) this.$router.push('/login');
+  },
+  methods: {
+    close () {
+      EventBus.$emit('ssoEvent', {name: 'toggleAuthModal', data: true})
+    },
+    async submitGeneralUpdate () {
+      if (this.password.length < 8) return this.errorSnack(this.ssoLang[this.appLanguage].password_8_chars)
+
+      this.loading = true;
+      const result = await this.newPassword({
+
+      })
+      if (result === true) {
+        this.successSnack(this.ssoLang[this.appLanguage].password_change_success)
+        this.changePassword = false;
+      }
+      this.loading = false;
+    },
+  }
+};
+</script>
+
+<style scoped>
+:deep(.vue-select) {
+  padding: 5px 0;
+}
+
+:deep(.vue-select .dropdown-icon) {
+  color: #1d1d1d;
+  width: 25px!important;
+  height: 25px!important;
+}
+:deep(.vue-select .menu-option:hover) {
+  background-color: #D9D9D9;
+}
+:deep(.vue-select .menu-option.focused) {
+  background-color: #f4f4f4;
+}
+:deep(.vue-select .menu-option) {
+  border-bottom: 1px solid #D9D9D9;
+  font-size: 15px;
+  color: #151515;
+}
+:deep(.vue-select .menu-option:last-child) {
+  border-bottom: none;
+}
+
+:deep(.vue-select .menu) {
+  border-radius: 10px;
+  border: none;
+}
+:deep(.vue-select .control.focused) {
+  border: none;
+  box-shadow: none;
+}
+:deep(.vue-select .control) {
+  min-height: 54px!important;
+  background-color: #F4F4F4;
+  border: none;
+  border-radius: 10px;
+}
+
+:deep(.vue-select .menu-option.selected) {
+  background-color: #E4E4E4;
+}
+:deep(.vue-select .indicators-container) {
+  padding: 5px 15px!important
+}
+:deep(.vue-select .value-container) {
+  padding: 5px 15px;
+}
+
+:deep(.vue-select .menu-option) {
+  background-color: #f4f4f4;
+}
+</style>