@tapni/auth 1.0.8 → 1.0.9

package/src/views/Verify.vue

@@ -1,170 +1,172 @@
 <template>
-  <form class="page-login content-boxed content-boxed-padding" @submit.prevent="submit" :style="isModal ? 'max-width: 500px;' : ''">
-	<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>
-	<h1 class="bold no-bottom center-text" style="margin-top: 63px;">{{ssoLang[this.appLanguage].verify_account}}</h1>
-    <p class="half-bottom half-top center-text color-black"></p>
-	<div class="page-login-field half-top">
-	  <i style="padding-top: 15px; margin-left: 10px;">
-	    <img src="https://cdn.tapni.co/icons/mail.png" class="responsive-image" style="width: 80%;">
-	  </i>
-	  <input id="emailInput" v-model="email" @keydown.space.prevent type="email" :placeholder="ssoLang[this.appLanguage].email" required>
-	  <em></em>
-	</div>
-	<div class="page-login-field half-top">
-	    <i style="padding-top: 15px; margin-left: 10px;">
-		    <img src="https://cdn.tapni.co/icons/password2.png" class="responsive-image" style="width: 100%;">
-	    </i>
-      <input id="codeInput" v-model="code" @keydown.space.prevent type="tel" :placeholder="ssoLang[this.appLanguage].code" required>
-      <em></em>
-    </div>
-      <button type="submit" class="button black-button google-button bg-tapni-grey button-90 button-center uppercase bold full-top">
-      <span v-if="!submitted" class="uppercase">{{ssoLang[this.appLanguage].verify_account}}</span>
-		  <span v-else class="button--loading button__loader"></span>
-	  </button>
-    <div class="decoration decoration-lines-thin no-bottom"></div>
+	<form class="page-login content-boxed content-boxed-padding" @submit.prevent="submit" :style="isModal ? 'max-width: 500px;' : ''">
+		<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>
+		<h1 class="bold no-bottom center-text" style="margin-top: 63px">{{ ssoLang[this.appLanguage].verify_account }}</h1>
+		<p class="half-bottom half-top center-text color-black"></p>
+		<div class="page-login-field half-top">
+			<i style="padding-top: 15px; margin-left: 10px">
+				<img src="https://cdn.tapni.co/icons/mail.png" class="responsive-image" style="width: 80%" />
+			</i>
+			<input id="emailInput" v-model="email" @keydown.space.prevent type="email" :placeholder="ssoLang[this.appLanguage].email" required />
+			<em></em>
+		</div>
+		<div class="page-login-field half-top">
+			<i style="padding-top: 15px; margin-left: 10px">
+				<img src="https://cdn.tapni.co/icons/password2.png" class="responsive-image" style="width: 100%" />
+			</i>
+			<input id="codeInput" v-model="code" @keydown.space.prevent type="tel" :placeholder="ssoLang[this.appLanguage].code" required />
+			<em></em>
+		</div>
+		<button type="submit" class="button black-button google-button bg-tapni-grey button-90 button-center uppercase bold full-top">
+			<span v-if="!submitted" class="uppercase">{{ ssoLang[this.appLanguage].verify_account }}</span>
+			<span v-else class="button--loading button__loader"></span>
+		</button>
+		<div class="decoration decoration-lines-thin no-bottom"></div>
 
-	<p class="close-text center-text half-top color-black">
-		<span v-html="ssoLang[this.appLanguage].verify_account_p1"></span>
-		<a href="mailto:support@tapni.com?subject=Email Verification"> support@tapni.com</a>
-	</p>
+		<p class="close-text center-text half-top color-black">
+			<span v-html="ssoLang[this.appLanguage].verify_account_p1"></span>
+			<a href="mailto:support@tapni.com?subject=Email Verification"> support@tapni.com</a>
+		</p>
 
