From d039700b905f0aa4a7c43b77dead95de666daa26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Mon, 22 Nov 2021 19:22:59 +0100
Subject: [PATCH] user inputs refactoring

---
 public/mix-manifest.json                      |  95 ++++++-
 .../js/components/Admin/AppInputText.vue      |   2 +-
 .../views/Admin/Users/UserTabs/UserDelete.vue |  37 ++-
 .../views/Admin/Users/UserTabs/UserDetail.vue | 234 +++++++-----------
 .../Admin/Users/UserTabs/UserStorage.vue      |  59 ++---
 resources/js/views/User/Password.vue          |  43 ++--
 6 files changed, 236 insertions(+), 234 deletions(-)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 809e2e50..90de6742 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -14,17 +14,17 @@
     "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=90270d0c5aeb5c50dacf",
     "/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=61e970ffb679245686c3",
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=26a26c5593b41f794d32",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=672caa45ddc69f476084",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=f3246350503786bf3618",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=aa284736dda7647d5c9e",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=6bd4516589f23ec25ae6",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=b1123c792a51f9b3ec11",
-    "/chunks/app-billings.js": "/chunks/app-billings.js?id=961984594b917ecbb5dd",
+    "/chunks/app-billings.js": "/chunks/app-billings.js?id=a2e8225cb2d71bb233cb",
     "/chunks/app-email.js": "/chunks/app-email.js?id=818ceb6be0fe9f4d06a4",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=efe2410e0872283642af",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=6c55fe0a70ae4080ae1c",
     "/chunks/app-language.js": "/chunks/app-language.js?id=91e1d30bf7a3c7a54136",
     "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js": "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js?id=38b2085e829a84df0e5f",
     "/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=7074510a39f75662bdee",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=9d013212bbac52d5f2f8",
     "/chunks/app-payments.js": "/chunks/app-payments.js?id=af38547bd60f92575c03",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=db54f40c07bdfb86b81e",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=459d95c0256c819ce4bf",
@@ -50,7 +50,7 @@
     "/chunks/invoices.js": "/chunks/invoices.js?id=dde37879c074c8bf91b1",
     "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ea129760157c8e44f324",
     "/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3",
-    "/chunks/page-edit.js": "/chunks/page-edit.js?id=b17615724b6b9e36ea70",
+    "/chunks/page-edit.js": "/chunks/page-edit.js?id=725b13827e6e55f2d286",
     "/chunks/pages.js": "/chunks/pages.js?id=038b6c946b7eb16f85bf",
     "/chunks/plan.js": "/chunks/plan.js?id=052940a7395f559b7c60",
     "/chunks/plan-create.js": "/chunks/plan-create.js?id=72e4ef277bb881d5cadf",
@@ -62,14 +62,14 @@
     "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js": "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js?id=8656b69a97cace919251",
     "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=aafbc2aab40dc434335a",
     "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js": "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js?id=7d983dfdc91de607d737",
-    "/chunks/profile.js": "/chunks/profile.js?id=b616d1ec5aa4eb40feae",
-    "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=58edfb3a35062e1ba4e0",
+    "/chunks/profile.js": "/chunks/profile.js?id=85ffe0dda3e34d9a0382",
+    "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=e53203fcbbdb49585b2e",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=f8b2619e393a5823bf29",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=22f629caf127051898e9",
     "/chunks/settings.js": "/chunks/settings.js?id=b7a593ddda1ac39edc94",
     "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=0920151cdeb1c2bdb36a",
     "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=f73f0faf411f750a1c07",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=827cf60e265ad37bcc16",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=2dd5de2492c4526bf0e0",
     "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=979e74627582832e7a79",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=9a1352324cbee9630496",
     "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=b1e1ae3cff004140701e",
@@ -94,11 +94,11 @@
     "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=7ee9b84ffed9bf544997",
     "/chunks/user.js": "/chunks/user.js?id=5c5421f40243bcba9c23",
     "/chunks/user-create.js": "/chunks/user-create.js?id=244c7f71f243260e3faa",
