add i18n for access token comopnents

apps/app/public/static/locales/en_US/translation.json

@@ -219,6 +219,9 @@
       "profile_image2": "Set up AWS or enable local uploads."
     }
   },
+  "API Token Settings": "API token settings",
+  "Current API Token": "Current API token",
+  "Update API Token": "Update API token",
   "page_me_apitoken": {
     "api_token": "API Token",
     "notice": {
@@ -228,14 +231,33 @@
     },
     "form_help": {}
   },
+  "Access Token Settings": "Access token settings",
   "page_me_access_token": {
     "access_token": "Access token",
-    "notice": {
-      "access_token_issued": "Access token is not issued.",
-      "update_token1": "You can update to generate a new Access token.",
-      "update_token2": "You will need to update the Access token in any existing processes."
+    "expiredAt": "Expiration date",
+    "description": "Description",
+    "scope": "Scope",
+    "scope_read": "Read",
+    "action": "Action",
+    "create_token": "Create Token",
+    "no_tokens_found": "No access tokens found",
+    "new_token": {
+      "title": "New access token",
+      "copy_to_clipboard": "Copy to clipboard",
+      "message": "This token will only be displayed once. Please save it securely."
     },
-    "form_help": {}
+    "modal": {
+      "message": "Are you sure you want to delete this access token?",
+      "alert": "This action cannot be undone.",
+      "delete_token": "Delete Token"
+    },
+    "form": {
+      "title": "Create New Access Token",
+      "expiredAt_desc": "Select when this access token should expire.",
+      "description_desc": "Provide a description to help you identify this token later",
+      "scope_desc": "Select the scope of the access token."
+    },
+    "copy_to_clipboard": "Copy to clipboard"
   },
   "Password": "Password",
   "Password Settings": "Password settings",
@@ -267,12 +289,6 @@
   },
   "API Settings": "API settings",
   "Other Settings": "Other Settings",
-  "API Token Settings": "API token settings",
-  "Current API Token": "Current API token",
-  "Update API Token": "Update API token",
-  "Access Token Settings": "Access token settings",
-  "Current Access Token": "Current Access token",
-  "Update Access Token": "Update Access token",
   "in_app_notification_settings": {
     "in_app_notification_settings": "In-App Notification Settings",
     "subscribe_settings": "Settings to automatically subscribe (Receive notifications) to pages",

apps/app/public/static/locales/fr_FR/translation.json

@@ -220,6 +220,9 @@
       "profile_image2": "Configurer AWS ou activer le stockage local."
     }
   },
+  "API Token Settings": "Jetons d'API",
+  "Current API Token": "Mon jeton d'API",
+  "Update API Token": "Regénérer",
   "page_me_apitoken": {
     "api_token": "Jeton API",
     "notice": {
@@ -229,14 +232,33 @@
     },
     "form_help": {}
   },
+  "Access Token Settings": "Jeton d'accès",
   "page_me_access_token": {
-    "access_token": "Jeton Access",
-    "notice": {
-      "access_token_issued": "Aucun jeton d'Access existant.",
-      "update_token1": "Un nouveau jeton peut être généré.",
-      "update_token2": "Modifiez le jeton aux endroits où celui-ci est utilisé."
+    "access_token": "Jeton d'accès",
+    "expiredAt": "Date d'expiration",
+    "description": "Description",
+    "scope": "Portée",
+    "scope_read": "Lecture",
+    "action": "Action",
+    "create_token": "Créer un jeton",
+    "no_tokens_found": "Aucun jeton d'accès trouvé",
+    "new_token": {
+      "title": "Nouveau jeton d'accès",
+      "copy_to_clipboard": "Copier dans le presse-papiers",
+      "message": "Ce jeton ne sera affiché qu'une seule fois. Veuillez le sauvegarder en lieu sûr."
     },
-    "form_help": {}
+    "modal": {
+      "message": "Êtes-vous sûr de vouloir supprimer ce jeton d'accès ?",
+      "alert": "Cette action ne peut pas être annulée.",
+      "delete_token": "Supprimer le jeton"
+    },
+    "form": {
+      "title": "Créer un nouveau jeton d'accès",
+      "expiredAt_desc": "Sélectionnez la date d'expiration de ce jeton d'accès.",
+      "description_desc": "Fournissez une description pour vous aider à identifier ce jeton ultérieurement.",
+      "scope_desc": "Sélectionnez la portée du jeton d'accès."
+    },
+    "copy_to_clipboard": "Copier dans le presse-papiers"
   },
   "Password": "Mot de passe",
   "Password Settings": "Sécurité",
@@ -268,12 +290,6 @@
   },
   "API Settings": "API GROWI",
   "Other Settings": "Autres paramètres",
