refactor(console): improve error message in insecure contexts

packages/console/package.json

@@ -19,7 +19,7 @@
   "devDependencies": {
     "@fontsource/roboto-mono": "^4.5.7",
     "@logto/phrases": "^1.0.0-alpha.3",
-    "@logto/react": "^0.2.2",
+    "@logto/react": "^1.0.0-alpha.2",
     "@logto/schemas": "^1.0.0-alpha.3",
     "@logto/shared": "^1.0.0-alpha.3",
     "@mdx-js/react": "^1.6.22",

packages/console/src/components/AppContent/index.tsx

@@ -1,6 +1,7 @@
-import { LogtoClientError, useLogto } from '@logto/react';
+import { LogtoClientError, LogtoError, useLogto } from '@logto/react';
 import { conditional } from '@silverhand/essentials';
 import React, { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Outlet, useHref, useLocation, useNavigate } from 'react-router-dom';
 
 import AppError from '@/components/AppError';
@@ -27,6 +28,7 @@ const AppContent = () => {
   const { firstItem } = useSidebarMenuItems();
   const mainRef = useRef<HTMLDivElement>(null);
   const { scrollTop } = useScroll(mainRef.current);
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   useEffect(() => {
     if (!isAuthenticated) {
@@ -46,6 +48,10 @@ const AppContent = () => {
       return <SessionExpired />;
     }
 
+    if (error instanceof LogtoError && error.code === 'crypto_subtle_unavailable') {
+      return <AppError errorMessage={t('errors.insecure_contexts')} callStack={error.stack} />;
+    }
+
     return <AppError errorMessage={error.message} callStack={error.stack} />;
   }
 

packages/demo-app/package.json

@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@logto/phrases": "^1.0.0-alpha.3",
-    "@logto/react": "^0.2.2",
+    "@logto/react": "^1.0.0-alpha.2",
     "@logto/schemas": "^1.0.0-alpha.3",
     "@logto/shared": "^1.0.0-alpha.3",
     "@parcel/core": "2.6.2",

packages/phrases/src/locales/en.ts

@@ -59,6 +59,7 @@ const translation = {
       username_pattern_error:
         'Username should only contain letters, numbers, or underscore and should not start with a number.',
       password_pattern_error: 'Password requires a minimum of 6 characters',
+      insecure_contexts: 'Insecure contexts (non-HTTPS) are not supported.',
       unexpected_error: 'An unexpected error occurred',
     },
     tab_sections: {

packages/phrases/src/locales/zh-cn.ts

@@ -59,6 +59,7 @@ const translation = {
       more_details: '查看详情',
       username_pattern_error: '用户名只能包含英文字母、数字或下划线，且不以数字开头。',
       password_pattern_error: '密码应不少于 6 位',
+      insecure_contexts: '不支持不安全的上下文（非 HTTPS）。',
       unexpected_error: '发生未知错误',
     },
     tab_sections: {