show username and avatar in user basic setting tab

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
 

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',

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': '修改密码',

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;