@tapni/auth 0.0.170 → 0.0.172

package/src/views/Register.vue

@@ -1,217 +1,213 @@
 <template>
-  <form class="page-login content-boxed content-boxed-padding" @submit.prevent="submit" autocomplete="on" :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].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}} ✅
-			<br>
-
+	<form class="page-login content-boxed content-boxed-padding" @submit.prevent="submit" autocomplete="on" :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].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 }} ✅
+				<br />
+			</span>
+		</p>
+
+		<span v-if="emailLogin">
+			<div class="page-login-field half-top">
+				<i style="padding-top: 15px">
+					<img src="https://cdn.tapni.co/icons/mail.png" class="responsive-image" style="width: 60%" />
+				</i>
+				<input v-model="email" @keydown.space.prevent type="email" :placeholder="ssoLang[this.appLanguage].email" name="email" required />
+				<em></em>
+			</div>
+			<div class="page-login-field half-top">
+				<i style="padding-top: 15px">
+					<img src="https://cdn.tapni.co/icons/user.png" class="responsive-image" style="width: 50%" />
+				</i>
+				<input v-model="username" @keydown.space.prevent type="text" autocorrect="off" autocapitalize="off" spellcheck="false" :placeholder="ssoLang[this.appLanguage].username" name="username" required :disabled="usernameRegister" :class="{ 'input-disabled': usernameRegister }" />
+				<em></em>
+			</div>
+			<div class="page-login-field half-top half-bottom">
+				<i style="padding-top: 15px">
+					<img src="https://cdn.tapni.co/icons/padlock.png" class="responsive-image" style="width: 50%" />
+				</i>
+				<input v-model="password" :type="revealPassword ? 'text' : 'password'" :placeholder="ssoLang[this.appLanguage].password" name="password" required minlength="8" />
+				<em @click="revealPassword = !revealPassword" class="pointer">
+					<img v-show="!revealPassword" src="https://cdn.tapni.co/icons/reveal-password.png" class="responsive-image password-reveal-icon" />
+					<img v-show="revealPassword" src="https://cdn.tapni.co/icons/hide-password.png" class="responsive-image password-reveal-icon" />
+				</em>
+			</div>
+			<button type="submit" class="button black-button google-button bg-tapni-grey pointer button-90 button-center uppercase button-rounded bold full-top">
+				<span v-if="!submitted">{{ formButtonText }}</span>
+				<span v-else class="button--loading button__loader"></span>
+			</button>
 		</span>
-	</p>
-
-	<span v-if="emailLogin">
-		<div class="page-login-field half-top">
-		  <i style="padding-top: 15px;">
-			  <img src="https://cdn.tapni.co/icons/mail.png" class="responsive-image" style="width: 60%;">
-		  </i>
-		  <input v-model="email" @keydown.space.prevent type="email" :placeholder="ssoLang[this.appLanguage].email" name="email" required>
-		  <em></em>
-		</div>
-		<div class="page-login-field half-top">
-		  <i style="padding-top: 15px">
-			  <img src="https://cdn.tapni.co/icons/user.png" class="responsive-image" style="width: 50%;">
-		  </i>
-		  <input v-model="username" @keydown.space.prevent type="text"
-				 autocorrect="off" autocapitalize="off" spellcheck="false"
-				 :placeholder="ssoLang[this.appLanguage].username" name="username" required :disabled="usernameRegister"
-				 :class="{'input-disabled': usernameRegister}"
-		  >
-		  <em></em>
+		<div class="decoration decoration-lines-thin half-top half-bottom"></div>
+
+		<!-- Apple Login Button -->
+		<a @click="appleLogin" v-if="displayAppleLogin" class="button-center button button-90 google-button pointer">
+			<img src="https://cdn.tapni.co/icons/apple-logo.png" style="position: absolute; margin-left: -11px; padding: 8px 0; height: 100%" />
+			<span v-if="!appleLoad"> {{ ssoLang[this.appLanguage].sign_up_with }} Apple</span>
+			<span v-else class="button--loading-black button__loader"></span>
+		</a>
+
+		<!-- Google Login Button -->
+		<a @click="googleLogin" class="button-center button button-90 google-button pointer">
+			<img src="https://cdn.tapni.co/icons/g-logo.png" style="position: absolute; margin-left: -9px; padding: 8px 0; height: 100%" />
+			<span v-if="!googleLoad">{{ ssoLang[this.appLanguage].sign_up_with }} Google</span>
+			<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">
+			<img src="https://cdn.tapni.co/icons/mail.png" style="position: absolute; margin-left: -8px; padding: 12px 0; height: 100%" />
+			<span>{{ ssoLang[this.appLanguage].sign_up_with }} Email</span>
+		</a>
+
+		<div class="decoration decoration-lines-thin no-bottom"></div>
+
+		<p class="close-text center-text half-top color-black">
+			{{ ssoLang[this.appLanguage].terms_by_registering }} <br />
+			<a class="" href="https://tapni.co/policies/terms-of-service">{{ ssoLang[this.appLanguage].terms_of_service }}</a> {{ ssoLang[this.appLanguage].and }} <a href="https://tapni.co/policies/privacy-policy">{{ ssoLang[this.appLanguage].privacy_policy }}</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="/verify">{{ ssoLang[this.appLanguage].verify_account }}</router-link>
+			<router-link class="forgot float-left" to="/login">{{ ssoLang[this.appLanguage].sign_in }}</router-link>
+			<div class="clear"></div>
 		</div>
