From 6dd40df7d502e298d0d76ab0b97654e8571f477d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Mon, 22 Nov 2021 17:41:46 +0100
Subject: [PATCH] settings inputs refactoring

---
 config/language-translations.php              |   2 +-
 public/mix-manifest.json                      | 109 ++++++++-
 .../js/components/Admin/AppInputSwitch.vue    |  35 +++
 .../js/components/Admin/AppInputText.vue      |  31 +++
 .../views/Admin/AppSettings/AppSettings.vue   |  32 +--
 .../AppSettingsTabs/Appearance.vue            |  63 ++----
 .../AppSettings/AppSettingsTabs/Billings.vue  | 151 ++++--------
 .../AppSettings/AppSettingsTabs/Index.vue     |  24 +-
 .../AppSettings/AppSettingsTabs/Others.vue    | 214 +++++++-----------
 9 files changed, 318 insertions(+), 343 deletions(-)
 create mode 100644 resources/js/components/Admin/AppInputSwitch.vue
 create mode 100644 resources/js/components/Admin/AppInputText.vue

diff --git a/config/language-translations.php b/config/language-translations.php
index 0c6ed2aa..8081bf5a 100644
--- a/config/language-translations.php
+++ b/config/language-translations.php
@@ -306,7 +306,7 @@ return [
         'admin_settings.others.google_analytics'             => 'Google Analytics Code (optional)',
         'admin_settings.others.google_analytics_plac'        => 'Paste your Google Analytics Code',
         'admin_settings.others.mimetypes_blacklist'          => 'Mimetypes Blacklist',
-        'admin_settings.others.mimetypes_blacklist_help'     => "If you want to prevent upload some type of files, just add them to blacklist like this: x-php,mp3,jpeg <br/> Use a comma between each mimetype. Don't use a dot before mimetypes.",
+        'admin_settings.others.mimetypes_blacklist_help'     => "If you want to prevent upload some type of files, just add them to blacklist like this: x-php,mp3,jpeg Use a comma between each mimetype. Don't use a dot before mimetypes.",
         'admin_settings.others.mimetypes_blacklist_plac'     => 'Add mimetypes to Blacklist',
         'admin_settings.others.section_cache'                => 'Application Cache',
         'admin_settings.others.section_others'               => 'Others Settings',
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 8541ece5..e766f6a4 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -14,19 +14,19 @@
     "/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=574e92d23c4b731e3737",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=672caa45ddc69f476084",
     "/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=b209d3c7dea80946c0e1",
+    "/chunks/app-billings.js": "/chunks/app-billings.js?id=961984594b917ecbb5dd",
     "/chunks/app-email.js": "/chunks/app-email.js?id=818ceb6be0fe9f4d06a4",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=325286e1d4e26f766ddd",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=efe2410e0872283642af",
     "/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=388ee5b424fc37d19061",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=7074510a39f75662bdee",
     "/chunks/app-payments.js": "/chunks/app-payments.js?id=af38547bd60f92575c03",
-    "/chunks/app-settings.js": "/chunks/app-settings.js?id=abf2e460a1a57f5fc830",
+    "/chunks/app-settings.js": "/chunks/app-settings.js?id=db54f40c07bdfb86b81e",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=459d95c0256c819ce4bf",
     "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js": "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js?id=107a78323eef0c1d4c81",
     "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=f8562a0dd73fdc9a3f71",
@@ -515,5 +515,102 @@
     "/chunks/app-language.7046d5fd1f6ee803cd98.hot-update.js": "/chunks/app-language.7046d5fd1f6ee803cd98.hot-update.js",
     "/chunks/app-language.31f1aa9bada98dfac7d6.hot-update.js": "/chunks/app-language.31f1aa9bada98dfac7d6.hot-update.js",
     "/chunks/app-language.01bf509b4f467d9224eb.hot-update.js": "/chunks/app-language.01bf509b4f467d9224eb.hot-update.js",
-    "/chunks/app-language.83549f4e8f7eb650a294.hot-update.js": "/chunks/app-language.83549f4e8f7eb650a294.hot-update.js"
+    "/chunks/app-language.83549f4e8f7eb650a294.hot-update.js": "/chunks/app-language.83549f4e8f7eb650a294.hot-update.js",
+    "/js/main.7ad09da15f377163b86f.hot-update.js": "/js/main.7ad09da15f377163b86f.hot-update.js",
+    "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~023fab3c.js": "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~023fab3c.js?id=494f57b28a0ab393efc1",
+    "/chunks/app-settings.7ad09da15f377163b86f.hot-update.js": "/chunks/app-settings.7ad09da15f377163b86f.hot-update.js",
+    "/chunks/app-appearance.6b2d94ab925587764abe.hot-update.js": "/chunks/app-appearance.6b2d94ab925587764abe.hot-update.js",
+    "/chunks/app-appearance.32d55ade47add429cca9.hot-update.js": "/chunks/app-appearance.32d55ade47add429cca9.hot-update.js",
+    "/chunks/app-appearance.e056bb9ce0dbc922b3bc.hot-update.js": "/chunks/app-appearance.e056bb9ce0dbc922b3bc.hot-update.js",
+    "/chunks/app-appearance.573bf2e0f9c353dbebda.hot-update.js": "/chunks/app-appearance.573bf2e0f9c353dbebda.hot-update.js",
+    "/chunks/app-appearance.cb8f49fa43bef260d62f.hot-update.js": "/chunks/app-appearance.cb8f49fa43bef260d62f.hot-update.js",
+    "/chunks/app-appearance.5b54ae94bd32f60aa849.hot-update.js": "/chunks/app-appearance.5b54ae94bd32f60aa849.hot-update.js",
+    "/chunks/app-appearance.dd6cfbb18f6a559ede22.hot-update.js": "/chunks/app-appearance.dd6cfbb18f6a559ede22.hot-update.js",
+    "/chunks/app-appearance.3e4bb0d47ff46c02c7f3.hot-update.js": "/chunks/app-appearance.3e4bb0d47ff46c02c7f3.hot-update.js",
+    "/chunks/app-appearance.e65ab58d5ed3f6c3266f.hot-update.js": "/chunks/app-appearance.e65ab58d5ed3f6c3266f.hot-update.js",
+    "/chunks/app-appearance.9ba7d48b7f7ce2e852ba.hot-update.js": "/chunks/app-appearance.9ba7d48b7f7ce2e852ba.hot-update.js",
+    "/chunks/app-appearance.6212ae2b7faad74df608.hot-update.js": "/chunks/app-appearance.6212ae2b7faad74df608.hot-update.js",
+    "/chunks/app-appearance.d260db46512554392c5d.hot-update.js": "/chunks/app-appearance.d260db46512554392c5d.hot-update.js",
+    "/chunks/app-appearance.70a476e6892d14b7e7e7.hot-update.js": "/chunks/app-appearance.70a476e6892d14b7e7e7.hot-update.js",
+    "/chunks/app-appearance.72741fdc9a691bf8dda2.hot-update.js": "/chunks/app-appearance.72741fdc9a691bf8dda2.hot-update.js",
+    "/chunks/app-appearance.2de0a7602629ee115668.hot-update.js": "/chunks/app-appearance.2de0a7602629ee115668.hot-update.js",
+    "/chunks/app-appearance.d7209a60ce82e6cc1cfe.hot-update.js": "/chunks/app-appearance.d7209a60ce82e6cc1cfe.hot-update.js",
+    "/chunks/app-appearance.c0b627db8eedd1522432.hot-update.js": "/chunks/app-appearance.c0b627db8eedd1522432.hot-update.js",
+    "/chunks/app-appearance.d04a24151c83b75e0eaa.hot-update.js": "/chunks/app-appearance.d04a24151c83b75e0eaa.hot-update.js",
+    "/chunks/app-appearance.0c53ac07cbf9ab593e26.hot-update.js": "/chunks/app-appearance.0c53ac07cbf9ab593e26.hot-update.js",
+    "/chunks/app-others.085e632e960916ad3e91.hot-update.js": "/chunks/app-others.085e632e960916ad3e91.hot-update.js",
+    "/chunks/app-others.0ed38cc7f053e03258aa.hot-update.js": "/chunks/app-others.0ed38cc7f053e03258aa.hot-update.js",
+    "/chunks/app-others.b7f3827f9ccbf495db4d.hot-update.js": "/chunks/app-others.b7f3827f9ccbf495db4d.hot-update.js",
+    "/chunks/app-others.282f46f29ccf9b2e09fe.hot-update.js": "/chunks/app-others.282f46f29ccf9b2e09fe.hot-update.js",
+    "/chunks/app-others.87d380ec523c86e4de8f.hot-update.js": "/chunks/app-others.87d380ec523c86e4de8f.hot-update.js",
+    "/chunks/app-appearance.7d2079527bc9cf0d7755.hot-update.js": "/chunks/app-appearance.7d2079527bc9cf0d7755.hot-update.js",
+    "/chunks/app-others.7d2079527bc9cf0d7755.hot-update.js": "/chunks/app-others.7d2079527bc9cf0d7755.hot-update.js",
+    "/chunks/app-others.1130573126bb61d375ee.hot-update.js": "/chunks/app-others.1130573126bb61d375ee.hot-update.js",
+    "/chunks/app-appearance.cdecbb58f4eb891c2aaa.hot-update.js": "/chunks/app-appearance.cdecbb58f4eb891c2aaa.hot-update.js",
+    "/chunks/app-others.cdecbb58f4eb891c2aaa.hot-update.js": "/chunks/app-others.cdecbb58f4eb891c2aaa.hot-update.js",
+    "/chunks/app-appearance.c3ffafefa7d6a4fc1ea5.hot-update.js": "/chunks/app-appearance.c3ffafefa7d6a4fc1ea5.hot-update.js",
+    "/chunks/app-others.c3ffafefa7d6a4fc1ea5.hot-update.js": "/chunks/app-others.c3ffafefa7d6a4fc1ea5.hot-update.js",
+    "/chunks/app-appearance.46ff7e7e7523071483f5.hot-update.js": "/chunks/app-appearance.46ff7e7e7523071483f5.hot-update.js",
+    "/chunks/app-others.46ff7e7e7523071483f5.hot-update.js": "/chunks/app-others.46ff7e7e7523071483f5.hot-update.js",
+    "/chunks/app-appearance.9877bde6017400b092b9.hot-update.js": "/chunks/app-appearance.9877bde6017400b092b9.hot-update.js",
+    "/chunks/app-others.9877bde6017400b092b9.hot-update.js": "/chunks/app-others.9877bde6017400b092b9.hot-update.js",
+    "/chunks/app-appearance.a265fca65f3cc320a1aa.hot-update.js": "/chunks/app-appearance.a265fca65f3cc320a1aa.hot-update.js",
+    "/chunks/app-others.a265fca65f3cc320a1aa.hot-update.js": "/chunks/app-others.a265fca65f3cc320a1aa.hot-update.js",
+    "/chunks/app-appearance.8987c277b1fb9a56108f.hot-update.js": "/chunks/app-appearance.8987c277b1fb9a56108f.hot-update.js",
+    "/chunks/app-others.8987c277b1fb9a56108f.hot-update.js": "/chunks/app-others.8987c277b1fb9a56108f.hot-update.js",
+    "/chunks/app-others.e4ea4a33bac601f02283.hot-update.js": "/chunks/app-others.e4ea4a33bac601f02283.hot-update.js",
+    "/chunks/app-others.f1ab9a27e715fa7bc515.hot-update.js": "/chunks/app-others.f1ab9a27e715fa7bc515.hot-update.js",
+    "/chunks/app-appearance.63ffb304ae4b293d5926.hot-update.js": "/chunks/app-appearance.63ffb304ae4b293d5926.hot-update.js",
+    "/chunks/app-others.63ffb304ae4b293d5926.hot-update.js": "/chunks/app-others.63ffb304ae4b293d5926.hot-update.js",
+    "/chunks/app-appearance.a499a5d1587680ff6829.hot-update.js": "/chunks/app-appearance.a499a5d1587680ff6829.hot-update.js",
+    "/chunks/app-others.a499a5d1587680ff6829.hot-update.js": "/chunks/app-others.a499a5d1587680ff6829.hot-update.js",
+    "/chunks/app-others.d08338d73d259850766f.hot-update.js": "/chunks/app-others.d08338d73d259850766f.hot-update.js",
+    "/chunks/app-others.da6379c7c8d1027d5d57.hot-update.js": "/chunks/app-others.da6379c7c8d1027d5d57.hot-update.js",
+    "/chunks/app-others.0c89bc9ab737f28adf32.hot-update.js": "/chunks/app-others.0c89bc9ab737f28adf32.hot-update.js",
+    "/chunks/app-others.dc9d3bc8b88f04b8eae4.hot-update.js": "/chunks/app-others.dc9d3bc8b88f04b8eae4.hot-update.js",
+    "/chunks/app-others.846410d3df6c6d8de9d3.hot-update.js": "/chunks/app-others.846410d3df6c6d8de9d3.hot-update.js",
+    "/chunks/app-others.cccddc4bc098f8025904.hot-update.js": "/chunks/app-others.cccddc4bc098f8025904.hot-update.js",
+    "/chunks/app-others.c13c222c67653d5afb0a.hot-update.js": "/chunks/app-others.c13c222c67653d5afb0a.hot-update.js",
+    "/chunks/app-others.bf43809b7cc860589785.hot-update.js": "/chunks/app-others.bf43809b7cc860589785.hot-update.js",
+    "/chunks/app-others.40589ef3c70d27d2011b.hot-update.js": "/chunks/app-others.40589ef3c70d27d2011b.hot-update.js",
+    "/chunks/app-others.3a0a309d9f0fab7722fd.hot-update.js": "/chunks/app-others.3a0a309d9f0fab7722fd.hot-update.js",
+    "/chunks/app-others.2bd15c0bb2290acf5e9e.hot-update.js": "/chunks/app-others.2bd15c0bb2290acf5e9e.hot-update.js",
+    "/chunks/app-others.931567a101219a422d7c.hot-update.js": "/chunks/app-others.931567a101219a422d7c.hot-update.js",
+    "/chunks/app-others.dd6fe18e4185c2e2a68a.hot-update.js": "/chunks/app-others.dd6fe18e4185c2e2a68a.hot-update.js",
+    "/chunks/app-others.edfa4c9a470c7543946b.hot-update.js": "/chunks/app-others.edfa4c9a470c7543946b.hot-update.js",
+    "/chunks/app-others.6d53497af4f62f72259d.hot-update.js": "/chunks/app-others.6d53497af4f62f72259d.hot-update.js",
+    "/chunks/app-others.6ac1243b3eb031de8c48.hot-update.js": "/chunks/app-others.6ac1243b3eb031de8c48.hot-update.js",
+    "/chunks/app-others.b8363b16a536963a27ab.hot-update.js": "/chunks/app-others.b8363b16a536963a27ab.hot-update.js",
+    "/chunks/app-others.19854088d9f6082c6aa1.hot-update.js": "/chunks/app-others.19854088d9f6082c6aa1.hot-update.js",
+    "/chunks/app-others.a35370b83274357ac3bf.hot-update.js": "/chunks/app-others.a35370b83274357ac3bf.hot-update.js",
+    "/chunks/app-others.32c2e7ca1975efd7c681.hot-update.js": "/chunks/app-others.32c2e7ca1975efd7c681.hot-update.js",
+    "/chunks/app-others.d57d3ed03de2b0cb301a.hot-update.js": "/chunks/app-others.d57d3ed03de2b0cb301a.hot-update.js",
+    "/chunks/app-others.e717b36ad8a1a931ae97.hot-update.js": "/chunks/app-others.e717b36ad8a1a931ae97.hot-update.js",
+    "/chunks/app-appearance.74fbd496b704b0144dce.hot-update.js": "/chunks/app-appearance.74fbd496b704b0144dce.hot-update.js",
+    "/chunks/app-others.74fbd496b704b0144dce.hot-update.js": "/chunks/app-others.74fbd496b704b0144dce.hot-update.js",
+    "/chunks/app-others.9c0d4ad392164f787da9.hot-update.js": "/chunks/app-others.9c0d4ad392164f787da9.hot-update.js",
+    "/chunks/app-appearance.a2d82a5f6f9db1e04c58.hot-update.js": "/chunks/app-appearance.a2d82a5f6f9db1e04c58.hot-update.js",
+    "/chunks/app-appearance.7f2d4e244ed45c5bbd65.hot-update.js": "/chunks/app-appearance.7f2d4e244ed45c5bbd65.hot-update.js",
+    "/chunks/app-appearance.a2f346f3d98bf321daf9.hot-update.js": "/chunks/app-appearance.a2f346f3d98bf321daf9.hot-update.js",
+    "/chunks/app-appearance.eded0f8a2e78c18aecaf.hot-update.js": "/chunks/app-appearance.eded0f8a2e78c18aecaf.hot-update.js",
+    "/chunks/app-appearance.2b2e9ad1da63f3e8fdf1.hot-update.js": "/chunks/app-appearance.2b2e9ad1da63f3e8fdf1.hot-update.js",
+    "/chunks/app-others.8ca913f3f518b3abfa9a.hot-update.js": "/chunks/app-others.8ca913f3f518b3abfa9a.hot-update.js",
+    "/chunks/app-others.d4e1bbf4e9726bc2e82f.hot-update.js": "/chunks/app-others.d4e1bbf4e9726bc2e82f.hot-update.js",
+    "/chunks/app-others.f7feab6dcc99cb96b3cd.hot-update.js": "/chunks/app-others.f7feab6dcc99cb96b3cd.hot-update.js",
+    "/chunks/app-others.7236f6920e3bd2214c9f.hot-update.js": "/chunks/app-others.7236f6920e3bd2214c9f.hot-update.js",
+    "/chunks/app-billings.7d7ecb02f6d2679c567a.hot-update.js": "/chunks/app-billings.7d7ecb02f6d2679c567a.hot-update.js",
+    "/chunks/app-billings.524bbb5f410aadd32c42.hot-update.js": "/chunks/app-billings.524bbb5f410aadd32c42.hot-update.js",
+    "/chunks/app-billings.c373f8419a8d670b6d17.hot-update.js": "/chunks/app-billings.c373f8419a8d670b6d17.hot-update.js",
+    "/chunks/app-billings.e124e1959ddf1a5a0f07.hot-update.js": "/chunks/app-billings.e124e1959ddf1a5a0f07.hot-update.js",
+    "/chunks/app-billings.d1cd72765e357dddb2f1.hot-update.js": "/chunks/app-billings.d1cd72765e357dddb2f1.hot-update.js",
+    "/chunks/app-billings.512d3b4e4a2e16aae994.hot-update.js": "/chunks/app-billings.512d3b4e4a2e16aae994.hot-update.js",
+    "/chunks/app-billings.fb0321f2d8ff136bb83d.hot-update.js": "/chunks/app-billings.fb0321f2d8ff136bb83d.hot-update.js",
+    "/chunks/app-billings.e9a5be135f6f25998f50.hot-update.js": "/chunks/app-billings.e9a5be135f6f25998f50.hot-update.js",
+    "/chunks/app-billings.db07dc471571e408976f.hot-update.js": "/chunks/app-billings.db07dc471571e408976f.hot-update.js",
+    "/chunks/app-billings.9e5c82f0a9be708c5a66.hot-update.js": "/chunks/app-billings.9e5c82f0a9be708c5a66.hot-update.js",
+    "/chunks/app-billings.41c4d9d08a777611675b.hot-update.js": "/chunks/app-billings.41c4d9d08a777611675b.hot-update.js",
+    "/chunks/app-appearance.410a8f88442b1ed3bf8c.hot-update.js": "/chunks/app-appearance.410a8f88442b1ed3bf8c.hot-update.js",
+    "/chunks/app-index.c6fb3b854535a11c2ab6.hot-update.js": "/chunks/app-index.c6fb3b854535a11c2ab6.hot-update.js",
+    "/chunks/app-index.d560d8c2fede89054f8d.hot-update.js": "/chunks/app-index.d560d8c2fede89054f8d.hot-update.js",
+    "/chunks/app-settings.2a085a06d96ac8997cf9.hot-update.js": "/chunks/app-settings.2a085a06d96ac8997cf9.hot-update.js"
 }
