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
110
111
112
113
<style lang="scss">
</style>
<template>
<modal id="changePassword" :shown="shown" @hide="shown = false">
<h2>Change password</h2>
<form id="accountForm" @submit.prevent="updateAccount()">
<div class="lpFields">
<input v-model="currentPassword" type="password" placeholder="Current Password" name="currentPassword" class="currentPassword">
<hr>
<input v-model="newPassword" type="password" placeholder="New Password" name="newPassword" class="newPassword">
<input v-model="confirmNewPassword" type="password" placeholder="Confirm New Password" name="confirmNewPassword" class="confirmNewPassword">
</div>
<errors :errors="errors" />
<div class="lpButtons">
<button class="lpButton">
Change
<spinner v-if="saving" />
</button>
</div>
</form>
</modal>
</template>
<script>
import errors from './errors.vue';
import modal from './modal.vue';
import spinner from './spinner.vue';
export default {
name: 'changePassword',
components: {
errors,
modal,
spinner,
},
data() {
return {
saving: false,
errors: [],
currentPassword: '',
newPassword: '',
confirmNewPassword: '',
shown: false,
};
},
computed: {
library() {
return this.$store.state.library;
},
},
beforeMount() {
bus.$on('showChangePassword', () => {
this.shown = true;
});
},
methods: {
updateAccount() {
this.errors = [];
if (!this.currentPassword) {
this.errors.push({ field: 'currentPassword', message: 'Please enter your current password.' });
}
if (this.newPassword && this.newPassword != this.confirmNewPassword) {
this.errors.push({ field: 'newPassword', message: "Your passwords don't match." });
}
if (this.newPassword && (this.newPassword.length < 5 || this.newPassword.length > 60)) {
this.errors.push({ field: 'newPassword', message: 'Please enter a password between 5 and 60 characters.' });
}
if (this.errors.length) {
return;
}
const data = { currentPassword: this.currentPassword };
let dirty = false;
if (this.newPassword) {
dirty = true;
data.newPassword = this.newPassword;
}
if (!dirty) return;
this.currentPassword = '';
this.saving = true;
fetchJson('/changePassword', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
credentials: 'same-origin',
body: JSON.stringify(data),
})
.then((response) => {
this.saving = false;
this.shown = false;
})
.catch((err) => {
this.errors = err;
this.saving = false;
});
},
},
};
</script>