Improvements

Author: jason5ng32

.gitignore

@@ -27,4 +27,5 @@ dist-ssr
 
 package-lock.json
 localtest
-api/firebase.json
+
+.VSCodeCounter

api/getuserinfo.js

@@ -0,0 +1,37 @@
+import { refererCheck } from '../common/referer-check.js';
+
+export default async (req, res) => {
+
+    // 限制只能从指定域名访问
+    const referer = req.headers.referer;
+    if (!refererCheck(referer)) {
+        return res.status(403).json({ error: referer ? 'Access denied' : 'What are you doing?' });
+    }
+
+    const key = process.env.IPCHECKING_API_KEY;
+
+    if (!key) {
+        return res.status(500).json({ error: 'API key is missing' });
+    }
+
+    // 构建请求
+    const url = new URL(`https://api.ipcheck.ing/userinfo?key=${key}`);
+
+    try {
+        const apiResponse = await fetch(url, {
+            headers: {
+                ...req.headers,
+            }
+        });
+
+        if (!apiResponse.ok) {
+            throw new Error(`API responded with status: ${apiResponse.status}`);
+        }
+
+        const data = await apiResponse.json();
+        res.json(data);
+    } catch (error) {
+        console.error("Error during API request:", error);
+        res.status(500).json({ error: error.message });
+    }
+}

backend-server.js

@@ -19,6 +19,7 @@ import ipapiisHandler from './api/ipapiis.js';
 import invisibilitytestHandler from './api/invisibilitytest.js';
 import macChecker from './api/macchecker.js';
 import maxmindHandler from './api/maxmind.js';
+import getuserinfo from './api/getuserinfo.js';
 
 dotenv.config();
 
@@ -139,6 +140,7 @@ app.get('/api/ipapiis', ipapiisHandler);
 app.get('/api/invisibility', invisibilitytestHandler);
 app.get('/api/macchecker', macChecker);
 app.get('/api/maxmind', maxmindHandler);
+app.get('/api/getuserinfo', getuserinfo);
 
 // 使用查询参数处理所有配置请求
 app.get('/api/configs', validateConfigs);

frontend/components/Nav.vue

@@ -58,7 +58,8 @@
         <div class="dropdown">
           <button class="btn dropdown-toggle d-flex align-items-center flex-row "
             :class="{ 'btn-outline-light': isDarkMode, 'btn-dark': !isDarkMode }" type="button"
-            data-bs-toggle="dropdown" :data-bs-theme="isDarkMode ? 'dark' : ''" aria-expanded="false">
+            data-bs-toggle="dropdown" :data-bs-theme="isDarkMode ? 'dark' : ''" aria-expanded="false"
+            @click="getUserInfo">
             <span v-if="!store.user">
               {{ t('user.SignIn') }}
             </span>
@@ -70,18 +71,39 @@
             </span>
           </button>
           <ul class="dropdown-menu dropdown-menu-end" :data-bs-theme="isDarkMode ? 'dark' : ''">
+            <li v-if="store.user" class="dropdown-header d-flex flex-column">
+              <span>{{ t('user.Fields.User') }} : {{store.user.displayName}}</span>
+              <span>{{ t('user.Fields.CreatedAt') }} : {{ unixToDateTime(store.user.metadata.createdAt) }}</span>
+              <span>{{ t('user.Fields.Level') }} :&nbsp;
+                <span v-if="userInfoFetched">{{ t('user.Level.' + userInfo.userLevel)}}</span>
+                <span v-else>{{ t('user.Fields.Fetching') }}</span>
+              </span>
+              <span>{{ t('user.Fields.FunctionUses') }} :&nbsp;
+                <span v-if="userInfoFetched">{{ userInfo.functionUses.total }}
+                  {{ t('user.Fields.Times') }}
+                </span>
+                <span v-else>{{ t('user.Fields.Fetching') }}</span>
+              </span>
+            </li>
+            <li v-if="store.user">
+              <hr class="dropdown-divider" />
+            </li>
             <li v-if="!store.user"><a type="button" class="dropdown-item" @click="store.signInWithGoogle"><i
                   class="bi bi-google"></i> {{ t('user.SignInWithGoogle') }}</a></li>
             <li v-if="!store.user"><a type="button" class="dropdown-item" @click="store.signInWithGithub"><i
                   class="bi bi-github"></i> {{ t('user.SignInWithGithub') }}</a></li>
-            <li v-if="store.user"><a type="button" class="dropdown-item" @click="store.signOut"><i
-                  class="bi bi-box-arrow-right"></i> {{ t('user.SignOut')
-                }}</a></li>
-            <li>
+            <li v-if="!store.user">
               <hr class="dropdown-divider" />
             </li>
             <li><a type="button" class="dropdown-item" @click="openUserBenefits"><i class="bi bi-award-fill"></i> {{
                 t('user.Benefits.Title') }}</a></li>
+            <li v-if="store.user">
+              <hr class="dropdown-divider" />
+            </li>
+            <li v-if="store.user"><a type="button" class="dropdown-item" @click="store.signOut"><i
+                  class="bi bi-box-arrow-right"></i> {{ t('user.SignOut')
+                }}</a>
+            </li>
           </ul>
         </div>
       </div>
@@ -142,6 +164,7 @@ import { useMainStore } from '@/store';
 import { useI18n } from 'vue-i18n';
 import { trackEvent } from '@/utils/use-analytics';
 import { Offcanvas, Modal } from 'bootstrap';
+import { authenticatedFetch } from '@/utils/authenticated-fetch';
 
 const { t } = useI18n();
 
@@ -157,6 +180,9 @@ const loaded = ref(false);
 const currentSection = computed(() => store.currentSection);
 const isFireBaseSet = computed(() => store.isFireBaseSet);
 
