Update username update logic (#978)

* feat(navbar): add alerts for username update

- Add alert for username change requirement
- Update navbar translations for alerts
- Remove unused UpdateUsername component
- Adjust styles for alert components

* feat(navbar): enable username change conditionally

- Show alert for username change based on login
- Remove hardcoded alert in ProfileEdit
- Update localization files to remove username hint

* feat(navbar, user_settings): restrict links based on username change permission

- Updated navbar links to check if user can change username
- Restricted access to settings links in user menu
- Added computed property for username change permission

* feat(RepoClone): enhance user access controls

- Add canChangeUsername check
- Introduce hasEmail computed property
- Update button visibility conditions

* feat(navbar): enhance user feedback for email and username

- Add alert for missing email and username
- Update English and Chinese translations
- Adjust conditions for existing alerts

* feat(prompts): enhance user login checks

- Add computed property for login status
- Implement check for username change permission
- Add computed property for email presence

* feat(profile): add username update functionality

- Add UpdateUsername component
- Add success message for profile update
- Add confirmation message for username update
- Add internal username fields in locales

* feat(popup): update username field labels

- Remove confirmation message from popup
- Update English username labels
- Update Chinese username labels

* feat(components): refactor username logic

- Change canChangeUsername to computed
- Simplify hasEmail computed property

* feat(popup): update username handling logic

- Change profile update endpoint format
- Refresh JWT after successful update
- Set cookie to prevent username change

* feat(user_settings): improve username change logic

- Update username input to use boolean
- Refactor canChangeUsername to computed
- Use profileData for username in updates
- Remove unnecessary watch on username

* feat(user-settings): update username handling

- Refactor username change logic
- Use store for canChangeUsername state
- Update dialog binding for username change
- Adjust username input disabled state
- Refresh cookie state after username update

* feat(navbar): add UpdateUsername component

- Include UpdateUsername in Navbar.vue
- Remove UpdateUsername from RepoCards.vue

* fix(navbar): update isLoggedInBoolean usage

- Replace isLoggedInBoolean with isLoggedIn
- Simplify conditional checks for actions
- Remove unnecessary props from Navbar component

* feat(user-settings): update visibility conditions

- Added initialization checks for alerts
- Refactored visibility logic for buttons
- Replaced cookie checks with store references
- Simplified computed properties in UserStore

* feat(tests): update Menu component tests

- Add actionLimited property to user data
- Mock storeToRefs from pinia
- Change test description for clarity

* feat(popup): update validation messages in UpdateUsername.vue

- Translated comments to English
- Clarified validation rules descriptions

* Remove chinese

Author: hiveer

frontend/src/components/__tests__/user_settings/Menu.spec.js

@@ -6,12 +6,17 @@ let userStoreData = {
   username: 'test',
   nickname: 'testn',
   email: '[email protected]',
-  avatar: 'test_avatar.com'
+  avatar: 'test_avatar.com',
+  actionLimited: false
 }
 vi.mock('../../../stores/UserStore', () => ({
   default: () => (userStoreData)
 }))
 
+vi.mock('pinia', () => ({
+  storeToRefs: (obj) => obj
+}))
+
 describe('Menu', () => {
   let wrapper
 
@@ -38,9 +43,9 @@ describe('Menu', () => {
     })
   })
 
-  describe('template render without email', () => {
+  describe('template render with user action limited', () => {
     beforeEach(() => {
-      userStoreData = { username: 'test', nickname: 'testn', avatar: 'test_avatar.com' };
+      userStoreData = { username: 'test', nickname: 'testn', avatar: 'test_avatar.com', actionLimited: true };
       wrapper = mount(Menu)
     })
     it('renders access token navbar', async () => {

frontend/src/components/navbar/Navbar.vue

@@ -1,4 +1,5 @@
 <template>
+  <UpdateUsername />
   <div class="border-b sticky top-0 z-[999] csg-navbar bg-white border-gray-200">
     <div
       class="page-responsive-width flex text-gray-700 justify-between items-center h-20 sm:h-15 gap-6 md:px-5">
@@ -32,7 +33,7 @@
           class="w-full el-menu-nav flex items-center gap-1"
           text-color="'var(--Gray-600)'">
           <MenuItems
-            :isLoggedInBoolean="isLoggedInBoolean"
+            :isLoggedInBoolean="isLoggedIn"
             :starChainUrl="starChainUrl"
             :hasEmail="hasEmail" />
         </el-menu>
@@ -57,7 +58,7 @@
 
         <!-- logged in avatar dropdown -->
         <el-dropdown
-          v-if="isLoggedInBoolean"
+          v-if="isLoggedIn"
           class="pl-1">
           <!-- verified_company_user/company_user/user -->
           <span
@@ -124,15 +125,16 @@
                   </div>
                 </el-dropdown-item>
               </a>
-              <a href="/resource-console">
+              <a v-if="!actionLimited"
+                href="/resource-console">
                 <el-dropdown-item>
                   <div class="flex items-center gap-2">
                     <SvgIcon name="navbar-resource-console" />
                     {{ $t('navbar.console') }}
                   </div>
                 </el-dropdown-item>
               </a>
-              <a v-if="isAdmin"
+              <a v-if="isAdmin && !actionLimited"
                   href="/admin_panel">
                   <el-dropdown-item>
                     <div class="flex items-center gap-2">
@@ -146,7 +148,7 @@
                 target="_blank">
                 <el-dropdown-item> {{ $t('navbar.source') }} </el-dropdown-item>
               </a> -->
-              <a v-if="hasEmail"
+              <a v-if="!actionLimited"
                  href="/models/new">
                 <el-dropdown-item divided>
                   <div class="flex items-center gap-2">
@@ -155,7 +157,7 @@
                   </div>
                 </el-dropdown-item>
               </a>
-              <a v-if="hasEmail"
+              <a v-if="!actionLimited"
                  href="/datasets/new">
                 <el-dropdown-item>
                   <div class="flex items-center gap-2">
@@ -164,7 +166,7 @@
                   </div>
                 </el-dropdown-item>
               </a>
-              <a v-if="hasEmail"
+              <a v-if="!actionLimited"
                  href="/codes/new">
                 <el-dropdown-item>
                   <div class="flex items-center gap-2">
@@ -173,7 +175,7 @@
                   </div>
                 </el-dropdown-item>
               </a>
-              <a v-if="hasEmail"
+              <a v-if="!actionLimited"
                  href="/spaces/new">
                 <el-dropdown-item>
                   <div class="flex items-center gap-2">
@@ -182,7 +184,7 @@
                   </div>
                 </el-dropdown-item>
               </a>
-              <a v-if="hasEmail"
+              <a v-if="!actionLimited"
                 href="/collections/new">
                 <el-dropdown-item>
                   <div class="flex items-center gap-2">
@@ -191,7 +193,7 @@
                   </div>
                 </el-dropdown-item>
               </a>
-              <a v-if="hasEmail"
+              <a v-if="!actionLimited"
                  href="/organizations/new">
                 <el-dropdown-item divided>
                   <div class="flex items-center gap-2">
@@ -221,6 +223,7 @@
             </el-dropdown-menu>
           </template>
         </el-dropdown>
+
         <!-- not logged in -->
         <template v-else>
           <div
@@ -250,6 +253,7 @@
       </div>
     </div>
   </div>
+
   <!-- mobile menu -->
   <el-drawer
     :z-index="998"
@@ -273,20 +277,42 @@
       text-color="#475467"
     >
       <MenuItems
-        :isLoggedInBoolean="isLoggedInBoolean"
+        :isLoggedInBoolean="isLoggedIn"
         :starChainUrl="starChainUrl"
         :hasEmail="hasEmail"
       />
     </el-menu>
   </el-drawer>
 
   <el-alert
-    v-if="!hasEmail && isLoggedInBoolean"
+    v-if="initialized && isLoggedIn && !hasEmail && !canChangeUserName"
     :title="$t('navbar.emailMissing')"
     center
     show-icon
     type="warning"
-  ></el-alert>
+  >
+    <a href="/settings/profile" class="underline text-sm"> {{ $t('navbar.profileEdit') }} </a>
+  </el-alert>
+
+  <el-alert
+    v-if="initialized && isLoggedIn && canChangeUserName && hasEmail"
+    :title="$t('navbar.usernameNeedChange')"
+    center
+    show-icon
+    type="warning"
+  >
+    <a href="/settings/profile" class="underline text-sm"> {{ $t('navbar.profileEdit') }} </a>
+  </el-alert>
+
+  <el-alert
+    v-if="initialized && isLoggedIn && canChangeUserName && !hasEmail"
+    :title="$t('navbar.emailAndUsernameMissing')"
+    center
+    show-icon
+    type="warning"
+  >
+    <a href="/settings/profile" class="underline text-sm"> {{ $t('navbar.profileEdit') }} </a>
+  </el-alert>
 
   <Broadcast />
 </template>
@@ -300,12 +326,11 @@
   import { useCookies } from "vue3-cookies"
   import { ElMessage } from 'element-plus'
   import Broadcast from './Broadcast.vue'
+  import UpdateUsername from '../popup/UpdateUsername.vue'
 
   export default {
     props: {
-      logo: String,
-      isLoggedIn: String,
-      starChainUrl: String
+      logo: String
     },
     data() {
       const classParam = new URLSearchParams(window.location.search).get(
@@ -316,7 +341,6 @@
         activeIndex: classParam
           ? `${window.location.pathname}?class=${classParam}`
           : window.location.pathname,
-        isLoggedInBoolean: !!cookies.get('login_identity'),
         mobileMenuVisibility: false,
         userAvatar: this.avatar,
         userStore: useUserStore(),
@@ -325,23 +349,15 @@
         canCreateDailyPaper: false,
         csghubServer: inject('csghubServer'),
         uuid: cookies.get('login_identity'),
-        hasEmail: true
       }
     },
     components: {
       MenuItems,
-      Broadcast
+      Broadcast,
+      UpdateUsername
     },
     computed: {
-      ...mapState(useUserStore, ['email', 'username', 'nickname', 'initialized','isAdmin']),
-    },
-    watch: {
-      initialized(_) {
-        this.hasEmail = !!this.email
-      },
-      email(newEmail, _) {
-        this.hasEmail = !!newEmail
-      }
+      ...mapState(useUserStore, ['email', 'username', 'nickname', 'initialized','isAdmin', 'isLoggedIn', 'actionLimited', 'hasEmail', 'canChangeUsername'])
     },
     methods: {
       showDialog() {
@@ -411,4 +427,19 @@
     border-radius: 6px !important;
     color: #182230 !important;
   }
-</style>
+  :deep(.el-alert__icon) {
+    height: 14px !important;
+    width: 14px !important;
+  }
+  :deep(.el-alert__content) {
+    flex-direction: row;
+    font-size: 14px !important;
+    gap: 8px;
+  }
+  :deep(.el-alert__title) {
+    font-size: 14px !important;
+  }
+  :deep(.el-alert__description) {
+    font-size: 14px !important;
+  }
+</style>