add table

resource/locales/en-US/translation.json

@@ -590,14 +590,14 @@
       }
     },
     "form_item_name": {
-      "security:passport-saml:entryPoint": "Entry point",
-      "security:passport-saml:issuer": "Issuer",
-      "security:passport-saml:cert": "Certificate",
-      "security:passport-saml:attrMapId": "ID",
-      "security:passport-saml:attrMapUsername": "Username",
-      "security:passport-saml:attrMapMail": "Mail Address",
-      "security:passport-saml:attrMapFirstName": "First Name",
-      "security:passport-saml:attrMapLastName": "Last Name"
+      "entryPoint": "Entry point",
+      "issuer": "Issuer",
+      "cert": "Certificate",
+      "attrMapId": "ID",
+      "attrMapUsername": "Username",
+      "attrMapMail": "Mail Address",
+      "attrMapFirstName": "First Name",
+      "attrMapLastName": "Last Name"
     }
 	},
 

resource/locales/ja/translation.json

@@ -574,14 +574,14 @@
       }
     },
     "form_item_name": {
-      "security:passport-saml:entryPoint": "エントリーポイント",
-      "security:passport-saml:issuer": "発行者",
-      "security:passport-saml:cert": "証明書",
-      "security:passport-saml:attrMapId": "ID",
-      "security:passport-saml:attrMapUsername": "ユーザー名",
-      "security:passport-saml:attrMapMail": "メールアドレス",
-      "security:passport-saml:attrMapFirstName": "姓",
-      "security:passport-saml:attrMapLastName": "名"
+      "entryPoint": "エントリーポイント",
+      "issuer": "発行者",
+      "cert": "証明書",
+      "attrMapId": "ID",
+      "attrMapUsername": "ユーザー名",
+      "attrMapMail": "メールアドレス",
+      "attrMapFirstName": "姓",
+      "attrMapLastName": "名"
     }
   },
 

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

