Merge pull request #680 from H-ario-m/fix/678-error-messages-localization

Fix/678 error messages localization

Author: yeasy

src/dashboard/config/config.js

@@ -11,9 +11,9 @@ export default {
   antd: {},
   locale: {
     default: 'en-US',
-    antd: false,
-    title: false,
-    baseNavigator: true,
+    antd: true,
+    title: true,
+    baseNavigator: false,
     baseSeparator: '-',
   },
   pwa: false,

src/dashboard/src/components/SelectLang/index.js

@@ -9,6 +9,7 @@ import styles from './index.less';
 class SelectLang extends PureComponent {
   changeLang = ({ key }) => {
     setLocale(key);
+    localStorage.setItem('umi_locale', key);
   };
 
   render() {

src/dashboard/src/layouts/BasicLayout.js

@@ -1,10 +1,10 @@
 /*
  SPDX-License-Identifier: Apache-2.0
 */
-import React from 'react';
+import React, { Component } from 'react';
 import { Layout } from 'antd';
 import DocumentTitle from 'react-document-title';
-import { connect } from 'umi';
+import { connect, setLocale, getLocale } from 'umi';
 import { ContainerQuery } from 'react-container-query';
 import classNames from 'classnames';
 import Media from 'react-media';
@@ -46,7 +46,7 @@ const query = {
   },
 };
 
-class BasicLayout extends React.Component {
+class BasicLayout extends Component {
   componentDidMount() {
     const {
       dispatch,
@@ -62,6 +62,17 @@ class BasicLayout extends React.Component {
       type: 'menu/getMenuData',
       payload: { routes, path, authority },
     });
+
+    // Initialize language from localStorage or default to English
+    const savedLocale = localStorage.getItem('umi_locale');
+    const currentLocale = getLocale();
+
+    if (savedLocale && savedLocale !== currentLocale) {
+      setLocale(savedLocale);
+    } else if (!savedLocale) {
+      setLocale('en-US');
+      localStorage.setItem('umi_locale', 'en-US');
+    }
   }
 
   getContext() {

src/dashboard/src/locales/en-US.js

@@ -26,6 +26,29 @@ export default {
   'app.forms.basic.title': 'Basic form',
   'app.forms.basic.description':
     'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
+
+  // Error messages
+  'error.request.200': 'Server successfully returned requested data.',
+  'error.request.201': 'Created or modified data successfully.',
+  'error.request.202': 'A request has entered the background queue.',
+  'error.request.204': 'Data deleted successfully.',
+  'error.request.400': 'Bad request, server did not create or modify data.',
+  'error.request.401': 'User does not have permission (token, username, password error).',
+  'error.request.403': 'User is authorized but access is forbidden.',
+  'error.request.404': 'Request made to non-existent record, server did not operate.',
+  'error.request.406': 'Requested format not available.',
+  'error.request.410': 'Requested resource permanently deleted and will not be available again.',
+  'error.request.422': 'Validation error occurred while creating an object.',
+  'error.request.500': 'Server error, please check server.',
+  'error.request.502': 'Gateway error.',
+  'error.request.503': 'Service unavailable, server temporarily overloaded or maintaining.',
+  'error.request.504': 'Gateway timeout.',
+  'error.network': 'Network error, please check your connection.',
+  'error.login.invalidCredentials': 'Invalid username or password.',
+  'error.login.expired': 'Not logged in or session expired. Please log in again.',
+  'error.register.duplicate': 'Email address or organization name already exists.',
+  'error.request.generic': 'Request error: {status}',
+
   ...exception,
   ...globalHeader,
   ...login,

src/dashboard/src/locales/zh-CN.js

@@ -26,6 +26,29 @@ export default {
   'app.forms.basic.title': '基础表单',
   'app.forms.basic.description':
     '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+
+  // Error messages
+  'error.request.200': '服务器成功返回请求的数据。',
+  'error.request.201': '新建或修改数据成功。',
+  'error.request.202': '一个请求已经进入后台排队（异步任务）。',
+  'error.request.204': '删除数据成功。',
+  'error.request.400': '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
+  'error.request.401': '用户没有权限（令牌、用户名、密码错误）。',
+  'error.request.403': '用户得到授权，但是访问是被禁止的。',
+  'error.request.404': '发出的请求针对的是不存在的记录，服务器没有进行操作。',
+  'error.request.406': '请求的格式不可得。',
+  'error.request.410': '请求的资源被永久删除，且不会再得到的。',
+  'error.request.422': '当创建一个对象时，发生一个验证错误。',
+  'error.request.500': '服务器发生错误，请检查服务器。',
+  'error.request.502': '网关错误。',
+  'error.request.503': '服务不可用，服务器暂时过载或维护。',
+  'error.request.504': '网关超时。',
+  'error.network': '网络错误，请检查您的网络连接。',
+  'error.login.invalidCredentials': '用户名或密码错误。',
+  'error.login.expired': '未登录或登录已过期，请重新登录。',
+  'error.register.duplicate': '邮箱地址或组织名已存在。',
+  'error.request.generic': '请求错误：{status}',
+
   ...exception,
   ...globalHeader,
   ...login,

src/dashboard/src/utils/request.js

@@ -1,61 +1,49 @@
-import React from 'react';
 import { extend } from 'umi-request';
 import { notification } from 'antd';
-import { history } from 'umi';
+import { history, formatMessage } from 'umi';
 import { stringify } from 'qs';
 
-const codeMessage = {
-  200: '服务器成功返回请求的数据。',
-  201: '新建或修改数据成功。',
-  202: '一个请求已经进入后台排队（异步任务）。',
-  204: '删除数据成功。',
-  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
-  401: '用户没有权限（令牌、用户名、密码错误）。',
-  403: '用户得到授权，但是访问是被禁止的。',
-  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
-  406: '请求的格式不可得。',
-  410: '请求的资源被永久删除，且不会再得到的。',
-  422: '当创建一个对象时，发生一个验证错误。',
-  500: '服务器发生错误，请检查服务器。',
-  502: '网关错误。',
-  503: '服务不可用，服务器暂时过载或维护。',
-  504: '网关超时。',
-};
-
 /**
- * 异常处理程序
+ * Error handler
  */
 const errorHandler = error => {
   const { response, data } = error;
-  const errortext = (
-    <>
-      {codeMessage[response.status] || response.statusText} <br />
-      {data && data.msg && Array.isArray(data.msg) && data.msg.length > 0 && data.msg[0]}
-    </>
-  );
+
+  if (!response) {
+    notification.error({
+      message: formatMessage({
+        id: 'error.network',
+        defaultMessage: 'Network Error',
+      }),
+    });
+    return;
+  }
+
   const { status, url } = response;
-  let verifyUserFail = false;
 
+  // Handle specific error cases
   if (status === 400) {
     const api = url.split('/').pop();
-
     if (api === 'login') {
       notification.error({
-        message: '用户名或密码错误。',
+        message: formatMessage({
+          id: 'error.login.invalidCredentials',
+          defaultMessage: 'Invalid username or password.',
+        }),
+        description: url,
       });
       return;
     }
-
-    if (api === 'token-verify') {
-      verifyUserFail = true;
-    }
   }
 
-  if (status === 401 || verifyUserFail) {
+  if (status === 401) {
     notification.error({
-      message: '未登录或登录已过期，请重新登录。',
+      message: formatMessage({
+        id: 'error.login.expired',
+        defaultMessage: 'Not logged in or session expired. Please log in again.',
+      }),
+      description: url,
     });
-
     history.replace({
       pathname: '/user/login',
       search: stringify({
@@ -69,26 +57,41 @@ const errorHandler = error => {
     const api = url.split('/').pop();
     if (api === 'register') {
       notification.error({
-        message: '邮箱地址或组织名已存在。',
+        message: formatMessage({
+          id: 'error.register.duplicate',
+          defaultMessage: 'Email address or organization name already exists.',
+        }),
+        description: url,
       });
       return;
     }
   }
 
+  // Generic error handling
+  const errorMessage = formatMessage({
+    id: `error.request.${status}`,
+    defaultMessage: `Request error (${status})`,
+  });
+
+  const detailMessage =
+    data?.detail ||
+    data?.msg ||
+    formatMessage({
+      id: 'error.request.generic',
+      defaultMessage: 'An error occurred while processing your request.',
+    });
+
   notification.error({
-    message: `请求错误 ${status}: ${url}`,
-    description: errortext,
+    message: errorMessage,
+    description: `${url}\n${detailMessage}`,
   });
-  // environment should not be used
+
+  // Handle navigation for specific error codes
   if (status === 403) {
     history.push('/exception/403');
-    return;
-  }
-  if (status <= 504 && status >= 500) {
+  } else if (status >= 500 && status <= 504) {
     history.push('/exception/500');
-    return;
-  }
-  if (status >= 404 && status < 422) {
+  } else if (status >= 404 && status < 422) {
     history.push('/exception/404');
   }
 };
@@ -101,11 +104,9 @@ const request = extend({
 request.interceptors.request.use(async (url, options) => {
   const token = window.localStorage.getItem('cello-token');
   if (url.indexOf('api/v1/login') < 0 && url.indexOf('api/v1/register') < 0 && token) {
-    // 如果有token 就走token逻辑
     const headers = {
       Authorization: `JWT ${token}`,
     };
-
     return {
       url,
       options: { ...options, headers },