-		<div class="page-login-field half-top half-bottom">
-		  <i style="padding-top: 15px">
-			  <img src="https://cdn.tapni.co/icons/padlock.png" class="responsive-image" style="width: 50%;">
-		  </i>
-		  <input v-model="password" :type="revealPassword ? 'text' : 'password'" :placeholder="ssoLang[this.appLanguage].password" name="password" required minlength="8">
-		  <em @click="revealPassword = !revealPassword" class="pointer">
-			<img v-show="!revealPassword" src="https://cdn.tapni.co/icons/reveal-password.png" class="responsive-image password-reveal-icon">
-			<img v-show="revealPassword" src="https://cdn.tapni.co/icons/hide-password.png" class="responsive-image password-reveal-icon">
-		  </em>
+		<div v-else class="page-login-links" @click="loginAccountModal">
+			<a class="forgot center-text pointer small-top"
+				>{{ ssoLang[this.appLanguage].or }} <br />
+				{{ ssoLang[this.appLanguage].sign_in_with_new }}</a
+			>
+			<div class="clear"></div>
 		</div>
-		<button type="submit" class="button black-button google-button bg-tapni-grey pointer button-90 button-center uppercase button-rounded bold full-top">
-		  <span v-if="!submitted">{{formButtonText}}</span>
-		  <span v-else class="button--loading button__loader"></span>
-		</button>
-	</span>
-	<div class="decoration decoration-lines-thin half-top half-bottom"></div>
-
-	<!-- Apple Login Button -->
-	<a @click="appleLogin" v-if="displayAppleLogin"
-		 class="button-center button button-90 google-button pointer">
-		  <img src="https://cdn.tapni.co/icons/apple-logo.png" style="position: absolute; margin-left: -11px; padding: 8px 0; height: 100%;"/>
-		  <span v-if="!appleLoad"> {{ssoLang[this.appLanguage].sign_up_with}} Apple</span>
-		<span v-else class="button--loading-black button__loader"></span>
-	</a>
-
-	<!-- Google Login Button -->
-	<a @click="googleLogin"
-		 class="button-center button button-90 google-button pointer ">
-		  <img src="https://cdn.tapni.co/icons/g-logo.png" style="position: absolute; margin-left: -9px; padding: 8px 0; height: 100%;"/>
-		  <span v-if="!googleLoad">{{ssoLang[this.appLanguage].sign_up_with}} Google</span>
-		<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">
-		<img src="https://cdn.tapni.co/icons/mail.png" style="position: absolute; margin-left: -8px; padding: 12px 0; height: 100%;"/>
-		<span>{{ssoLang[this.appLanguage].sign_up_with}} Email</span>
-	</a>
-
-	<div class="decoration decoration-lines-thin no-bottom"></div>
-
-    <p class="close-text center-text half-top color-black">
-		{{ssoLang[this.appLanguage].terms_by_registering}} <br>
-		<a class="" href="https://tapni.co/policies/terms-of-service">{{ssoLang[this.appLanguage].terms_of_service}}</a> {{ssoLang[this.appLanguage].and}} <a href="https://tapni.co/policies/privacy-policy">{{ssoLang[this.appLanguage].privacy_policy}}</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="/verify">{{ssoLang[this.appLanguage].verify_account}}</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="loginAccountModal">
-	  <a class="forgot center-text pointer small-top">{{ssoLang[this.appLanguage].or}} <br> {{ssoLang[this.appLanguage].sign_in_with_new}}</a>
-	  <div class="clear"></div>
-	</div>
-  </form>
+	</form>
 </template>
 
 <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";
