Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | <template>
<BModal v-model="show" id="peset-password" title="Change password" centered>
<form ref="form" id="passwords" @submit.stop.prevent="handleSubmit">
<div class="mb-4">
<label class="d-flex mb-2" for="new_password"> New password </label>
<div
class="
d-flex
position-relative
align-items-center
justify-content-end
"
>
<input
id="new_password"
:type="showPassword ? 'text' : 'password'"
class="w-100 pr-4"
placeholder="New password"
v-model="form.password"
/>
<BIconEyeFill
v-if="showPassword"
class="position-absolute mr-2"
v-on:click="showPassword = false"
/>
<BIconEyeSlashFill
v-else
class="position-absolute mr-2"
v-on:click="showPassword = true"
/>
</div>
</div>
<div class="mb-4">
<label class="d-flex mb-2" for="confirm_password"> New password </label>
<div
class="
d-flex
position-relative
align-items-center
justify-content-end
"
>
<input
id="confirm_password"
:type="showPasswordConfirmation ? 'text' : 'password'"
class="w-100 pr-4"
placeholder="Confirm password"
v-model="form.passwordConfirmation"
/>
<BIconEyeFill
v-if="showPasswordConfirmation"
class="position-absolute mr-2"
v-on:click="showPasswordConfirmation = false"
/>
<BIconEyeSlashFill
v-else
class="position-absolute mr-2"
v-on:click="showPasswordConfirmation = true"
/>
</div>
</div>
</form>
<template #modal-footer>
<div class="w-100 d-flex justify-content-end">
<button size="sm" class="btn btn-danger mr-2" v-on:click="show = false">
Cancel
</button>
<button
type="submit"
form="passwords"
size="sm"
class="btn btn-success"
>
Change
</button>
</div>
</template>
</BModal>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: "ChangePasswordModal",
data: () => ({
show: false,
showPassword: false,
showPasswordConfirmation: false,
form: {
password: "",
passwordConfirmation: "",
},
}),
computed: {
...mapGetters({ user: "auth/user" }),
},
methods: {
...mapActions({ changeUserPassword: "auth/changeUserPassword" }),
handleSubmit: async function () {
const { form } = this;
await this.changeUserPassword(form);
},
},
};
</script>
<style scoped>
</style> |