@@ -14,10 +14,12 @@ class SamlSecurityManagement extends React.Component {
 
   render() {
     const { t, adminGeneralSecurityContainer, adminSamlSecurityContainer } = this.props;
+    const { useOnlyEnvVars } = adminSamlSecurityContainer.state;
+
     return (
       <React.Fragment>
 
-        {adminGeneralSecurityContainer.state.useOnlyEnvVarsForSomeOptions && (
+        {useOnlyEnvVars && (
         <p
           className="alert alert-info"
           dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.note for the only env option', { env: 'SAML_USES_ONLY_ENV_VARS_FOR_SOME_OPTIONS' }) }}
@@ -76,6 +78,119 @@ class SamlSecurityManagement extends React.Component {
             </div>
           )}
 
+
+            <h3 className="alert-anchor border-bottom">
+              Basic Settings
+            </h3>
+
+            <table className={`table settings-table ${adminSamlSecurityContainer.state.useOnlyEnvVars && 'use-only-env-vars'}`}>
+              <colgroup>
+                <col className="item-name" />
+                <col className="from-db" />
+                <col className="from-env-vars" />
+              </colgroup>
+              <thead>
+                <tr><th></th><th>Database</th><th>Environment variables</th></tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th>{ t('security_setting.form_item_name.entryPoint') }</th>
+                  <td>
+                    <input
+                      className="form-control"
+                      type="text"
+                      name="samlDbEntryPoint"
+                      readOnly={useOnlyEnvVars}
+                      value={adminSamlSecurityContainer.state.samlDbEntryPoint}
+                      onChange={e => adminSamlSecurityContainer.changeSamlDbEntryPoint(e.target.value)}
+                    />
+                  </td>
+                  <td>
+                    <input
+                      className="form-control"
+                      type="text"
+                      value={adminSamlSecurityContainer.state.samlEnvVarEntryPoint}
+                      readOnly
+                    />
+                    <p className="help-block">
+                      <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.Use env var if empty', { env: 'SAML_ENTRY_POINT' }) }} />
+                    </p>
+                  </td>
+                </tr>
+                <tr>
+                  <th>{ t('security_setting.form_item_name.issuer') }</th>
+                  <td>
+                    <input
+                      className="form-control"
+                      type="text"
+                      name="samlEnvVarissuer"
+                      readOnly={useOnlyEnvVars}
+                      value={adminSamlSecurityContainer.state.samlDbIssuer}
+                      onChange={e => adminSamlSecurityContainer.changeSamlDbIssuer(e.target.value)}
+                    />
+                  </td>
+                  <td>
+                    <input
+                      className="form-control"
+                      type="text"
+                      value={adminSamlSecurityContainer.state.samlEnvVarIssuer}
+                      readOnly
+                    />
+                    <p className="help-block">
+                      <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.Use env var if empty', { env: 'SAML_ISSUER' }) }} />
+                    </p>
+                  </td>
+                </tr>
+                <tr>
+                  <th>{ t('security_setting.form_item_name.cert') }</th>
+                  <td>
+                    <textarea
+                      className="form-control input-sm"
+                      type="text"
+                      rows="5"
+                      name="samlDbCert"
+                      readOnly={useOnlyEnvVars}
+                      value={adminSamlSecurityContainer.state.samlDbcert}
+                      onChange={e => adminSamlSecurityContainer.changeSamlDbCert(e.target.value)}
+                    />
+                    <p className="help-block">
+                      <small>
+                        { t('security_setting.SAML.cert_detail') }
+                      </small>
+                    </p>
+                    <div>
+                      <small>
+                      e.g.
+                        <pre>{`-----BEGIN CERTIFICATE-----
+MIICBzCCAXACCQD4US7+0A/b/zANBgkqhkiG9w0BAQsFADBIMQswCQYDVQQGEwJK
+UDEOMAwGA1UECAwFVG9reW8xFTATBgNVBAoMDFdFU0VFSywgSW5jLjESMBAGA1UE
+...
+crmVwBzbloUO2l6k1ibwD2WVwpdxMKIF5z58HfKAvxZAzCHE7kMEZr1ge30WRXQA
+pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
+-----END CERTIFICATE-----
+                        `}
+                        </pre>
+                      </small>
+                    </div>
+                  </td>
+                  <td>
+                    <textarea
+                      className="form-control input-sm"
+                      type="text"
+                      rows="5"
+                      readOnly
+                      value={adminSamlSecurityContainer.state.samlEnvVarCert}
+                    />
+                    <p className="help-block">
+                      <small dangerouslySetInnerHTML={{ __html: t('security_setting.SAML.Use env var if empty', { env: 'SAML_CERT' }) }} />
+                    </p>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            {/* TODO GW-635 Attribute Mapping */}
+
           </React.Fragment>
 
         )}

src/client/js/services/AdminSamlSecurityContainer.js

@@ -18,9 +18,16 @@ export default class AdminSamlSecurityContainer extends Container {
 
     this.state = {
       // TODO GW-583 set value
+      useOnlyEnvVars: false,
       appSiteUrl: false,
       callbackUrl: 'hoge.com',
       missingMandatoryConfigKeys: [],
+      samlDbEntryPoint: '',
+      samlEnvVarEntryPoint: '',
+      samlDbIssuer: '',
+      samlEnvVarIssuer: '',
+      samlDbCert: '',
+      samlEnvVarCert: '',
     };
 
     this.init();
@@ -39,4 +46,25 @@ export default class AdminSamlSecurityContainer extends Container {
     return 'AdminSamlSecurityContainer';
   }
 
+  /**
+   * Change saml db entry point
+   */
+  changeSamlDbEntryPoint(inputValue) {
+    this.setState({ samlDbEntryPoint: inputValue });
+  }
+
+  /**
+   * Change saml db issuer
+   */
+  changeSamlDbIssuer(inputValue) {
+    this.setState({ samlDbIssuer: inputValue });
+  }
+
+  /**
+   * Change saml db Cert
+   */
+  changeSamlDbCert(inputValue) {
+    this.setState({ samlDbCert: inputValue });
+  }
+
 }