From bb4f66f15918f439cb3f3ff470fe381b67d7ffd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Thu, 20 Jan 2022 10:51:24 +0100
Subject: [PATCH] account settings refactoring

---
 public/mix-manifest.json               |  78 +++++++++---
 resources/js/store/modules/userAuth.js |   7 +-
 resources/js/views/Profile.vue         |   2 +-
 resources/js/views/User/Settings.vue   | 163 +++++++++----------------
 4 files changed, 129 insertions(+), 121 deletions(-)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index f72d3394..f61a4be9 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -16,16 +16,16 @@
     "/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=7c1f56dddcaa83704a70",
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=c0aba5adcb5fc83094c9",
     "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=afeba4ebd13af7e995be",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=de219ada9218e395d85f",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=1d5319a48a28f62bb131",
     "/chunks/app-appearance~chunks/app-email~chunks/app-index~chunks/app-others~chunks/payments/billings~c~45d16af9.js": "/chunks/app-appearance~chunks/app-email~chunks/app-index~chunks/app-others~chunks/payments/billings~c~45d16af9.js?id=a4b9a9a416c656f4d95d",
     "/chunks/app-appearance~chunks/app-email~chunks/app-index~chunks/app-others~chunks/payments/billings~c~fdb7bddc.js": "/chunks/app-appearance~chunks/app-email~chunks/app-index~chunks/app-others~chunks/payments/billings~c~fdb7bddc.js?id=c5ac05de67d02437f154",
-    "/chunks/app-email.js": "/chunks/app-email.js?id=982f79b1b3759d78b372",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=306fd0555edfdf18df60",
+    "/chunks/app-email.js": "/chunks/app-email.js?id=3b8d81b3f01fd4d10e0c",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=fb1f81d6571b2dd12e3c",
     "/chunks/app-language.js": "/chunks/app-language.js?id=ee7cf0a7210cb7ec2b51",
     "/chunks/app-language~chunks/files~chunks/my-shared-items~chunks/pages~chunks/plans~chunks/recent-uplo~8bb1c067.js": "/chunks/app-language~chunks/files~chunks/my-shared-items~chunks/pages~chunks/plans~chunks/recent-uplo~8bb1c067.js?id=4d747b1517b5d8c25c7e",
     "/chunks/app-language~chunks/page-edit~chunks/pages~chunks/plan-create/fixed~chunks/plan-create/metere~d3e88b85.js": "/chunks/app-language~chunks/page-edit~chunks/pages~chunks/plan-create/fixed~chunks/plan-create/metere~d3e88b85.js?id=f3e38542d7a5f14480dc",
     "/chunks/app-others.js": "/chunks/app-others.js?id=ed899e0c8ae8aa1c7741",
-    "/chunks/app-others~chunks/payments/settings.js": "/chunks/app-others~chunks/payments/settings.js?id=424227e684cd16e77cdc",
+    "/chunks/app-others~chunks/payments/settings.js": "/chunks/app-others~chunks/payments/settings.js?id=a9748a3aa53098b75df6",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=62ce73b2d66590912cbc",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=eccbfcc8ca52a7739539",
     "/chunks/billing.js": "/chunks/billing.js?id=d447a1d429f6076777ae",
@@ -55,26 +55,26 @@
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=1ce1c4f40fbb672c6c3e",
     "/chunks/pages.js": "/chunks/pages.js?id=fc74b3c4250317f9955f",
     "/chunks/payments.js": "/chunks/payments.js?id=56a633689fc98ab71b92",
-    "/chunks/payments/billings.js": "/chunks/payments/billings.js?id=ddeb484509e788db1eda",
+    "/chunks/payments/billings.js": "/chunks/payments/billings.js?id=21c286ff2723603036ea",
     "/chunks/payments/settings.js": "/chunks/payments/settings.js?id=2ae059b694da0f255e47",
     "/chunks/plan.js": "/chunks/plan.js?id=fc9e9e0b9bac63514475",
     "/chunks/plan-create/fixed.js": "/chunks/plan-create/fixed.js?id=75b6e639a1fb66d34f10",
     "/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=22a5c4fb60a77b72cd4e",
     "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=8289ae01c7e56404239b",
     "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=7f623c8a4002f17eecef",
-    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=7eff560fea52770a642f",
+    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=24e47be06cbf2fedbf05",
     "/chunks/plans.js": "/chunks/plans.js?id=293e7e8d59da542a9710",
     "/chunks/platform.js": "/chunks/platform.js?id=f16ebede38a3f225f480",
     "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=6660d58dcc0bb5030e3d",
     "/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=ca9ca67afd5839597647",
