From b55575957d9f8aa7e4e2dc03467c86a28c718b2a Mon Sep 17 00:00:00 2001
From: Luki Centuri <lukicenturi@gmail.com>
Date: Fri, 25 Oct 2024 14:05:29 +0700
Subject: [PATCH] feat: move username detail (#251)

---
 components/account/home/AccountDetails.vue | 46 ++++++++++++++++++++--
 layouts/account.vue                        | 12 +++++-
 modules/ui-library/runtime/plugin.ts       |  2 +
 3 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/components/account/home/AccountDetails.vue b/components/account/home/AccountDetails.vue
index a4fb33e4..42407f08 100644
--- a/components/account/home/AccountDetails.vue
+++ b/components/account/home/AccountDetails.vue
@@ -1,15 +1,27 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
+import { get } from '@vueuse/core';
 import { useMainStore } from '~/store';
 
 const store = useMainStore();
 const { account } = storeToRefs(store);
 
+const {
+  public: {
+    contact: { emailMailto, email: rotkiEmail },
+  },
+} = useRuntimeConfig();
+
 const email = computed(() => {
-  const userAccount = account.value;
+  const userAccount = get(account);
   return !userAccount ? '' : userAccount.email;
 });
 
+const username = computed(() => {
+  const userAccount = get(account);
+  return !userAccount ? '' : userAccount.username;
+});
+
 const { t } = useI18n();
 </script>
 
@@ -22,13 +34,41 @@ const { t } = useI18n();
       <div class="space-y-5">
         <RuiTextField
           id="email"
-          v-model="email"
+          v-model="username"
           disabled
+          class="[&_input]:!text-rui-text"
           variant="outlined"
-          :label="t('auth.common.email')"
+          :label="t('auth.common.username')"
           hide-details
           color="primary"
+          append-icon="lock-line"
         />
+        <div>
+          <RuiTextField
+            id="email"
+            v-model="email"
+            disabled
+            class="[&_input]:!text-rui-text"
+            variant="outlined"
+            :label="t('auth.common.email')"
+            hide-details
+            color="primary"
+            append-icon="lock-line"
+          />
+          <div class="text-rui-text-secondary pt-2 px-3 text-xs flex">
+            To change your email, please contact our support tem via
+            <ButtonLink
+              :to="emailMailto"
+              external
+              color="primary"
+              variant="text"
+              class="leading-[0]"
+              inline
+            >
+              {{ rotkiEmail }}
+            </ButtonLink>
+          </div>
+        </div>
       </div>
 
       <div class="mt-10 mb-5 border-t border-grey-50" />
diff --git a/layouts/account.vue b/layouts/account.vue
index 78887f90..d99f1ca7 100644
--- a/layouts/account.vue
+++ b/layouts/account.vue
@@ -10,7 +10,15 @@ const { t } = useI18n();
 const store = useMainStore();
 const { account } = storeToRefs(store);
 
-const username = computed(() => get(account)?.username);
+const name = computed(() => {
+  const accountVal = get(account);
+  if (!accountVal)
+    return '';
+
+  const { firstName, lastName } = accountVal.address;
+
+  return `${firstName} ${lastName}`;
+});
 
 useHead({
   title: 'account',
@@ -34,7 +42,7 @@ const tabModelValue = ref();
     <div class="py-10 lg:py-16">
       <div class="container">
         <div class="text-h4 mb-6">
-          {{ t('account.welcome') }} {{ username }}
+          {{ t('account.welcome') }} {{ name }}
         </div>
         <div class="flex flex-col lg:flex-row gap-6">
           <div class="hidden lg:block w-[270px] shrink-0">
diff --git a/modules/ui-library/runtime/plugin.ts b/modules/ui-library/runtime/plugin.ts
index 03fbc5bd..536afcb0 100644
--- a/modules/ui-library/runtime/plugin.ts
+++ b/modules/ui-library/runtime/plugin.ts
@@ -28,6 +28,7 @@ import {
   RiHandCoinLine,
   RiInformationLine,
   RiLightbulbLine,
+  RiLockLine,
   RiLogoutBoxRLine,
   RiMailSendLine,
   RiMapPinLine,
@@ -96,6 +97,7 @@ export default defineNuxtPlugin((nuxtApp) => {
         RiCoinLine,
         RiPaypalLine,
         RiSearchLine,
+        RiLockLine,
       ],
       mode: 'light',
     },