core: replace detect-browser with ua-parser-js

packages/hydrooj/package.json

@@ -25,7 +25,6 @@
         "adm-zip": "0.5.14",
         "cac": "^6.7.14",
         "cordis": "3.18.1",
-        "detect-browser": "^5.3.0",
         "emoji-regex": "^10.4.0",
         "emojis-list": "2.1.0",
         "fs-extra": "^11.2.0",
@@ -51,7 +50,8 @@
         "shorty.js": "^1.0.1",
         "superagent": "^10.1.0",
         "tar": "6.2.1",
-        "thirty-two": "^1.0.2"
+        "thirty-two": "^1.0.2",
+        "ua-parser-js": "^1.0.39"
     },
     "devDependencies": {
         "@types/adm-zip": "^0.4.34",

packages/hydrooj/src/handler/home.ts

@@ -3,6 +3,7 @@ import { generateRegistrationOptions, verifyRegistrationResponse } from '@simple
 import yaml from 'js-yaml';
 import { pick } from 'lodash';
 import { Binary, ObjectId } from 'mongodb';
+import Parser from 'ua-parser-js';
 import { Context } from '../context';
 import {
     AuthOperationError, BlacklistedError, DomainAlreadyExistsError, InvalidTokenError,
@@ -12,7 +13,6 @@ import {
 import { DomainDoc, MessageDoc, Setting } from '../interface';
 import avatar, { validate } from '../lib/avatar';
 import * as mail from '../lib/mail';
-import * as useragent from '../lib/useragent';
 import { verifyTFA } from '../lib/verifyTFA';
 import BlackListModel from '../model/blacklist';
 import { PERM, PRIV } from '../model/builtin';
@@ -187,7 +187,11 @@ class HomeSecurityHandler extends Handler {
         for (const session of sessions) {
             session.isCurrent = session._id === this.session._id;
             session._id = md5(session._id);
-            session.updateUa = useragent.parse(session.updateUa || session.createUa || '');
+            const ua = session.updateUa || session.createUa;
+            if (ua) {
+                const parser = new Parser(ua);
+                session.updateUaInfo = parser.getResult();
+            }
             session.updateGeoip = this.ctx.geoip?.lookup?.(
                 session.updateIp || session.createIp,
                 this.translate('geoip_locale'),
@@ -202,7 +206,6 @@ class HomeSecurityHandler extends Handler {
                 'authenticatorAttachment', 'regat', 'fmt',
             ])),
             geoipProvider: this.ctx?.geoip?.provider,
-            icon: (str = '') => str.split(' ')[0].toLowerCase(),
         };
     }
 

packages/hydrooj/src/lib/useragent.ts

@@ -1,5 +0,0 @@
-import * as browser from 'detect-browser';
-
-export function parse(str: string) {
-    return browser.parseUserAgent(str);
-}

packages/ui-default/backendlib/template.ts

@@ -157,6 +157,13 @@ env.addGlobal('set', (obj, key, val) => {
 env.addGlobal('findSubModule', (prefix) => Object.keys(global.Hydro.ui.template).filter((n) => n.startsWith(prefix)));
 env.addGlobal('templateExists', (name) => !!global.Hydro.ui.template[name]);
 
+const supportedPlatformIcons = ['android', 'chromeos', 'ios', 'linux', 'mac', 'mobile', 'windows'];
+env.addGlobal('platformIcon', (platform) => {
+  const key = platform?.toLowerCase();
+  if (supportedPlatformIcons.includes(key)) return key;
+  return 'unknown';
+});
+
 const render = (name: string, state: any) => new Promise<string>((resolve, reject) => {
   env.render(name, {
     page_name: name.split('.')[0],

packages/ui-default/templates/home_security.html

@@ -153,7 +153,7 @@
           <li class="sessionlist__item">
             <div class="media">
               <div class="media__left medium">
-                <span class="sessionlist__icon icon icon-platform--{{ icon(session.updateUa.os) }}"></span>
+                <span class="sessionlist__icon icon icon-platform--{{ platformIcon(session.updateUaInfo.os.name) }}"></span>
               </div>
               <div class="media__body medium typo">
                 <p>{{ _('Last Update At') }}: {{ datetimeSpan(session.updateAt)|safe }}</p>
@@ -161,8 +161,8 @@
                   <p>{{ _('Hostname') }}: {{ session.createHost }}</p>
                 {% endif %}
                 <p>{{ _('Location') }}: {{ _(session.updateGeoip.display) }} ({{ session.updateIp }})</p>
-                <p>{{ _('Operating System') }}: {{ session.updateUa.os }}</p>
-                <p>{{ _('Browser') }}: {{ session.updateUa.name }} {{ session.updateUa.version }}</p>
+                <p>{{ _('Operating System') }}: {{ session.updateUaInfo.os.name }} {{ session.updateUaInfo.os.version }}</p>
+                <p>{{ _('Browser') }}: {{ session.updateUaInfo.browser.name }} {{ session.updateUaInfo.browser.version }}</p>
                 {% if session.isCurrent %}
                 <p class="sessionlist__current-session"><span class="icon icon-check"></span> {{ _('This is the current session') }}</p>
                 {% endif %}