admin: add placeholder text for OAuth2 fields and improve accessibility

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

@@ -384,6 +384,7 @@
     "oauth2_client_secret": "Client Secret",
     "oauth2_refresh_token": "Refresh Token",
     "oauth2_refresh_token_help": "The refresh token obtained from OAuth 2.0 authorization flow",
+    "placeholder_leave_blank": "Leave blank to keep existing value",
     "send_test_email": "Send a test-email",
     "success_to_send_test_email": "Success to send a test-email",
     "smtp_settings": "SMTP settings",

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

@@ -384,6 +384,7 @@
     "oauth2_client_secret": "Secret client",
     "oauth2_refresh_token": "Jeton de rafraîchissement",
     "oauth2_refresh_token_help": "Le jeton de rafraîchissement obtenu à partir du flux d'autorisation OAuth 2.0",
+    "placeholder_leave_blank": "Laisser vide pour conserver la valeur existante",
     "send_test_email": "Courriel d'essai",
     "success_to_send_test_email": "Courriel d'essai envoyé",
     "smtp_settings": "Configuration SMTP",

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

@@ -393,6 +393,7 @@
     "oauth2_client_secret": "クライアントシークレット",
     "oauth2_refresh_token": "リフレッシュトークン",
     "oauth2_refresh_token_help": "OAuth 2.0認証フローから取得したリフレッシュトークン",
+    "placeholder_leave_blank": "既存の値を保持する場合は空白のままにしてください",
     "send_test_email": "テストメールを送信",
     "success_to_send_test_email": "テストメールを送信しました。",
     "smtp_settings": "SMTP設定",

apps/app/public/static/locales/ko_KR/admin.json

@@ -384,6 +384,7 @@
     "oauth2_client_secret": "클라이언트 시크릿",
     "oauth2_refresh_token": "갱신 토큰",
     "oauth2_refresh_token_help": "OAuth 2.0 인증 흐름에서 얻은 갱신 토큰",
+    "placeholder_leave_blank": "기존 값을 유지하려면 비워두세요",
     "send_test_email": "테스트 이메일 전송",
     "success_to_send_test_email": "테스트 이메일 전송 성공",
     "smtp_settings": "SMTP 설정",

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

@@ -392,6 +392,7 @@
     "oauth2_client_secret": "客户端密钥",
     "oauth2_refresh_token": "刷新令牌",
     "oauth2_refresh_token_help": "从 OAuth 2.0 授权流程获得的刷新令牌",
+    "placeholder_leave_blank": "留空以保留现有值",
     "from_e-mail_address": "邮件发出地址",
     "send_test_email": "发送测试邮件",
     "success_to_send_test_email": "成功发送了一封测试邮件",

apps/app/src/client/components/Admin/App/OAuth2Setting.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { useTranslation } from 'next-i18next';
 import type { UseFormRegister } from 'react-hook-form';
 
@@ -15,8 +16,13 @@ const OAuth2Setting = (props: Props): JSX.Element => {
   const { t } = useTranslation();
   const { register } = props;
 
+  const userInputId = useId();
+  const clientIdInputId = useId();
+  const clientSecretInputId = useId();
+  const refreshTokenInputId = useId();
+
   return (
-    <div id="mail-oauth2" className="tab-pane active">
+    <div className="tab-pane active">
       <div className="row mb-3">
         <div className="col-md-12">
           <div className="alert alert-info">
@@ -29,7 +35,7 @@ const OAuth2Setting = (props: Props): JSX.Element => {
       <div className="row">
         <label
           className="text-start text-md-end col-md-3 col-form-label"
-          htmlFor="admin-oauth2-user"
+          htmlFor={userInputId}
         >
           {t('admin:app_setting.oauth2_user')}
         </label>
@@ -37,7 +43,7 @@ const OAuth2Setting = (props: Props): JSX.Element => {
           <input
             className="form-control"
             type="email"
-            id="admin-oauth2-user"
+            id={userInputId}
             placeholder="user@example.com"
             {...register('oauth2User')}
           />
@@ -50,7 +56,7 @@ const OAuth2Setting = (props: Props): JSX.Element => {
       <div className="row">
         <label
           className="text-start text-md-end col-md-3 col-form-label"
-          htmlFor="admin-oauth2-client-id"
+          htmlFor={clientIdInputId}
         >
           {t('admin:app_setting.oauth2_client_id')}
         </label>
@@ -58,7 +64,7 @@ const OAuth2Setting = (props: Props): JSX.Element => {
           <input
             className="form-control"
             type="text"
-            id="admin-oauth2-client-id"
+            id={clientIdInputId}
             {...register('oauth2ClientId')}
           />
         </div>
@@ -67,7 +73,7 @@ const OAuth2Setting = (props: Props): JSX.Element => {
       <div className="row">
         <label
           className="text-start text-md-end col-md-3 col-form-label"
-          htmlFor="admin-oauth2-client-secret"
+          htmlFor={clientSecretInputId}
         >
           {t('admin:app_setting.oauth2_client_secret')}
         </label>
@@ -75,7 +81,9 @@ const OAuth2Setting = (props: Props): JSX.Element => {
           <input
             className="form-control"
             type="password"
-            id="admin-oauth2-client-secret"
+            id={clientSecretInputId}
+            placeholder={t('admin:app_setting.placeholder_leave_blank')}
+            autoComplete="new-password"
             {...register('oauth2ClientSecret')}
           />
         </div>
@@ -84,7 +92,7 @@ const OAuth2Setting = (props: Props): JSX.Element => {
       <div className="row">
         <label
           className="text-start text-md-end col-md-3 col-form-label"
-          htmlFor="admin-oauth2-refresh-token"
+          htmlFor={refreshTokenInputId}
         >
           {t('admin:app_setting.oauth2_refresh_token')}
         </label>
@@ -92,7 +100,9 @@ const OAuth2Setting = (props: Props): JSX.Element => {
           <input
             className="form-control"
             type="password"
-            id="admin-oauth2-refresh-token"
+            id={refreshTokenInputId}
+            placeholder={t('admin:app_setting.placeholder_leave_blank')}
+            autoComplete="new-password"
             {...register('oauth2RefreshToken')}
           />
           <small className="form-text text-muted">