frontend update

resources/js/views/User/Invoices.vue

@@ -1,6 +1,7 @@
 <template>
     <PageTab :is-loading="isLoading">
         <PageTabGroup v-if="invoices && invoices.length > 0">
+            <FormLabel>Invoices</FormLabel>
             <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
                 <template scope="{ row }">
                     <tr>
@@ -42,19 +43,21 @@
 </template>
 
 <script>
-    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
-    import PageTab from '@/components/Others/Layout/PageTab'
     import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import PageTab from '@/components/Others/Layout/PageTab'
     import {ExternalLinkIcon} from "vue-feather-icons";
     import axios from 'axios'
 
     export default {
         name: 'UserInvoices',
         components: {
-            PageTabGroup,
-            PageTab,
             DatatableWrapper,
             ExternalLinkIcon,
+            PageTabGroup,
+            FormLabel,
+            PageTab,
         },
         data() {
             return {

resources/js/views/User/Password.vue

@@ -1,31 +1,28 @@
 <template>
-    <PageTab>
+    <PageTab class="form-fixed-width">
         <PageTabGroup>
-            <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form"
-                                class="form block-form">
-                <div class="wrapper-inline">
-                    <div class="block-wrapper">
-                        <label>{{ $t('page_create_password.label_new_pass') }}:</label>
-                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
-                                            rules="required" v-slot="{ errors }">
-                            <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
-                                   type="password"
-                                   :class="{'is-error': errors[0]}"/>
-                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                        </ValidationProvider>
-                    </div>
-                    <div class="block-wrapper">
-                        <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
-                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
-                                            rules="required" v-slot="{ errors }">
-                            <input v-model="newPasswordConfirmation"
-                                   :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
-                                   :class="{'is-error': errors[0]}"/>
-                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                        </ValidationProvider>
-                    </div>
+            <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="form block-form">
+                <FormLabel>Change Your Password</FormLabel>
+                <div class="block-wrapper">
+                    <label>{{ $t('page_create_password.label_new_pass') }}:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
+                               type="password"
+                               :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+                <div class="block-wrapper">
+                    <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="newPasswordConfirmation"
+                               :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
+                               :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
                 </div>
-
                 <div class="block-wrapper">
                     <ButtonBase type="submit" button-style="theme" class="confirm-form">
                         {{ $t('profile.store_pass') }}
@@ -37,12 +34,13 @@
 </template>
 
 <script>
-    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 PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import UserImageInput from '@/components/Others/UserImageInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import MobileHeader from '@/components/Mobile/MobileHeader'
     import ButtonBase from '@/components/FilesView/ButtonBase'
+    import PageTab from '@/components/Others/Layout/PageTab'
     import PageHeader from '@/components/Others/PageHeader'
     import ThemeLabel from '@/components/Others/ThemeLabel'
     import {required} from 'vee-validate/dist/rules'
@@ -53,6 +51,7 @@
         name: 'Profile',
         components: {
             PageTabGroup,
+            FormLabel,
             PageTab,
             ValidationProvider,
             ValidationObserver,

resources/js/views/User/PaymentMethods.vue

@@ -1,6 +1,7 @@
 <template>
     <PageTab :is-loading="isLoading">
         <PageTabGroup v-if="PaymentMethods && PaymentMethods.length > 0">
+            <FormLabel>Payment Methods</FormLabel>
             <DatatableWrapper :paginator="true" :columns="columns" :data="PaymentMethods" class="table">
                 <template scope="{ row }">
                     <tr :class="{'is-deleting': row.data.attributes.card_id === deletingID}">
@@ -45,9 +46,10 @@
 <script>
     import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import {CreditCardIcon, Trash2Icon} from "vue-feather-icons"
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import PageTab from '@/components/Others/Layout/PageTab'
     import ColorLabel from '@/components/Others/ColorLabel'
-    import {CreditCardIcon, Trash2Icon} from "vue-feather-icons"
     import {events} from "@/bus"
     import axios from 'axios'
 
@@ -55,10 +57,11 @@
         name: 'UserPaymentMethods',
         components: {
             DatatableWrapper,
+            CreditCardIcon,
             PageTabGroup,
             Trash2Icon,
             ColorLabel,
-            CreditCardIcon,
+            FormLabel,
             PageTab,
         },
         data() {

resources/js/views/User/Settings.vue

@@ -1,34 +1,33 @@
 <template>
-    <PageTab>
+    <PageTab class="form-fixed-width">
         <PageTabGroup v-if="userInfo">
             <div class="form block-form">
-                <div class="wrapper-inline">
-                    <div class="block-wrapper">
-                        <label>{{ $t('page_registration.label_email') }}</label>
-                        <div class="input-wrapper">
-                            <input :value="userInfo.email"
-                                   :placeholder="$t('page_registration.placeholder_email')"
-                                   type="email"
-                                   disabled
-                            />
-                        </div>
+                <FormLabel>Account Information</FormLabel>
+                <div class="block-wrapper">
+                    <label>{{ $t('page_registration.label_email') }}</label>
+                    <div class="input-wrapper">
+                        <input :value="userInfo.email"
+                               :placeholder="$t('page_registration.placeholder_email')"
+                               type="email"
+                               disabled
+                        />
                     </div>
-                    <div class="block-wrapper">
-                        <label>{{ $t('page_registration.label_name') }}</label>
-                        <div class="input-wrapper">
-                            <input @keyup="changeUserName"
-                                   v-model="userInfo.name"
-                                   :placeholder="$t('page_registration.placeholder_name')"
-                                   type="text"
-                            />
-                        </div>
+                </div>
+                <div class="block-wrapper">
+                    <label>{{ $t('page_registration.label_name') }}</label>
+                    <div class="input-wrapper">
+                        <input @keyup="changeUserName"
+                               v-model="userInfo.name"
+                               :placeholder="$t('page_registration.placeholder_name')"
+                               type="text"
+                        />
                     </div>
                 </div>
             </div>
         </PageTabGroup>
         <PageTabGroup v-if="billingInfo">
             <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">
@@ -109,9 +108,10 @@
 <script>
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
-    import PageTab from '@/components/Others/Layout/PageTab'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import MobileHeader from '@/components/Mobile/MobileHeader'
     import ButtonBase from '@/components/FilesView/ButtonBase'
+    import PageTab from '@/components/Others/Layout/PageTab'
     import PageHeader from '@/components/Others/PageHeader'
     import ThemeLabel from '@/components/Others/ThemeLabel'
     import {required} from 'vee-validate/dist/rules'
@@ -125,6 +125,7 @@
         ],
         components: {
             PageTabGroup,
+            FormLabel,
             PageTab,
             ValidationProvider,
             ValidationObserver,

resources/js/views/User/Storage.vue

@@ -1,10 +1,11 @@
 <template>
-    <PageTab v-if="storage">
+    <PageTab class="form-fixed-width" v-if="storage">
         <PageTabGroup>
+            <FormLabel>Your disk Usage</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>
+            <FormLabel>{{ $t('storage.sec_details') }}</FormLabel>
             <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" />
@@ -15,6 +16,7 @@
 </template>
 
 <script>
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import PageTab from '@/components/Others/Layout/PageTab'
     import StorageItemDetail from '@/components/Others/StorageItemDetail'
@@ -28,6 +30,7 @@
         name: 'Profile',
         components: {
             PageTabGroup,
+            FormLabel,
             PageTab,
             StorageItemDetail,
             SectionTitle,

resources/js/views/User/Subscription.vue

@@ -1,6 +1,7 @@
 <template>
     <PageTab :is-loading="isLoading">
         <PageTabGroup v-if="subscription">
+            <FormLabel>Subscription Plan</FormLabel>
 
             <!--Info about active subscription-->
             <div v-if="! subscription.data.attributes.canceled" class="state active">
@@ -51,6 +52,7 @@
     import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import ListInfoItem from '@/components/Others/ListInfoItem'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import PageTab from '@/components/Others/Layout/PageTab'
     import ListInfo from '@/components/Others/ListInfo'
@@ -67,6 +69,7 @@
             ListInfoItem,
             PageTabGroup,
             ButtonBase,
+            FormLabel,
             ListInfo,
             PageTab,
         },