791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
568 lines
16 KiB
Vue
568 lines
16 KiB
Vue
<template>
|
|
<v-form ref="form" v-model="valid" lazy-validation>
|
|
<v-row>
|
|
<v-col>
|
|
<div class="d-flex justify-space-between">
|
|
<h2 class="ml-6 txt--text">
|
|
{{
|
|
localUser.fullName && !isNewUser
|
|
? localUser.fullName
|
|
: $t('user.create')
|
|
}}
|
|
</h2>
|
|
<current-date-time showIcon class="mr-6" />
|
|
</div>
|
|
|
|
<accordion-card :title="$t('user.profile.title') | capitalize">
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black">{{
|
|
$t('user.profile.photo')
|
|
}}</v-subheader>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6">
|
|
<v-avatar
|
|
size="150"
|
|
class="mr-4 secondary has-outline"
|
|
v-if="showDropzone"
|
|
>
|
|
<vue-dropzone
|
|
ref="imgDropZone"
|
|
id="customdropzone"
|
|
:options="dropzoneOptions"
|
|
@vdropzone-complete="afterComplete"
|
|
class="secondary"
|
|
/>
|
|
</v-avatar>
|
|
|
|
<v-badge
|
|
:style="{ cursor: 'pointer' }"
|
|
offset-x="10"
|
|
offset-y="15"
|
|
class="pl-sm-3"
|
|
>
|
|
<template v-slot:badge>
|
|
<v-icon>icon-close</v-icon>
|
|
</template>
|
|
|
|
<v-avatar
|
|
size="150"
|
|
class="primary has-outline"
|
|
@click="showDropzone = true"
|
|
>
|
|
<v-img :src="profilePic || noImage" contain />
|
|
</v-avatar>
|
|
</v-badge>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"></v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black">{{
|
|
$t('general.name')
|
|
}}</v-subheader>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6">
|
|
<v-text-field
|
|
class="pl-sm-3"
|
|
outlined
|
|
type="text"
|
|
required
|
|
v-model="localUser.first_name"
|
|
:rules="firstNameRules"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"></v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black">{{
|
|
$t('general.surname')
|
|
}}</v-subheader>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6">
|
|
<v-text-field
|
|
class="pl-sm-3"
|
|
outlined
|
|
type="text"
|
|
required
|
|
v-model="localUser.last_name"
|
|
:rules="lastNameRules"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"></v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black">{{
|
|
$t('general.email') | capitalize
|
|
}}</v-subheader>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6">
|
|
<v-text-field
|
|
class="pl-sm-3"
|
|
outlined
|
|
v-model="localUser.email"
|
|
:rules="emailRules"
|
|
type="email"
|
|
required
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"></v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black"
|
|
>Nieuw wachtwoord</v-subheader
|
|
>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6">
|
|
<v-text-field
|
|
class="pl-sm-3"
|
|
outlined
|
|
type="password"
|
|
placeholder=" "
|
|
v-model="localUser.password"
|
|
:rules="passwordRules"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"></v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black"
|
|
>Herhaal nieuw wachtwoord
|
|
</v-subheader>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6">
|
|
<v-text-field
|
|
class="pl-sm-3"
|
|
outlined
|
|
type="password"
|
|
placeholder=" "
|
|
v-model="localUser.password_confirmation"
|
|
:rules="
|
|
passwordConfirmationRules.concat(passwordConfirmationRule)
|
|
"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"></v-col>
|
|
</v-row>
|
|
|
|
<v-row v-if="$store.getters.isAdmin">
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black">{{
|
|
$t('general.roles')
|
|
}}</v-subheader>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6">
|
|
<div class="d-flex">
|
|
<v-switch
|
|
inset
|
|
class="toggle pl-sm-3"
|
|
v-model="selected"
|
|
:label="role.name"
|
|
:value="role.id"
|
|
v-for="role in roles"
|
|
:key="role.id"
|
|
/>
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"></v-col>
|
|
</v-row>
|
|
|
|
<v-row v-if="localUser.isMemberEditor">
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-subheader class="txt--text font-weight-black"
|
|
>Leden Editor</v-subheader
|
|
>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6">
|
|
<div>
|
|
<v-icon color="info"> icon-checkmark </v-icon>
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="3"></v-col>
|
|
</v-row>
|
|
</accordion-card>
|
|
|
|
<!-- <accordion-card :title="$t('user.profile.notification')"></accordion-card> -->
|
|
|
|
<v-footer fixed style="z-index: 4" height="90" color="primary">
|
|
<v-btn class="ma-4" text @click="$router.back()">
|
|
<v-icon class="mx-2">icon-arrow-left</v-icon>
|
|
</v-btn>
|
|
<div>
|
|
<v-btn
|
|
class="ma-2 white--text"
|
|
:color="$vuetify.theme.dark ? 'secondary' : 'txt'"
|
|
depressed
|
|
@click="save(true)"
|
|
v-if="canSave"
|
|
rounded
|
|
>{{ $t('general.save') }}</v-btn
|
|
>
|
|
<v-btn
|
|
class="ma-2 white--text"
|
|
color="accent"
|
|
depressed
|
|
@click="save(false)"
|
|
v-if="canSave"
|
|
rounded
|
|
>{{ $t('general.save_and_close') }}</v-btn
|
|
>
|
|
</div>
|
|
|
|
<v-spacer />
|
|
<v-dialog v-model="dialog" persistent max-width="500">
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn class="ma-4" text v-on="on">
|
|
<v-icon class="mx-2">icon-remove</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<v-card>
|
|
<v-card-title class="headline"
|
|
>Do you want to delete {{ localUser.fullName }}</v-card-title
|
|
>
|
|
<v-card-text>
|
|
Once deleted won't be possible to restore his/her data anymore.
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-btn color="info" @click="dialog = false" rounded depressed
|
|
>back</v-btn
|
|
>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="error" @click="deleteUser()" rounded depressed
|
|
>Yes, Delete</v-btn
|
|
>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-footer>
|
|
</v-col>
|
|
</v-row>
|
|
</v-form>
|
|
</template>
|
|
|
|
<script>
|
|
import Util from '@/util'
|
|
import PageHeader from '~/components/UI/PageHeader/PageHeader'
|
|
import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
|
|
import currentDateTime from '@/components/CurrentDateTime/CurrentDateTime'
|
|
import vueDropzone from 'vue2-dropzone'
|
|
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
|
|
|
|
export default {
|
|
layout: `${process.env.CUSTOMER}Admin`,
|
|
// middleware: 'onlySuperAdmins',
|
|
components: {
|
|
PageHeader,
|
|
accordionCard,
|
|
currentDateTime,
|
|
vueDropzone,
|
|
},
|
|
data: () => ({
|
|
valid: true,
|
|
name: '',
|
|
dialog: false,
|
|
roles: [],
|
|
selected: [],
|
|
downloadedUser: {},
|
|
localUser: {},
|
|
loading: false,
|
|
showDropzone: false,
|
|
dropzoneOptions: {
|
|
url: 'https://httpbin.org/post',
|
|
maxFilesize: 1.2, // MB
|
|
maxFiles: 1,
|
|
thumbnailWidth: 150,
|
|
thumbnailHeight: 150,
|
|
addRemoveLinks: true,
|
|
acceptedFiles: '.jpg, .jpeg, .png',
|
|
dictDefaultMessage: `<span class="txt--text">Upload afbeelding</span>`,
|
|
},
|
|
images: [],
|
|
img: {
|
|
name: '',
|
|
url: '',
|
|
file: null,
|
|
},
|
|
firstNameRules: [
|
|
(v) => !!v || 'First name is required',
|
|
(v) => (v && v.length <= 30) || 'Name must be less than 30 characters',
|
|
],
|
|
lastNameRules: [
|
|
(v) => !!v || 'Last name is required',
|
|
(v) => (v && v.length <= 30) || 'Name must be less than 30 characters',
|
|
],
|
|
emailRules: [
|
|
(v) => !!v || 'E-mail is required',
|
|
(v) =>
|
|
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
|
|
v
|
|
) || 'Invalid Email',
|
|
],
|
|
passwordRules: [
|
|
(v) => !v || v.length <= 30 || 'password can be max 30 characters',
|
|
(v) =>
|
|
!v || v.length >= 8 || 'Het wachtwoord moet minimaal 8 tekens bevatten',
|
|
],
|
|
passwordConfirmationRules: [
|
|
(v) =>
|
|
!v ||
|
|
v.length <= 30 ||
|
|
'password confirmation can be max 30 characters',
|
|
(v) =>
|
|
!v ||
|
|
v.length >= 8 ||
|
|
'Het bevestigingswachtwoord moet minimaal 8 tekens bevatten',
|
|
// (v) => (v && v === this.localUser.password) || `password and password confirmation don't match`,
|
|
],
|
|
}),
|
|
|
|
computed: {
|
|
userSlug() {
|
|
return this.$route.params.user
|
|
},
|
|
isUserLoggedProfilePage() {
|
|
return +this.userSlug === +this.$auth.user.id
|
|
},
|
|
isNewUser() {
|
|
return this.userSlug.toLowerCase() === 'new'
|
|
},
|
|
userDownloaded() {
|
|
return Object.keys(this.downloadedUser).length > 0
|
|
},
|
|
isSlugNumber() {
|
|
return !isNaN(this.userSlug)
|
|
},
|
|
isValidSlug() {
|
|
return this.isNewUser || this.isSlugNumber
|
|
},
|
|
remoteRolesIds() {
|
|
return this.downloadedUser.roles.map(({ id }) => id)
|
|
},
|
|
hasRolesChanges() {
|
|
return !Util.arraysMatch(this.selected, this.remoteRolesIds)
|
|
},
|
|
userHasChanges() {
|
|
return (
|
|
!Util.areEqualInputs(this.downloadedUser, this.localUser) ||
|
|
this.hasRolesChanges ||
|
|
this.img.url
|
|
)
|
|
},
|
|
passwordConfirmationRule() {
|
|
return () =>
|
|
this.localUser.password === this.localUser.password_confirmation ||
|
|
'Password must match'
|
|
},
|
|
profilePic() {
|
|
if (this.img.url) return this.img.url
|
|
if (this.localUser.image) return this.localUser.image.full
|
|
return null
|
|
},
|
|
noImage() {
|
|
return require(`@/assets/img/no_image.png`)
|
|
},
|
|
canSave() {
|
|
if (this.isNewUser) return true
|
|
return (
|
|
this.isSlugNumber &&
|
|
this.userDownloaded &&
|
|
this.userHasChanges &&
|
|
this.valid
|
|
)
|
|
},
|
|
},
|
|
async asyncData({ $axios, store, $auth, params }) {
|
|
// If a normal user tries to edit another profile, gets disconnected
|
|
if (!store.getters.isSuperAdmin) {
|
|
if (+params.user !== +store.getters.loggedInUser.id) {
|
|
$auth.logout()
|
|
}
|
|
}
|
|
|
|
const response = await $axios.get('/roles')
|
|
return { roles: response.data }
|
|
},
|
|
mounted() {
|
|
if (!this.isValidSlug) this.$router.push('/')
|
|
if (this.isNewUser) return
|
|
if (this.isSlugNumber) this.getUser(this.userSlug)
|
|
},
|
|
methods: {
|
|
validate() {
|
|
this.$refs.form.validate()
|
|
},
|
|
reset() {
|
|
this.$refs.form.reset()
|
|
},
|
|
resetValidation() {
|
|
this.$refs.form.resetValidation()
|
|
},
|
|
|
|
async getUser(userId) {
|
|
if (!this.isSlugNumber) return
|
|
|
|
try {
|
|
const response = await this.$axios.get(`/admin/users/${userId}`)
|
|
|
|
this.downloadedUser = response.data
|
|
this.localUser = { ...response.data }
|
|
this.selected = response.data.roles.map(({ id }) => id)
|
|
} catch (error) {
|
|
console.log('TCL: getUser -> error', error)
|
|
}
|
|
},
|
|
|
|
async save(stay = false) {
|
|
const formData = new FormData()
|
|
|
|
if (!this.isNewUser) formData.append('id', this.downloadedUser.id)
|
|
formData.append('first_name', this.localUser.first_name)
|
|
formData.append('last_name', this.localUser.last_name)
|
|
formData.append('email', this.localUser.email)
|
|
|
|
if (this.localUser.password) {
|
|
formData.append('password', this.localUser.password)
|
|
}
|
|
if (this.localUser.password_confirmation) {
|
|
formData.append(
|
|
'password_confirmation',
|
|
this.localUser.password_confirmation
|
|
)
|
|
}
|
|
|
|
if (this.selected.length > 0) {
|
|
for (let i = 0; i < this.selected.length; i++) {
|
|
formData.append('roles[]', this.selected[i])
|
|
}
|
|
}
|
|
|
|
if (this.img.file) formData.append('image', this.img.file)
|
|
else formData.delete('image')
|
|
|
|
try {
|
|
// console.log([...formData])
|
|
const response = await this.$axios.post('/admin/users', formData)
|
|
|
|
const user = response.data
|
|
|
|
this.downloadedUser = response.data
|
|
this.localUser = { ...response.data }
|
|
|
|
this.img.name = ''
|
|
this.img.url = ''
|
|
this.img.file = null
|
|
|
|
// If i'm editing myself, update mydata
|
|
if (user.id === this.$auth.user.id) {
|
|
this.$auth.setUser(user)
|
|
}
|
|
|
|
this.$notifier.showMessage({
|
|
content: `User updated`,
|
|
color: 'success',
|
|
icon: 'icon-checkmark',
|
|
})
|
|
|
|
if (!stay) this.$router.push('/manager/accounts')
|
|
} catch (error) {
|
|
this.$notifier.showMessage({
|
|
content:
|
|
`${
|
|
this.$route.params.user.toLowerCase() === 'new'
|
|
? 'Creating'
|
|
: 'Editing'
|
|
} user: ` + error.message,
|
|
color: 'error',
|
|
icon: 'icon-message',
|
|
})
|
|
}
|
|
},
|
|
|
|
async deleteUser(userId = this.downloadedUser.id) {
|
|
if (!userId) {
|
|
this.$notifier.showMessage({
|
|
content: `No User to delete selected`,
|
|
color: 'error',
|
|
icon: 'icon-message',
|
|
})
|
|
return
|
|
}
|
|
|
|
try {
|
|
const response = await this.$axios.delete(`/manager/accounts/${userId}`)
|
|
|
|
this.$notifier.showMessage({
|
|
content: `User deleted`,
|
|
color: 'success',
|
|
icon: 'mdi-delete',
|
|
})
|
|
this.$router.push('/manager/accounts')
|
|
} catch (error) {
|
|
this.$notifier.showMessage({
|
|
content: `Error deleting user: ${error}`,
|
|
color: 'error',
|
|
icon: 'icon-message',
|
|
})
|
|
}
|
|
},
|
|
|
|
async afterComplete(upload) {
|
|
const file = upload
|
|
|
|
if (file === undefined) return
|
|
if (file.name.lastIndexOf('.') <= 0) return
|
|
|
|
if (file.size > 2000000) {
|
|
this.$notifier.showMessage({
|
|
content: `Exceeded Max filesize`,
|
|
color: 'error',
|
|
icon: 'mdi-alert-circle',
|
|
})
|
|
this.img.file = null
|
|
return
|
|
}
|
|
|
|
this.isLoading = true
|
|
|
|
try {
|
|
const fr = new FileReader()
|
|
fr.readAsDataURL(file)
|
|
fr.addEventListener('load', () => {
|
|
this.img.name = file.name
|
|
this.img.url = fr.result
|
|
this.img.file = file // Image file ready to be sent to server
|
|
})
|
|
|
|
this.loading = false
|
|
this.$refs.imgDropZone.removeFile(upload)
|
|
this.showDropzone = false
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.has-outline {
|
|
box-shadow: 0 0 0 3px #eef7f9;
|
|
}
|
|
.v-badge .v-badge_wrapper .v-badge__badge {
|
|
background-color: var(--v-primary-base) !important;
|
|
}
|
|
.icon-close {
|
|
color: var(--v-tertiary-base) !important;
|
|
}
|
|
.v-text-field .v-input__control {
|
|
padding-left: 14px !important;
|
|
}
|
|
</style> |