diff --git a/resources/js/components/Admin/AppInputSwitch.vue b/resources/js/components/Admin/AppInputSwitch.vue
new file mode 100644
index 00000000..3d66923a
--- /dev/null
+++ b/resources/js/components/Admin/AppInputSwitch.vue
@@ -0,0 +1,35 @@
+<template>
+	<div class="mb-7 flex justify-between w-full">
+
+		<!--Label for input-->
+		<div class="leading-5">
+			<label class="text-sm font-bold text-gray-700 mb-1.5 block">
+				{{ title }}:
+			</label>
+
+			<!--Input Description-->
+			<span v-if="description" class="text-xs text-gray-500 leading-3" v-html="description"></span>
+
+			<!--Input Description-->
+			<span v-if="error" class="error-message">
+				{{ error }}
+			</span>
+		</div>
+
+		<!--Form element-->
+		<div>
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'AppInputSwitch',
+		props: [
+			'description',
+			'title',
+			'error',
+		]
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Admin/AppInputText.vue b/resources/js/components/Admin/AppInputText.vue
new file mode 100644
index 00000000..71f45bad
--- /dev/null
+++ b/resources/js/components/Admin/AppInputText.vue
@@ -0,0 +1,31 @@
+<template>
+	<div class="mb-7">
+
+		<!--Label for input-->
+		<label class="text-sm font-bold text-gray-700 mb-1.5 block">
+			{{ title }}:
+		</label>
+
+		<!--Form element-->
+		<slot></slot>
+
+		<!--Input Description-->
+		<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">
+			{{ error }}
+		</span>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'AppInputText',
+		props: [
+			'description',
+			'title',
+			'error',
+		]
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/views/Admin/AppSettings/AppSettings.vue b/resources/js/views/Admin/AppSettings/AppSettings.vue
index 87cd79cf..63c3591b 100644
--- a/resources/js/views/Admin/AppSettings/AppSettings.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettings.vue
@@ -14,36 +14,23 @@
 			</router-link>
 		</div>
 
