mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
user management v1.6-alpha.1
This commit is contained in:
carodej
122
resources/js/views/Admin/Users/UserTabs/UserDelete.vue
Normal file
122
resources/js/views/Admin/Users/UserTabs/UserDelete.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="page-tab">
|
||||
|
||||
<!--Change role-->
|
||||
<div class="page-tab-group">
|
||||
<SetupBox
|
||||
theme="danger"
|
||||
:title="$t('user_box_delete.title')"
|
||||
:description="$t('user_box_delete.description')"
|
||||
>
|
||||
<ValidationObserver ref="deleteUser" @submit.prevent="deleteUser" v-slot="{ invalid }" tag="form"
|
||||
class="form block-form">
|
||||
<ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive"
|
||||
name="User name" :rules="'required|is:' + user.attributes.name">
|
||||
<label>{{ $t('admin_page_user.label_delete_user', {user: user.attributes.name}) }}:</label>
|
||||
<div class="single-line-form">
|
||||
<input v-model="userName"
|
||||
:placeholder="$t('admin_page_user.placeholder_delete_user')"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
|
||||
button-style="danger" class="submit-button">
|
||||
{{ $t('admin_page_user.delete_user') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</SetupBox>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import SetupBox from '@/components/Others/Forms/SetupBox'
|
||||
import {required, is} from 'vee-validate/dist/rules'
|
||||
import {events} from "@/bus"
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'UserDelete',
|
||||
props: [
|
||||
'user'
|
||||
],
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
ButtonBase,
|
||||
SetupBox,
|
||||
required,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isSendingRequest: false,
|
||||
isLoading: false,
|
||||
userName: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async deleteUser() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.deleteUser.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
this.isSendingRequest = true
|
||||
|
||||
axios
|
||||
.delete(this.$store.getters.api + '/users/' + this.$route.params.id + '/delete',
|
||||
{
|
||||
data: {
|
||||
name: this.userName
|
||||
}
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
this.isSendingRequest = false
|
||||
|
||||
// Show error message
|
||||
events.$emit('success:open', {
|
||||
emoji: '👍',
|
||||
title: this.$t('popup_deleted_user.title'),
|
||||
message: this.$t('popup_deleted_user.message'),
|
||||
})
|
||||
|
||||
this.$router.push({name: 'Users'})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.page-tab {
|
||||
|
||||
.page-tab-group {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
165
resources/js/views/Admin/Users/UserTabs/UserDetail.vue
Normal file
165
resources/js/views/Admin/Users/UserTabs/UserDetail.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="page-tab">
|
||||
|
||||
<!--Change role-->
|
||||
<div class="page-tab-group">
|
||||
<SetupBox
|
||||
theme="base"
|
||||
:title="$t('user_box_role.title')"
|
||||
:description="$t('user_box_role.description')"
|
||||
>
|
||||
<ValidationObserver ref="changeRole" @submit.prevent="changeRole" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Role" rules="required">
|
||||
<label>{{ $t('admin_page_user.select_role') }}:</label>
|
||||
<div class="single-line-form">
|
||||
<SelectInput v-model="userRole" :options="roles" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
|
||||
{{ $t('admin_page_user.save_role') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</SetupBox>
|
||||
</div>
|
||||
|
||||
<!--Personal Information-->
|
||||
<div class="page-tab-group">
|
||||
<ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
|
||||
<b class="form-group-label">{{ $t('admin_page_user.label_person_info') }}</b>
|
||||
<div class="wrapper-inline">
|
||||
|
||||
<!--Email-->
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_email') }}</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.attributes.email" :placeholder="$t('page_registration.placeholder_email')" type="email" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_name') }}</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
|
||||
v-slot="{ errors }">
|
||||
<input :value="user.attributes.name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import StorageItemDetail from '@/components/Others/StorageItemDetail'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import SetupBox from '@/components/Others/Forms/SetupBox'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {events} from "@/bus"
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'UserDetail',
|
||||
props: [
|
||||
'user'
|
||||
],
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
StorageItemDetail,
|
||||
SelectInput,
|
||||
ButtonBase,
|
||||
SetupBox,
|
||||
required,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSendingRequest: false,
|
||||
roles: [
|
||||
{
|
||||
label: this.$t('roles.admin'),
|
||||
value: 'admin',
|
||||
},
|
||||
{
|
||||
label: this.$t('roles.user'),
|
||||
value: 'user',
|
||||
},
|
||||
],
|
||||
userRole: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async changeRole() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.changeRole.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
this.isSendingRequest = true
|
||||
|
||||
// Send request to get user reset link
|
||||
axios
|
||||
.patch(this.$store.getters.api + '/users/' + this.$route.params.id + '/role', {
|
||||
attributes: {
|
||||
role: this.userRole,
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
|
||||
// Reset errors
|
||||
this.$refs.changeRole.reset()
|
||||
|
||||
this.isSendingRequest = false
|
||||
|
||||
this.$emit('reload-user')
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('toaster.changed_user'),
|
||||
})
|
||||
})
|
||||
.catch(error => {
|
||||
this.isSendingRequest = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.page-tab {
|
||||
|
||||
.page-tab-group {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
90
resources/js/views/Admin/Users/UserTabs/UserPassword.vue
Normal file
90
resources/js/views/Admin/Users/UserTabs/UserPassword.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="page-tab">
|
||||
|
||||
<!--Change role-->
|
||||
<div class="page-tab-group">
|
||||
<SetupBox
|
||||
theme="base"
|
||||
:title="$t('user_box_password.title')"
|
||||
:description="$t('user_box_password.description')"
|
||||
>
|
||||
<ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest"
|
||||
:disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
|
||||
{{ $t('admin_page_user.send_password_link') }}
|
||||
</ButtonBase>
|
||||
</SetupBox>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import SetupBox from '@/components/Others/Forms/SetupBox'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {events} from "@/bus"
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'UserPassword',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
ButtonBase,
|
||||
SetupBox,
|
||||
required,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSendingRequest: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
requestPasswordResetEmail() {
|
||||
|
||||
this.isSendingRequest = true
|
||||
|
||||
axios
|
||||
.post(this.$store.getters.api + '/users/' + this.$route.params.id + '/send-password-email',
|
||||
{}
|
||||
)
|
||||
.then(() => {
|
||||
this.isSendingRequest = false
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('toaster.sended_password'),
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.page-tab {
|
||||
|
||||
.page-tab-group {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
150
resources/js/views/Admin/Users/UserTabs/UserStorage.vue
Normal file
150
resources/js/views/Admin/Users/UserTabs/UserStorage.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="page-tab" v-if="storage">
|
||||
|
||||
<!--Change role-->
|
||||
<div class="page-tab-group">
|
||||
<StorageItemDetail
|
||||
type="disk"
|
||||
:title="$t('storage.total_used', {used: storage.attributes.used})"
|
||||
:percentage="storage.attributes.percentage"
|
||||
:used="$t('storage.total_capacity', {capacity: storage.attributes.capacity})"
|
||||
/>
|
||||
<SetupBox
|
||||
theme="base"
|
||||
:title="$t('user_box_storage.title')"
|
||||
:description="$t('user_box_storage.description')"
|
||||
>
|
||||
<ValidationObserver ref="changeStorageCapacity" @submit.prevent="changeStorageCapacity" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
|
||||
<ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
|
||||
<label>{{ $t('admin_page_user.label_change_capacity') }}:</label>
|
||||
<div class="single-line-form">
|
||||
<input v-model="capacity"
|
||||
:placeholder="$t('admin_page_user.label_change_capacity')"
|
||||
type="number"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
|
||||
{{ $t('admin_page_user.change_capacity') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</SetupBox>
|
||||
</div>
|
||||
|
||||
<div class="page-tab-group">
|
||||
<b class="form-group-label">{{ $t('storage.sec_details') }}</b>
|
||||
<StorageItemDetail type="images" :title="$t('storage.images')" :percentage="storage.meta.images.percentage" :used="storage.meta.images.used" />
|
||||
<StorageItemDetail type="videos" :title="$t('storage.videos')" :percentage="storage.meta.videos.percentage" :used="storage.meta.videos.used" />
|
||||
<StorageItemDetail type="audios" :title="$t('storage.audios')" :percentage="storage.meta.audios.percentage" :used="storage.meta.audios.used" />
|
||||
<StorageItemDetail type="documents" :title="$t('storage.documents')" :percentage="storage.meta.documents.percentage" :used="storage.meta.documents.used" />
|
||||
<StorageItemDetail type="others" :title="$t('storage.others')" :percentage="storage.meta.others.percentage" :used="storage.meta.others.used" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import StorageItemDetail from '@/components/Others/StorageItemDetail'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import SetupBox from '@/components/Others/Forms/SetupBox'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {events} from "@/bus"
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'UserStorage',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
StorageItemDetail,
|
||||
ButtonBase,
|
||||
SetupBox,
|
||||
required,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
isSendingRequest: false,
|
||||
capacity: undefined,
|
||||
storage: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async changeStorageCapacity() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.changeStorageCapacity.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
this.isSendingRequest = true
|
||||
|
||||
// Send request to get user reset link
|
||||
axios
|
||||
.patch(this.$store.getters.api + '/users/' + this.$route.params.id + '/capacity', {
|
||||
attributes: {
|
||||
storage_capacity: this.capacity
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
|
||||
// Reset errors
|
||||
this.$refs.changeStorageCapacity.reset()
|
||||
|
||||
this.isSendingRequest = false
|
||||
|
||||
this.getStorageDetails()
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('toaster.changed_capacity'),
|
||||
})
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
this.isSendingRequest = false
|
||||
})
|
||||
},
|
||||
getStorageDetails() {
|
||||
axios.get('/api/users/' + this.$route.params.id + '/storage')
|
||||
.then(response => {
|
||||
this.storage = response.data.data
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getStorageDetails()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.page-tab {
|
||||
|
||||
.page-tab-group {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user