-  "API Token Settings": "Jetons d'API",
-  "Current API Token": "Mon jeton d'API",
-  "Update API Token": "Regénérer",
-  "Access Token Settings": "Jetons d'Access",
-  "Current Access Token": "Mon jeton d'Access",
-  "Update Access Token": "Regénérer",
   "in_app_notification_settings": {
     "in_app_notification_settings": "Notifications",
     "subscribe_settings": "Paramètres d'abonnement automatique aux notifications de pages",

apps/app/public/static/locales/ja_JP/translation.json

@@ -220,6 +220,9 @@
       "profile_image2": "アップロードできるようにするには、AWS またはローカルアップロードの設定をしてください。"
     }
   },
+  "API Token Settings": "API Token設定",
+  "Current API Token": "現在のAPI Token",
+  "Update API Token": "API Tokenを更新",
   "page_me_apitoken": {
     "api_token": "API Token",
     "notice": {
@@ -229,14 +232,33 @@
     },
     "form_help": {}
   },
+  "Access Token Settings": "Access token 設定",
   "page_me_access_token": {
     "access_token": "Access token",
-    "notice": {
-      "access_token_issued": "Access token が設定されていません。",
-      "update_token1": "Access token を更新すると、自動的に新しい Token が生成されます。",
-      "update_token2": "現在の Token を利用している処理は動かなくなります。"
+    "expiredAt": "有効期限",
+    "description": "説明",
+    "scope": "スコープ",
+    "scope_read": "Read",
+    "action": "アクション",
+    "create_token": "トークンを作成",
+    "no_tokens_found":"アクセストークンが見つかりません",
+    "new_token": {
+      "title": "新しいアクセストークン",
+      "copy_to_clipboard": "クリップボードにコピーしました",
+      "message": "このアクセストークンは一度しか表示されません。安全に保存してください"
     },
-    "form_help": {}
+    "modal": {
+      "message": "このアクセストークンを削除しますか？",
+      "alert": "この操作は取り消せません",
+      "delete_token": "トークンを削除"
+    },
+    "form": {
+      "title": "アクセストークンを作成",
+      "expiredAt_desc": "アクセストークンの有効期限を選択します。",
+      "description_desc": "このトークンを後で識別するための説明を入力します。",
+      "scope_desc": "スコープによって、このトークンで行える操作を制限します。"
+    },
+    "copy_to_clipboard": "Copy to clipboard"
   },
   "Password": "パスワード",
   "Password Settings": "パスワード設定",
@@ -268,12 +290,6 @@
   },
   "API Settings": "API設定",
   "Other Settings": "その他の設定",
-  "API Token Settings": "API Token設定",
-  "Current API Token": "現在のAPI Token",
-  "Update API Token": "API Tokenを更新",
-  "Access Token Settings": "Access token 設定",
-  "Current Access Token": "現在のAccess token",
-  "Update Access Token": "Access tokenを更新",
   "in_app_notification_settings": {
     "in_app_notification_settings": "アプリ内通知設定",
     "subscribe_settings": "自動でページをサブスクライブする（通知を受け取る）設定",

apps/app/public/static/locales/zh_CN/translation.json

@@ -227,6 +227,9 @@
       "profile_image2": "设置AWS或启用本地上传。"
     }
   },
+  "API Token Settings": "API token 设置",
+  "Current API Token": "当前 API token",
+  "Update API Token": "更新 API token",
   "page_me_apitoken": {
     "api_token": "API Token",
     "notice": {
@@ -236,14 +239,33 @@
     },
     "form_help": {}
   },
