refactor(ui): Update auth and profile pages to use $mod context

- Replace $env.$vbase with $mod.$vbase in callback.html OAuth handlers
    - Update login.html to use $mod.$vbase for login/register API calls
    - Update profile.html to use $mod.$vbase for user data and logout
    - Fix OAuth providers page to reference $mod.$vbase correctly

ui/page/auth/callback.html

@@ -492,7 +492,7 @@
         return;
       }
 
-      const data = await $env.$vbase.oauthCallback(provider, code, state);
+      const data = await $mod.$vbase.oauthCallback(provider, code, state);
 
       if (data.access_token || data.token) {
         // Already bound, login success (token set by vbase)
@@ -527,7 +527,7 @@
 
     submitting = true;
     try {
-      const data = await $env.$vbase.bindAccount(tempToken, bindForm.username, bindForm.password);
+      const data = await $mod.$vbase.bindAccount(tempToken, bindForm.username, bindForm.password);
 
       $message.success($t('auth.bind_success') || 'Binding successful');
       setTimeout(() => $router.push('/'), 1000);
@@ -546,7 +546,7 @@
 
     submitting = true;
     try {
-      const data = await $env.$vbase.bindRegister(tempToken, regForm.username, regForm.email || undefined);
+      const data = await $mod.$vbase.bindRegister(tempToken, regForm.username, regForm.email || undefined);
 
       $message.success($t('auth.register_success') || 'Registration successful');
       setTimeout(() => $router.push('/'), 1000);

ui/page/auth/login.html

@@ -690,7 +690,7 @@
     }
 
     try {
-      await $env.$vbase.request('POST', '/api/verification/send', {
+      await $mod.$vbase.request('POST', '/api/verification/send', {
         type: type,
         target: signInForm.target,
         purpose: 'login'
@@ -729,16 +729,16 @@
         }
 
         const type = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(signInForm.target) ? 'email' : 'phone';
-        const data = await $env.$vbase.request('POST', '/api/auth/login/code', {
+        const data = await $mod.$vbase.request('POST', '/api/auth/login/code', {
           type: type,
           target: signInForm.target,
           code: signInForm.code
         });
 
         if (data && data.access_token) {
-          $env.$vbase.token = data.access_token;
-          if (data.refresh_token) $env.$vbase.refreshToken = data.refresh_token;
-          if (data.user) $env.$vbase.user = data.user;
+          $mod.$vbase.token = data.access_token;
+          if (data.refresh_token) $mod.$vbase.refreshToken = data.refresh_token;
+          if (data.user) $mod.$vbase.user = data.user;
 
           $message.success($t('auth.login_success'));
           if (redirect === '/' || redirect.startsWith('http')) {
@@ -755,7 +755,7 @@
           throw new Error($t('auth.fill_all_fields'));
         }
 
-        const success = await $env.$vbase.login(signInForm.username, signInForm.password);
+        const success = await $mod.$vbase.login(signInForm.username, signInForm.password);
 
         if (success) {
           $message.success($t('auth.login_success'));
@@ -803,7 +803,7 @@
 
     try {
       // Use vbase.request for consistent API handling
-      const data = await $env.$vbase.request('POST', '/api/auth/register', {
+      const data = await $mod.$vbase.request('POST', '/api/auth/register', {
         username: signUpForm.username,
         email: signUpForm.email || undefined,
         phone: signUpForm.phone || undefined,
@@ -812,12 +812,12 @@
 
       if (data && data.access_token) {
         // Auto login after register using vbase setters
-        $env.$vbase.token = data.access_token;
+        $mod.$vbase.token = data.access_token;
         if (data.refresh_token) {
-          $env.$vbase.refreshToken = data.refresh_token;
+          $mod.$vbase.refreshToken = data.refresh_token;
         }
         if (data.user) {
-          $env.$vbase.user = data.user;
+          $mod.$vbase.user = data.user;
         }
 
         $message.success($t('auth.register_success'));

ui/page/sys/oauth/providers.html

@@ -46,7 +46,7 @@
       gap: var(--spacing-md);
       transition: all 0.2s;
     }
-    
+
     .card:hover {
       transform: translateY(-2px);
       box-shadow: var(--shadow-md);
@@ -200,7 +200,7 @@
 
   loadProviders = async () => {
     try {
-      const res = await $env.$vbase.request('GET', '/api/oauth/providers');
+      const res = await $vbase.request('GET', '/api/oauth/providers');
       providers = res.items || [];
     } catch (e) {
       $message.error(e.message);
@@ -220,7 +220,7 @@
 
   openCreateModal = () => {
     isEdit = false;
-    formData = { code: "", name: "", client_id: "", client_secret: "", enabled: true };
+    formData = {code: "", name: "", client_id: "", client_secret: "", enabled: true};
     showModal = true;
   };
 
@@ -228,7 +228,7 @@
     isEdit = true;
     try {
       const detail = await $axios.get(`/api/oauth/providers/${p.code}`);
-      formData = { ...detail, client_secret: "" };
+      formData = {...detail, client_secret: ""};
       showModal = true;
     } catch (e) {
       $message.error(e.message);
@@ -267,4 +267,4 @@
   $data.loadProviders();
 </script>
 
-</html>
+</html>

ui/page/user/profile.html

@@ -62,7 +62,7 @@
       font-weight: bold;
       overflow: hidden;
     }
-    
+
     .avatar img {
       width: 100%;
       height: 100%;
@@ -156,7 +156,8 @@
         <div class="avatar-wrapper" @click="triggerAvatarUpload">
           <div class="avatar">
             <img v-if="user.avatar" :src="user.avatar" alt="Avatar">
-            <span v-else>{{ user.nickname ? user.nickname.charAt(0).toUpperCase() : (user.username ? user.username.charAt(0).toUpperCase() : 'U') }}</span>
+            <span v-else>{{ user.nickname ? user.nickname.charAt(0).toUpperCase() : (user.username ?
+              user.username.charAt(0).toUpperCase() : 'U') }}</span>
           </div>
           <div class="avatar-overlay">
             <i class="fas fa-edit"></i>
@@ -167,7 +168,7 @@
           <div style="color: var(--color-text-light); font-size: 0.9rem;">{{ $t('common.id') }}: {{ user.id }}</div>
         </div>
       </div>
-      
+
       <form style="margin-top: var(--spacing-lg);" @submit.prevent="updateProfile">
         <div class="form-grid">
           <v-input label="Username" :label="$t('user.username')" v:value="user.username" disabled></v-input>
@@ -189,11 +190,14 @@
       <div class="section-title">{{ $t('auth.security') || 'Security' }}</div>
       <form @submit.prevent="changePassword">
         <div class="form-grid">
-          <v-input class="form-full" :label="$t('auth.old_password')" type="password" v:value="passwordForm.old_password"></v-input>
-          <v-input class="form-full" :label="$t('auth.new_password')" type="password" v:value="passwordForm.new_password"></v-input>
+          <v-input class="form-full" :label="$t('auth.old_password')" type="password"
+            v:value="passwordForm.old_password"></v-input>
+          <v-input class="form-full" :label="$t('auth.new_password')" type="password"
+            v:value="passwordForm.new_password"></v-input>
         </div>
         <div style="margin-top: var(--spacing-md); display: flex; justify-content: flex-end;">
-          <v-btn type="submit" variant="outline" :loading="pwdLoading" :disabled="!passwordForm.new_password || !passwordForm.old_password">
+          <v-btn type="submit" variant="outline" :loading="pwdLoading"
+            :disabled="!passwordForm.new_password || !passwordForm.old_password">
             {{ $t('auth.change_password') || 'Update Password' }}
           </v-btn>
         </div>
@@ -220,7 +224,8 @@
             </div>
           </div>
           <div>
-            <v-btn v-if="isBound(provider.code)" size="sm" variant="outline" color="danger" :click="() => unbind(provider.code)">
+            <v-btn v-if="isBound(provider.code)" size="sm" variant="outline" color="danger"
+              :click="() => unbind(provider.code)">
               {{ $t('common.unbind') }}
             </v-btn>
             <v-btn v-else size="sm" variant="outline" :click="() => bind(provider.code)">
@@ -234,11 +239,11 @@
   </div>
 </body>
 <script setup>
-  user = $env.$vbase.user || {};
+  user = $mod.$vbase.user || {};
   loading = false;
   pwdLoading = false;
-  passwordForm = { old_password: '', new_password: '' };
-  
+  passwordForm = {old_password: '', new_password: ''};
+
   // Bindings
   providers = [];
   bindings = [];
@@ -246,7 +251,7 @@
   // Fetch fresh data
   loadUser = async () => {
     try {
-      user = await $env.$vbase.fetchUser();
+      user = await $mod.$vbase.fetchUser();
     } catch (e) {
       console.error(e);
     }
@@ -260,7 +265,7 @@
         code: p.type,
         name: p.name
       }));
-      
+
       // Get current bindings
       bindings = await $axios.get('/api/auth/me/bindings');
     } catch (e) {
@@ -305,19 +310,19 @@
   };
 
   handleLogout = async () => {
-    await $env.$vbase.logout('/login');
+    await $mod.$vbase.logout('/login');
   };
-  
+
   // OAuth Helpers
   isBound = (code) => {
     return bindings.some(b => b.provider === code);
   };
-  
+
   getBindInfo = (code) => {
     const b = bindings.find(b => b.provider === code);
     return b ? (b.provider_name || b.email || $t('auth.linked')) : '';
   };
-  
+
   bind = async (provider) => {
     try {
       // Fetch authorization URL
@@ -336,7 +341,7 @@
       $message.error(e.message);
     }
   };
-  
+
   unbind = async (provider) => {
     try {
       await $message.confirm($t('auth.unbind_confirm'));
@@ -347,7 +352,7 @@
       if (e !== 'cancel') $message.error(e.message);
     }
   };
-  
+
   triggerAvatarUpload = async () => {
     try {
       const url = await $message.prompt($t('user.avatar_url'), user.avatar || '');
@@ -365,4 +370,4 @@
   $data.loadBindings();
 </script>
 
-</html>
+</html>