Skip to content

Commit adedbe4

Browse files
akinseyakinsey
committed
refactor: wip port over edit profile modal
1 parent 2b97854 commit adedbe4

File tree

2 files changed

+159
-2
lines changed

2 files changed

+159
-2
lines changed

‎src/components/modals/profile/UpdateProfile.vue‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<template>
2+
<modal :name="$options.name" :show="show" @close="close()" :focusInput="focusInput">
3+
<template v-slot:header>Change Email</template>
4+
5+
<template v-slot:body>
6+
<form v-if="userCopy" action="." class="css-form">
7+
<!-- Profile Fields -->
8+
<div class="fieldgroup-double">
9+
<div class="fieldgroup-section">
10+
<div class="input-section">
11+
<label>Username
12+
<div v-if="userCopy.username.length === 0" class="right">
13+
Username will not be changed
14+
</div>
15+
<div v-if="userCopy.username.length && !usernameUnique" class="invalid right">
16+
Username already taken
17+
</div>
18+
<div v-if="userCopy.username.length && !usernameValid" class="invalid right">
19+
Usernames may only contain A-Z, 0-9, -, _ and .
20+
</div>
21+
</label>
22+
<input type="text" name="username" v-model="userCopy.username" placeholder="Username ( a-z, 0-9, -, _ and . )" maxlength="255" :disabled="!canUpdateUsername()" ref="focusInput" />
23+
</div>
24+
25+
<div class="input-section">
26+
<label for="display-name">Display Name
27+
</label>
28+
<input type="text" id="display-name" placeholder="Name" v-model="userCopy.name" maxlength="255">
29+
</div>
30+
31+
<div class="input-section">
32+
<label for="website">Website
33+
</label>
34+
<input type="text" id="website" placeholder="Website" v-model="userCopy.website">
35+
</div>
36+
37+
<div class="input-section">
38+
<label for="bitcoin-address">Bitcoin Address
39+
</label>
40+
<input type="text" id="bitcoin-address" placeholder="Bitcoin Address" v-model="userCopy.btc_address" maxlength="255">
41+
</div>
42+
</div>
43+
44+
<div class="fieldgroup-section">
45+
<div class="input-section">
46+
<label for="gender">Gender
47+
</label>
48+
<input type="text" id="gender" placeholder="Gender" v-model="userCopy.gender" maxlength="255">
49+
</div>
50+
51+
<div class="input-section">
52+
<label for="dob">Date of Birth
53+
</label>
54+
<input type="date" id="dob" placeholder="YYYY-MM-DD" v-model="userCopy.dob">
55+
</div>
56+
57+
<div class="input-section">
58+
<label for="location">Location
59+
</label>
60+
<input type="text" id="location" placeholder="Location" v-model="userCopy.location" maxlength="255">
61+
</div>
62+
63+
<div class="input-section">
64+
<label for="language">Language
65+
</label>
66+
<input type="text" id="language" placeholder="Language" v-model="userCopy.language" maxlength="255">
67+
</div>
68+
</div>
69+
</div>
70+
71+
<!-- Save Button -->
72+
<div class="modal-actions">
73+
<button @click.prevent="updateProfile()" :disabled="!formValid">
74+
Update Profile
75+
</button>
76+
</div>
77+
<label v-if="errorMessage" class="red centered-text">{{errorMessage}}</label>
78+
</form>
79+
</template>
80+
</modal>
81+
</template>
82+
83+
<script>
84+
import Modal from '@/components/layout/Modal.vue'
85+
import { reactive, toRefs, inject } from 'vue'
86+
import { usersApi } from '@/api'
87+
// import { debounce } from 'lodash'
88+
89+
export default {
90+
name: 'update-profile-modal',
91+
props: ['show', 'user'],
92+
emits: ['close'],
93+
components: { Modal },
94+
setup(props, { emit }) {
95+
/* Internal Methods */
96+
// const checkFormValid = () => v.form.valid = v.form.email.valid && v.form.email.unique && v.form.emailPassword.valid
97+
98+
/* Template Methods */
99+
const updateProfile = () => {
100+
v.errorMessage = null
101+
const params = {
102+
username: props.user.username,
103+
email: v.form.email.val,
104+
email_password: v.form.emailPassword.val
105+
}
106+
usersApi.update(props.user.id, params)
107+
.then(() => $alertStore.success(`Successfully updated email for user ${params.username}`))
108+
.catch(() => v.errorMessage = 'There was an error changing email address, please enure the password is correctly entered.')
109+
.finally(() => v.errorMessage ? null : close())
110+
}
111+
112+
const canUpdateUsername = () => true
113+
114+
const close = () => {
115+
v.errorMessage = null
116+
emit('close')
117+
}
118+
119+
/* Internal Data */
120+
const $alertStore = inject('$alertStore')
121+
122+
/* Template Data */
123+
const v = reactive({
124+
userCopy: props.user,
125+
formValid: false,
126+
usernameUnique: true,
127+
usernameValid: true,
128+
focusInput: null,
129+
usernameRegex: /^[a-zA-Z\d-_.]+$/,
130+
errorMessage: ''
131+
})
132+
133+
/* Watch Data */
134+
// watch(() => v.form.emailPassword.val, val => {
135+
// v.form.emailPassword.valid = val && val.length >= 1 && val.length <= 72
136+
// checkFormValid()
137+
// })
138+
139+
// watch(() => v.form.email.val, debounce(async (val) => {
140+
// v.form.email.valid = val && val.length >= 3 && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)
141+
// // check email unique
142+
// if (val) {
143+
// authApi.emailAvailable(val)
144+
// .then(data => {
145+
// v.form.email.unique = !data.found
146+
// checkFormValid()
147+
// })
148+
// }
149+
// }, 500))
150+
151+
return { ...toRefs(v), canUpdateUsername, updateProfile, close }
152+
}
153+
}
154+
</script>