+  "Access Token Settings": "Access token 设置",
   "page_me_access_token": {
-    "access_token": "Access token",
-    "notice": {
-      "access_token_issued": "Access token 未发布。",
-      "update_token1": "您可以更新以生成新的API令牌。",
-      "update_token2": "您需要更新任何现有进程中的API令牌。"
+    "access_token": "访问令牌",
+    "expiredAt": "过期日期",
+    "description": "描述",
+    "scope": "范围",
+    "scope_read": "读取",
+    "action": "操作",
+    "create_token": "创建令牌",
+    "no_tokens_found": "未找到访问令牌",
+    "new_token": {
+      "title": "新访问令牌",
+      "copy_to_clipboard": "复制到剪贴板",
+      "message": "此令牌仅显示一次。请安全保存。"
     },
-    "form_help": {}
+    "modal": {
+      "message": "确定要删除此访问令牌吗？",
+      "alert": "此操作无法撤消。",
+      "delete_token": "删除令牌"
+    },
+    "form": {
+      "title": "创建新访问令牌",
+      "expiredAt_desc": "选择此访问令牌的过期时间。",
+      "description_desc": "提供描述以帮助您稍后识别此令牌。",
+      "scope_desc": "选择访问令牌的范围。"
+    },
+    "copy_to_clipboard": "复制到剪贴板"
   },
   "Password": "密码",
   "Password Settings": "密码设置",
@@ -259,12 +281,6 @@
   },
   "API Settings": "API设置",
   "Other Settings": "其他设置",