-    "/chunks/user-delete.js": "/chunks/user-delete.js?id=6cee8a74926ea9938322",
-    "/chunks/user-detail.js": "/chunks/user-detail.js?id=5fa6f523e2e2cd327da6",
+    "/chunks/user-delete.js": "/chunks/user-delete.js?id=0559dd74a7d8e4b8afbc",
+    "/chunks/user-detail.js": "/chunks/user-detail.js?id=03bfe48eb0673efa5001",
     "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=a03cdaa3511d88acdd97",
     "/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=bb30538ad15465e45248",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=370b3df08b2ee39bf6ac",
     "/chunks/users.js": "/chunks/users.js?id=2359885214cec5135847",
     "/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",
@@ -639,5 +639,76 @@
     "/chunks/page-edit.5553ce000c33d0e81b05.hot-update.js": "/chunks/page-edit.5553ce000c33d0e81b05.hot-update.js",
     "/chunks/page-edit.946fa7062f4aef8814b8.hot-update.js": "/chunks/page-edit.946fa7062f4aef8814b8.hot-update.js",
     "/chunks/page-edit.7e2c8d9e5f65db50e24b.hot-update.js": "/chunks/page-edit.7e2c8d9e5f65db50e24b.hot-update.js",
-    "/chunks/page-edit.4e9e9ac7163245ba466e.hot-update.js": "/chunks/page-edit.4e9e9ac7163245ba466e.hot-update.js"
+    "/chunks/page-edit.4e9e9ac7163245ba466e.hot-update.js": "/chunks/page-edit.4e9e9ac7163245ba466e.hot-update.js",
+    "/chunks/user-detail.14f96c7db4959812f81e.hot-update.js": "/chunks/user-detail.14f96c7db4959812f81e.hot-update.js",
+    "/chunks/user-detail.8bd1bdf47e0dcf9cd692.hot-update.js": "/chunks/user-detail.8bd1bdf47e0dcf9cd692.hot-update.js",
+    "/chunks/user-detail.cb7e5dac0b07311b494a.hot-update.js": "/chunks/user-detail.cb7e5dac0b07311b494a.hot-update.js",
+    "/chunks/user-detail.62ee6eca71758ad23611.hot-update.js": "/chunks/user-detail.62ee6eca71758ad23611.hot-update.js",
+    "/chunks/user-detail.0bb33c5d96bc03c1c8fe.hot-update.js": "/chunks/user-detail.0bb33c5d96bc03c1c8fe.hot-update.js",
+    "/chunks/user-detail.54976967a3fdb1191028.hot-update.js": "/chunks/user-detail.54976967a3fdb1191028.hot-update.js",
+    "/chunks/user-detail.a6f560259f48ae464833.hot-update.js": "/chunks/user-detail.a6f560259f48ae464833.hot-update.js",
+    "/chunks/user-detail.f62cbe1670dd833d52a3.hot-update.js": "/chunks/user-detail.f62cbe1670dd833d52a3.hot-update.js",
+    "/chunks/user-detail.ae9fbac826534b8d7894.hot-update.js": "/chunks/user-detail.ae9fbac826534b8d7894.hot-update.js",
+    "/chunks/user-detail.9bad4e737a1f363651ef.hot-update.js": "/chunks/user-detail.9bad4e737a1f363651ef.hot-update.js",
+    "/chunks/user-detail.f1f050407770cff58200.hot-update.js": "/chunks/user-detail.f1f050407770cff58200.hot-update.js",
+    "/chunks/user-detail.fb2981814707cb675b53.hot-update.js": "/chunks/user-detail.fb2981814707cb675b53.hot-update.js",
+    "/chunks/app-appearance.f93b113c84c7b43a28e1.hot-update.js": "/chunks/app-appearance.f93b113c84c7b43a28e1.hot-update.js",
+    "/chunks/app-billings.f93b113c84c7b43a28e1.hot-update.js": "/chunks/app-billings.f93b113c84c7b43a28e1.hot-update.js",
+    "/chunks/app-index.f93b113c84c7b43a28e1.hot-update.js": "/chunks/app-index.f93b113c84c7b43a28e1.hot-update.js",
+    "/chunks/app-others.f93b113c84c7b43a28e1.hot-update.js": "/chunks/app-others.f93b113c84c7b43a28e1.hot-update.js",
+    "/chunks/page-edit.f93b113c84c7b43a28e1.hot-update.js": "/chunks/page-edit.f93b113c84c7b43a28e1.hot-update.js",
+    "/chunks/profile.f93b113c84c7b43a28e1.hot-update.js": "/chunks/profile.f93b113c84c7b43a28e1.hot-update.js",
+    "/chunks/user-detail.f93b113c84c7b43a28e1.hot-update.js": "/chunks/user-detail.f93b113c84c7b43a28e1.hot-update.js",
+    "/chunks/app-appearance.6b57fab10594cc6fb68e.hot-update.js": "/chunks/app-appearance.6b57fab10594cc6fb68e.hot-update.js",
+    "/chunks/app-billings.6b57fab10594cc6fb68e.hot-update.js": "/chunks/app-billings.6b57fab10594cc6fb68e.hot-update.js",
+    "/chunks/app-index.6b57fab10594cc6fb68e.hot-update.js": "/chunks/app-index.6b57fab10594cc6fb68e.hot-update.js",
+    "/chunks/app-others.6b57fab10594cc6fb68e.hot-update.js": "/chunks/app-others.6b57fab10594cc6fb68e.hot-update.js",
+    "/chunks/page-edit.6b57fab10594cc6fb68e.hot-update.js": "/chunks/page-edit.6b57fab10594cc6fb68e.hot-update.js",
+    "/chunks/profile.6b57fab10594cc6fb68e.hot-update.js": "/chunks/profile.6b57fab10594cc6fb68e.hot-update.js",
+    "/chunks/user-detail.6b57fab10594cc6fb68e.hot-update.js": "/chunks/user-detail.6b57fab10594cc6fb68e.hot-update.js",
+    "/chunks/app-appearance.34454a6f3f47421e7e18.hot-update.js": "/chunks/app-appearance.34454a6f3f47421e7e18.hot-update.js",
+    "/chunks/app-billings.34454a6f3f47421e7e18.hot-update.js": "/chunks/app-billings.34454a6f3f47421e7e18.hot-update.js",
+    "/chunks/app-index.34454a6f3f47421e7e18.hot-update.js": "/chunks/app-index.34454a6f3f47421e7e18.hot-update.js",
+    "/chunks/app-others.34454a6f3f47421e7e18.hot-update.js": "/chunks/app-others.34454a6f3f47421e7e18.hot-update.js",
+    "/chunks/page-edit.34454a6f3f47421e7e18.hot-update.js": "/chunks/page-edit.34454a6f3f47421e7e18.hot-update.js",
+    "/chunks/profile.34454a6f3f47421e7e18.hot-update.js": "/chunks/profile.34454a6f3f47421e7e18.hot-update.js",
+    "/chunks/user-detail.34454a6f3f47421e7e18.hot-update.js": "/chunks/user-detail.34454a6f3f47421e7e18.hot-update.js",
+    "/chunks/app-appearance.6b99236d2aa919308ec0.hot-update.js": "/chunks/app-appearance.6b99236d2aa919308ec0.hot-update.js",
+    "/chunks/app-billings.6b99236d2aa919308ec0.hot-update.js": "/chunks/app-billings.6b99236d2aa919308ec0.hot-update.js",
+    "/chunks/app-index.6b99236d2aa919308ec0.hot-update.js": "/chunks/app-index.6b99236d2aa919308ec0.hot-update.js",
+    "/chunks/app-others.6b99236d2aa919308ec0.hot-update.js": "/chunks/app-others.6b99236d2aa919308ec0.hot-update.js",
+    "/chunks/page-edit.6b99236d2aa919308ec0.hot-update.js": "/chunks/page-edit.6b99236d2aa919308ec0.hot-update.js",
+    "/chunks/profile.6b99236d2aa919308ec0.hot-update.js": "/chunks/profile.6b99236d2aa919308ec0.hot-update.js",
+    "/chunks/user-detail.6b99236d2aa919308ec0.hot-update.js": "/chunks/user-detail.6b99236d2aa919308ec0.hot-update.js",
+    "/chunks/app-appearance.74926939b5042470cf4d.hot-update.js": "/chunks/app-appearance.74926939b5042470cf4d.hot-update.js",
+    "/chunks/app-billings.74926939b5042470cf4d.hot-update.js": "/chunks/app-billings.74926939b5042470cf4d.hot-update.js",
+    "/chunks/app-index.74926939b5042470cf4d.hot-update.js": "/chunks/app-index.74926939b5042470cf4d.hot-update.js",
+    "/chunks/app-others.74926939b5042470cf4d.hot-update.js": "/chunks/app-others.74926939b5042470cf4d.hot-update.js",
+    "/chunks/page-edit.74926939b5042470cf4d.hot-update.js": "/chunks/page-edit.74926939b5042470cf4d.hot-update.js",
+    "/chunks/profile.74926939b5042470cf4d.hot-update.js": "/chunks/profile.74926939b5042470cf4d.hot-update.js",
+    "/chunks/user-detail.74926939b5042470cf4d.hot-update.js": "/chunks/user-detail.74926939b5042470cf4d.hot-update.js",
+    "/chunks/app-appearance.d5373e5a846d2e0270f2.hot-update.js": "/chunks/app-appearance.d5373e5a846d2e0270f2.hot-update.js",
+    "/chunks/app-billings.d5373e5a846d2e0270f2.hot-update.js": "/chunks/app-billings.d5373e5a846d2e0270f2.hot-update.js",
+    "/chunks/app-index.d5373e5a846d2e0270f2.hot-update.js": "/chunks/app-index.d5373e5a846d2e0270f2.hot-update.js",
+    "/chunks/app-others.d5373e5a846d2e0270f2.hot-update.js": "/chunks/app-others.d5373e5a846d2e0270f2.hot-update.js",
+    "/chunks/page-edit.d5373e5a846d2e0270f2.hot-update.js": "/chunks/page-edit.d5373e5a846d2e0270f2.hot-update.js",
+    "/chunks/profile.d5373e5a846d2e0270f2.hot-update.js": "/chunks/profile.d5373e5a846d2e0270f2.hot-update.js",
+    "/chunks/user-detail.d5373e5a846d2e0270f2.hot-update.js": "/chunks/user-detail.d5373e5a846d2e0270f2.hot-update.js",
+    "/chunks/user-detail.f6248770025b6987e21b.hot-update.js": "/chunks/user-detail.f6248770025b6987e21b.hot-update.js",
+    "/chunks/user-delete.b21ce28ba3622d6e69f6.hot-update.js": "/chunks/user-delete.b21ce28ba3622d6e69f6.hot-update.js",
+    "/chunks/user-delete.6fd2b0c49228ec15436f.hot-update.js": "/chunks/user-delete.6fd2b0c49228ec15436f.hot-update.js",
+    "/chunks/user-delete.2454b4069680b3946038.hot-update.js": "/chunks/user-delete.2454b4069680b3946038.hot-update.js",
+    "/chunks/user-storage.85309e77cab0157eb348.hot-update.js": "/chunks/user-storage.85309e77cab0157eb348.hot-update.js",
+    "/chunks/user-storage.22f1f0d9f458218b6164.hot-update.js": "/chunks/user-storage.22f1f0d9f458218b6164.hot-update.js",
+    "/chunks/user-delete.26c6cf8bca426d8131b3.hot-update.js": "/chunks/user-delete.26c6cf8bca426d8131b3.hot-update.js",
+    "/chunks/user-storage.26c6cf8bca426d8131b3.hot-update.js": "/chunks/user-storage.26c6cf8bca426d8131b3.hot-update.js",
+    "/chunks/user-storage.5d11df66730214664a7b.hot-update.js": "/chunks/user-storage.5d11df66730214664a7b.hot-update.js",
+    "/chunks/settings-password.e7429fe16f49e230c990.hot-update.js": "/chunks/settings-password.e7429fe16f49e230c990.hot-update.js",
+    "/js/main.faadf2fdd5691bbc0fef.hot-update.js": "/js/main.faadf2fdd5691bbc0fef.hot-update.js",
+    "/chunks/profile.faadf2fdd5691bbc0fef.hot-update.js": "/chunks/profile.faadf2fdd5691bbc0fef.hot-update.js",
+    "/chunks/settings-password.faadf2fdd5691bbc0fef.hot-update.js": "/chunks/settings-password.faadf2fdd5691bbc0fef.hot-update.js",
+    "/chunks/settings-password.341fa6aa904779d9998e.hot-update.js": "/chunks/settings-password.341fa6aa904779d9998e.hot-update.js",
+    "/chunks/settings-password.4abdfe172f5538bb27a2.hot-update.js": "/chunks/settings-password.4abdfe172f5538bb27a2.hot-update.js",
+    "/chunks/settings-password.ab8197b698f0904eb479.hot-update.js": "/chunks/settings-password.ab8197b698f0904eb479.hot-update.js",
+    "/chunks/settings-password.3bee9428ac750796944f.hot-update.js": "/chunks/settings-password.3bee9428ac750796944f.hot-update.js"
 }
