collapseHelpForOidcOauth

resource/locales/ja/translation.json

@@ -573,10 +573,7 @@
         "id_detail": "OIDC claims で一意に識別可能な値を格納している属性",
         "username_detail": "新規ユーザーのアカウント名(<code>username</code>)に関連付ける属性",
         "name_detail": "新規ユーザー名(<code>name</code>)に関連付ける属性",
-        "mapping_detail": "新規ユーザーの{{target}}に関連付ける属性",
-        "register_1": "hoge",
-        "register_2": "hoge",
-        "register_3": "hoge"
+        "mapping_detail": "新規ユーザーの{{target}}に関連付ける属性"
       },
       "how_to": {
         "google": "Google OAuth の設定方法",

src/client/js/components/Admin/Security/OidcSecuritySetting.jsx

@@ -258,6 +258,21 @@ class OidcSecurityManagement extends React.Component {
 
         </React.Fragment>
         )}
+
+        <hr />
+
+        <div style={{ minHeight: '300px' }}>
+          <h4>
+            <i className="icon-question" aria-hidden="true"></i>
+            <a href="#collapseHelpForOidcOauth" data-toggle="collapse">{ t('security_setting.OAuth.how_to.oidc') }</a>
+          </h4>
+          <ol id="collapseHelpForOidcOauth" className="collapse">
+            <li>{ t('security_setting.OAuth.OIDC.register_1') }</li>
+            <li>{ t('security_setting.OAuth.OIDC.register_2') }</li>
+            <li>{ t('security_setting.OAuth.OIDC.register_3') }</li>
+          </ol>
+        </div>
+
       </React.Fragment>
     );
   }