change email address ui

This commit is contained in:
edmondlang
2021-08-22 16:16:21 +08:00
parent f2ae778a8e
commit 79e4555218
2 changed files with 49 additions and 1 deletions
@@ -37,7 +37,7 @@
<div class="font-heading fs-11 muted" v-text="$store.getters.getUserEmail"></div>
</div>
<div class="col-auto p-r-0">
<div class="btn btn-xs btn-default bg-master-lighter btn-rounded p-r-20 p-l-15">
<div class="btn btn-xs btn-default bg-master-lighter btn-rounded p-r-20 p-l-15 requestModal" data-type="editEmail">
<i class="fa fa-envelope-open-o m-r-10"></i>Request Email Change
</div>
</div>
@@ -50,6 +50,10 @@
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="resetPassword">
<reset-user-password-form-component :data="{email: $store.getters.getUserEmail}" section="resetPassword"></reset-user-password-form-component>
</modal-component>
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editEmail">
<edit-email-form-component :data="{email: $store.getters.getUserEmail}" section="editEmail"></edit-email-form-component>
</modal-component>
</div>
</template>
@@ -0,0 +1,44 @@
<template>
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="row m-b-10">
<div class="col">
<h3 class="all-caps m-b-5 bold no-margin">Edit Email</h3>
<p>An edit email link will send to your email account</p>
</div>
</div>
<div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
<div class="col">
<small class="bold fs-10 text-danger">{{error}}</small>
</div>
</div>
<div class="row">
<div class="col p-r-5">
<div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" data-dismiss="modal">Cancel</div>
</div>
<div class="col p-l-5">
<div class="btn btn-sm btn-success btn-block b-rad-none" @click="submit(route('api.account.authentication.password.forget', '1'), 'post', section, true, true)">Confirm</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import resetPasswordFormValidation from '../../../general/mixins/accounts/validation/resetPasswordFormValidation';
export default {
data(){
return {
error: '',
parameters: {
email: ''
}
}
},
mixins: [resetPasswordFormValidation]
}
</script>