-		<!--Router Content-->
-		<router-view class="" />
+		<!--Page Content-->
+		<router-view />
     </div>
 </template>
 
 <script>
-    import {UsersIcon, SettingsIcon, Trash2Icon, EyeIcon, FileTextIcon, CodeIcon, MailIcon, CreditCardIcon, HomeIcon} from 'vue-feather-icons'
-	import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
-	import SectionTitle from '/resources/js/components/Others/SectionTitle'
-	import PageHeader from '/resources/js/components/Others/PageHeader'
 	import {mapGetters} from 'vuex'
 
 	export default {
 		name: 'AppSettings',
 		components: {
-			HomeIcon,
-			CreditCardIcon,
-			CodeIcon,
-			MailIcon,
-			FileTextIcon,
-			EyeIcon,
-			UsersIcon,
-			Trash2Icon,
-			SettingsIcon,
-			SectionTitle,
-			MobileHeader,
-			PageHeader,
+
 		},
 		computed: {
-			...mapGetters(['config']),
+			...mapGetters([
+				'config'
+			]),
 		},
 		data() {
 			return {
@@ -65,7 +52,7 @@
 						route: 'AppPayments',
 					},
 					{
-						title: 'Homepage',
+						title: this.$t('Homepage'),
 						route: 'AppIndex',
 					},
 					{
@@ -77,8 +64,3 @@
 		}
 	}
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-	@import '/resources/sass/vuefilemanager/_mixins';
-</style>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
index 70610f5d..5700e803 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
@@ -9,36 +9,18 @@
 					<FormLabel>
 						{{ $t('admin_settings.appearance.section_general') }}
 					</FormLabel>
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.appearance.title') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-							<input @input="$updateText('/admin/settings', 'app_title', app.title)" v-model="app.title" :placeholder="$t('admin_settings.appearance.title_plac')" type="text"
-								   :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.appearance.description') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
-							<input @input="$updateText('/admin/settings', 'app_description', app.description)" v-model="app.description"
-								   :placeholder="$t('admin_settings.appearance.description_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-					<div class="block-wrapper">
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-							<div class="inline-wrapper">
-								<div class="switch-label">
-									<label class="input-label">{{ $t('color_theme') }}:</label>
-									<small class="input-help">{{ $t('color_theme_description') }}</small>
-									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-								</div>
-								<input @input="$updateText('/admin/settings', 'app_color', app.color)" v-model="app.color" :placeholder="$t('admin_settings.appearance.title_plac')" type="color"
-									   :class="{'is-error': errors[0]}" class="focus-border-theme"/>
-							</div>
-						</ValidationProvider>
-					</div>
 
+					<AppInputText :title="$t('admin_settings.appearance.title')">
+						<input @input="$updateText('/admin/settings', 'app_title', app.title)" v-model="app.title" :placeholder="$t('admin_settings.appearance.title_plac')" type="text" class="focus-border-theme input-dark"/>
+					</AppInputText>
+
+					<AppInputText :title="$t('admin_settings.appearance.description')">
+						<input @input="$updateText('/admin/settings', 'app_description', app.description)" v-model="app.description" :placeholder="$t('admin_settings.appearance.description_plac')" type="text" class="focus-border-theme input-dark"/>
+					</AppInputText>
+
+					<AppInputSwitch :title="$t('color_theme')" :description="$t('color_theme_description')">
+						<input @input="$updateText('/admin/settings', 'app_color', app.color)" v-model="app.color" :placeholder="$t('admin_settings.appearance.title_plac')" type="color"/>
+					</AppInputSwitch>
 				</div>
 
 				<div class="card shadow-card">
@@ -85,6 +67,8 @@
 </template>
 
 <script>
+	import AppInputSwitch from "../../../../components/Admin/AppInputSwitch";
+	import AppInputText from "../../../../components/Admin/AppInputText";
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
     import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
@@ -101,6 +85,8 @@
     export default {
         name: 'AppAppearance',
         components: {
+			AppInputSwitch,
+			AppInputText,
             ValidationObserver,
             ValidationProvider,
             StorageItemDetail,
@@ -144,22 +130,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/AppSettings/AppSettingsTabs/Billings.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
index 2d3b1d73..478e84af 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
@@ -1,107 +1,55 @@
 <template>
     <PageTab :is-loading="isLoading">
+		<div v-if="billingInformation" class="card shadow-card">
+			<FormLabel>
+				{{ $t('admin_settings.billings.section_company') }}
+			</FormLabel>
 
-        <!--Personal Information-->
-        <PageTabGroup v-if="billingInformation">
-            <div class="form block-form">
+			<AppInputText :title="$t('admin_settings.billings.company_name')">
+				<input @input="$updateText('/admin/settings', 'billing_name', billingInformation.billing_name)" v-model="billingInformation.billing_name" :placeholder="$t('admin_settings.billings.company_name_plac')" type="text" class="focus-border-theme input-dark"/>
+			</AppInputText>
 
-				<div class="card shadow-card">
-					<FormLabel>
-						{{ $t('admin_settings.billings.section_company') }}
-					</FormLabel>
+			<AppInputText :title="$t('admin_settings.billings.vat')">
+				<input @input="$updateText('/admin/settings', 'billing_vat_number', billingInformation.billing_vat_number)" v-model="billingInformation.billing_vat_number" :placeholder="$t('admin_settings.billings.vat_plac')" type="text" class="focus-border-theme input-dark"/>
+			</AppInputText>
+		</div>
 
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.billings.company_name') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Name"
-											rules="required" v-slot="{ errors }">
-							<input @input="$updateText('/admin/settings', 'billing_name', billingInformation.billing_name)" v-model="billingInformation.billing_name" :placeholder="$t('admin_settings.billings.company_name_plac')"
-								   type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
+		<div v-if="billingInformation" class="card shadow-card">
+			<FormLabel>
+				{{ $t('admin_settings.billings.section_billing') }}
+			</FormLabel>
 
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.billings.vat') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Vat Number"
-											rules="required" v-slot="{ errors }">
-							<input @input="$updateText('/admin/settings', 'billing_vat_number', billingInformation.billing_vat_number)" v-model="billingInformation.billing_vat_number" :placeholder="$t('admin_settings.billings.vat_plac')"
-								   type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-				</div>
+			<AppInputText :title="$t('admin_settings.billings.country')">
+				<SelectInput @input="$updateText('/admin/settings', 'billing_country', billingInformation.billing_country)" v-model="billingInformation.billing_country" :default="billingInformation.billing_country" :options="countries" :placeholder="$t('admin_settings.billings.country_plac')"/>
+			</AppInputText>
 
-				<div class="card shadow-card">
-					<FormLabel>
-						{{ $t('admin_settings.billings.section_billing') }}
-					</FormLabel>
+			<AppInputText :title="$t('admin_settings.billings.address')">
+				<input @input="$updateText('/admin/settings', 'billing_address', billingInformation.billing_address)" v-model="billingInformation.billing_address" :placeholder="$t('admin_settings.billings.address_plac')" type="text" class="focus-border-theme input-dark"/>
+			</AppInputText>
 
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.billings.country') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Country"
-											rules="required" v-slot="{ errors }">
-							<SelectInput @input="$updateText('/admin/settings', 'billing_country', billingInformation.billing_country)" v-model="billingInformation.billing_country" :default="billingInformation.billing_country" :options="countries" :placeholder="$t('admin_settings.billings.country_plac')" :isError="errors[0]"/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
+			<div class="flex space-x-4">
+				<AppInputText :title="$t('admin_settings.billings.city')">
+					<input @input="$updateText('/admin/settings', 'billing_city', billingInformation.billing_city)" v-model="billingInformation.billing_city" :placeholder="$t('admin_settings.billings.city_plac')" type="text" class="focus-border-theme input-dark"/>
+				</AppInputText>
 
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.billings.address') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Address"
-											rules="required" v-slot="{ errors }">
-							<input @input="$updateText('/admin/settings', 'billing_address', billingInformation.billing_address)" v-model="billingInformation.billing_address" :placeholder="$t('admin_settings.billings.address_plac')"
-								   type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
+				<AppInputText :title="$t('admin_settings.billings.postal_code')">
+					<input @input="$updateText('/admin/settings', 'billing_postal_code', billingInformation.billing_postal_code)" v-model="billingInformation.billing_postal_code" :placeholder="$t('admin_settings.billings.postal_code_plac')" type="text" class="focus-border-theme input-dark"/>
+				</AppInputText>
+			</div>
 
-					<div class="wrapper-inline">
-						<div class="block-wrapper">
-							<label>{{ $t('admin_settings.billings.city') }}:</label>
-							<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing City"
-												rules="required" v-slot="{ errors }">
-								<input @input="$updateText('/admin/settings', 'billing_city', billingInformation.billing_city)" v-model="billingInformation.billing_city" :placeholder="$t('admin_settings.billings.city_plac')"
-									   type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
-								<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-							</ValidationProvider>
-						</div>
-						<div class="block-wrapper">
-							<label>{{ $t('admin_settings.billings.postal_code') }}:</label>
-							<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Postal Code"
-												rules="required" v-slot="{ errors }">
-								<input @input="$updateText('/admin/settings', 'billing_postal_code', billingInformation.billing_postal_code)" v-model="billingInformation.billing_postal_code"
-									   :placeholder="$t('admin_settings.billings.postal_code_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
-								<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-							</ValidationProvider>
-						</div>
-					</div>
+			<AppInputText :title="$t('admin_settings.billings.state')">
+				<input @input="$updateText('/admin/settings', 'billing_state', billingInformation.billing_state)" v-model="billingInformation.billing_state" :placeholder="$t('admin_settings.billings.state_plac')" type="text" class="focus-border-theme input-dark"/>
+			</AppInputText>
 
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.billings.state') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing State"
-											rules="required" v-slot="{ errors }">
-							<input @input="$updateText('/admin/settings', 'billing_state', billingInformation.billing_state)" v-model="billingInformation.billing_state" :placeholder="$t('admin_settings.billings.state_plac')"
-								   type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.billings.phone_number') }}:</label>
-						<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Phone Number"
-											v-slot="{ errors }">
-							<input @input="$updateText('/admin/settings', 'billing_phone_number', billingInformation.billing_phone_number)" v-model="billingInformation.billing_phone_number" :placeholder="$t('admin_settings.billings.phone_number_plac')"
-								   type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-				</div>
-            </div>
-        </PageTabGroup>
+			<AppInputText :title="$t('admin_settings.billings.phone_number')">
+				<input @input="$updateText('/admin/settings', 'billing_phone_number', billingInformation.billing_phone_number)" v-model="billingInformation.billing_phone_number" :placeholder="$t('admin_settings.billings.phone_number_plac')" type="text" class="focus-border-theme input-dark"/>
+			</AppInputText>
+		</div>
     </PageTab>
 </template>
 
 <script>
+	import AppInputText from "../../../../components/Admin/AppInputText";
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
     import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
@@ -122,6 +70,7 @@
             ValidationObserver,
             ValidationProvider,
             StorageItemDetail,
+			AppInputText,
             PageTabGroup,
             SelectInput,
             ImageInput,
@@ -133,7 +82,9 @@
             InfoBox,
         },
         computed: {
-            ...mapGetters(['countries']),
+            ...mapGetters([
+				'countries'
+			]),
         },
         data() {
             return {
@@ -160,27 +111,7 @@
                         billing_city: response.data.billing_city,
                         billing_name: response.data.billing_name,
                     }
-
                 })
         }
     }
 </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/AppSettings/AppSettingsTabs/Index.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