-	<div class="decoration decoration-lines-thin no-bottom"></div>
-	<div v-if="!isModal" class="page-login-links">
-		<router-link class="create float-right" to="/register">{{ssoLang[this.appLanguage].register}}</router-link>
-		<router-link class="forgot float-left" to="/login">{{ssoLang[this.appLanguage].sign_in}}</router-link>
-		<div class="clear"></div>
-	</div>
-	<div v-else class="page-login-links" @click="registerAccountModal">
-		<a class="forgot center-text pointer small-top">{{ssoLang[this.appLanguage].or}} <br> {{ssoLang[this.appLanguage].create_new_account}}</a>
-		<div class="clear"></div>
-	</div>
-  </form>
+		<div class="decoration decoration-lines-thin no-bottom"></div>
+		<div v-if="!isModal" class="page-login-links">
+			<router-link class="create float-right" to="/register">{{ ssoLang[this.appLanguage].register }}</router-link>
+			<router-link class="forgot float-left" to="/login">{{ ssoLang[this.appLanguage].sign_in }}</router-link>
+			<div class="clear"></div>
+		</div>
+		<div v-else class="page-login-links" @click="registerAccountModal">
+			<a class="forgot center-text pointer small-top"
+				>{{ ssoLang[this.appLanguage].or }} <br />
+				{{ ssoLang[this.appLanguage].create_new_account }}</a
+			>
+			<div class="clear"></div>
+		</div>
+	</form>
 </template>
 
 <script>
