changeOidcAttrMapId

resource/locales/ja/translation.json

@@ -568,6 +568,16 @@
         "register_2": "\"Authorization callback URL\"を<code>%s</code>としてGrowiを登録",
         "register_3": "上記フォームにクライアントIDとクライアントシークレットを入力"
       },
+      "OIDC": {
+        "name": "OpenID Connect",
+        "id_detail": "OIDC claims で一意に識別可能な値を格納している属性",
+        "username_detail": "hoge",
+        "name_detail": "hoge",
+        "mapping_detail": "hoge",
+        "register_1": "hoge",
+        "register_2": "hoge",
+        "register_3": "hoge"
+      },
       "how_to": {
         "google": "Google OAuth の設定方法",
         "github": "GitHub OAuth の設定方法",

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

@@ -129,7 +129,21 @@ class OidcSecurityManagement extends React.Component {
               Attribute Mapping ({ t('security_setting.optional') })
           </h3>
 
-          {/* TODO GW-546 create mapping options */}
+          <div className="row mb-5">
+            <label htmlFor="oidcAttrMapId" className="col-xs-3 text-right">Identifier</label>
+            <div className="col-xs-6">
+              <input
+                className="form-control"
+                type="text"
+                name="oidcAttrMapId"
+                value={adminOidcSecurityContainer.state.oidcAttrMapId}
+                onChange={e => adminOidcSecurityContainer.changeOidcAttrMapId(e.target.value)}
+              />
+              <p className="help-block">
+                <small dangerouslySetInnerHTML={{ __html: t('security_setting.OAuth.OIDC.id_detail') }} />
+              </p>
+            </div>
+          </div>
 
         </React.Fragment>
         )}

src/client/js/services/AdminOidcSecurityContainer.js

@@ -23,6 +23,7 @@ export default class AdminOidcSecurityContainer extends Container {
       oidcIssuerHost: '',
       oidcClientId: '',
       oidcClientSecret: '',
+      oidcAttrMapId: '',
     };
 
     this.init();
@@ -68,4 +69,11 @@ export default class AdminOidcSecurityContainer extends Container {
     this.setState({ oidcClientSecret: inputValue });
   }
 
+  /**
+   * Change oidcAttrMapId
+   */
+  changeOidcAttrMapId(inputValue) {
+    this.setState({ oidcAttrMapId: inputValue });
+  }
+
 }