@tapni/auth 1.0.4 → 1.0.6-3.dev

package/src/views/General.vue

@@ -1,192 +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 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>
+	<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: "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;
-    },
-  }
+	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>