+const userInfo = ref({});
+const userInfoFetched = ref(false);
+
 // 打开偏好设置
 const OpenPreferences = () => {
   const offcanvasElement = document.getElementById('offcanvasPreferences');
@@ -170,17 +196,6 @@ const OpenPreferences = () => {
   trackEvent('Nav', 'NavClick', 'Preferences');
 };
 
-// 打开 Modal
-const openUserBenefits = () => {
-  const modalElement = document.getElementById('Benefits');
-  const modalInstance = Modal.getOrCreateInstance(modalElement);
-  if (modalInstance) {
-    modalInstance.show();
-  }
-
-  trackEvent('Nav', 'NavClick', 'UserBenefits');
-};
-
 // 点击 Logo 事件处理
 const handleLogoClick = () => {
   if (window.scrollY === 0) {
@@ -197,6 +212,48 @@ const scrollToSection = (el, offset = 70) => {
   window.scrollTo({ top: y, behavior: "smooth" });
 }
 
+// 转换 Unix 时间
+const unixToDateTime = (timestamp) => {
+  timestamp = Number(timestamp);
+  const options = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  };
+  const date = new Date(timestamp);
+  return date.toLocaleString(undefined, options);
+}
+
+// 打开 Modal
+const openUserBenefits = () => {
+  const modalElement = document.getElementById('Benefits');
+  const modalInstance = Modal.getOrCreateInstance(modalElement);
+  if (modalInstance) {
+    modalInstance.show();
+  }
+
+  trackEvent('Nav', 'NavClick', 'UserBenefits');
+};
+
+// 获取用户统计信息
+const getUserInfo = async () => {
+  if (userInfoFetched.value) {
+    return;
+  }
+  if (!store.user) {
+    return;
+  }
+  try {
+    const response = await authenticatedFetch(`/api/getuserinfo`);
+    const data = response;
+    userInfo.value = data;
+  } catch (error) {
+    console.error('Error fetching user info:', error);
+  }
+
+  userInfoFetched.value = true;
+};
+
 watch(() => store.allHasLoaded, (newValue) => {
   loaded.value = newValue;
 });

frontend/locales/en.json

@@ -7,16 +7,32 @@
     "SignInToView": "Sign In to View",
     "SignInToUse": "Please sign in to use",
     "InvalidUserToken": "Invalid User Token",
+    "Fields": {
+      "User": "User",
+      "CreatedAt": "Created At",
+      "LastLogin": "Last Login",
+      "Level": "User Level",
+      "FunctionUses": "Advanced Usage",
+      "Times": "Times",
+      "Fetching": "Fetching..."
+    },
+    "Level": {
+      "Standard": "Standard User",
+      "Premium": "Premium User",
+      "Owner": "Administrator",
+      "Developer": "Developer",
+      "HonoraryMember": "Honorary Member"
+    },
     "Benefits": {
-    "Title": "User Benefits",
-    "Benefit": "Benefit",
-    "Note1": "As an open-source product, your use of IPCheck.ing is free of charge.",
-    "Note2": "However, to prevent abuse, we limit some features. By logging in, you will receive the following benefits:",
-    "Benifit1": "When you use IPCheck.ing as IP data source, all fields are displayed in full.",
-    "Benifit2": "You can use the invisibility test.",
-    "Benifit3": "Reduces access restrictions on some features.",
-    "FootNote": "More benefits are being developed..."
-  }
+      "Title": "User Benefits",
+      "Benefit": "Benefit",
+      "Note1": "As an open-source product, your use of IPCheck.ing is free of charge.",
+      "Note2": "However, to prevent abuse, we limit some features. By logging in, you will receive the following benefits:",
+      "Benifit1": "When you use IPCheck.ing as IP data source, all fields are displayed in full.",
+      "Benifit2": "You can use the invisibility test.",
+      "Benifit3": "Reduces access restrictions on some features.",
+      "FootNote": "More benefits are being developed..."
+    }
   },
   "nav": {
     "id": "nav",

frontend/locales/fr.json

@@ -7,6 +7,22 @@
         "SignInToView": "Connectez-vous pour voir",
         "SignInToUse": "Connectez-vous pour utiliser",
         "InvalidUserToken": "Token utilisateur non valide",
+        "Fields": {
+            "User": "Utilisateur",
+            "CreatedAt": "Créé Le",
+            "LastLogin": "Dernière Connexion",
+            "Level": "Niveau d'Utilisateur",
+            "FunctionUses": "Utilisation des Avancées",
+            "Times": "Fois",
+            "Fetching": "Recherche..."
+        },
+        "Level": {
+            "Standard": "Utilisateur Standard",
+            "Premium": "Utilisateur Premium",
+            "Owner": "Administrateur",
+            "Developer": "Développeur",
+            "HonoraryMember": "Membre Honoraire"
+        },
         "Benefits": {
             "Title": "Avantages Utilisateurs",
             "Benefit": "Avantage",

frontend/locales/zh.json

@@ -7,6 +7,22 @@
     "SignInToView": "登录后查看",
     "SignInToUse": "请登录后使用",
     "InvalidUserToken": "无效的用户 Token",
+    "Fields": {
+      "User": "用户",
+      "CreatedAt": "创建于",
+      "LastLogin": "最后登录",
+      "Level": "用户等级",
+      "FunctionUses": "高级功能使用",
+      "Times": "次",
+      "Fetching": "获取中..."
+    },
+    "Level": {
+      "Standard": "标准用户",
+      "Premium": "高级用户",
+      "Owner": "管理员",
+      "Developer": "开发者",
+      "HonoraryMember": "荣誉用户"
+    },
     "Benefits": {
       "Title": "用户权益",
       "Benefit": "权益",