-import {EventBus} from "../store/event-bus";
-import AuthMixin from "../mixins/auth.mixin";
+import { EventBus } from '../store/event-bus';
+import AuthMixin from '../mixins/auth.mixin';
 export default {
-  name: 'AuthVerify',
-  mixins: [AuthMixin],
-  props: {
-  	isModal: {
-  		type: Boolean,
-  		required: false,
-  		default: false
-  	},
-  },
-  data () {
-    return {
-      loading: true,
-      submitted: false,
-      action: 'verify',
-      email: '',
-      code: '',
-      captcha: ''
-    }
-  },
-  mounted () {
-	  if (this.$storex.verifyEmail) this.email = this.$storex.verifyEmail
-    if (this.$route) this.init()
-  },
-  methods: {
-    init() {
-      if (this.isLoggedIn) {
-        this.$router.push(this.home)
-      } else {
-        if (this.$storex.verifyEmail) {
-          this.email = this.$storex.verifyEmail
-        }
-        if (this.$route.hash === '#reset') {
-          this.action = 'reset'
-        }
-        if (this.$route.query.e) {
-          this.email = this.$route.query.e
-        }
-        if (this.$route.query.c) {
-          this.code = this.$route.query.c
-        }
-        EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
-      }
-    },
-    async submit() {
-      // if (this.captcha === '') return this._vm.errorHandler({ message: 'Please select recaptcha' });
-      if (this.code.length !== 6) {
-        return this.errorSnack(this.ssoLang[this.appLanguage].invalid_code);
-      }
-
-      this.email = this.email.trim()
-      this.code = this.code.trim()
+	name: 'AuthVerify',
+	mixins: [AuthMixin],
+	props: {
+		isModal: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	data() {
+		return {
+			loading: true,
+			submitted: false,
+			action: 'verify',
+			email: '',
+			code: '',
+			captcha: ''
+		};
+	},
+	mounted() {
+		if (this.$storex.verifyEmail) this.email = this.$storex.verifyEmail;
+		if (this.$route) this.init();
+	},
+	methods: {
+		init() {
+			if (this.isLoggedIn) {
+				this.$router.push(this.home);
+			} else {
+				if (this.$storex.verifyEmail) {
+					this.email = this.$storex.verifyEmail;
+				}
+				if (this.$route.hash === '#reset') {
+					this.action = 'reset';
+				}
+				if (this.$route.query.e) {
+					this.email = this.$route.query.e;
+				}
+				if (this.$route.query.c) {
+					this.code = this.$route.query.c;
+				}
+				EventBus.$emit('ssoEvent', { name: 'setLoading', data: false });
+			}
+		},
+		async submit() {
+			// if (this.captcha === '') return this._vm.errorHandler({ message: 'Please select recaptcha' });
+			if (this.code.length !== 6) {
+				return this.errorSnack(this.ssoLang[this.appLanguage].invalid_code);
+			}
 
-      let data = {
-        code: this.code,
-        email: this.email,
-        captchaToken: await this.getCaptchaToken('account_verify')
-      }
+			this.email = this.email.trim();
+			this.code = this.code.trim();
 
-      if(this.submitted) return false;
-      this.submitted = true
+			let data = {
+				code: this.code,
+				email: this.email,
+				captchaToken: await this.getCaptchaToken('account_verify')
+			};
 
-      let response = await this.verify(data);
-      this.submitted = false
-      if (response && response.data && response.data.success === true) {
-        if (this.action === 'reset') {
-          this.$router.push('/reset?c=' + this.code + '&e=' + this.email)
-          this.successSnack(this.ssoLang[this.appLanguage].verify_account_success)
-        }
-        if (this.action === 'verify') {
-          if (this.isModal) {
-            this.email = ''
-            this.code = ''
-            EventBus.$emit('closeModal')
-          }
-          await this.loginSetup(response)
-          await this.getLoggedInAccounts()
-          this.$storex.verifyEmail = '';
-          this.$router.push('/' + response.data.data.username + '#edit')
-          this.successSnack(this.ssoLang[this.appLanguage].verify_account_success2)
-        }
-      } else this.submitted = false
+			if (this.submitted) return false;
+			this.submitted = true;
 
-    },
-	registerAccountModal () {
-		EventBus.$emit('ssoEvent', {name: 'toggleAddAccountModalRegister', data: false})
-	},
-	close () {
-		EventBus.$emit('ssoEvent', {name: 'toggleAddAccountModal', data: true})
-	},
-  },
-  watch: {
-    '$storage.verifyEmail' (nv) {
-    	if (nv)	this.email = nv
+			let response = await this.verify(data);
+			this.submitted = false;
+			if (response && response.data && response.data.success === true) {
+				if (this.action === 'reset') {
+					this.$router.push('/reset?c=' + this.code + '&e=' + this.email);
+					this.successSnack(this.ssoLang[this.appLanguage].verify_account_success);
+				}
+				if (this.action === 'verify') {
+					if (this.isModal) {
+						this.email = '';
+						this.code = '';
+						EventBus.$emit('closeModal');
+					}
+					await this.loginSetup(response);
+					await this.getLoggedInAccounts();
+					this.$storex.verifyEmail = '';
+					this.$router.push('/' + response.data.data.username + '#edit');
+					this.successSnack(this.ssoLang[this.appLanguage].verify_account_success2);
+				}
+			} else this.submitted = false;
+		},
+		registerAccountModal() {
+			EventBus.$emit('ssoEvent', { name: 'toggleAddAccountModalRegister', data: false });
+		},
+		close() {
+			EventBus.$emit('ssoEvent', { name: 'toggleAddAccountModal', data: true });
+		}
 	},
-    'route.name' (nv, ov) {
-      if (!ov && nv) this.init()
-    },
-    'route.query': {
-      handler(nv) {
-        if (!this.isEmpty(nv)) this.init()
-      },
-      deep: true,
-    },
-  }
-}
+	watch: {
+		'$storage.verifyEmail'(nv) {
+			if (nv) this.email = nv;
+		},
+		'route.name'(nv, ov) {
+			if (!ov && nv) this.init();
+		},
+		'route.query': {
+			handler(nv) {
+				if (!this.isEmpty(nv)) this.init();
+			},
+			deep: true
+		}
+	}
+};
 </script>
 
 <style scoped>
-  #codeInput {
-    text-align: center;
-    padding-right: 15%;
-    font-size: 17px;
-  }
-  #emailInput {
+#codeInput {
+	text-align: center;
+	padding-right: 15%;
+	font-size: 17px;
+}
+#emailInput {
 	text-align: center;
 	padding-right: 15%;
 	font-size: 17px;
-  }
+}
 </style>