cief/exchange-2.0
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git synced 2026-08-19 04:23:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: front-end forget password component and blade update.

Browse Source
This commit is contained in:
weichien
2021-05-23 15:27:04 +08:00
parent a51d1dce38
commit 0886d922a5
3 changed files with 53 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/vue/components/accounts/forms/ForgetPasswordFormComponent.vue
+29 -14
View File
@@ -6,27 +6,41 @@
<small class="bold fs-10 text-danger">{{error}}</small>
</div>
</div>
<div class="row m-l-0 animate__animated animate__fadeInUpBig">
<div class="col b-t b-b b-grey animate__animated" :class="[{'animate__shake': $v.parameters.email.$error}]" :style="[$v.parameters.email.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
<div class="row m-l-0" v-show="!$store.getters.isShowing('forgetPasswordSuccess')">
<div class="col animate__animated">
<div class="row align-items-center">
<div class="col no-padding bg-white ">
<div class="input-group transparent">
<span class="input-group-addon no-border">
<i class="fa fa-envelope-o fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
</span>
<input v-model="parameters.email" placeholder="Email Address" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">
<validation-error-component :validator="$v.parameters.email" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.email">
<label class="text-primary">Email Address</label>
<div class="controls">
<input type="text" class="form-control fs-12" v-model="parameters.email">
</div>
</validation-wrapper-component>
</div>
</div>
</div>
</div>
<div class="row m-l-0" v-show="$store.getters.isShowing('forgetPasswordSuccess')">
<div class="col animate__animated">
<div class="row align-items-center">
<div class="col no-padding bg-white ">
<div class="row animate__animated animate__fadeInRightBig">
<div class="col">
<small class="muted font-lato all-caps">Your password has been changed successfully</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row m-t-30 align-items-center">
<div class="col-auto animate__animated animate__fadeInLeftBig animate__slower">
<div class="b-t b-b b-r b-grey all-caps muted p-t-15 p-b-15 p-l-30 p-r-20 font-lato pointer fs-12" @click="$store.dispatch('toggleSection', {name: 'forgetPassword', status: false})" style="letter-spacing: 2px;"><i class="fa fa-angle-left" style="padding-right: 18px;"></i>Back to login</div>
<div class="row m-t-5 align-items-center">
<div class="col-auto ml-auto p-r-0" v-show="!$store.getters.isShowing('forgetPasswordSuccess')">
<div class="btn btn-sm p-l-30 p-r-30 btn-primary bold v-align-middle b-rad-none all-caps" @click="submit(route('api.account.authentication.password.forget'), 'post', section, false , false)">Request Reset Link</div>
</div>
<div class="col-auto ml-auto p-r-0 animate__animated animate__fadeInRightBig animate__slow">
<div class="bg-success all-caps text-white p-t-15 p-b-15 p-l-50 p-r-20 bold font-lato pointer fs-12" style="letter-spacing: 4px;" @click="submit(route('api.account.authentication.password.forget'), 'post', section, false , false)">Request Reset Link</div>
<div class="col-auto m-t-15">
<div class="b-t b-b b-r b-grey all-caps muted p-t-15 p-b-15 p-l-30 p-r-20 font-lato pointer fs-12" @click="$store.dispatch('returnToLoginAfterSendResetPasswordLink')" style="letter-spacing: 2px;"><i class="fa fa-angle-left" style="padding-right: 18px;"></i>Back to login</div>
</div>
</div>
</div>
@@ -59,7 +73,8 @@
methods:{
successHandler(){
this.$store.dispatch('toggleSection', {name: 'forgetPasswordSuccess', status: true});
this.$store.dispatch('passwordResetEmail', {email: this.parameters.email})
this.$store.dispatch('passwordResetEmail', {email: this.parameters.email});
this.resetForm();
},
errorHandler(error){
this.error = error.message;
resources/assets/vue/components/accounts/forms/LoginFormComponent.vue
+1 -1
View File
@@ -18,7 +18,7 @@
</validation-wrapper-component>
<div class="row m-t-15 align-items-center justify-content-center">
<div class="col-auto">
<p class="muted fs-11 font-arial m-b-0 pointer">Forgot password?</p>
<p class="muted fs-11 font-arial m-b-0 pointer" @click="$store.dispatch('toggleSection', {name: 'forgetPassword', status: true})">Forgot password?</p>
</div>
<div class="col text-right">
<div class="btn btn-sm p-l-30 p-r-30 btn-primary bold v-align-middle b-rad-none all-caps" @click="submitForm">Sign In</div>
resources/views/pages/accounts/login.blade.php
+23 -1
View File
@@ -5,7 +5,7 @@
<div class="row" key="1">
<div class="col no-padding" v-show="!$store.getters.isShowing('registrationForm')">
<div class="padding-50 bg-white h-100">
<div class="row">
<div class="row" v-show="!$store.getters.isShowing('forgetPassword')">
<div class="col">
<loading-component style="height: 350px;" key="1" color="primary" v-show="$store.getters.isLoading('loginSection')"></loading-component>
<div class="row" v-show="!$store.getters.isLoading('loginSection')">
@@ -27,6 +27,28 @@
</div>
</div>
</div>
<div class="row" v-show="$store.getters.isShowing('forgetPassword')">
<div class="col">
<loading-component style="height: 350px;" key="1" color="primary" v-show="$store.getters.isLoading('forgetPasswordSection')"></loading-component>
<div class="row" v-show="!$store.getters.isLoading('forgetPasswordSection')">
<div class="col">
<div class="row m-b-15">
<div class="col">
<div class="inline v-align-middle">
<div class="font-heading fs-20 all-caps text-primary no-margin lh-28 bold">Forget Password</div>
<p class="no-margin fs-11 muted light">A reset password link will send to your email account.</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<forget-password-form-component section="forgetPasswordSection"></forget-password-form-component>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col p-l-0 p-r-0 p-t-15 p-b-15">