@tapni/auth 1.0.5 → 1.0.6-3.dev

package/src/views/Callback.vue

@@ -1,46 +1,49 @@
 <template>
- <div class="page-login content-boxed content-boxed-padding">
-   <h5 v-if="($route.query.platform ==='android' || $route.query.platform ==='ios') && !isNative" style="text-align: center; width: 80%; margin: 0 auto; margin-top: 260px; ">
-       {{ssoLang[this.appLanguage].you_will_be_redirected}}<br>
-       {{ssoLang[this.appLanguage].if_redirect_not_directly}}, <span @click="inAppRedirect" style="color: blue; cursor: pointer">{{ssoLang[this.appLanguage].click_here}}</span>.</h5>
-   <h4 v-else style="text-align: center; width: 80%; margin: 0 auto; margin-top: 260px; ">{{ssoLang[this.appLanguage].please_wait}}</h4>
- </div>
+	<div class="page-login content-boxed content-boxed-padding">
+		<h5 v-if="($route.query.platform === 'android' || $route.query.platform === 'ios') && !isNative" style="text-align: center; width: 80%; margin: 0 auto; margin-top: 260px">
+			{{ ssoLang[this.appLanguage].you_will_be_redirected }}<br />
+			{{ ssoLang[this.appLanguage].if_redirect_not_directly }}, <span @click="inAppRedirect" style="color: blue; cursor: pointer">{{ ssoLang[this.appLanguage].click_here }}</span
+			>.
+		</h5>
+		<h4 v-else style="text-align: center; width: 80%; margin: 0 auto; margin-top: 260px">{{ ssoLang[this.appLanguage].please_wait }}</h4>
+	</div>
 </template>
 
 <script>
 /* eslint-disable */
-import OktaMixin from "../mixins/okta.mixin";
-import SamlMixin from "../mixins/saml.mixin";
-import AuthMixin from "../mixins/auth.mixin";
+import OktaMixin from '../mixins/okta.mixin';
+import SamlMixin from '../mixins/saml.mixin';
+import AuthMixin from '../mixins/auth.mixin';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 export default {
-  name: "AuthCallback",
-  mixins: [OktaMixin, SamlMixin, AuthMixin],
+	name: 'AuthCallback',
+	mixins: [OktaMixin, SamlMixin, AuthMixin],
 
-  data() {
-    return {
+	data() {
+		return {};
+	},
 
-    };
-  },
-
-  async mounted() {
-    if(this.$route.path === '/callback/auth') {
-        this.exchangeAuthCode({
-            code: this.$route.query.code
-        })
-    }
-    if(this.$route.path === '/callback/okta') return await this.handleOktaRedirect();
-    if(this.$route.path === '/callback/saml') return await this.handleSamlRedirect();
-  },
-  methods: {
-    inAppRedirect() {
-      let url = sanitizeUrl(location.href);
-      url = url.replace('http', 'tapni')
-      url = url.replace('https', 'tapni')
-      return window.open(url);
+	async mounted() {
+		if (this.$route.path === '/callback/redirect') {
+      return location.href = atob(this.$route.query.uri);
     }
-  },
-
+		if (this.$route.path === '/callback/auth') {
+			this.exchangeAuthCode({
+				code: this.$route.query.code,
+        code_verifier: this.$route.query.code_verifier
+			});
+		}
+		if (this.$route.path === '/callback/okta') return await this.handleOktaRedirect();
+		if (this.$route.path === '/callback/saml') return await this.handleSamlRedirect();
+	},
+	methods: {
+		inAppRedirect() {
+			let url = sanitizeUrl(location.href);
+			url = url.replace('http', 'tapni');
+			url = url.replace('https', 'tapni');
+			return window.open(url);
+		}
+	}
 };
 </script>
 

package/src/views/General.vue

@@ -1,193 +1,159 @@
 <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].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-if="account.billing"
-              v-model="account.billing.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>
+	<div class="page-login content-boxed content-boxed-padding tapni-auth-general">
+		<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 -->
+			<div v-if="isModal" class="pointer left-button" @click="$emit('update:viewProp', 'AuthAccount')">
+				<img :src="getIcon('arrow-gray-right.svg')" height="20" width="20" class="btn-icon" style="rotate: 180deg" />
+			</div>
+			<router-link v-else 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-if="account.billing"
+					v-model="account.billing.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: 'Singapore', value: 'sg' },
+						{ label: 'China', value: 'cn' }
+					]"
+					:isClearable="false"
+					placeholder="Select region"
+				/>
+				<p v-if="false">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' },
+						{ label: ssoLang[appLanguage].portuguese, value: 'pt' },
+						{ label: ssoLang[appLanguage].japanese, value: 'ja' }
+					]"
+					: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";
+import AuthMixin from '../mixins/auth.mixin';
+import UserService from '../services/UserService';
+import to from 'await-to-js';
+import { EventBus } from '@/store/event-bus.js';
+import VueSelect from 'vue3-select-component';
 
 export default {
-  name: "AuthGeneral",
-  mixins: [AuthMixin],
-  components: {
-    VueSelect
-  },
-  props: {
-    payload: {
-      type: Object,
-      default: {}
-    },
-  },
-  data () {
-    return {
-      loading: false,
-    }
-  },
-  async mounted() {
-    if (!this.isLoggedIn) this.$router.push('/login');
-    if (this.isEmpty(this.account)) this.$router.push('/account');
-  },
-  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;
-    },
-  }
+	name: 'AuthGeneral',
+	mixins: [AuthMixin],
+	components: {
+		VueSelect
+	},
+	props: {
+		isModal: {
+			type: Boolean,
+			default: false
+		},
+		payload: {
+			type: Object,
+			default: {}
+		}
+	},
+	data() {
+		return {
+			loading: false
+		};
+	},
+	watch: {
+		'account.lang': {
+			handler(newLang) {
+				if (newLang) {
+					this.updateLang(newLang);
+					if (this.display === 'npm') {
+						this.$store.commit('setLanguage', newLang);
+					}
+				}
+			},
+			immediate: true
+		}
+	},
+	async mounted() {
+		if (!this.isLoggedIn) this.$router.push('/login');
+		await this.getAccountSettings();
+	},
+	methods: {
+		close() {
+			EventBus.$emit('ssoEvent', { name: 'toggleAuthModal', data: true });
+		},
+		async submitGeneralUpdate() {
+			this.loading = true;
+			console.log(this.account);
+			const data = {
+				name: this.account.name,
+				lang: this.account.lang,
+				email: this.account.email,
+				billing: this.account.billing
+					? {
+							region: this.account.billing.region
+						}
+					: undefined
+			};
+
+			const [err, response] = await to(UserService.updateAccount(data));
+
+			if (err) {
+				this.errorHandler(err);
+			} else if (response.data.success) {
+				this.successSnack(this.ssoLang[this.appLanguage].profile_update_success);
+				await this.getAccountSettings();
+			}
+
+			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>

package/src/views/Login.vue

@@ -24,7 +24,7 @@
         />
       </i>
     </a>
-    <h2 class="bold no-bottom center-text" style="margin-top: 63px;">
+    <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>
@@ -152,27 +152,6 @@
         <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
-        >
-        <span v-else class="button--loading-black button__loader"></span>
-      </a>
-
         <!-- Microsoft Login Button -->
       <a
           @click="microsoftLogin"
@@ -314,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";
@@ -325,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,
@@ -383,7 +361,6 @@ export default {
       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")

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,