replase form-group as row

src/client/js/components/Admin/App/AppSetting.jsx

@@ -38,47 +38,35 @@ class AppSetting extends React.Component {
 
     return (
       <React.Fragment>
-        <div className="row">
-          <div className="col-md-12">
-            <div className="form-group">
-              <label className="col-xs-3 control-label">{t('app_setting.Site Name')}</label>
-              <div className="col-xs-6">
-                <input
-                  className="form-control"
-                  id="settingForm[app:title]"
-                  type="text"
-                  name="title"
-                  defaultValue={adminAppContainer.state.title}
-                  onChange={(e) => { adminAppContainer.changeTitle(e.target.value) }}
-                  placeholder="GROWI"
-                />
-                <p className="help-block">{t('app_setting.sitename_change')}</p>
-              </div>
-            </div>
+        <div className="row md-5">
+          <label className="col-xs-3 control-label">{t('app_setting.Site Name')}</label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              defaultValue={adminAppContainer.state.title}
+              onChange={(e) => { adminAppContainer.changeTitle(e.target.value) }}
+              placeholder="GROWI"
+            />
+            <p className="help-block">{t('app_setting.sitename_change')}</p>
           </div>
         </div>
 
-        <div className="row">
-          <div className="col-md-12">
-            <div className="form-group">
-              <label className="col-xs-3 control-label">{t('app_setting.Confidential name')}</label>
-              <div className="col-xs-6">
-                <input
-                  className="form-control"
-                  id="settingForm[app:confidential]"
-                  type="text"
-                  name="confidential"
-                  defaultValue={adminAppContainer.state.confidential}
-                  onChange={(e) => { adminAppContainer.changeConfidential(e.target.value) }}
-                  placeholder={t('app_setting.ex) internal use only')}
-                />
-                <p className="help-block">{t('app_setting.header_content')}</p>
-              </div>
-            </div>
+        <div className="row md-5">
+          <label className="col-xs-3 control-label">{t('app_setting.Confidential name')}</label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              defaultValue={adminAppContainer.state.confidential}
+              onChange={(e) => { adminAppContainer.changeConfidential(e.target.value) }}
+              placeholder={t('app_setting.ex) internal use only')}
+            />
+            <p className="help-block">{t('app_setting.header_content')}</p>
           </div>
         </div>
 
-        <div className="form-group">
+        <div className="row md-5">
           <label className="col-xs-3 control-label">{t('app_setting.Default Language for new users')}</label>
           <div className="col-xs-6">
             <div className="radio radio-primary radio-inline">
@@ -106,29 +94,25 @@ class AppSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row">
-          <div className="col-md-12">
-            <div className="form-group">
-              <label className="col-xs-3 control-label">{t('app_setting.File Uploading')}</label>
-              <div className="col-xs-6">
-                <div className="checkbox checkbox-info">
-                  <input
-                    type="checkbox"
-                    id="cbFileUpload"
-                    name="fileUpload"
-                    checked={adminAppContainer.state.fileUpload}
-                    onChange={(e) => { adminAppContainer.changeFileUpload(e.target.checked) }}
-                  />
-                  <label htmlFor="cbFileUpload">{t('app_setting.enable_files_except_image')}</label>
-                </div>
-
-                <p className="help-block">
-                  {t('app_setting.enable_files_except_image')}
-                  <br />
-                  {t('app_setting.attach_enable')}
-                </p>
-              </div>
+        <div className="row md-5">
+          <label className="col-xs-3 control-label">{t('app_setting.File Uploading')}</label>
+          <div className="col-xs-6">
+            <div className="checkbox checkbox-info">
+              <input
+                type="checkbox"
+                id="cbFileUpload"
+                name="fileUpload"
+                checked={adminAppContainer.state.fileUpload}
+                onChange={(e) => { adminAppContainer.changeFileUpload(e.target.checked) }}
+              />
+              <label htmlFor="cbFileUpload">{t('app_setting.enable_files_except_image')}</label>
             </div>
+
+            <p className="help-block">
+              {t('app_setting.enable_files_except_image')}
+              <br />
+              {t('app_setting.attach_enable')}
+            </p>
           </div>
         </div>
 

src/client/js/components/Admin/App/AwsSetting.jsx

@@ -50,117 +50,86 @@ class AwsSetting extends React.Component {
           </span>
         </p>
 
-        <div className="row">
-          <div className="col-md-12">
-            <div className="form-group">
-              <label htmlFor="settingForm[app:region]" className="col-xs-3 control-label">
-                {t('app_setting.region')}
-              </label>
-              <div className="col-xs-6">
-                <input
-                  className="form-control"
-                  id="settingForm[app:region]"
-                  type="text"
-                  name="settingForm[aws:region]"
-                  placeholder={`${t('eg')} ap-northeast-1`}
-                  defaultValue={adminAppContainer.state.region}
-                  onChange={(e) => {
-                    adminAppContainer.changeRegion(e.target.value);
-                  }}
-                />
-              </div>
-            </div>
+        <div className="row mb-5">
+          <label className="col-xs-3 control-label">
+            {t('app_setting.region')}
+          </label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              placeholder={`${t('eg')} ap-northeast-1`}
+              defaultValue={adminAppContainer.state.region}
+              onChange={(e) => {
+                adminAppContainer.changeRegion(e.target.value);
+              }}
+            />
           </div>
         </div>
 
-        <div className="row">
-          <div className="col-md-12">
-            <div className="form-group">
-              <label htmlFor="settingForm[aws:customEndpoint]" className="col-xs-3 control-label">
-                {t('app_setting.custom endpoint')}
-              </label>
-              <div className="col-xs-6">
-                <input
-                  className="form-control"
-                  id="settingForm[aws:customEndpoint]"
-                  type="text"
-                  name="settingForm[aws:customEndpoint]"
-                  placeholder={`${t('eg')} http://localhost:9000`}
-                  defaultValue={adminAppContainer.state.customEndpoint}
-                  onChange={(e) => {
-                    adminAppContainer.changeCustomEndpoint(e.target.value);
-                  }}
-                />
-                <p className="help-block">{t('app_setting.custom_endpoint_change')}</p>
-              </div>
-            </div>
+        <div className="row mb-5">
+          <label className="col-xs-3 control-label">
+            {t('app_setting.custom endpoint')}
+          </label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              placeholder={`${t('eg')} http://localhost:9000`}
+              defaultValue={adminAppContainer.state.customEndpoint}
+              onChange={(e) => {
+                adminAppContainer.changeCustomEndpoint(e.target.value);
+              }}
+            />
+            <p className="help-block">{t('app_setting.custom_endpoint_change')}</p>
           </div>
         </div>
 
-        <div className="row">
-          <div className="col-md-12">
-            <div className="form-group">
-              <label htmlFor="settingForm[aws:bucket]" className="col-xs-3 control-label">
-                {t('app_setting.bucket name')}
-              </label>
-              <div className="col-xs-6">
-                <input
-                  className="form-control"
-                  id="settingForm[aws:bucket]"
-                  type="text"
-                  name="settingForm[aws:bucket]"
-                  placeholder={`${t('eg')} crowi`}
-                  defaultValue={adminAppContainer.state.bucket}
-                  onChange={(e) => {
-                    adminAppContainer.changeBucket(e.target.value);
-                  }}
-                />
-              </div>
-            </div>
+        <div className="row mb-5">
+          <label className="col-xs-3 control-label">
+            {t('app_setting.bucket name')}
+          </label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              placeholder={`${t('eg')} crowi`}
+              defaultValue={adminAppContainer.state.bucket}
+              onChange={(e) => {
+                adminAppContainer.changeBucket(e.target.value);
+              }}
+            />
           </div>
         </div>
 
-        <div className="row">
-          <div className="col-md-12">
-            <div className="form-group">
-              <label htmlFor="settingForm[aws:accessKeyId]" className="col-xs-3 control-label">
-                Access Key ID
-              </label>
-              <div className="col-xs-6">
-                <input
-                  className="form-control"
-                  id="settingForm[aws:accessKeyId]"
-                  type="text"
-                  name="settingForm[aws:accessKeyId]"
-                  defaultValue={adminAppContainer.state.accessKeyId}
-                  onChange={(e) => {
-                    adminAppContainer.changeAccessKeyId(e.target.value);
-                  }}
-                />
-              </div>
-            </div>
+        <div className="row mb-5">
+          <label className="col-xs-3 control-label">
+            Access Key ID
+          </label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              defaultValue={adminAppContainer.state.accessKeyId}
+              onChange={(e) => {
+                adminAppContainer.changeAccessKeyId(e.target.value);
+              }}
+            />
           </div>
         </div>
 
-        <div className="row">
-          <div className="col-md-12">
-            <div className="form-group">
-              <label htmlFor="settingForm[aws:secretAccessKey]" className="col-xs-3 control-label">
-                Secret Access Key
-              </label>
-              <div className="col-xs-6">
-                <input
-                  className="form-control"
-                  id="settingForm[aws:secretAccessKey]"
-                  type="text"
-                  name="settingForm[aws:secretAccessKey]"
-                  defaultValue={adminAppContainer.state.secretKey}
-                  onChange={(e) => {
-                    adminAppContainer.changeSecretKey(e.target.value);
-                  }}
-                />
-              </div>
-            </div>
+        <div className="row mb-5">
+          <label className="col-xs-3 control-label">
+            Secret Access Key
+          </label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              defaultValue={adminAppContainer.state.secretKey}
+              onChange={(e) => {
+                adminAppContainer.changeSecretKey(e.target.value);
+              }}
+            />
           </div>
         </div>
 

src/client/js/components/Admin/App/MailSetting.jsx

@@ -39,77 +39,58 @@ class MailSetting extends React.Component {
     return (
       <React.Fragment>
         <p className="well">{t('app_setting.SMTP_used')} {t('app_setting.SMTP_but_AWS')}<br />{t('app_setting.neihter_of')}</p>
-        <div className="row">
-          <div className="col-md-12">
-            <div className="form-group">
-              <label htmlFor="settingForm[mail.from]" className="col-xs-3 control-label">{t('app_setting.From e-mail address')}</label>
-              <div className="col-xs-6">
-                <input
-                  className="form-control"
-                  id="settingForm[mail.from]"
-                  type="text"
-                  name="settingForm[mail:from]"
-                  placeholder={`${t('eg')} mail@growi.org`}
-                  defaultValue={adminAppContainer.state.fromAddress}
-                  onChange={(e) => { adminAppContainer.changeFromAddress(e.target.value) }}
-                />
-              </div>
-            </div>
+        <div className="row mb-5">
+          <label className="col-xs-3 control-label">{t('app_setting.From e-mail address')}</label>
+          <div className="col-xs-6">
+            <input
+              className="form-control"
+              type="text"
+              placeholder={`${t('eg')} mail@growi.org`}
+              defaultValue={adminAppContainer.state.fromAddress}
+              onChange={(e) => { adminAppContainer.changeFromAddress(e.target.value) }}
+            />
           </div>
         </div>
 
-        <div className="row">
-          <div className="col-md-12">
-            <div className="form-group">
-              <label className="col-xs-3 control-label">{ t('app_setting.SMTP settings') }</label>
-              <div className="col-xs-4">
-                <label>{ t('app_setting.Host') }</label>
-                <input
-                  className="form-control"
-                  type="text"
-                  name="settingForm[mail:smtpHost]"
-                  defaultValue={adminAppContainer.state.smtpHost}
-                  onChange={(e) => { adminAppContainer.changeSmtpHost(e.target.value) }}
-                />
-              </div>
-              <div className="col-xs-2">
-                <label>{ t('app_setting.Port') }</label>
-                <input
-                  className="form-control"
-                  type="text"
-                  name="settingForm[mail:smtpPort]"
-                  defaultValue={adminAppContainer.state.smtpPort}
-                  onChange={(e) => { adminAppContainer.changeSmtpPort(e.target.value) }}
-                />
-              </div>
-            </div>
+        <div className="row mb-5">
+          <label className="col-xs-3 control-label">{ t('app_setting.SMTP settings') }</label>
+          <div className="col-xs-4">
+            <label>{ t('app_setting.Host') }</label>
+            <input
+              className="form-control"
+              type="text"
+              defaultValue={adminAppContainer.state.smtpHost}
+              onChange={(e) => { adminAppContainer.changeSmtpHost(e.target.value) }}
+            />
+          </div>
+          <div className="col-xs-2">
+            <label>{ t('app_setting.Port') }</label>
+            <input
+              className="form-control"
+              defaultValue={adminAppContainer.state.smtpPort}
+              onChange={(e) => { adminAppContainer.changeSmtpPort(e.target.value) }}
+            />
           </div>
         </div>
 
-        <div className="row">
-          <div className="col-md-12">
-            <div className="form-group">
-              <div className="col-xs-3 col-xs-offset-3">
-                <label>{ t('app_setting.User') }</label>
-                <input
-                  className="form-control"
-                  type="text"
-                  name="settingForm[mail:smtpUser]"
-                  defaultValue={adminAppContainer.state.SmtpUser}
-                  onChange={(e) => { adminAppContainer.changeSmtpUser(e.target.value) }}
-                />
-              </div>
-              <div className="col-xs-3">
-                <label>{ t('Password') }</label>
-                <input
-                  className="form-control"
-                  type="password"
-                  name="settingForm[mail:smtpPassword]"
-                  defaultValue={adminAppContainer.state.smtpPassword}
-                  onChange={(e) => { adminAppContainer.changeSmtpPassword(e.target.value) }}
-                />
-              </div>
-            </div>
+        <div className="row mb-5">
+          <div className="col-xs-3 col-xs-offset-3">
+            <label>{ t('app_setting.User') }</label>
+            <input
+              className="form-control"
+              type="text"
+              defaultValue={adminAppContainer.state.SmtpUser}
+              onChange={(e) => { adminAppContainer.changeSmtpUser(e.target.value) }}
+            />
+          </div>
+          <div className="col-xs-3">
+            <label>{ t('Password') }</label>
+            <input
+              className="form-control"
+              type="password"
+              defaultValue={adminAppContainer.state.smtpPassword}
+              onChange={(e) => { adminAppContainer.changeSmtpPassword(e.target.value) }}
+            />
           </div>
         </div>