diff --git a/resources/js/components/Admin/AppInputText.vue b/resources/js/components/Admin/AppInputText.vue
index 71f45bad..2c5570cf 100644
--- a/resources/js/components/Admin/AppInputText.vue
+++ b/resources/js/components/Admin/AppInputText.vue
@@ -13,7 +13,7 @@
 		<small v-if="description" class="text-xs text-gray-500 leading-normal" v-html="description"></small>
 
 		<!--Input Description-->
-		<span v-if="error" class="error-message">
+		<span v-if="error" class="text-red-700 pt-2 text-xs">
 			{{ error }}
 		</span>
 	</div>
diff --git a/resources/js/views/Admin/Users/UserTabs/UserDelete.vue b/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
index 35abe59e..6a167794 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
@@ -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,
diff --git a/resources/js/views/Admin/Users/UserTabs/UserDetail.vue b/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
index 9f586e9c..3f9251a9 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
@@ -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>
diff --git a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
index 39a576c4..6f6da1dd 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
@@ -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>
diff --git a/resources/js/views/User/Password.vue b/resources/js/views/User/Password.vue
index ce588565..a94c8f96 100644
--- a/resources/js/views/User/Password.vue
+++ b/resources/js/views/User/Password.vue
@@ -45,41 +45,37 @@
             </ButtonBase>
         </div>
         <div class="card shadow-card">
