mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
responsive version enhancements
This commit is contained in:
@@ -8,9 +8,9 @@
|
||||
<ValidationObserver ref="changeRole" @submit.prevent="changeRole" v-slot="{ invalid }" tag="form">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Role" rules="required">
|
||||
<AppInputText :title="$t('admin_page_user.select_role')" :description="$t('user_box_role.description')" :error="errors[0]" :is-last="true">
|
||||
<div class="flex space-x-4">
|
||||
<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
|
||||
<SelectInput v-model="userRole" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="sm:w-auto w-full">
|
||||
{{ $t('admin_page_user.save_role') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
@@ -19,17 +19,32 @@
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>{{ $t('admin_page_user.label_person_info') }}</FormLabel>
|
||||
<!--Email-->
|
||||
<AppInputText :title="$t('page_registration.label_email')">
|
||||
<input :value="user.data.attributes.email"
|
||||
:placeholder="$t('page_registration.placeholder_email')"
|
||||
type="email"
|
||||
class="focus-border-theme input-dark"
|
||||
disabled
|
||||
/>
|
||||
</AppInputText>
|
||||
<FormLabel>
|
||||
{{ $t('admin_page_user.label_person_info') }}
|
||||
</FormLabel>
|
||||
|
||||
<!--Name-->
|
||||
<div class="md:flex justify-items md:space-x-4">
|
||||
<AppInputText :title="$t('First Name')" class="w-full">
|
||||
<input
|
||||
disabled
|
||||
:value="user.data.relationships.settings.data.attributes.first_name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('Last Name')" class="w-full">
|
||||
<input
|
||||
disabled
|
||||
:value="user.data.relationships.settings.data.attributes.last_name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
|
||||
<AppInputText :title="$t('page_registration.label_name')" :is-last="true">
|
||||
<input :value="user.data.relationships.settings.data.attributes.name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{{ $t('Subscription') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
<b class="sm:text-3xl text-xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ status }}
|
||||
</b>
|
||||
|
||||
|
||||
@@ -6,14 +6,14 @@
|
||||
{{ $t('Balance') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ user.data.relationships.balance.data.attributes.formatted }}
|
||||
</b>
|
||||
|
||||
<ValidationObserver ref="creditUserBalance" @submit.prevent="increaseBalance" v-slot="{ invalid }" tag="form" class="mt-6">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Balance Amount" rules="required">
|
||||
<AppInputText :description="$t('User balance will be increased for the amount above.')" :error="errors[0]" :is-last="true">
|
||||
<div class="flex space-x-4">
|
||||
<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
|
||||
<input v-model="balanceAmount"
|
||||
:placeholder="$t('Increase user balance for...')"
|
||||
type="number"
|
||||
@@ -22,7 +22,7 @@
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{'border-red': errors[0]}"
|
||||
/>
|
||||
<ButtonBase type="submit" button-style="theme" class="submit-button"
|
||||
<ButtonBase type="submit" button-style="theme" class="sm:w-auto w-full"
|
||||
:loading="isUpdatingBalanceAmount"
|
||||
:disabled="isUpdatingBalanceAmount"
|
||||
>
|
||||
@@ -40,7 +40,7 @@
|
||||
{{ $t('Usage Estimates') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ user.data.meta.usages.costEstimate }}
|
||||
</b>
|
||||
|
||||
|
||||
@@ -5,11 +5,11 @@
|
||||
{{ $t('user_box_password.title') }}
|
||||
</FormLabel>
|
||||
|
||||
<AppInputSwitch :title="$t('Reset User Password')" :description="$t('user_box_password.description')" :is-last="true">
|
||||
<AppInputText :title="$t('Reset User Password')" :description="$t('user_box_password.description')" :is-last="true">
|
||||
<ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest" :disabled="isSendingRequest" class="sm:w-auto w-full" button-style="theme">
|
||||
{{ $t('admin_page_user.send_password_link') }}
|
||||
</ButtonBase>
|
||||
</AppInputSwitch>
|
||||
</AppInputText>
|
||||
</div>
|
||||
</PageTab>
|
||||
</template>
|
||||
@@ -26,10 +26,12 @@
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {events} from '/resources/js/bus'
|
||||
import axios from 'axios'
|
||||
import AppInputText from "../../../../components/Admin/AppInputText";
|
||||
|
||||
export default {
|
||||
name: 'UserPassword',
|
||||
components: {
|
||||
AppInputText,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputSwitch,
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
{{ $t('Storage Usage') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ storage.data.attributes.used }}
|
||||
</b>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
{{ $t('Upload') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ storage.data.meta.traffic.upload }}
|
||||
</b>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
{{ $t('Download') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ storage.data.meta.traffic.download }}
|
||||
</b>
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
<ValidationObserver ref="changeStorageCapacity" @submit.prevent="changeStorageCapacity" v-slot="{ invalid }" tag="form">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
|
||||
<AppInputText :title="$t('admin_page_user.label_change_capacity')" :description="$t('user_box_storage.description')" :error="errors[0]" :is-last="true">
|
||||
<div class="flex space-x-4">
|
||||
<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
|
||||
<input v-model="capacity"
|
||||
:placeholder="$t('admin_page_user.label_change_capacity')"
|
||||
type="number"
|
||||
@@ -69,7 +69,7 @@
|
||||
class="focus-border-theme input-dark"
|
||||
:class="{'border-red': errors[0]}"
|
||||
/>
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="sm:w-auto w-full">
|
||||
{{ $t('admin_page_user.change_capacity') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
{{ $t('Subscription') }}
|
||||
</FormLabel>
|
||||
|
||||
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
|
||||
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
|
||||
{{ $t('Free Plan') }}
|
||||
</b>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user