‎src/views/Profile.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@
116116

117117
<div class="actions-edit actions-panel" v-if="canUpdate() || canUpdatePrivate() || pageOwner() || canPageUserNotes() || canBanUser()">
118118
<div class="profile-action" v-if="canUpdate()">
119-
<a href="#" @click.prevent="openEditProfile()">Edit Profile</a>
119+
<a href="#" @click.prevent="showUpdateProfile = true">Edit Profile</a>
120120
</div>
121121
<div class="profile-action" v-if="canUpdatePrivate()">
122122
<a href="#" @click.prevent="showChangePassword = true">Edit Password</a>
@@ -155,6 +155,7 @@
155155
</div>
156156
</div>
157157

158+
<update-profile-modal v-if="user" :user="user" :show="showUpdateProfile" @close="showUpdateProfile = false" />
158159
<change-email-modal v-if="user" :user="user" :show="showChangeEmail" @close="showChangeEmail = false" />
159160
<change-password-modal v-if="user" :user="user" :show="showChangePassword" @close="showChangePassword = false" />
160161
<deactivate-reactivate-modal v-if="user" :user="user" :deactivate="showDeactivate" :show="showDeactivate || showReactivate" @close="showDeactivate = false; showReactivate = false" @success="refreshUser()" />
@@ -168,13 +169,14 @@ import ChangePasswordModal from '@/components/modals/profile/ChangePassword.vue'
168169
import ChangeEmailModal from '@/components/modals/profile/ChangeEmail.vue'
169170
import DeactivateReactivateModal from '@/components/modals/profile/DeactivateReactivate.vue'
170171
import DeleteAccountModal from '@/components/modals/profile/DeleteAccount.vue'
172+
import UpdateProfileModal from '@/components/modals/profile/UpdateProfile.vue'
171173
import { usersApi } from '@/api'
172174
import { useRouter } from 'vue-router'
173175
174176
export default {
175177
name: 'Profile',
176178
props: [ 'username', 'saveScrollPos' ],
177-
components: { ChangePasswordModal, ChangeEmailModal, DeleteAccountModal, DeactivateReactivateModal },
179+
components: { ChangePasswordModal, ChangeEmailModal, DeleteAccountModal, DeactivateReactivateModal, UpdateProfileModal },
178180
beforeRouteEnter(to, from, next) {
179181
next(vm => usersApi.find(vm.username).then(u => vm.user = u))
180182
},
@@ -210,6 +212,7 @@ export default {
210212
user: null,
211213
defaultAvatar: window.default_avatar,
212214
defaultAvatarShape: window.default_avatar_shape,
215+
showUpdateProfile: false,
213216
showEditAvatar: false,
214217
showEditSignature: false,
215218
showQuickMessage: false,

0 commit comments

Comments
 (0)