-            <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="form block-form">
+            <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form">
                 <FormLabel>{{ $t('user_password.title') }}</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 }">
+                <ValidationProvider tag="div" mode="passive" name="New Password" rules="required" v-slot="{ errors }">
+                    <AppInputText :title="$t('page_create_password.label_new_pass')" :error="errors[0]">
                         <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
 							   type="password"
 							   class="focus-border-theme input-dark"
-							   :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 }">
+							   :class="{'is-error': errors[0]}"
+						/>
+                    </AppInputText>
+                </ValidationProvider>
+                <ValidationProvider tag="div" mode="passive" name="Confirm Your Password" rules="required" v-slot="{ errors }">
+                    <AppInputText :title="$t('page_create_password.label_confirm_pass')" :error="errors[0]">
                         <input v-model="newPasswordConfirmation"
-							   :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
+							   :placeholder="$t('page_create_password.label_confirm_pass')"
+							   type="password"
 							   class="focus-border-theme input-dark"
-							   :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') }}
-                    </ButtonBase>
-                </div>
+							   :class="{'is-error': errors[0]}"
+						/>
+                    </AppInputText>
+                </ValidationProvider>
+                <ButtonBase type="submit" button-style="theme" class="confirm-form">
+                    {{ $t('profile.store_pass') }}
+                </ButtonBase>
             </ValidationObserver>
         </div>
     </PageTab>
 </template>
 
 <script>
+	import AppInputText from "../../components/Admin/AppInputText";
 	import AppInputSwitch from "../../components/Admin/AppInputSwitch";
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
 	import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
@@ -101,6 +97,7 @@
 	export default {
 		name: 'Password',
 		components: {
+			AppInputText,
 			AppInputSwitch,
 			PageTabGroup,
 			FormLabel,