+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],
-  props: {
-  	isModal: {
-  	  type: Boolean,
-	    required: false,
-  	  default: false
-  	},
-  },
-  data () {
-    return {
-      usernameRegister: false,
-      loading: true,
-      submitted: false,
-      formButtonText: 'REGISTER',
-      username: '',
-      email: '',
-      password: '',
-      revealPassword: false,
-	    emailLogin: true,
-      invitationCode: '',
-      referral: ''
-    }
-  },
-  mounted () {
-  	if (!this.isModal) {
-	  if (this.isLoggedIn) {
-	  	this.$router.push(this.home)
-	  } else if (!this.$route.query.state && !this.$route.query.oauth && !this.$route.params.oauth) {
-	  	EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
-	  }
-
-	  this.invitationCode = this.$route.query.ic || ''
-
-	  // Username Registration for Link-In-Bio
-	  if (this.$route.query.username) {
-	  	this.usernameRegister = true
-		  this.emailLogin = true
-	  	this.username = this.$route.query.username
-	  }
-
-	  // Track Referrals from Query or Local Storage
-	  if (this.$route.query.ref) {
-		  this.referral = this.$route.query.ref
-	  } else if (this.$storex.referral) {
-	  	this.referral = this.$storex.referral
-	  }
-	}
-  },
-  methods: {
-    async submit() {
-      if (this.password.length < 8) return this.errorSnack(this.ssoLang[this.appLanguage].password_8_chars);
-      if (this.password.search(/[a-z]/) < 0) return this.errorSnack(this.ssoLang[this.appLanguage].password_least_one_lowercase);
-      if (this.password.search(/[A-Z]/) < 0) return this.errorSnack(this.ssoLang[this.appLanguage].password_least_one_uppercase);
-      if (this.password.search(/[0-9]/) < 0) return this.errorSnack(this.ssoLang[this.appLanguage].password_least_one_number);
-
-      if (this.submitted) return
-      this.submitted = true
-
-      this.email = this.email.trim()
-      this.username = this.username.trim()
-
-      let data = {
-		    response_type: this.response_type,
-        email: this.email,
-        username: this.username,
-        password: this.password,
-        ic: this.invitationCode,
-        captchaToken: await this.getCaptchaToken('account_verify'),
-		    ref: this.referral
-      };
-
-      let response = await this.register(data);
-	    this.submitted = false
-	    if (response.data && response.data.success) {
-	      if (response.data.message === 'SUCCESS_REGISTER') {
-	      	if (this.isModal) EventBus.$emit('ssoEvent', {name: 'toggleAddAccountModalVerify', data: false})
-	      	else this.$router.push('/verify')
-	        this.successSnack(this.ssoLang[this.appLanguage].register_success);
-	        this.formButtonText = this.ssoLang[this.appLanguage].check_your_inbox
-	      } else if (response.data.message === 'SUCCESS_LOGIN') {
-			  if (this.display !== 'popup') {
-				  await this.loginSetup({ ...response, isModal: data.isModal });
-				  await this.getLoggedInAccounts();
-			  }
-
-			  await this.loginSuccess({ ...response, isModal: data.isModal });
-		  }
-      }
-    },
-	close () {
-		EventBus.$emit('ssoEvent', {name: 'toggleAddAccountModal', data: true})
+	name: 'AuthRegister',
+	mixins: [GoogleMixin, FacebookMixin, AppleMixin, MicrosoftMixin, AuthMixin],
+	props: {
+		isModal: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	data() {
+		return {
+			usernameRegister: false,
+			loading: true,
+			submitted: false,
+			formButtonText: 'REGISTER',
+			username: '',
+			email: '',
+			password: '',
+			revealPassword: false,
+			emailLogin: true,
+			invitationCode: '',
+			referral: ''
+		};
+	},
+	mounted() {
+		if (!this.isModal) {
+			if (this.isLoggedIn) {
+				this.$router.push(this.home);
+			} else if (!this.$route.query.state && !this.$route.query.oauth && !this.$route.params.oauth) {
+				EventBus.$emit('ssoEvent', { name: 'setLoading', data: false });
+			}
+
+			this.invitationCode = this.$route.query.ic || '';
+
+			// Username Registration for Link-In-Bio
+			if (this.$route.query.username) {
+				this.usernameRegister = true;
+				this.emailLogin = true;
+				this.username = this.$route.query.username;
+			}
+
+			// Track Referrals from Query or Local Storage
+			if (this.$route.query.ref) {
+				this.referral = this.$route.query.ref;
+			} else if (this.$storex.referral) {
+				this.referral = this.$storex.referral;
+			}
+		}
+	},
+	methods: {
+		async submit() {
+			if (this.password.length < 8) return this.errorSnack(this.ssoLang[this.appLanguage].password_8_chars);
+			if (this.password.search(/[a-z]/) < 0) return this.errorSnack(this.ssoLang[this.appLanguage].password_least_one_lowercase);
+			if (this.password.search(/[A-Z]/) < 0) return this.errorSnack(this.ssoLang[this.appLanguage].password_least_one_uppercase);
+			if (this.password.search(/[0-9]/) < 0) return this.errorSnack(this.ssoLang[this.appLanguage].password_least_one_number);
+
+			if (this.submitted) return;
+			this.submitted = true;
+
+			this.email = this.email.trim();
+			this.username = this.username.trim();
+
+			let data = {
+				response_type: this.response_type,
+				email: this.email,
+				username: this.username,
+				password: this.password,
+				ic: this.invitationCode,
+				captchaToken: await this.getCaptchaToken('account_verify'),
+				ref: this.referral
+			};
+
+			let response = await this.register(data);
+			this.submitted = false;
+			if (response.data && response.data.success) {
+				if (response.data.message === 'SUCCESS_REGISTER') {
+					if (this.isModal) EventBus.$emit('ssoEvent', { name: 'toggleAddAccountModalVerify', data: false });
+					else this.$router.push('/verify');
+					this.successSnack(this.ssoLang[this.appLanguage].register_success);
+					this.formButtonText = this.ssoLang[this.appLanguage].check_your_inbox;
+				} else if (response.data.message === 'SUCCESS_LOGIN') {
+					if (this.display !== 'popup') {
+						await this.loginSetup({ ...response, isModal: data.isModal });
+						await this.getLoggedInAccounts();
+					}
+
+					await this.loginSuccess({ ...response, isModal: data.isModal });
+				}
+			}
+		},
+		close() {
+			EventBus.$emit('ssoEvent', { name: 'toggleAddAccountModal', data: true });
+		},
+		loginAccountModal() {
+			EventBus.$emit('ssoEvent', { name: 'toggleAddAccountModalLogin', data: false });
+		}
 	},
-	loginAccountModal () {
-		EventBus.$emit('ssoEvent', {name: 'toggleAddAccountModalLogin', data: false})
+	watch: {
+		email(nv) {
+			this.$storex.verifyEmail = nv;
+		},
+		referral(nv) {
+			this.$storex.referral = nv;
+		}
 	}
-  },
-  watch: {
-    email(nv) { this.$storex.verifyEmail = nv },
-    referral(nv) { this.$storex.referral = nv }
-  }
-}
+};
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>