-  "API Token Settings": "API token 设置",
-  "Current API Token": "当前 API token",
-  "Update API Token": "更新 API token",
-  "Access Token Settings": "Access token 设置",
-  "Current Access Token": "当前 Access token",
-  "Update Access Token": "更新 Access token",
   "in_app_notification_settings": {
     "in_app_notification_settings": "在应用程序通知设置",
     "subscribe_settings": "自动订阅（接收通知）页面的设置",

apps/app/src/client/components/Me/AccessTokenForm.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-const MAX_DESCRIPTION_LENGTH = 250;
+const MAX_DESCRIPTION_LENGTH = 200;
 
 type AccessTokenFormProps = {
   submitHandler: (info: {
@@ -37,11 +37,11 @@ export const AccessTokenForm = React.memo((props: AccessTokenFormProps): JSX.Ele
 
   return (
     <div className="card mt-3 mb-4">
-      <div className="card-header">{t('Create New Access Token')}</div>
+      <div className="card-header">{t('page_me_access_token.form.title')}</div>
       <div className="card-body">
         <form onSubmit={handleSubmit}>
           <div className="mb-3">
-            <label htmlFor="expiredAt" className="form-label">{t('Expiration Date')}</label>
+            <label htmlFor="expiredAt" className="form-label">{t('page_me_access_token.expiredAt')}</label>
             <div className="row">
               <div className="col-16 col-sm-4 col-md-4 col-lg-3">
                 <div className="input-group">
@@ -56,11 +56,11 @@ export const AccessTokenForm = React.memo((props: AccessTokenFormProps): JSX.Ele
                 </div>
               </div>
             </div>
-            <div className="form-text">{t('Select when this access token should expire')}</div>
+            <div className="form-text">{t('page_me_access_token.form.expiredAt_desc')}</div>
           </div>
 
           <div className="mb-3">
-            <label htmlFor="description" className="form-label">{t('Description')}</label>
+            <label htmlFor="description" className="form-label">{t('page_me_access_token.description')}</label>
             <textarea
               className="form-control"
               name="description"
@@ -69,23 +69,13 @@ export const AccessTokenForm = React.memo((props: AccessTokenFormProps): JSX.Ele
               required
               defaultValue=""
             />
-            <div className="form-text">{t('Provide a description to help you identify this token later')}</div>
+            <div className="form-text">{t('page_me_access_token.form.description_desc')}</div>
           </div>
 
           <div className="mb-3">
-            <label htmlFor="scope" className="form-label">{t('Scope')}</label>
-            <div className="form-text mb-2">(TODO: Implement scope selection)</div>
-            <div className="form-check">
-              <input
-                className="form-check-input"
-                type="checkbox"
-                name="readScope"
-                disabled
-              />
-              <label className="form-check-label" htmlFor="readScope">
-                {t('Read')}
-              </label>
-            </div>
+            <label htmlFor="scope" className="form-label">{t('page_me_access_token.scope')}</label>
+            <div className="form-text mb-2">{t('page_me_access_token.form.scope_desc')}</div>
+            <div className="form-text mb-2">(TBD)</div>
           </div>
 
           <button
@@ -93,7 +83,7 @@ export const AccessTokenForm = React.memo((props: AccessTokenFormProps): JSX.Ele
             className="btn btn-primary"
             data-testid="create-access-token-button"
           >
-            {t('Create Token')}
+            {t('page_me_access_token.create_token')}
           </button>
         </form>
       </div>

apps/app/src/client/components/Me/AccessTokenList.tsx

@@ -33,14 +33,14 @@ export const AccessTokenList = React.memo((props: AccessTokenListProps): JSX.Ele
 
   return (
     <>
-      <div className="table-responsive">
+      <div className="table">
         <table className="table table-bordered">
           <thead>
             <tr>
-              <th>description</th>
-              <th>expiredAt</th>
-              <th>scope</th>
-              <th>action</th>
+              <th>{t('page_me_access_token.description')}</th>
+              <th>{t('page_me_access_token.expiredAt')}</th>
+              <th>{t('page_me_access_token.scope')}</th>
+              <th>{t('page_me_access_token.action')}</th>
             </tr>
           </thead>
           <tbody>
@@ -48,7 +48,7 @@ export const AccessTokenList = React.memo((props: AccessTokenListProps): JSX.Ele
               ? (
                 <tr>
                   <td colSpan={4} className="text-center">
-                    {t('No access tokens found')}
+                    {t('page_me_access_token.no_tokens_found')}
                   </td>
                 </tr>
               )
@@ -56,7 +56,7 @@ export const AccessTokenList = React.memo((props: AccessTokenListProps): JSX.Ele
                 <>{
                   accessTokens.map(token => (
                     <tr key={token._id}>
-                      <td>{token.description}</td>
+                      <td className="text-break">{token.description}</td>
                       <td>{token.expiredAt.toString()}</td>
                       <td>{token.scope.join(', ')}</td>
                       <td>
@@ -92,7 +92,7 @@ export const AccessTokenList = React.memo((props: AccessTokenListProps): JSX.Ele
             {t('Cancel')}
           </Button>
           <Button color="danger" onClick={handleConfirmDelete}>
-            {t('page_me_access_token.delete_token')}
+            {t('page_me_access_token.modal.delete_token')}
           </Button>
         </ModalFooter>
       </Modal>

apps/app/src/client/components/Me/AccessTokenSettings.tsx

@@ -15,7 +15,7 @@ const NewTokenDisplay = React.memo(({ newToken, closeNewTokenDisplay }: { newTok
 
   // Handle successful copy
   const handleCopySuccess = useCallback(() => {
-    toastSuccess(t('Copied to clipboard'));
+    toastSuccess(t('page_me_access_token.new_token.copy_to_clipboard'));
   }, [t]);
 
   if (newToken == null) {
@@ -26,7 +26,7 @@ const NewTokenDisplay = React.memo(({ newToken, closeNewTokenDisplay }: { newTok
     <div className="alert alert-success mb-4" role="alert">
       <div className="d-flex justify-content-between align-items-center mb-2">
         <h5 className="mb-0">
-          {t('New Access Token')}
+          {t('page_me_access_token.new_token.title')}
         </h5>
         <button
           type="button"
@@ -37,7 +37,7 @@ const NewTokenDisplay = React.memo(({ newToken, closeNewTokenDisplay }: { newTok
         </button>
       </div>
 
-      <p className="fw-bold mb-2">{t('This token will only be displayed once. Please save it securely.')}</p>
+      <p className="fw-bold mb-2">{t('page_me_access_token.new_token.message')}</p>
 
       <div className="input-group mb-2">
         <input