-    "/chunks/profile.js": "/chunks/profile.js?id=8688d9c7ff850e6989e6",
+    "/chunks/profile.js": "/chunks/profile.js?id=9b2d8aef181505f9b684",
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a81388efd770d51f8a9c",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=d9af0efad2af2679954b",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=8577d4c771602671b38a",
-    "/chunks/settings.js": "/chunks/settings.js?id=878db4aace652942be5b",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=1ac00b8ab720794abdea",
+    "/chunks/settings.js": "/chunks/settings.js?id=5267412fac612ee9003a",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=1cb5a9edc84a2fd08589",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=84f35e2124d825cc5039",
-    "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=aafc9cd6aa47b01bc25a",
+    "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=dd0e09a6a1dcd21820cf",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
     "/chunks/shared.js": "/chunks/shared.js?id=db60726012b6d246bd77",
     "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=f8da9fc2e251efc885f5",
@@ -94,10 +94,10 @@
     "/chunks/trash.js": "/chunks/trash.js?id=1f5f349fb9ec23ba2e93",
     "/chunks/user.js": "/chunks/user.js?id=d47acfdc8985d8823872",
     "/chunks/user-create.js": "/chunks/user-create.js?id=ec5e0749e0fc93be4664",
-    "/chunks/user-delete.js": "/chunks/user-delete.js?id=583f4b95444d3d85550e",
-    "/chunks/user-detail.js": "/chunks/user-detail.js?id=d007b9e4c73748be49e4",
-    "/chunks/user-password.js": "/chunks/user-password.js?id=da0dced867709ba29629",
-    "/chunks/user-storage.js": "/chunks/user-storage.js?id=dc15b1ab19069deb07a1",
+    "/chunks/user-delete.js": "/chunks/user-delete.js?id=d748d3ec3e036c247583",
+    "/chunks/user-detail.js": "/chunks/user-detail.js?id=1639da11ff1a649d6dbf",
+    "/chunks/user-password.js": "/chunks/user-password.js?id=979fd45e82e25a8445b4",
+    "/chunks/user-storage.js": "/chunks/user-storage.js?id=7845a28e3813c9308d35",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=ab860189f1c734dc042c",
     "/chunks/users.js": "/chunks/users.js?id=30dcb71f8bc48a2c8893",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~ch~7523d900.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~ch~7523d900.js?id=02104d6d78a8ffe97c12",
@@ -477,5 +477,53 @@
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.8da3564c79e1fd8a7749.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.8da3564c79e1fd8a7749.hot-update.js",
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.11e2ddf34bd35d6c716b.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.11e2ddf34bd35d6c716b.hot-update.js",
     "/js/main.4c3118c34754f2d5e715.hot-update.js": "/js/main.4c3118c34754f2d5e715.hot-update.js",
