frontend update

resources/js/views/Admin/Users/UserTabs/UserDelete.vue

@@ -1,36 +1,35 @@
 <template>
-    <PageTab>
+    <PageTab class="form-fixed-width">
         <PageTabGroup>
-            <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.data.attributes.name">
-                        <label>{{ $t('admin_page_user.label_delete_user', {user: user.data.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>
+            <FormLabel>{{ $t('user_box_delete.title') }}</FormLabel>
+            <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|is:' + user.data.attributes.name">
+                    <label>{{ $t('admin_page_user.label_delete_user', {user: user.data.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>
         </PageTabGroup>
     </PageTab>
 </template>
 
 <script>
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
@@ -46,6 +45,8 @@
             'user'
         ],
         components: {
+            FormLabel,
+            InfoBox,
             PageTabGroup,
             PageTab,
             ValidationProvider,

resources/js/views/Admin/Users/UserTabs/UserDetail.vue

@@ -1,36 +1,37 @@
 <template>
-    <PageTab>
+    <PageTab class="form-fixed-width">
 
         <!--Change role-->
         <PageTabGroup>
-            <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>
+            <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="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>
         </PageTabGroup>
 
         <!--Personal Information-->
         <PageTabGroup>
             <div class="form block-form">
-                <b class="form-group-label">{{ $t('admin_page_user.label_person_info') }}</b>
+                <FormLabel>{{ $t('admin_page_user.label_person_info') }}</FormLabel>
+
                 <div class="wrapper-inline">
 
                     <!--Email-->
@@ -63,7 +64,8 @@
         <!--Billing Information-->
         <PageTabGroup>
             <div class="form block-form">
-                <b class="form-group-label">Billing Information</b>
+                <FormLabel>Billing Information</FormLabel>
+
                 <div class="block-wrapper">
                     <label>Name:</label>
                     <div class="input-wrapper">
@@ -135,11 +137,13 @@
 </template>
 
 <script>
+    import InfoBox from '@/components/Others/Forms/InfoBox'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import StorageItemDetail from '@/components/Others/StorageItemDetail'
     import SelectInput from '@/components/Others/Forms/SelectInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import SetupBox from '@/components/Others/Forms/SetupBox'
     import {required} from 'vee-validate/dist/rules'
@@ -155,6 +159,8 @@
         components: {
             PageTabGroup,
             PageTab,
+            InfoBox,
+            FormLabel,
             ValidationProvider,
             ValidationObserver,
             StorageItemDetail,

resources/js/views/Admin/Users/UserTabs/UserPassword.vue

@@ -1,21 +1,21 @@
 <template>
-    <PageTab>
+    <PageTab class="form-fixed-width">
         <PageTabGroup>
-            <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>
+            <FormLabel>{{ $t('user_box_password.title') }}</FormLabel>
+            <InfoBox>
+                <p>{{ $t('user_box_password.description') }}</p>
+            </InfoBox>
+            <ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest"
+                        :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
+                {{ $t('admin_page_user.send_password_link') }}
+            </ButtonBase>
         </PageTabGroup>
     </PageTab>
 </template>
 
 <script>
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
@@ -28,6 +28,8 @@
     export default {
         name: 'UserPassword',
         components: {
+            FormLabel,
+            InfoBox,
             PageTabGroup,
             PageTab,
             ValidationProvider,

resources/js/views/Admin/Users/UserTabs/UserStorage.vue

@@ -1,41 +1,38 @@
 <template>
-    <PageTab v-if="storage">
-        <PageTabGroup>
-            <SetupBox
-                    v-if="! config.isSaaS || ! user.data.attributes.subscription"
-                    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">
+    <PageTab class="form-fixed-width" v-if="storage">
+        <PageTabGroup v-if="! config.isSaaS || ! user.data.attributes.subscription">
+            <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="{'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>
+                <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="{'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>
+        </PageTabGroup>
+        <PageTabGroup>
+            <FormLabel>{{ $t('storage.sec_details') }}</FormLabel>
             <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})"
             />
-        </PageTabGroup>
-        <PageTabGroup>
-            <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" />
@@ -46,6 +43,9 @@
 </template>
 
 <script>
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
@@ -62,7 +62,9 @@
         props: ['user'],
         components: {
             PageTabGroup,
+            FormLabel,
             PageTab,
+            InfoBox,
             ValidationProvider,
             ValidationObserver,
             StorageItemDetail,

resources/js/views/Admin/Users/UserTabs/UserSubscription.vue

@@ -1,5 +1,5 @@
 <template>
-    <PageTab :is-loading="isLoading">
+    <PageTab class="form-fixed-width" :is-loading="isLoading">
         <PageTabGroup v-if="subscription">
 
             <!--Info about active subscription-->
@@ -23,7 +23,7 @@
                 </ListInfo>
             </div>
         </PageTabGroup>
-        <PageTabGroup v-else>
+        <PageTabGroup v-if="! subscription">
             User don't have any subscription yet.
         </PageTabGroup>
     </PageTab>
@@ -37,7 +37,7 @@
     import PageTab from '@/components/Others/Layout/PageTab'
     import ListInfo from '@/components/Others/ListInfo'
     import {ExternalLinkIcon} from "vue-feather-icons"
-    import { mapGetters } from 'vuex'
+    import {mapGetters} from 'vuex'
     import {events} from "@/bus"
     import axios from 'axios'
 
@@ -73,7 +73,12 @@
                 .then(response => {
                     this.subscription = response.data.data
                     this.isLoading = false
-                })
+                }).catch(error => {
+
+                    if (error.response.status == 404) {
+                        this.isLoading = false
+                }
+            })
         }
     }
 </script>