add access token management UI and translations for multiple languages

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

@@ -226,6 +226,15 @@
     },
     "form_help": {}
   },
+  "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."
+    },
+    "form_help": {}
+  },
   "Password": "Password",
   "Password Settings": "Password settings",
   "personal_settings": {
@@ -259,6 +268,9 @@
   "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

@@ -227,6 +227,15 @@
     },
     "form_help": {}
   },
+  "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é."
+    },
+    "form_help": {}
+  },
   "Password": "Mot de passe",
   "Password Settings": "Sécurité",
   "personal_settings": {
@@ -260,6 +269,9 @@
   "API Token Settings": "Jetons d'API",
   "Current API Token": "Mon jeton d'API",
   "Update API Token": "Regénérer",
+  "Access Token Settings": "Paramètres Access token",
+  "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

@@ -227,6 +227,15 @@
     },
     "form_help": {}
   },
+  "page_me_access_token": {
+    "access_token": "Access token",
+    "notice": {
+      "access_token_issued": "Access token が設定されていません。",
+      "update_token1": "Access token を更新すると、自動的に新しい Token が生成されます。",
+      "update_token2": "現在の Token を利用している処理は動かなくなります。"
+    },
+    "form_help": {}
+  },
   "Password": "パスワード",
   "Password Settings": "パスワード設定",
   "personal_settings": {
@@ -260,6 +269,9 @@
   "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

@@ -231,7 +231,17 @@
       "apitoken_issued": "API token 未发布。",
       "update_token1": "您可以更新以生成新的API令牌。",
       "update_token2": "您需要更新任何现有进程中的API令牌。"
-    }
+    },
+    "form_help": {}
+  },
+  "page_me_access_token": {
+    "access_token": "Access token",
+    "notice": {
+      "access_token_issued": "Access token 未发布。",
+      "update_token1": "您可以更新以生成新的API令牌。",
+      "update_token2": "您需要更新任何现有进程中的API令牌。"
+    },
+    "form_help": {}
   },
   "Password": "密码",
   "Password Settings": "密码设置",
@@ -250,6 +260,9 @@
   "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/ApiSettings.tsx

@@ -2,14 +2,93 @@ import React, { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-import { apiv3Delete, apiv3Get, apiv3Post } from '~/client/util/apiv3-client';
+import {
+  apiv3Delete, apiv3Get, apiv3Post, apiv3Put,
+} from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';
+import { usePersonalSettings, useSWRxPersonalSettings } from '~/stores/personal-settings';
+
+
+const ApiTokenSettings = React.memo((): JSX.Element => {
+
+  const { t } = useTranslation();
+  const { mutate: mutateDatabaseData } = useSWRxPersonalSettings();
+  const { data: personalSettingsData } = usePersonalSettings();
+
+  const submitHandler = useCallback(async() => {
+
+    try {
+      await apiv3Put('/personal-setting/api-token');
+      mutateDatabaseData();
+
+      toastSuccess(t('toaster.update_successed', { target: t('page_me_apitoken.api_token'), ns: 'commons' }));
+    }
+    catch (err) {
+      toastError(err);
+    }
+
+  }, [mutateDatabaseData, t]); return (
+    <>
+      <div className="row mb-3">
+        <label htmlFor="apiToken" className="col-md-3 text-md-end col-form-label">{t('Current API Token')}</label>
+        <div className="col-md-6">
+          {personalSettingsData?.apiToken != null
+            ? (
+              <input
+                data-testid="grw-api-settings-input"
+                data-vrt-blackout
+                className="form-control"
+                type="text"
+                name="apiToken"
+                value={personalSettingsData.apiToken}
+                readOnly
+              />
+            )
+            : (
+              <p>
+                { t('page_me_apitoken.notice.apitoken_issued') }
+              </p>
+            )}
+        </div>
+      </div>
+
+
+      <div className="row">
+        <div className="offset-lg-2 col-lg-7">
+
+          <p className="alert alert-warning">
+            { t('page_me_apitoken.notice.update_token1') }<br />
+            { t('page_me_apitoken.notice.update_token2') }
+          </p>
+
+        </div>
+      </div>
+
+      <div className="row my-3">
+        <div className="offset-4 col-5">
+          <button
+            data-testid="grw-api-settings-update-button"
+            type="button"
+            className="btn btn-primary text-nowrap"
+            onClick={submitHandler}
+          >
+            {t('Update API Token')}
+          </button>
+        </div>
+      </div>
+
+    </>
+
+  );
+
+
+});
 
 
 /**
  * TODO: support managing multiple access tokens.
  */
-const ApiSettings = React.memo((): JSX.Element => {
+const AccessTokenSettings = React.memo((): JSX.Element => {
 
   const { t } = useTranslation();
   const [accessToken, setAccessToken] = React.useState<string | null>(null);
@@ -22,7 +101,7 @@ const ApiSettings = React.memo((): JSX.Element => {
       const result = await apiv3Post('/personal-setting/access-token', { expiredAt });
       setAccessToken(result.data.token);
 
-      toastSuccess(t('toaster.update_successed', { target: t('page_me_apitoken.api_token'), ns: 'commons' }));
+      toastSuccess(t('toaster.update_successed', { target: t('page_me_access_token.access_token'), ns: 'commons' }));
     }
     catch (err) {
       toastError(err);
@@ -46,11 +125,8 @@ const ApiSettings = React.memo((): JSX.Element => {
 
   return (
     <>
-
-      <h2 className="border-bottom pb-2 my-4 fs-4">{ t('API Token Settings') }</h2>
-
       <div className="row mb-3">
-        <label htmlFor="apiToken" className="col-md-3 text-md-end col-form-label">{t('Current API Token')}</label>
+        <label htmlFor="apiToken" className="col-md-3 text-md-end col-form-label">{t('Current Access Token')}</label>
         <div className="col-md-6">
           {accessToken != null
             ? (
@@ -66,7 +142,7 @@ const ApiSettings = React.memo((): JSX.Element => {
             )
             : (
               <p>
-                { t('page_me_apitoken.notice.apitoken_issued') }
+                { t('page_me_access_token.notice.access_token_issued') }
               </p>
             )}
         </div>
@@ -77,8 +153,8 @@ const ApiSettings = React.memo((): JSX.Element => {
         <div className="offset-lg-2 col-lg-7">
 
           <p className="alert alert-warning">
-            { t('page_me_apitoken.notice.update_token1') }<br />
-            { t('page_me_apitoken.notice.update_token2') }
+            { t('page_me_access_token.notice.update_token1') }<br />
+            { t('page_me_access_token.notice.update_token2') }
           </p>
 
         </div>
@@ -92,15 +168,27 @@ const ApiSettings = React.memo((): JSX.Element => {
             className="btn btn-primary text-nowrap"
             onClick={submitHandler}
           >
-            {t('Update API Token')}
+            {t('Update Access Token')}
           </button>
         </div>
       </div>
-
     </>
-
   );
+});
+
+const ApiSettings = React.memo((): JSX.Element => {
+
+  const { t } = useTranslation();
 
+  return (
+    <>
+      <h3 className="border-bottom pb-2 my-4 fs-5">{ t('API Token Settings') }</h3>
+      <ApiTokenSettings />
+
+      <h3 className="border-bottom pb-2 my-4 fs-5">{ t('Access Token Settings') }</h3>
+      <AccessTokenSettings />
+    </>
+  );
 });
 
 ApiSettings.displayName = 'ApiSettings';