-    "/js/main.cb8d6e0528dcc6cf470d.hot-update.js": "/js/main.cb8d6e0528dcc6cf470d.hot-update.js"
+    "/js/main.cb8d6e0528dcc6cf470d.hot-update.js": "/js/main.cb8d6e0528dcc6cf470d.hot-update.js",
+    "/chunks/profile.16b2bec61fbfb2b5bf54.hot-update.js": "/chunks/profile.16b2bec61fbfb2b5bf54.hot-update.js",
+    "/chunks/profile.c5a9c1601433c6140999.hot-update.js": "/chunks/profile.c5a9c1601433c6140999.hot-update.js",
+    "/chunks/profile.8ea9e1486789698a30f7.hot-update.js": "/chunks/profile.8ea9e1486789698a30f7.hot-update.js",
+    "/chunks/profile.dec6a152332b59c93f02.hot-update.js": "/chunks/profile.dec6a152332b59c93f02.hot-update.js",
+    "/chunks/profile.f2f071753de521325652.hot-update.js": "/chunks/profile.f2f071753de521325652.hot-update.js",
+    "/chunks/profile.9bdb749f9948eb6f0fb6.hot-update.js": "/chunks/profile.9bdb749f9948eb6f0fb6.hot-update.js",
+    "/chunks/profile.cc68e6bb5e7ef61730c8.hot-update.js": "/chunks/profile.cc68e6bb5e7ef61730c8.hot-update.js",
+    "/chunks/profile.6aaf414df764cac07efa.hot-update.js": "/chunks/profile.6aaf414df764cac07efa.hot-update.js",
+    "/chunks/profile.5d6d0414cd7ec05a114d.hot-update.js": "/chunks/profile.5d6d0414cd7ec05a114d.hot-update.js",
+    "/chunks/profile.0fcd687569eb7c3beb34.hot-update.js": "/chunks/profile.0fcd687569eb7c3beb34.hot-update.js",
+    "/chunks/profile.de066314c641648113f0.hot-update.js": "/chunks/profile.de066314c641648113f0.hot-update.js",
+    "/chunks/profile.60b655549e3d86f432ca.hot-update.js": "/chunks/profile.60b655549e3d86f432ca.hot-update.js",
+    "/chunks/profile.004babbb25ddaf346335.hot-update.js": "/chunks/profile.004babbb25ddaf346335.hot-update.js",
+    "/chunks/profile.f7394f1987cd2db04a0c.hot-update.js": "/chunks/profile.f7394f1987cd2db04a0c.hot-update.js",
+    "/js/main.e1bf7ffd54ed6e7e2c45.hot-update.js": "/js/main.e1bf7ffd54ed6e7e2c45.hot-update.js",
+    "/chunks/profile.95a247cd12017bf420b0.hot-update.js": "/chunks/profile.95a247cd12017bf420b0.hot-update.js",
+    "/chunks/profile.d71ed2b5fcdf77867696.hot-update.js": "/chunks/profile.d71ed2b5fcdf77867696.hot-update.js",
+    "/chunks/profile.1ff7b1009716b014bfdd.hot-update.js": "/chunks/profile.1ff7b1009716b014bfdd.hot-update.js",
+    "/chunks/profile.25d0c3343c094180a7d6.hot-update.js": "/chunks/profile.25d0c3343c094180a7d6.hot-update.js",
+    "/chunks/profile.2cd090b474ba4b94dcee.hot-update.js": "/chunks/profile.2cd090b474ba4b94dcee.hot-update.js",
+    "/chunks/profile.1132d79b93c196007625.hot-update.js": "/chunks/profile.1132d79b93c196007625.hot-update.js",
+    "/chunks/profile.8eb90c1e1b3be6331306.hot-update.js": "/chunks/profile.8eb90c1e1b3be6331306.hot-update.js",
+    "/chunks/profile.d364b039abf1fe2f4768.hot-update.js": "/chunks/profile.d364b039abf1fe2f4768.hot-update.js",
+    "/chunks/settings.4e20fceb15df05cda812.hot-update.js": "/chunks/settings.4e20fceb15df05cda812.hot-update.js",
+    "/chunks/settings.2bd38e8e1b598ef99bd8.hot-update.js": "/chunks/settings.2bd38e8e1b598ef99bd8.hot-update.js",
+    "/js/main.875bb9a460fc86eb1dcd.hot-update.js": "/js/main.875bb9a460fc86eb1dcd.hot-update.js",
+    "/chunks/profile.b5cfab0f0adc17c4b832.hot-update.js": "/chunks/profile.b5cfab0f0adc17c4b832.hot-update.js",
+    "/chunks/profile.3f828488a56be0d421c9.hot-update.js": "/chunks/profile.3f828488a56be0d421c9.hot-update.js",
+    "/chunks/profile.19ffa11e1cef648b3f7d.hot-update.js": "/chunks/profile.19ffa11e1cef648b3f7d.hot-update.js",
+    "/chunks/profile.e114b95e03dc92164a4d.hot-update.js": "/chunks/profile.e114b95e03dc92164a4d.hot-update.js",
+    "/chunks/profile.a7e70530d5be880321be.hot-update.js": "/chunks/profile.a7e70530d5be880321be.hot-update.js",
+    "/chunks/profile.ed0ee2daaca91ae5a412.hot-update.js": "/chunks/profile.ed0ee2daaca91ae5a412.hot-update.js",
+    "/chunks/profile.f003af5a04d299111f56.hot-update.js": "/chunks/profile.f003af5a04d299111f56.hot-update.js",
+    "/chunks/profile.701462c396cb03bc5482.hot-update.js": "/chunks/profile.701462c396cb03bc5482.hot-update.js",
+    "/chunks/profile.5b71ee7b5a1a680f3979.hot-update.js": "/chunks/profile.5b71ee7b5a1a680f3979.hot-update.js",
+    "/chunks/profile.8d49ff353b8be688e07c.hot-update.js": "/chunks/profile.8d49ff353b8be688e07c.hot-update.js",
+    "/chunks/profile.1c076beab97ae8bc4229.hot-update.js": "/chunks/profile.1c076beab97ae8bc4229.hot-update.js",
+    "/js/main.a98491da4371a3e7ac00.hot-update.js": "/js/main.a98491da4371a3e7ac00.hot-update.js",
+    "/chunks/app-appearance~chunks/app-email~chunks/app-index~chunks/app-others~chunks/payments/billings~c~e50006d2.js": "/chunks/app-appearance~chunks/app-email~chunks/app-index~chunks/app-others~chunks/payments/billings~c~e50006d2.js?id=b2e7d3c9fd9453ef1661",
+    "/chunks/app-language~chunks/page-edit~chunks/pages~chunks/plan-create/fixed~chunks/plan-create/metere~4af4eca1.js": "/chunks/app-language~chunks/page-edit~chunks/pages~chunks/plan-create/fixed~chunks/plan-create/metere~4af4eca1.js?id=09ecd5fcd6ca6f6e76ba",
+    "/chunks/plan-subscribers.a98491da4371a3e7ac00.hot-update.js": "/chunks/plan-subscribers.a98491da4371a3e7ac00.hot-update.js",
+    "/chunks/profile.a98491da4371a3e7ac00.hot-update.js": "/chunks/profile.a98491da4371a3e7ac00.hot-update.js",
+    "/chunks/settings~chunks/settings-password.a98491da4371a3e7ac00.hot-update.js": "/chunks/settings~chunks/settings-password.a98491da4371a3e7ac00.hot-update.js",
+    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~ch~9be62a3c.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~ch~9be62a3c.js?id=f6dd33e4294d33d5e335",
+    "/chunks/profile.1d0fe88071466d1d684b.hot-update.js": "/chunks/profile.1d0fe88071466d1d684b.hot-update.js",
+    "/chunks/profile.550727cd8a714439e35b.hot-update.js": "/chunks/profile.550727cd8a714439e35b.hot-update.js",
+    "/chunks/profile.efdfda2c514b898e4626.hot-update.js": "/chunks/profile.efdfda2c514b898e4626.hot-update.js",
+    "/chunks/profile.834b3b4cc71b24445672.hot-update.js": "/chunks/profile.834b3b4cc71b24445672.hot-update.js"
 }
