mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
user inputs refactoring
This commit is contained in:
Čarodej
@@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<PageTab v-if="user">
|
||||
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_box_delete.title') }}
|
||||
@@ -8,32 +7,29 @@
|
||||
<InfoBox>
|
||||
<p>{{ $t('user_box_delete.description') }}</p>
|
||||
</InfoBox>
|
||||
<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">
|
||||
<label>{{ $t('admin_page_user.label_delete_user', {user: user.data.relationships.settings.data.attributes.name}) }}:</label>
|
||||
<div class="single-line-form">
|
||||
<input v-model="userName"
|
||||
:placeholder="$t('admin_page_user.placeholder_delete_user')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
: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>
|
||||
<ValidationObserver ref="deleteUser" @submit.prevent="deleteUser" v-slot="{ invalid }" tag="form">
|
||||
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="User name" rules="required">
|
||||
<AppInputText :title="$t('admin_page_user.label_delete_user', {user: user.data.relationships.settings.data.attributes.name})" :error="errors[0]">
|
||||
<div class="flex space-x-4">
|
||||
<input v-model="userName"
|
||||
:placeholder="$t('admin_page_user.placeholder_delete_user')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
: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>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
|
||||
<PageTabGroup>
|
||||
</PageTabGroup>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../../../../components/Admin/AppInputText";
|
||||
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
|
||||
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
||||
|
||||
@@ -52,6 +48,7 @@
|
||||
'user'
|
||||
],
|
||||
components: {
|
||||
AppInputText,
|
||||
FormLabel,
|
||||
InfoBox,
|
||||
PageTabGroup,
|
||||
|
||||
@@ -1,146 +1,106 @@
|
||||
<template>
|
||||
<PageTab>
|
||||
|
||||
<!--Change role-->
|
||||
<div class="card shadow-card">
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_box_role.title') }}
|
||||
</FormLabel>
|
||||
|
||||
<InfoBox>
|
||||
<p>{{ $t('user_box_role.description') }}</p>
|
||||
</InfoBox>
|
||||
|
||||
<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="$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">
|
||||
{{ $t('admin_page_user.save_role') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
<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')" :error="errors[0]">
|
||||
<div class="flex space-x-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">
|
||||
{{ $t('admin_page_user.save_role') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-card">
|
||||
<div class="form block-form">
|
||||
<FormLabel>{{ $t('admin_page_user.label_person_info') }}</FormLabel>
|
||||
|
||||
<!--Email-->
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_email') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.attributes.email"
|
||||
:placeholder="$t('page_registration.placeholder_email')"
|
||||
type="email"
|
||||
class="focus-border-theme input-dark"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_name') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<!--Name-->
|
||||
<AppInputText :title="$t('page_registration.label_name')">
|
||||
<input :value="user.data.relationships.settings.data.attributes.name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
disabled
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>{{ $t('user_settings.title_billing') }}</FormLabel>
|
||||
<AppInputText :title="$t('user_settings.name')">
|
||||
<input :value="user.data.relationships.settings.data.attributes.name"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
disabled
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.address')">
|
||||
<input :value="user.data.relationships.settings.data.attributes.address"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.country')">
|
||||
<input :value="user.data.relationships.settings.data.attributes.country"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<div class="flex space-x-4">
|
||||
<AppInputText :title="$t('user_settings.city')" class="w-full">
|
||||
<input :value="user.data.relationships.settings.data.attributes.city"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.postal_code')" class="w-full">
|
||||
<input :value="user.data.relationships.settings.data.attributes.postal_code"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-card">
|
||||
<div class="form block-form">
|
||||
<FormLabel>{{ $t('user_settings.title_billing') }}</FormLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.name') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.name"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.address') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.address"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.country') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.country"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper-inline">
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.city') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.city"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.postal_code') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.postal_code"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.state') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.state"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.phone_number') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.relationships.settings.data.attributes.phone_number"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AppInputText :title="$t('user_settings.state')">
|
||||
<input :value="user.data.relationships.settings.data.attributes.state"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.phone_number')">
|
||||
<input :value="user.data.relationships.settings.data.attributes.phone_number"
|
||||
type="text"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../../../../components/Admin/AppInputText";
|
||||
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
||||
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
|
||||
import PageTab from '/resources/js/components/Others/Layout/PageTab'
|
||||
@@ -161,6 +121,7 @@
|
||||
'user'
|
||||
],
|
||||
components: {
|
||||
AppInputText,
|
||||
PageTabGroup,
|
||||
PageTab,
|
||||
InfoBox,
|
||||
@@ -226,22 +187,3 @@
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '/resources/sass/vuefilemanager/_variables';
|
||||
@import '/resources/sass/vuefilemanager/_mixins';
|
||||
@import '/resources/sass/vuefilemanager/_forms';
|
||||
|
||||
.block-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,33 +1,34 @@
|
||||
<template>
|
||||
<PageTab :is-loading="isLoading" class="form-fixed-width" v-if="storage">
|
||||
<PageTabGroup v-if="config.storageLimit && ! user.data.attributes.subscription">
|
||||
<PageTab :is-loading="isLoading" v-if="storage">
|
||||
|
||||
<div v-if="config.storageLimit && ! user.data.attributes.subscription" class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_box_storage.title') }}
|
||||
</FormLabel>
|
||||
<InfoBox>
|
||||
<p>{{ $t('user_box_storage.description') }}</p>
|
||||
</InfoBox>
|
||||
<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"
|
||||
min="1"
|
||||
max="999999999"
|
||||
class="focus-border-theme"
|
||||
: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>
|
||||
<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')" :error="errors[0]">
|
||||
<div class="flex space-x-4">
|
||||
<input v-model="capacity"
|
||||
:placeholder="$t('admin_page_user.label_change_capacity')"
|
||||
type="number"
|
||||
min="1"
|
||||
max="999999999"
|
||||
class="focus-border-theme input-dark"
|
||||
: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>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</ValidationObserver>
|
||||
</PageTabGroup>
|
||||
</div>
|
||||
|
||||
<PageTabGroup>
|
||||
<FormLabel>{{ $t('storage.sec_details') }}</FormLabel>
|
||||
<StorageItemDetail
|
||||
@@ -46,6 +47,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../../../../components/Admin/AppInputText";
|
||||
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
|
||||
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
||||
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
|
||||
@@ -61,8 +63,11 @@
|
||||
|
||||
export default {
|
||||
name: 'UserStorage',
|
||||
props: ['user'],
|
||||
props: [
|
||||
'user'
|
||||
],
|
||||
components: {
|
||||
AppInputText,
|
||||
PageTabGroup,
|
||||
FormLabel,
|
||||
PageTab,
|
||||
@@ -152,13 +157,3 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '/resources/sass/vuefilemanager/_variables';
|
||||
@import '/resources/sass/vuefilemanager/_mixins';
|
||||
@import '/resources/sass/vuefilemanager/_forms';
|
||||
|
||||
.block-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user