@tapni/auth 0.0.2 → 0.0.4

package/src/views/Reset.vue

@@ -0,0 +1,155 @@
+<template>
+  <form v-if="!passwordChange" class="page-login content-boxed content-boxed-padding" @submit.prevent="resetEmail" autocomplete="on">
+    <h3 class="bold no-bottom center-text" style="margin-top: 63px;">{{ssoLang[this.appLang].reset_password}}</h3>
+    <p class="half-bottom small-top center-text color-black"></p>
+    <div class="page-login-field half-top color-black">
+	  <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.appLang].email" 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.appLang].reset_password}}</span>
+	  <span v-else class="button--loading button__loader"></span>
+	</button>
+    <div class="decoration decoration-lines-thin no-bottom half-top"></div>
+	<p class="close-text center-text half-top color-black">
+	  <span v-html="ssoLang[this.appLang].reset_password_p1"></span><a :href="'mailto:support@tapni.co?subject=' + ssoLang[this.appLang].password_reset_t"> support@tapni.co</a>
+	</p>
+    <div class="decoration decoration-lines-thin no-bottom half-top"></div>
+
+	<div class="page-login-links">
+	  <router-link class="create float-right" to="/verify">{{ssoLang[this.appLang].verify_account}}</router-link>
+	  <router-link class="forgot float-left" to="/login">{{ssoLang[this.appLang].sign_in}}</router-link>
+	  <div class="clear"></div>
+	</div>
+  </form>
+  <form v-else class="page-login content-boxed content-boxed-padding" @submit.prevent="changePw">
+    <h3 class="bold no-bottom center-text" style="margin-top: 63px;">{{ssoLang[this.appLang].password_change}}</h3>
+    <p class="half-bottom small-top center-text color-black">{{ssoLang[this.appLang].password_new}}</p>
+    <div class="page-login-field half-top">
+	  <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.appLang].password" required>
+	  <em @click="revealPassword = !revealPassword">
+		 <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>
+    <div class="page-login-field half-top">
+	  <i style="padding-top: 15px">
+		  <img src="https://cdn.tapni.co/icons/padlock.png" class="responsive-image" style="width: 50%;">
+	  </i>
+      <input v-model="passwordRepeat" :type="revealPassword2 ? 'text' : 'password'" :placeholder="ssoLang[this.appLang].password_repeat" required>
+	  <em @click="revealPassword2 = !revealPassword2">
+		  <img v-show="!revealPassword2" src="https://cdn.tapni.co/icons/reveal-password.png" class="responsive-image password-reveal-icon">
+		  <img v-show="revealPassword2" 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 button-90 button-center uppercase bold full-top">
+      <span v-if="!submitted" class="uppercase">{{ssoLang[this.appLang].password_change}}</span>
+	  <span v-else class="button--loading button__loader"></span>
+	</button>
+
+	<div class="decoration decoration-lines-thin no-bottom half-top"></div>
+	<p class="close-text center-text half-top color-black">
+	  <span v-html="ssoLang[this.appLang].reset_password_p2"></span> <a :href="'mailto:support@tapni.co?subject=' + ssoLang[this.appLang].password_reset_t"> support@tapni.co</a>
+	</p>
+  </form>
+</template>
+
+<script>
+import AuthMixin from "../mixins/auth.mixin";
+import {EventBus} from "../store/event-bus";
+
+export default {
+  name: 'AuthReset',
+  mixins: [AuthMixin],
+  data () {
+    return {
+      loading: true,
+      submitted: false,
+      passwordChange: false,
+      email: '',
+      password: '',
+      passwordRepeat: '',
+      code: '',
+      captcha: '',
+      revealPassword: false,
+      revealPassword2: false,
+    }
+  },
+  mounted () {
+    if (this.storage.verifyEmail) {
+      this.email = this.storage.verifyEmail
+    }
+    if (this.$route.query.c) {
+      this.code = this.$route.query.c;
+      this.passwordChange = true
+    }
+    if (this.$route.query.e) {
+      this.email = this.$route.query.e
+    }
+    EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+  },
+  methods: {
+    async resetEmail() {
+      // if (this.captcha === '') return this.errorHandler({ message: 'Please select recaptcha' });
+
+      if (this.submitted) return
+      this.submitted = true
+
+	    this.email = this.email.trim()
+
+      let data = {
+        email: this.email,
+        captchaToken: await this.getCaptchaToken('password_reset')
+      };
+
+      await this.reset(data)
+      this.submitted = false
+      await this.$router.push('/verify?e=' + this.email + '#reset')
+
+    },
+    async changePw() {
+      // if (this.captcha === '') return this._vm.errorHandler({ message: 'Please select recaptcha' });
+      if (this.code.length !== 6) return this.errorSnack(this.ssoLang[this.appLang].invalid_code);
+      if (this.password !== this.passwordRepeat) return this.errorSnack(this.ssoLang[this.appLang].password_not_match);
+
+      if (this.submitted) return
+      this.submitted = true
+
+      this.email = this.email.trim()
+      this.code = this.code.trim()
+
+      let data = {
+        email: this.email,
+        code: this.code,
+        password: this.password,
+        passwordRepeat: this.passwordRepeat,
+        captchaToken: await this.getCaptchaToken('password_reset')
+      };
+
+      let success = await this.changePassword(data)
+      this.submitted = false
+      if (success === true) {
+        this.$router.push('/login');
+        this.successSnack(this.ssoLang[this.appLang].password_reseted_success);
+      }
+    },
+  },
+  watch: {
+    email(nv) { this.storage.verifyEmail = nv }
+  }
+}
+</script>
+
+<style scoped>
+  #emailInput {
+	  text-align: center;
+	  padding-right: 15%;
+	  font-size: 17px;
+  }
+</style>

