users page refactor

This commit is contained in:
Čarodej
2021-11-22 14:50:00 +01:00
parent 054c0eb32c
commit 9cece789a0
7 changed files with 113 additions and 98 deletions
+28 -6
View File
@@ -2,7 +2,7 @@
"/js/main.js": "/js/main.js", "/js/main.js": "/js/main.js",
"/css/app.css": "/css/app.css", "/css/app.css": "/css/app.css",
"/css/tailwind.css": "/css/tailwind.css", "/css/tailwind.css": "/css/tailwind.css",
"/chunks/admin.js": "/chunks/admin.js?id=3d9181c894abbfe33663", "/chunks/admin.js": "/chunks/admin.js?id=502b35ba2ca5eb8b5dcc",
"/chunks/admin-account.js": "/chunks/admin-account.js?id=55f9b983b9aa60c21a62", "/chunks/admin-account.js": "/chunks/admin-account.js?id=55f9b983b9aa60c21a62",
"/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js?id=2d52fc8e939196f7ff16", "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js?id=2d52fc8e939196f7ff16",
"/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js?id=1d731f1c4a9daecb2a99", "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js?id=1d731f1c4a9daecb2a99",
@@ -26,7 +26,7 @@
"/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js?id=3cbb19b80e635b3524e5", "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js?id=3cbb19b80e635b3524e5",
"/chunks/app-others.js": "/chunks/app-others.js?id=388ee5b424fc37d19061", "/chunks/app-others.js": "/chunks/app-others.js?id=388ee5b424fc37d19061",
"/chunks/app-payments.js": "/chunks/app-payments.js?id=af38547bd60f92575c03", "/chunks/app-payments.js": "/chunks/app-payments.js?id=af38547bd60f92575c03",
"/chunks/app-settings.js": "/chunks/app-settings.js?id=a16bef3e89f926038ac6", "/chunks/app-settings.js": "/chunks/app-settings.js?id=abf2e460a1a57f5fc830",
"/chunks/app-setup.js": "/chunks/app-setup.js?id=459d95c0256c819ce4bf", "/chunks/app-setup.js": "/chunks/app-setup.js?id=459d95c0256c819ce4bf",
"/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js": "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js?id=107a78323eef0c1d4c81", "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js": "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js?id=107a78323eef0c1d4c81",
"/chunks/billings-detail.js": "/chunks/billings-detail.js?id=f8562a0dd73fdc9a3f71", "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=f8562a0dd73fdc9a3f71",
@@ -92,15 +92,15 @@
"/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=0b40203411b63118a5eb", "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=0b40203411b63118a5eb",
"/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=8bd237c632018a537d76", "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=8bd237c632018a537d76",
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=7ee9b84ffed9bf544997", "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=7ee9b84ffed9bf544997",
"/chunks/user.js": "/chunks/user.js?id=24100ba3c089f04cbdd6", "/chunks/user.js": "/chunks/user.js?id=5c5421f40243bcba9c23",
"/chunks/user-create.js": "/chunks/user-create.js?id=70a811ada7b123ce9bd7", "/chunks/user-create.js": "/chunks/user-create.js?id=244c7f71f243260e3faa",
"/chunks/user-delete.js": "/chunks/user-delete.js?id=6cee8a74926ea9938322", "/chunks/user-delete.js": "/chunks/user-delete.js?id=6cee8a74926ea9938322",
"/chunks/user-detail.js": "/chunks/user-detail.js?id=5fa6f523e2e2cd327da6", "/chunks/user-detail.js": "/chunks/user-detail.js?id=5fa6f523e2e2cd327da6",
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=a03cdaa3511d88acdd97", "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=a03cdaa3511d88acdd97",
"/chunks/user-password.js": "/chunks/user-password.js?id=bc9388e177e8e8e7601a", "/chunks/user-password.js": "/chunks/user-password.js?id=bc9388e177e8e8e7601a",
"/chunks/user-storage.js": "/chunks/user-storage.js?id=cd9d2e6441a5ce09ee69", "/chunks/user-storage.js": "/chunks/user-storage.js?id=cd9d2e6441a5ce09ee69",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=370b3df08b2ee39bf6ac", "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=370b3df08b2ee39bf6ac",
"/chunks/users.js": "/chunks/users.js?id=6deee497a896c8dc2560", "/chunks/users.js": "/chunks/users.js?id=7f9e6a60ecca4987bf9c",
"/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js?id=ee89932f7ee76e74483e", "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js?id=ee89932f7ee76e74483e",
"/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js?id=8163e0eab55c50f8afb8", "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js?id=8163e0eab55c50f8afb8",
"/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js": "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js?id=37ce1e1ab9968c100712", "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js": "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js?id=37ce1e1ab9968c100712",
@@ -343,5 +343,27 @@
"/chunks/user-password.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/user-password.d7ae8020dd2f8634e23d.hot-update.js", "/chunks/user-password.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/user-password.d7ae8020dd2f8634e23d.hot-update.js",
"/chunks/user-storage.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/user-storage.d7ae8020dd2f8634e23d.hot-update.js", "/chunks/user-storage.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/user-storage.d7ae8020dd2f8634e23d.hot-update.js",
"/js/main.9e048af49ecf3c110fb4.hot-update.js": "/js/main.9e048af49ecf3c110fb4.hot-update.js", "/js/main.9e048af49ecf3c110fb4.hot-update.js": "/js/main.9e048af49ecf3c110fb4.hot-update.js",
"/js/main.322fdb792626c316f23d.hot-update.js": "/js/main.322fdb792626c316f23d.hot-update.js" "/js/main.322fdb792626c316f23d.hot-update.js": "/js/main.322fdb792626c316f23d.hot-update.js",
"/chunks/users.cacf26166a91f7b62cbd.hot-update.js": "/chunks/users.cacf26166a91f7b62cbd.hot-update.js",
"/chunks/users.ac37fa1e01dab2a68cf9.hot-update.js": "/chunks/users.ac37fa1e01dab2a68cf9.hot-update.js",
"/js/main.07c68e100a414dee140d.hot-update.js": "/js/main.07c68e100a414dee140d.hot-update.js",
"/chunks/users.8db909104b8ca88ccf48.hot-update.js": "/chunks/users.8db909104b8ca88ccf48.hot-update.js",
"/chunks/admin.50942813bd4ffb88ca8e.hot-update.js": "/chunks/admin.50942813bd4ffb88ca8e.hot-update.js",
"/chunks/app-settings.fbd655a0e6cdb58ef877.hot-update.js": "/chunks/app-settings.fbd655a0e6cdb58ef877.hot-update.js",
"/chunks/users.181bb5074ed83ae94603.hot-update.js": "/chunks/users.181bb5074ed83ae94603.hot-update.js",
"/chunks/users.d4971287867035574c8a.hot-update.js": "/chunks/users.d4971287867035574c8a.hot-update.js",
"/chunks/user-create.120e9e7fdee3ed97c783.hot-update.js": "/chunks/user-create.120e9e7fdee3ed97c783.hot-update.js",
"/chunks/user-create.3438c1a6a347cd2860d9.hot-update.js": "/chunks/user-create.3438c1a6a347cd2860d9.hot-update.js",
"/chunks/user-create.bc094f70de66ae88262d.hot-update.js": "/chunks/user-create.bc094f70de66ae88262d.hot-update.js",
"/chunks/admin.2bf0d9aaaf2d445552f8.hot-update.js": "/chunks/admin.2bf0d9aaaf2d445552f8.hot-update.js",
"/chunks/admin.e3f93e98b72fc99f120f.hot-update.js": "/chunks/admin.e3f93e98b72fc99f120f.hot-update.js",
"/chunks/users.f6624a5e815e84a0066d.hot-update.js": "/chunks/users.f6624a5e815e84a0066d.hot-update.js",
"/chunks/users.58d748d81ee78ffd36a5.hot-update.js": "/chunks/users.58d748d81ee78ffd36a5.hot-update.js",
"/chunks/admin.da1f2604496245556105.hot-update.js": "/chunks/admin.da1f2604496245556105.hot-update.js",
"/chunks/app-settings.a9982ca0ef6346bf5e6c.hot-update.js": "/chunks/app-settings.a9982ca0ef6346bf5e6c.hot-update.js",
"/chunks/user.670bcfd397842d38a6ed.hot-update.js": "/chunks/user.670bcfd397842d38a6ed.hot-update.js",
"/chunks/user.ffd5f50d66b11993c3c7.hot-update.js": "/chunks/user.ffd5f50d66b11993c3c7.hot-update.js",
"/chunks/user.d6aa43992d355ce3470b.hot-update.js": "/chunks/user.d6aa43992d355ce3470b.hot-update.js",
"/chunks/user.4efb9f76cee2f5abb951.hot-update.js": "/chunks/user.4efb9f76cee2f5abb951.hot-update.js",
"/chunks/user.3b58dc9287c1c1384bb4.hot-update.js": "/chunks/user.3b58dc9287c1c1384bb4.hot-update.js"
} }
+1 -1
View File
@@ -139,7 +139,7 @@ export default {
} }
.input-dark { .input-dark {
@apply w-full bg-light-background py-3 px-4.5 rounded-lg appearance-none border-transparent text-base font-bold border @apply w-full bg-light-background py-3 px-5 rounded-lg appearance-none border-transparent text-base font-bold border
} }
[v-cloak], [v-cloak],
+1 -1
View File
@@ -87,7 +87,7 @@
</ContentGroup> </ContentGroup>
</ContentSidebar> </ContentSidebar>
<router-view/> <router-view class="pr-6 w-full overflow-x-hidden relative lg:pt-6 pt-4" style="background: rgba(244, 245, 246, 0.6)" />
</div> </div>
</template> </template>
@@ -1,7 +1,7 @@
<template> <template>
<div class="pr-6 w-full overflow-x-hidden relative" style="background: rgba(244, 245, 246, 0.6)"> <div>
<!--Page Tab links--> <!--Page Tab links-->
<div class="card shadow-card py-0 lg:mt-6 mt-4 sticky top-0 z-10"> <div class="card shadow-card py-0 sticky top-0 z-10">
<router-link <router-link
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme" class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
:class="{'text-theme': $router.currentRoute.name === page.route, 'text-gray-600': $router.currentRoute.name !== page.route}" :class="{'text-theme': $router.currentRoute.name === page.route, 'text-gray-600': $router.currentRoute.name !== page.route}"
+10 -7
View File
@@ -1,7 +1,15 @@
<template> <template>
<div class="pr-6 w-full overflow-x-hidden relative" style="background: rgba(244, 245, 246, 0.6)"> <div>
<div class="card shadow-card">
<div class="mb-6">
<router-link :to="{name: 'UserCreate'}">
<MobileActionButton icon="user-plus">
{{ $t('admin_page_user.create_user.submit') }}
</MobileActionButton>
</router-link>
</div>
<div class="card shadow-card lg:mt-6 mt-4">
<!--Datatable--> <!--Datatable-->
<DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="table table-users"> <DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="table table-users">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
@@ -71,11 +79,6 @@
&lt;!&ndash;Table tools&ndash;&gt; &lt;!&ndash;Table tools&ndash;&gt;
<div class="table-tools"> <div class="table-tools">
<div class="buttons"> <div class="buttons">
<router-link :to="{name: 'UserCreate'}">
<MobileActionButton icon="user-plus">
{{ $t('admin_page_user.create_user.submit') }}
</MobileActionButton>
</router-link>
</div> </div>
</div> </div>
+2 -3
View File
@@ -1,9 +1,8 @@
<template> <template>
<div class="pr-6 w-full overflow-x-hidden relative" style="background: rgba(244, 245, 246, 0.6)"> <div>
<div id="page-content" v-if="! isLoading"> <div id="page-content" v-if="! isLoading">
<!--Page Tab links--> <!--Page Tab links-->
<div class="card shadow-card pt-4 pb-0 lg:mt-6 mt-4 sticky top-0 z-10"> <div class="card shadow-card pt-4 pb-0 sticky top-0 z-10">
<div class="user-thumbnail"> <div class="user-thumbnail">
<div class="avatar"> <div class="avatar">
<img :src="user.data.relationships.settings.data.attributes.avatar.sm" :alt="user.data.relationships.settings.data.attributes.name"> <img :src="user.data.relationships.settings.data.attributes.avatar.sm" :alt="user.data.relationships.settings.data.attributes.name">
+69 -78
View File
@@ -1,92 +1,83 @@
<template> <template>
<div id="single-page"> <ValidationObserver @submit.prevent="createUser" ref="createUser" v-slot="{ invalid }" tag="form" class="form block-form">
<div id="page-content" class="small-width">
<MobileHeader :title="$t($router.currentRoute.meta.title)"/>
<PageHeader :can-back="true" :title="$t($router.currentRoute.meta.title)"/>
<div class="content-page"> <div class="card shadow-card">
<ValidationObserver @submit.prevent="createUser" ref="createUser" v-slot="{ invalid }" tag="form" class="form block-form"> <FormLabel>{{ $t('admin_page_user.create_user.group_details') }}</FormLabel>
<div class="form-group"> <!--Avatar-->
<FormLabel>{{ $t('admin_page_user.create_user.group_details') }}</FormLabel> <div class="block-wrapper">
<label>{{ $t('admin_page_user.create_user.avatar') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="avatar" v-slot="{ errors }">
<ImageInput v-model="user.avatar" :error="errors[0]" />
</ValidationProvider>
</div>
<!--Avatar--> <!--Email-->
<div class="block-wrapper"> <div class="block-wrapper">
<label>{{ $t('admin_page_user.create_user.avatar') }}</label> <label>{{ $t('page_registration.label_email') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="avatar" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="email" rules="required" v-slot="{ errors }">
<ImageInput v-model="user.avatar" :error="errors[0]" /> <input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
</ValidationProvider> <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</div> </ValidationProvider>
</div>
<!--Email--> <!--Name-->
<div class="block-wrapper"> <div class="block-wrapper">
<label>{{ $t('page_registration.label_email') }}:</label> <label>{{ $t('page_registration.label_name') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="email" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="user name" rules="required" v-slot="{ errors }">
<input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme" :class="{'is-error': errors[0]}"/> <input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span> <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider> </ValidationProvider>
</div> </div>
<!--Name--> <!--Password-->
<div class="block-wrapper"> <div class="wrapper-inline">
<label>{{ $t('page_registration.label_name') }}:</label> <div class="block-wrapper">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="user name" rules="required" v-slot="{ errors }"> <label>{{ $t('page_registration.label_pass') }}:</label>
<input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme" :class="{'is-error': errors[0]}"/> <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password" rules="required" v-slot="{ errors }">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span> <input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
</ValidationProvider> <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</div> </ValidationProvider>
</div>
<!--Password--> <div class="block-wrapper">
<div class="wrapper-inline"> <label>{{ $t('page_registration.label_confirm_pass') }}:</label>
<div class="block-wrapper"> <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password confirm" rules="required" v-slot="{ errors }">
<label>{{ $t('page_registration.label_pass') }}:</label> <input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password" rules="required" v-slot="{ errors }"> <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
<input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme" :class="{'is-error': errors[0]}"/> </ValidationProvider>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span> </div>
</ValidationProvider> </div>
</div> </div>
<div class="block-wrapper"> <div class="card shadow-card">
<label>{{ $t('page_registration.label_confirm_pass') }}:</label> <FormLabel>{{ $t('admin_page_user.create_user.group_settings') }}</FormLabel>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password confirm" rules="required" v-slot="{ errors }">
<input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</div>
</div>
<div class="form-group"> <!--User Role-->
<FormLabel>{{ $t('admin_page_user.create_user.group_settings') }}</FormLabel> <div class="block-wrapper">
<label>{{ $t('admin_page_user.select_role') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="permission" rules="required" v-slot="{ errors }">
<SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<!--User Role--> <!--Storage Capacity-->
<div class="block-wrapper"> <div class="block-wrapper">
<label>{{ $t('admin_page_user.select_role') }}:</label> <label>{{ $t('admin_page_user.label_change_capacity') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="permission" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="storage capacity" rules="required" v-slot="{ errors }">
<SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/> <input v-model="user.max_storage_amount" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span> <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider> </ValidationProvider>
</div> </div>
</div>
<!--Storage Capacity--> <div class="form-group">
<div class="block-wrapper"> <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
<label>{{ $t('admin_page_user.label_change_capacity') }}</label> {{ $t('admin_page_user.create_user.submit') }}
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="storage capacity" rules="required" v-slot="{ errors }"> </ButtonBase>
<input v-model="user.max_storage_amount" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme" :class="{'is-error': errors[0]}"/> </div>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span> </ValidationObserver>
</ValidationProvider>
</div>
</div>
<div class="form-group">
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
{{ $t('admin_page_user.create_user.submit') }}
</ButtonBase>
</div>
</ValidationObserver>
</div>
</div>
</div>
</template> </template>
<script> <script>