index 8d42dbf3..fea954af 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
@@ -6,24 +6,12 @@
 
 				<div class="card shadow-card">
 					<FormLabel>
-						Home Page
+						{{ $t('Homepage') }}
 					</FormLabel>
 
-					<div class="block-wrapper">
-						<div class="input-wrapper">
-							<div class="inline-wrapper">
-								<div class="switch-label">
-									<label class="input-label">
-										Allow Homepage
-									</label>
-									<small class="input-help">
-										When this is turned on, your visitors can visit your default homepage.
-									</small>
-								</div>
-								<SwitchInput @input="$updateText('/admin/settings', 'allow_homepage', app.allow_homepage)" v-model="app.allow_homepage" class="switch" :state="app.allow_homepage"/>
-							</div>
-						</div>
-					</div>
+					<AppInputSwitch :title="$t('Allow Homepage')" :description="$t('When this is turned on, your visitors can visit your default homepage.')">
+						<SwitchInput @input="$updateText('/admin/settings', 'allow_homepage', app.allow_homepage)" v-model="app.allow_homepage" class="switch" :state="app.allow_homepage"/>
+					</AppInputSwitch>
 				</div>
 
                 <!--Header-->
@@ -255,6 +243,8 @@
 </template>
 
 <script>
+import AppInputSwitch from "../../../../components/Admin/AppInputSwitch";
+import AppInputText from "../../../../components/Admin/AppInputText";
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
 import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
 import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
