From 9df55874a6c5c13e2da0eac01dab30217485393e Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 1 Jul 2023 22:45:50 +0800
Subject: [PATCH] show username and avatar in user basic setting tab

---
 pkg/models/user.go                            |  8 ++++
 src/locales/en.js                             |  2 +
 src/locales/zh_Hans.js                        |  2 +
 .../user/settings/UserBasicSettingTab.vue     | 40 ++++++++++++++++++-
 4 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/pkg/models/user.go b/pkg/models/user.go
index 34890738..17de38e3 100644
--- a/pkg/models/user.go
+++ b/pkg/models/user.go
@@ -79,6 +79,7 @@ type UserBasicInfo struct {
 	Email                string               `json:"email"`
 	Nickname             string               `json:"nickname"`
 	AvatarUrl            string               `json:"avatar"`
+	AvatarProvider       string               `json:"avatarProvider,omitempty"`
 	DefaultAccountId     int64                `json:"defaultAccountId,string"`
 	TransactionEditScope TransactionEditScope `json:"transactionEditScope"`
 	Language             string               `json:"language"`
@@ -136,6 +137,7 @@ type UserProfileResponse struct {
 	Email                string               `json:"email"`
 	Nickname             string               `json:"nickname"`
 	AvatarUrl            string               `json:"avatar"`
+	AvatarProvider       string               `json:"avatarProvider,omitempty"`
 	DefaultAccountId     int64                `json:"defaultAccountId,string"`
 	TransactionEditScope TransactionEditScope `json:"transactionEditScope"`
 	Language             string               `json:"language"`
@@ -197,6 +199,7 @@ func (u *User) ToUserBasicInfo() *UserBasicInfo {
 		Email:                u.Email,
 		Nickname:             u.Nickname,
 		AvatarUrl:            u.getAvatarUrl(),
+		AvatarProvider:       u.getAvatarProvider(),
 		DefaultAccountId:     u.DefaultAccountId,
 		TransactionEditScope: u.TransactionEditScope,
 		Language:             u.Language,
@@ -216,6 +219,7 @@ func (u *User) ToUserProfileResponse() *UserProfileResponse {
 		Email:                u.Email,
 		Nickname:             u.Nickname,
 		AvatarUrl:            u.getAvatarUrl(),
+		AvatarProvider:       u.getAvatarProvider(),
 		DefaultAccountId:     u.DefaultAccountId,
 		TransactionEditScope: u.TransactionEditScope,
 		Language:             u.Language,
@@ -229,6 +233,10 @@ func (u *User) ToUserProfileResponse() *UserProfileResponse {
 	}
 }
 
+func (u *User) getAvatarProvider() string {
+	return settings.Container.Current.AvatarProvider
+}
+
 func (u *User) getAvatarUrl() string {
 	avatarProvider := settings.Container.Current.AvatarProvider
 
diff --git a/src/locales/en.js b/src/locales/en.js
index 99812a45..29ab8a61 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -1003,6 +1003,8 @@ export default {
     'Basic Settings': 'Basic Settings',
     'Security Settings': 'Security Settings',
     'Two-Factor Authentication Settings': 'Two-Factor Authentication Settings',
+    'Username:': 'Username:',
+    'Avatar Provider:': 'Avatar Provider:',
     'Current Password': 'Current Password',
     'New Password': 'New Password',
     'Modify Password': 'Modify Password',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index 337f23e1..af6a1b45 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -1003,6 +1003,8 @@ export default {
     'Basic Settings': '基本设置',
     'Security Settings': '安全设置',
     'Two-Factor Authentication Settings': '两步验证设置',
+    'Username:': '用户名：',
+    'Avatar Provider:': '头像提供方：',
     'Current Password': '当前密码',
     'New Password': '新密码',
     'Modify Password': '修改密码',
diff --git a/src/views/desktop/user/settings/UserBasicSettingTab.vue b/src/views/desktop/user/settings/UserBasicSettingTab.vue
index 6d79410e..200b54e3 100644
--- a/src/views/desktop/user/settings/UserBasicSettingTab.vue
+++ b/src/views/desktop/user/settings/UserBasicSettingTab.vue
@@ -7,7 +7,26 @@
                     <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
                 </template>
 
-                <v-form>
+                <v-card-text class="d-flex">
+                    <v-avatar rounded="lg" color="primary" variant="tonal" size="100" class="me-6">
+                        <v-img :src="oldProfile.avatar" v-if="oldProfile.avatar"/>
+                        <v-icon size="48" :icon="icons.user" v-else-if="!oldProfile.avatar"/>
+                    </v-avatar>
+                    <div class="d-flex flex-column justify-center gap-5">
+                        <p class="text-body-1 mb-0">
+                            <span class="mr-2">{{ $t('Username:') }}</span>
+                            <span>{{ oldProfile.username }}</span>
+                        </p>
+                        <p class="text-body-1 mb-0">
+                            <span class="mr-2">{{ $t('Avatar Provider:') }}</span>
+                            <span>{{ currentUserAvatarProvider }}</span>
+                        </p>
+                    </div>
+                </v-card-text>
+
+                <v-divider />
+
+                <v-form class="mt-6">
                     <v-card-text>
                         <v-row>
                             <v-col cols="12" md="6">
@@ -198,6 +217,10 @@ import { useAccountsStore } from '@/stores/account.js';
 import datetimeConstants from '@/consts/datetime.js';
 import { getNameByKeyValue } from '@/lib/common.js';
 
+import {
+    mdiAccount
+} from '@mdi/js';
+
 export default {
     data() {
         const self = this;
@@ -232,7 +255,10 @@ export default {
                 shortTimeFormat: 0
             },
             loading: true,
-            saving: false
+            saving: false,
+            icons: {
+                user: mdiAccount
+            }
         };
     },
     computed: {
@@ -311,6 +337,13 @@ export default {
                 name: self.$t('This year or later')
             }];
         },
+        currentUserAvatarProvider() {
+            if (this.oldProfile.avatarProvider === 'gravatar') {
+                return 'Gravatar';
+            } else {
+                return this.$t('None');
+            }
+        },
         inputIsNotChanged() {
             return !!this.inputIsNotChangedProblemMessage;
         },
@@ -431,8 +464,11 @@ export default {
             return getNameByKeyValue(src, value, keyField, nameField, defaultName);
         },
         setCurrentUserProfile(profile) {
+            this.oldProfile.username = profile.username;
             this.oldProfile.email = profile.email;
             this.oldProfile.nickname = profile.nickname;
+            this.oldProfile.avatar = profile.avatar;
+            this.oldProfile.avatarProvider = profile.avatarProvider;
             this.oldProfile.defaultAccountId = profile.defaultAccountId;
             this.oldProfile.transactionEditScope = profile.transactionEditScope;
             this.oldProfile.language = profile.language;