changeGoogleClientId

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

@@ -62,8 +62,25 @@ class GoogleSecurityManagement extends React.Component {
 
 
         {adminGeneralSecurityContainer.state.isGoogleOAuthEnabled && (
-          // TODO
-          <p>{adminGoogleSecurityContainer.state.hoge}</p>
+          <React.Fragment>
+
+            <div className="row mb-5">
+              <label htmlFor="googleClientId" className="col-xs-3 text-right">{ t('security_setting.clientID') }</label>
+              <div className="col-xs-6">
+                <input
+                  className="form-control"
+                  type="text"
+                  name="googleClientId"
+                  value={adminGoogleSecurityContainer.state.googleClientId}
+                  onChange={e => adminGoogleSecurityContainer.changeGoogleClientId(e.target.value)}
+                />
+                <p className="help-block">
+                  <small dangerouslySetInnerHTML={{ __html: t('security_setting.Use env var if empty', { env: 'OAUTH_GOOGLE_CLIENT_ID' }) }} />
+                </p>
+              </div>
+            </div>
+
+          </React.Fragment>
         )}
 
         <hr />

src/client/js/services/AdminGoogleSecurityContainer.js

@@ -19,6 +19,7 @@ export default class AdminGoogleSecurityContainer extends Container {
     this.state = {
       // TODO GW-583 set value
       appSiteUrl: '',
+      googleClientId: '',
     };
 
     this.init();
@@ -36,4 +37,11 @@ export default class AdminGoogleSecurityContainer extends Container {
     return 'AdminGoogleSecurityContainer';
   }
 
+  /**
+   * Change googleClientId
+   */
+  changeGoogleClientId(value) {
+    this.setState({ googleClientId: value });
+  }
+
 }