diff --git a/resources/js/store/modules/userAuth.js b/resources/js/store/modules/userAuth.js
index 66d4054f..3a0ad87a 100644
--- a/resources/js/store/modules/userAuth.js
+++ b/resources/js/store/modules/userAuth.js
@@ -137,8 +137,11 @@ const mutations = {
             state.user.data.relationships.favourites.data.push(item)
         })
     },
-    UPDATE_NAME(state, name) {
-        state.user.data.relationships.settings.data.attributes.name = name
+    UPDATE_FIRST_NAME(state, name) {
+        state.user.data.relationships.settings.data.attributes.first_name = name
+    },
+    UPDATE_LAST_NAME(state, name) {
+        state.user.data.relationships.settings.data.attributes.last_name = name
     },
     UPDATE_AVATAR(state, avatar) {
         state.user.data.relationships.settings.data.attributes.avatar.sm = avatar
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index 27470a43..f282f7d4 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -34,7 +34,7 @@
                             </div>
                             <div class="info">
                                 <b class="name">
-                                    {{ user.data.relationships.settings.data.attributes.name }}
+                                    {{ user.data.relationships.settings.data.attributes.first_name }} {{ user.data.relationships.settings.data.attributes.last_name }}
 
                                     <ColorLabel v-if="this.config.subscriptionType === 'fixed'" :color="subscriptionColor">
                                         {{ subscriptionStatus }}
diff --git a/resources/js/views/User/Settings.vue b/resources/js/views/User/Settings.vue
index e2dbf0b6..dcda8538 100644
--- a/resources/js/views/User/Settings.vue
+++ b/resources/js/views/User/Settings.vue
@@ -1,49 +1,47 @@
 <template>
-    <PageTab>
+    <div>
         <div class="card shadow-card">
-            <FormLabel>{{ $t('user_settings.title_account') }}</FormLabel>
-            <AppInputText :title="$t('page_registration.label_email')">
-                <input :value="userInfo.email"
-					   :placeholder="$t('page_registration.placeholder_email')"
-					   type="email"
-					   disabled
-					   class="focus-border-theme input-dark"
-			   >
-            </AppInputText>
-            <AppInputText :title="$t('page_registration.label_name')" :is-last="true">
-                <input @keyup="changeUserName"
-					   v-model="userInfo.name"
-					   :placeholder="$t('page_registration.placeholder_name')"
-					   type="text"
-					   class="focus-border-theme input-dark"
-				/>
-            </AppInputText>
-        </div>
-        <div class="card shadow-card">
-            <FormLabel>{{ $t('user_settings.timezone') }}</FormLabel>
-            <AppInputText :title="$t('GMT')" :is-last="true">
-                <SelectInput @input="$updateText('/user/settings', 'timezone', userInfo.timezone)"
-							 v-model="userInfo.timezone"
-							 :default="userInfo.timezone"
-							 :options="timezones"
-							 :placeholder="$t('user_settings.timezone_plac')" />
+            <FormLabel>
+				{{ $t('Account Settings') }}
+			</FormLabel>
+
+			<div class="md:flex justify-items md:space-x-4">
+				<AppInputText :title="$t('First Name')" class="w-full">
+					<input
+						@keyup="updateFirstName"
+						v-model="user.data.relationships.settings.data.attributes.first_name"
+						:placeholder="$t('page_registration.placeholder_name')"
+						type="text"
+						class="focus-border-theme input-dark"
+					/>
+				</AppInputText>
+				<AppInputText :title="$t('Last Name')" class="w-full">
+					<input
+						@keyup="updateLastName"
+						v-model="user.data.relationships.settings.data.attributes.last_name"
+						:placeholder="$t('page_registration.placeholder_name')"
+						type="text"
+						class="focus-border-theme input-dark"
+					/>
+				</AppInputText>
+			</div>
+
+			<AppInputText :title="$t('GMT')" :is-last="true">
+                <SelectInput
+					@input="$updateText('/user/settings', 'timezone', user.data.relationships.settings.data.attributes.timezone)"
+					v-model="user.data.relationships.settings.data.attributes.timezone"
+					:default="user.data.relationships.settings.data.attributes.timezone"
+					:options="timezones"
+					:placeholder="$t('user_settings.timezone_plac')" />
             </AppInputText>
         </div>
         <div class="card shadow-card">
             <FormLabel>
                 {{ $t('user_settings.title_billing') }}
             </FormLabel>
-            <AppInputText :title="$t('user_settings.name')">
-                <input @keyup="$updateText('/user/settings', 'name', billingInfo.name)"
-					   v-model="billingInfo.name"
-					   :placeholder="$t('user_settings.name_plac')"
-					   type="text"
-					   class="focus-border-theme input-dark"
-				/>
-            </AppInputText>
             <AppInputText :title="$t('user_settings.address')">
-                <input @keyup="$updateText('/user/settings', 'address', billingInfo.address)"
-					   v-model="billingInfo.address"
+                <input @keyup="$updateText('/user/settings', 'address', user.data.relationships.settings.data.attributes.address)"
+					   v-model="user.data.relationships.settings.data.attributes.address"
 					   :placeholder="$t('user_settings.address_plac')"
 					   type="text"
 					   class="focus-border-theme input-dark"
@@ -51,16 +49,16 @@
             </AppInputText>
             <div class="flex space-x-4">
                 <AppInputText :title="$t('user_settings.city')" class="w-full">
-                    <input @keyup="$updateText('/user/settings', 'city', billingInfo.city)"
-						   v-model="billingInfo.city"
+                    <input @keyup="$updateText('/user/settings', 'city', user.data.relationships.settings.data.attributes.city)"
+						   v-model="user.data.relationships.settings.data.attributes.city"
 						   :placeholder="$t('user_settings.city_plac')"
 						   type="text"
 						   class="focus-border-theme input-dark"
 					/>
                 </AppInputText>
                 <AppInputText :title="$t('user_settings.postal_code')" class="w-full">
-                    <input @keyup="$updateText('/user/settings', 'postal_code', billingInfo.postal_code)"
-						   v-model="billingInfo.postal_code"
+                    <input @keyup="$updateText('/user/settings', 'postal_code', user.data.relationships.settings.data.attributes.postal_code)"
+						   v-model="user.data.relationships.settings.data.attributes.postal_code"
 						   :placeholder="$t('user_settings.postal_code_plac')"
 						   type="text"
 						   class="focus-border-theme input-dark"
@@ -68,111 +66,70 @@
                 </AppInputText>
             </div>
             <AppInputText :title="$t('user_settings.country')">
-                <SelectInput @input="$updateText('/user/settings', 'country', billingInfo.country)"
-							 v-model="billingInfo.country"
-							 :default="billingInfo.country"
+                <SelectInput @input="$updateText('/user/settings', 'country', user.data.relationships.settings.data.attributes.country)"
+							 v-model="user.data.relationships.settings.data.attributes.country"
+							 :default="user.data.relationships.settings.data.attributes.country"
 							 :options="countries"
 							 :placeholder="$t('user_settings.country_plac')"
 				/>
             </AppInputText>
             <AppInputText :title="$t('user_settings.state')" :description="$t('State, county, province, or region.')">
-                <input @keyup="$updateText('/user/settings', 'state', billingInfo.state)"
-					   v-model="billingInfo.state"
+                <input @keyup="$updateText('/user/settings', 'state', user.data.relationships.settings.data.attributes.state)"
+					   v-model="user.data.relationships.settings.data.attributes.state"
 					   :placeholder="$t('user_settings.state_plac')"
 					   type="text"
 					   class="focus-border-theme input-dark"
 				/>
             </AppInputText>
             <AppInputText :title="$t('user_settings.phone_number')" :is-last="true">
-                <input @keyup="$updateText('/user/settings', 'phone_number', billingInfo.phone_number)"
-					   v-model="billingInfo.phone_number"
+                <input @keyup="$updateText('/user/settings', 'phone_number', user.data.relationships.settings.data.attributes.phone_number)"
+					   v-model="user.data.relationships.settings.data.attributes.phone_number"
 					   :placeholder="$t('user_settings.phone_number_plac')"
 					   type="text"
 					   class="focus-border-theme input-dark"
 				/>
             </AppInputText>
         </div>
-    </PageTab>
+    </div>
 </template>
 
 <script>
 	import AppInputText from "../../components/Admin/AppInputText";
-    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-	import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
 	import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
 	import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
-	import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
-	import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-	import PageTab from '/resources/js/components/Others/Layout/PageTab'
-	import PageHeader from '/resources/js/components/Others/PageHeader'
-	import ThemeLabel from '/resources/js/components/Others/ThemeLabel'
 	import {required} from 'vee-validate/dist/rules'
 	import {mapGetters} from 'vuex'
-	import {debounce} from 'lodash'
 
 	export default {
 		name: 'Settings',
-		props: [
-			'user'
-		],
 		components: {
 			AppInputText,
-			ValidationProvider,
-			ValidationObserver,
-			PageTabGroup,
-			MobileHeader,
 			SelectInput,
-			PageHeader,
-			ButtonBase,
-			ThemeLabel,
 			FormLabel,
 			required,
-			PageTab,
 		},
 		computed: {
-			...mapGetters(['config', 'countries', 'timezones']),
+			...mapGetters([
+				'countries',
+				'timezones',
+				'config',
+			]),
 		},
 		data() {
 			return {
-				userInfo: undefined,
-				billingInfo: undefined,
+				user: this.$store.getters.user,
 				isLoading: false,
 			}
 		},
 		methods: {
-			changeUserName() {
-				this.$store.commit('UPDATE_NAME', this.userInfo.name)
-				this.$updateText('/user/settings', 'name', this.userInfo.name)
+			updateFirstName() {
+				this.$store.commit('UPDATE_FIRST_NAME', this.user.data.relationships.settings.data.attributes.first_name)
+				this.$updateText('/user/settings', 'first_name', this.user.data.relationships.settings.data.attributes.first_name)
+			},
+			updateLastName() {
+				this.$store.commit('UPDATE_LAST_NAME', this.user.data.relationships.settings.data.attributes.last_name)
+				this.$updateText('/user/settings', 'last_name', this.user.data.relationships.settings.data.attributes.last_name)
 			}
 		},
-		created() {
-
-			this.userInfo = {
-				timezone: this.user.data.relationships.settings.data.attributes.timezone,
-				name: this.user.data.relationships.settings.data.attributes.name,
-				email: this.user.data.attributes.email
-			}
-
-			this.billingInfo = {
-				name: this.user.data.relationships.settings.data.attributes.name,
-				address: this.user.data.relationships.settings.data.attributes.address,
-				state: this.user.data.relationships.settings.data.attributes.state,
-				city: this.user.data.relationships.settings.data.attributes.city,
-				postal_code: this.user.data.relationships.settings.data.attributes.postal_code,
-				country: this.user.data.relationships.settings.data.attributes.country,
-				phone_number: this.user.data.relationships.settings.data.attributes.phone_number,
-			}
-		}
 	}
 </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>