@tapni/auth 1.0.5 → 1.0.6-4.dev

package/src/views/Reset.vue

@@ -1,155 +1,152 @@
 <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.appLanguage].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: 10px; 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>
-    <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].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.appLanguage].reset_password_p1"></span><a :href="'mailto:support@tapni.com?subject=' + ssoLang[this.appLanguage].password_reset_t"> support@tapni.com</a>
-	</p>
-    <div class="decoration decoration-lines-thin no-bottom half-top"></div>
+	<form v-if="!passwordChange" class="page-login content-boxed content-boxed-padding" @submit.prevent="resetEmail" autocomplete="on">
+		<h3 class="bold no-bottom center-text text-[22px]" style="margin-top: 63px">{{ ssoLang[this.appLanguage].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: 10px; 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>
+		<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].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.appLanguage].reset_password_p1"></span><a :href="'mailto:support@tapni.com?subject=' + ssoLang[this.appLanguage].password_reset_t"> support@tapni.com</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.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>
-  </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.appLanguage].password_change}}</h3>
-    <p class="half-bottom small-top center-text color-black">{{ssoLang[this.appLanguage].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.appLanguage].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.appLanguage].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.appLanguage].password_change}}</span>
-	  <span v-else class="button--loading button__loader"></span>
-	</button>
+		<div 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>
+	</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.appLanguage].password_change }}</h3>
+		<p class="half-bottom small-top center-text color-black">{{ ssoLang[this.appLanguage].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.appLanguage].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.appLanguage].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.appLanguage].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.appLanguage].reset_password_p2"></span> <a :href="'mailto:support@tapni.com?subject=' + ssoLang[this.appLanguage].password_reset_t"> support@tapni.com</a>
-	</p>
-  </form>
+		<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.appLanguage].reset_password_p2"></span> <a :href="'mailto:support@tapni.com?subject=' + ssoLang[this.appLanguage].password_reset_t"> support@tapni.com</a></p>
+	</form>
 </template>
 
 <script>
-import AuthMixin from "../mixins/auth.mixin";
-import {EventBus} from "../store/event-bus";
+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.$storex.verifyEmail) {
-      this.email = this.$storex.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' });
+	name: 'AuthReset',
+	mixins: [AuthMixin],
+	data() {
+		return {
+			loading: true,
+			submitted: false,
+			passwordChange: false,
+			email: '',
+			password: '',
+			passwordRepeat: '',
+			code: '',
+			captcha: '',
+			revealPassword: false,
+			revealPassword2: false
+		};
+	},
+	mounted() {
+		if (this.$storex.verifyEmail) {
+			this.email = this.$storex.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
+			if (this.submitted) return;
+			this.submitted = true;
 
-	    this.email = this.email.trim()
+			this.email = this.email.trim();
 
-      let data = {
-        email: this.email,
-        captchaToken: await this.getCaptchaToken('password_reset')
-      };
+			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')
+			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.appLanguage].invalid_code);
+			if (this.password !== this.passwordRepeat) return this.errorSnack(this.ssoLang[this.appLanguage].password_not_match);
 
-    },
-    async changePw() {
-      // 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);
-      if (this.password !== this.passwordRepeat) return this.errorSnack(this.ssoLang[this.appLanguage].password_not_match);
+			if (this.submitted) return;
+			this.submitted = true;
 
-      if (this.submitted) return
-      this.submitted = true
+			this.email = this.email.trim();
+			this.code = this.code.trim();
 
-      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 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.appLanguage].password_reseted_success);
-      }
-    },
-  },
-  watch: {
-    email(nv) { this.$storex.verifyEmail = nv }
-  }
-}
+			let success = await this.changePassword(data);
+			this.submitted = false;
+			if (success === true) {
+				this.$router.push('/login');
+				this.successSnack(this.ssoLang[this.appLanguage].password_reseted_success);
+			}
+		}
+	},
+	watch: {
+		email(nv) {
+			this.$storex.verifyEmail = nv;
+		}
+	}
+};
 </script>
 
 <style scoped>
-  #emailInput {
-	  text-align: center;
-	  padding-right: 15%;
-	  font-size: 17px;
-  }
+#emailInput {
+	text-align: center;
+	padding-right: 15%;
+	font-size: 17px;
+}
 </style>

package/src/views/Security.vue

@@ -7,7 +7,16 @@
         </a>
       <div class="subheaderContainer full-top">
         <!-- Back Button -->
-        <router-link v-if="!isModal" to="/account" class="button gray-button pointer left-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"
@@ -104,8 +113,8 @@
               <img class="transition-icon" :class="{ 'rotate-icon': !!changePassword }" :src="getIcon('arrow-gray-down.svg')" />
             </div>
           </div>
-          <form v-show="changePassword" class="center-text half-top">
-            <form @submit.prevent="submitChangePassword">
+          
+            <form @submit.prevent="submitChangePassword" v-show="changePassword" class="center-text half-top">
               <input type="password" v-model="currentPassword" :placeholder="ssoLang[appLanguage].password_current_p"
                      class="edit-input h-40 lh-40" required minlength="8" style="width: 100%"/>
               <p class="small-text small-top-padding small-bottom">{{ssoLang[appLanguage].password_current}}</p>
@@ -131,9 +140,7 @@
                 <router-link to="/reset" exact class="color-black">{{ssoLang[appLanguage].by_clicking_here}}</router-link>
               </p>
             </form>
-          </form>
-
-
+          
           <!-- Delete Account -->
           <div class="settingRow full-top" @click="accountDelete = !accountDelete">
             <div class="firstRow">
@@ -235,7 +242,6 @@ export default {
       }
     },
     generateOTPQrCode() {
-      console.log('Generating QR code');
       const user = this.account.email;
 
       if (this.account.mfaEnabled) {