changeOidcClientId

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

@@ -87,7 +87,22 @@ class OidcSecurityManagement extends React.Component {
                 <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_ISSUER_HOST' }) }} />
               </p>
             </div>
+          </div>
 
+          <div className="row mb-5">
+            <label htmlFor="oidcClientId" className="col-xs-3 text-right">{ t('security_setting.clientID') }</label>
+            <div className="col-xs-6">
+              <input
+                className="form-control"
+                type="text"
+                name="oidcClientId"
+                value={adminOidcSecurityContainer.state.oidcClientId}
+                onChange={e => adminOidcSecurityContainer.changeOidcClientId(e.target.value)}
+              />
+              <p className="help-block">
+                <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_OIDC_CLIENT_ID' }) }} />
+              </p>
+            </div>
           </div>
 
         </React.Fragment>

src/client/js/services/AdminOidcSecurityContainer.js

@@ -21,6 +21,7 @@ export default class AdminOidcSecurityContainer extends Container {
       callbackUrl: '',
       oidcProviderName: '',
       oidcIssuerHost: '',
+      oidcClientId: '',
     };
 
     this.init();
@@ -52,4 +53,11 @@ export default class AdminOidcSecurityContainer extends Container {
     this.setState({ oidcIssuerHost: inputValue });
   }
 
+  /**
+   * Change oidcClientId
+   */
+  changeOidcClientId(inputValue) {
+    this.setState({ oidcClientId: inputValue });
+  }
+
 }