@@ -273,6 +263,8 @@ import { mapGetters } from 'vuex'
 export default {
     name: 'AppIndex',
     components: {
+		AppInputSwitch,
+		AppInputText,
         ValidationObserver,
         ValidationProvider,
         StorageItemDetail,
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
index dea92612..71a92354 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
@@ -1,140 +1,88 @@
 <template>
     <PageTab :is-loading="isLoading">
+		<div class="card shadow-card">
+			<FormLabel>
+				{{ $t('admin_settings.others.section_user') }}
+			</FormLabel>
 
-        <!--Personal Information-->
-        <PageTabGroup v-if="app">
-            <div class="form block-form">
+			<AppInputSwitch :title="$t('admin_settings.others.storage_limit')" :description="$t('admin_settings.others.storage_limit_help')">
+				<SwitchInput
+					@input="$updateText('/admin/settings', 'storage_limitation', app.storageLimitation)"
+					v-model="app.storageLimitation"
+					:state="app.storageLimitation"
+					class="switch"
+				/>
+			</AppInputSwitch>
 
-				<div class="card shadow-card">
-					<FormLabel>
-						{{ $t('admin_settings.others.section_user') }}
-					</FormLabel>
-					<div class="block-wrapper">
-						<div class="input-wrapper">
-							<div class="inline-wrapper">
-								<div class="switch-label">
-									<label class="input-label">
-										{{ $t('admin_settings.others.storage_limit') }}:
-									</label>
-									<small class="input-help" v-html="$t('admin_settings.others.storage_limit_help')"></small>
-								</div>
-								<SwitchInput
-									@input="$updateText('/admin/settings', 'storage_limitation', app.storageLimitation)"
-									v-model="app.storageLimitation"
-									class="switch"
-									:state="app.storageLimitation"
-								/>
-							</div>
-						</div>
-					</div>
-					<div class="block-wrapper" v-if="app.storageLimitation">
-						<label>{{ $t('admin_settings.others.default_storage') }}:</label>
-						<ValidationProvider tag="div" mode="passive" name="Default Storage Space" rules="required" v-slot="{ errors }">
-							<input @input="$updateText('/admin/settings', 'default_storage_amount', app.defaultStorage)"
-								   v-model="app.defaultStorage"
-								   min="1"
-								   max="999999999"
-								   :placeholder="$t('admin_settings.others.default_storage_plac')"
-								   type="number"
-								   :class="{'is-error': errors[0]}"
-								   class="focus-border-theme input-dark"
-							/>
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-					<div class="block-wrapper">
-						<div class="input-wrapper">
-							<div class="inline-wrapper">
-								<div class="switch-label">
-									<label class="input-label">
-										{{ $t('admin_settings.others.allow_registration') }}:
-									</label>
-									<small class="input-help" v-html="$t('admin_settings.others.allow_registration_help')"></small>
-								</div>
-								<SwitchInput @input="$updateText('/admin/settings', 'registration', app.userRegistration)"
-											 v-model="app.userRegistration"
-											 class="switch"
-											 :state="app.userRegistration"
-								/>
-							</div>
-						</div>
-					</div>
-					<div class="block-wrapper">
-						<div class="input-wrapper">
-							<div class="inline-wrapper">
-								<div class="switch-label">
-									<label class="input-label">
-										{{ $t('admin_settings.others.allow_user_verification') }}:
-									</label>
-									<small class="input-help" v-html="$t('admin_settings.others.allow_user_verification_help')"></small>
-								</div>
-								<SwitchInput @input="$updateText('/admin/settings', 'user_verification', app.userVerification)"
-											 v-model="app.userVerification"
-											 class="switch"
-											 :state="app.userVerification"
-								/>
-							</div>
-						</div>
-					</div>
-				</div>
+			<AppInputText v-if="app.storageLimitation" :title="$t('admin_settings.others.default_storage')">
+				<input @input="$updateText('/admin/settings', 'default_storage_amount', app.defaultStorage)"
+					   v-model="app.defaultStorage"
+					   min="1"
+					   max="999999999"
+					   :placeholder="$t('admin_settings.others.default_storage_plac')"
+					   type="number"
+					   class="focus-border-theme input-dark"
+				/>
+			</AppInputText>
 
-				<div class="card shadow-card">
-					<FormLabel>
-						{{ $t('admin_settings.others.section_others') }}
-					</FormLabel>
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.others.contact_email') }}:</label>
-						<ValidationProvider tag="div" mode="passive" name="Contact Email"
-											rules="required" v-slot="{ errors }">
-							<input class="focus-border-theme input-dark" @input="$updateText('/admin/settings', 'contact_email', app.contactMail)" v-model="app.contactMail" :placeholder="$t('admin_settings.others.contact_email_plac')" type="email" :class="{'is-error': errors[0]}" />
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.others.google_analytics') }}:</label>
-						<ValidationProvider tag="div" mode="passive" name="Google Analytics Code"
-											v-slot="{ errors }">
-							<input @input="$updateText('/admin/settings', 'google_analytics', app.googleAnalytics, true)" v-model="app.googleAnalytics"
-								   :placeholder="$t('admin_settings.others.google_analytics_plac')"
-								   type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-					</div>
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.others.mimetypes_blacklist') }}:</label>
-						<ValidationProvider tag="div" mode="passive" name="Mimetypes Blacklist" v-slot="{ errors }">
-							<textarea rows="2" @input="$updateText('/admin/settings', 'mimetypes_blacklist', app.mimetypesBlacklist, true)" v-model="app.mimetypesBlacklist" :placeholder="$t('admin_settings.others.mimetypes_blacklist_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-						<small class="input-help" v-html="$t('admin_settings.others.mimetypes_blacklist_help')"></small>
-					</div>
-					<div class="block-wrapper">
-						<label>{{ $t('admin_settings.others.upload_limit') }}:</label>
-						<ValidationProvider tag="div" mode="passive" name="Upload Limit" v-slot="{ errors }">
-							<input @input="$updateText('/admin/settings', 'upload_limit', app.uploadLimit, true)" v-model="app.uploadLimit" :placeholder="$t('admin_settings.others.upload_limit_plac')" type="number" min="0" step="1" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
-							<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-						</ValidationProvider>
-						<small class="input-help" v-html="$t('admin_settings.others.upload_limit_help')"></small>
-					</div>
-				</div>
+			<AppInputSwitch :title="$t('admin_settings.others.allow_registration')" :description="$t('admin_settings.others.allow_registration_help')">
+				<SwitchInput
+					@input="$updateText('/admin/settings', 'registration', app.userRegistration)"
+					v-model="app.userRegistration"
+					class="switch"
+					:state="app.userRegistration"
+				/>
+			</AppInputSwitch>
 
-				<div class="card shadow-card">
-					<FormLabel>
-						{{ $t('admin_settings.others.section_cache') }}
-					</FormLabel>
-					<InfoBox>
-						{{ $t('admin_settings.others.cache_disclaimer') }}
-					</InfoBox>
-					<ButtonBase @click.native="flushCache" :loading="isFlushingCache" :disabled="isFlushingCache" type="submit" button-style="theme" class="submit-button">
-						{{ $t('admin_settings.others.cache_clear') }}
-					</ButtonBase>
-				</div>
-            </div>
-        </PageTabGroup>
+			<AppInputSwitch :title="$t('admin_settings.others.allow_user_verification')" :description="$t('admin_settings.others.allow_user_verification_help')">
+				<SwitchInput
+					@input="$updateText('/admin/settings', 'user_verification', app.userVerification)"
+					v-model="app.userVerification"
+					class="switch"
+					:state="app.userVerification"
+				/>
+			</AppInputSwitch>
+		</div>
+
+		<div class="card shadow-card">
+			<FormLabel>
+				{{ $t('admin_settings.others.section_others') }}
+			</FormLabel>
+
+			<AppInputText :title="$t('admin_settings.others.contact_email')">
+				<input class="focus-border-theme input-dark" @input="$updateText('/admin/settings', 'contact_email', app.contactMail)" v-model="app.contactMail" :placeholder="$t('admin_settings.others.contact_email_plac')" type="email" />
+			</AppInputText>
+
+			<AppInputText :title="$t('admin_settings.others.google_analytics')">
+				<input @input="$updateText('/admin/settings', 'google_analytics', app.googleAnalytics, true)" v-model="app.googleAnalytics" :placeholder="$t('admin_settings.others.google_analytics_plac')" type="text" class="focus-border-theme input-dark" />
+			</AppInputText>
+
+			<AppInputText :title="$t('admin_settings.others.mimetypes_blacklist')" :description="$t('admin_settings.others.mimetypes_blacklist_help')">
+				<textarea rows="2" @input="$updateText('/admin/settings', 'mimetypes_blacklist', app.mimetypesBlacklist, true)" v-model="app.mimetypesBlacklist" :placeholder="$t('admin_settings.others.mimetypes_blacklist_plac')" type="text" class="focus-border-theme input-dark" />
+			</AppInputText>
+
+			<AppInputText :title="$t('admin_settings.others.upload_limit')" :description="$t('admin_settings.others.upload_limit_help')">
+				<input @input="$updateText('/admin/settings', 'upload_limit', app.uploadLimit, true)" v-model="app.uploadLimit" :placeholder="$t('admin_settings.others.upload_limit_plac')" type="number" min="0" step="1" class="focus-border-theme input-dark" />
+			</AppInputText>
+		</div>
+
+		<div class="card shadow-card">
+			<FormLabel>
+				{{ $t('admin_settings.others.section_cache') }}
+			</FormLabel>
+			<InfoBox>
+				{{ $t('admin_settings.others.cache_disclaimer') }}
+			</InfoBox>
+			<ButtonBase @click.native="flushCache" :loading="isFlushingCache" :disabled="isFlushingCache" type="submit" button-style="theme" class="submit-button">
+				{{ $t('admin_settings.others.cache_clear') }}
+			</ButtonBase>
+		</div>
     </PageTab>
 </template>
 
 <script>
+	import AppInputSwitch from "../../../../components/Admin/AppInputSwitch";
+	import AppInputText from "../../../../components/Admin/AppInputText";
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
 	import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
 	import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
@@ -153,6 +101,8 @@
 	export default {
 		name: 'AppOthers',
 		components: {
+			AppInputSwitch,
+			AppInputText,
 			ValidationObserver,
 			ValidationProvider,
 			StorageItemDetail,
@@ -214,13 +164,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>