package/src/views/Verify.vue

@@ -0,0 +1,170 @@
+<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.appLang].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.appLang].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.appLang].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.appLang].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.appLang].verify_account_p1"></span>
+		<a href="mailto:support@tapni.co?subject=Email Verification"> support@tapni.co</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.appLang].register}}</router-link>
+		<router-link class="forgot float-left" to="/login">{{ssoLang[this.appLang].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.appLang].or}} <br> {{ssoLang[this.appLang].create_new_account}}</a>
+		<div class="clear"></div>
+	</div>
+  </form>
+</template>
+
+<script>
+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.storage.verifyEmail) this.email = this.storage.verifyEmail
+    if (this.$route) this.init()
+  },
+  methods: {
+    init() {
+      if (this.isLoggedIn) {
+        this.$router.push(this.home)
+      } else {
+        if (this.storage.verifyEmail) {
+          this.email = this.storage.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.appLang].invalid_code);
+      }
+
+      this.email = this.email.trim()
+      this.code = this.code.trim()
+
+      let data = {
+        code: this.code,
+        email: this.email,
+        captchaToken: await this.getCaptchaToken('account_verify')
+      }
+
+      if(this.submitted) return false;
+      this.submitted = true
+
+      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.appLang].verify_account_success)
+        }
+        if (this.action === 'verify') {
+          if (this.isModal) {
+            this.email = ''
+            this.code = ''
+            EventBus.$emit('closeModal')
+          }
+          await this.loginSetup(response)
+          this.getLoggedInAccounts()
+          this.storage.verifyEmail = '';
+          this.$router.push('/' + response.data.data.username + '#edit')
+          this.successSnack(this.ssoLang[this.appLang].verify_account_success2)
+        }
+      } else this.submitted = false
+
+    },
+	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
+	},
+    '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 {
+	text-align: center;
+	padding-right: 15%;
+	font-size: 17px;
+  }
+</style>

package/src/views/Welcome.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="page-login content-boxed content-boxed-padding center-text" style="margin-top: -1px; overflow: hidden; border: solid 0px #ffffff;">
+	  <video id="tapniVideo" muted loop playsinline width="350" style="margin: 0 auto; max-width: 100%; margin-top: 63px; overflow: hidden;" :autoplay="isNative">
+      <source src="https://cdn.tapni.co/images/tapni-card-tap-video-white.mp4" type="video/mp4">
+	  </video>
+    <h1 class="bold full-top no-bottom center-text">{{ssoLang[this.appLang].welcome}}</h1>
+    <p class="full-bottom half-top center-text color-black font-16">{{ssoLang[this.appLang].welcome_p1}}</p>
+	<router-link v-if="false" to="/help" class="button-center button button-90 google-button pointer edit-shadow full-top full-bottom">
+	  <span> {{ssoLang[this.appLang].how_it_works}}? </span>
+	</router-link>
+	<div v-if="false" class="decoration decoration-lines-thin full-top"></div>
+	<router-link to="register" exact class="button-center button button-90 google-button bg-tapni-grey pointer">
+	  <span> {{ssoLang[this.appLang].create_account}} </span>
+	</router-link>
+    <!--
+    <button @click="test" class="button-center button button-90 google-button bg-tapni-grey pointer">
+     Test
+    </button>
+    -->
+	<div class="page-login-links center-text">
+	  <router-link to="/login">{{ssoLang[this.appLang].already_registered}}? <b>{{ssoLang[this.appLang].sign_in}}</b></router-link>
+	  <div class="clear"></div>
+	</div>
+    <div v-if=(!this.isNative) style="display: flex; flex-direction: row; justify-content: space-around; width: 90%; margin: 0 auto; margin-top: 40px;" >
+      <a href="https://play.google.com/store/apps/details?id=co.tapni.app" target="_blank"><img src="https://cdn.tapni.co/images/playstore.png" class="app-store-icon pointer" style="width:55px"/></a>
+      <a href="https://apps.apple.com/ag/app/tapni/id1552930233" target="_blank"><img src="https://cdn.tapni.co/images/appstore.png" class="app-store-icon pointer" style="width:55px"/></a>
+      <a href="https://appgallery.huawei.com/#/app/C103931997" target="_blank"><img src="https://cdn.tapni.co/images/appgallery.png" class="app-store-icon pointer" style="width:55px"/></a>
+    </div>
+  </div>
+</template>
+
+<script>
+import AuthMixin from "../mixins/auth.mixin";
+import {EventBus} from "../store/event-bus";
+
+export default {
+  name: 'AuthWelcome',
+  mixins: [AuthMixin],
+  data () {
+    return {
+      loading: true
+    }
+  },
+  async mounted () {
+      // Autoplay video - iOS 12 controls fix
+	  const video = document.getElementById('tapniVideo');
+	  video.play();
+
+    setTimeout(() => {
+      if (this.storage.token) {
+        this.$router.push(this.home)
+      } else {
+        EventBus.$emit('ssoEvent', {name: 'setLoading', data: false})
+      }
+    }, 1500)
+
+    EventBus.$emit('ssoEvent', {name: 'setInitialize', data: true})
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+.app-store-icon {
+  box-shadow: 0px 4px 10px 0px rgb(0 0 0 / 9%);
+  border-radius: 12px;
+}
+</style>