support bs4

change util bs3 => bs4

src/client/js/components/Admin/ImportData/GrowiArchive/UploadForm.jsx

@@ -51,7 +51,7 @@ class UploadForm extends React.Component {
       <form onSubmit={this.uploadZipFile}>
         <fieldset>
           <div className="form-group row">
-            <label htmlFor="file" className="col-md-3 control-label">{t('admin:importer_management.growi_settings.growi_archive_file')}</label>
+            <label htmlFor="file" className="col-md-3 col-form-label col-form-label-sm text-left">{t('admin:importer_management.growi_settings.growi_archive_file')}</label>
             <div className="col-md-6">
               <input
                 type="file"

src/client/js/components/Admin/MarkdownSetting/PresentationForm.jsx

@@ -42,7 +42,7 @@ class PresentationForm extends React.Component {
     return (
       <fieldset className="form-group col-12 my-2">
 
-        <label className="col-8 offset-4 control-label font-weight-bold text-left mt-3">
+        <label className="col-8 offset-4 col-form-label col-form-label-sm font-weight-bold text-left mt-3">
           {t('admin:markdown_setting.presentation_options.page_break_setting')}
         </label>
 

src/client/js/components/Admin/MarkdownSetting/PresentationLineBreakOptions.jsx

@@ -1,86 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import { createSubscribedElement } from '../../UnstatedUtils';
-
-import AppContainer from '../../../services/AppContainer';
-import AdminMarkDownContainer from '../../../services/AdminMarkDownContainer';
-
-class PresentationLineBreakOptions extends React.Component {
-
-  render() {
-    const { t, adminMarkDownContainer } = this.props;
-    const { pageBreakOption, customRegularExpression } = adminMarkDownContainer.state;
-
-    return (
-      <Fragment>
-        <div className="col-xs-3 radio radio-primary">
-          <input
-            type="radio"
-            id="pageBreakOption1"
-            checked={pageBreakOption === 1}
-            onChange={() => { adminMarkDownContainer.setState({ pageBreakOption: 1 }) }}
-          />
-          <label htmlFor="pageBreakOption1">
-            <p className="font-weight-bold">{ t('markdown_setting.Preset one separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Preset one separator desc') }
-              <pre><code>{ t('markdown_setting.Preset one separator value') }</code></pre>
-            </div>
-          </label>
-        </div>
-
-        <div className="col-xs-3 radio radio-primary mt-3">
-          <input
-            type="radio"
-            id="pageBreakOption2"
-            checked={pageBreakOption === 2}
-            onChange={() => { adminMarkDownContainer.setState({ pageBreakOption: 2 }) }}
-          />
-          <label htmlFor="pageBreakOption2">
-            <p className="font-weight-bold">{ t('markdown_setting.Preset two separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Preset two separator desc') }
-              <pre><code>{ t('markdown_setting.Preset two separator value') }</code></pre>
-            </div>
-          </label>
-        </div>
-
-        <div className="col-xs-3 radio radio-primary mt-3">
-          <input
-            type="radio"
-            id="pageBreakOption3"
-            checked={pageBreakOption === 3}
-            onChange={() => { adminMarkDownContainer.setState({ pageBreakOption: 3 }) }}
-          />
-          <label htmlFor="pageBreakOption3">
-            <p className="font-weight-bold">{ t('markdown_setting.Custom separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Custom separator desc') }
-              <input
-                className="form-control"
-                defaultValue={customRegularExpression}
-                onChange={(e) => { adminMarkDownContainer.setState({ customRegularExpression: e.target.value }) }}
-              />
-            </div>
-          </label>
-        </div>
-      </Fragment>
-    );
-  }
-
-}
-
-const PresentationLineBreakOptionsWrapper = (props) => {
-  return createSubscribedElement(PresentationLineBreakOptions, props, [AppContainer, AdminMarkDownContainer]);
-};
-
-PresentationLineBreakOptions.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminMarkDownContainer: PropTypes.instanceOf(AdminMarkDownContainer).isRequired,
-
-};
-
-export default withTranslation()(PresentationLineBreakOptionsWrapper);

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

@@ -213,7 +213,7 @@ class SamlSecurityManagement extends React.Component {
                   <th>{t('security_setting.form_item_name.cert')}</th>
                   <td>
                     <textarea
-                      className="form-control input-sm"
+                      className="form-control form-control-sm"
                       type="text"
                       rows="5"
                       name="samlCert"
@@ -243,7 +243,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                   </td>
                   <td>
                     <textarea
-                      className="form-control input-sm"
+                      className="form-control form-control-sm"
                       type="text"
                       rows="5"
                       readOnly

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

@@ -147,7 +147,7 @@ class SecuritySetting extends React.Component {
         </div>
         {adminGeneralSecurityContainer.isWikiModeForced && (
         <div className="row mb-4">
-          <div className="col-xs-offset-3 col-xs-6 text-left">
+          <div className="offset-3 col-6 text-left">
             <p className="alert alert-warning mt-2 text-left">
               <i className="icon-exclamation icon-fw">
               </i><b>FIXED</b><br />

src/client/js/components/Me/ProfileImageSettings.jsx

@@ -144,7 +144,7 @@ class ProfileImageSettings extends React.Component {
               </div>
             </h4>
             <div className="row mb-3">
-              <label className="col-sm-4 col-12 control-label">
+              <label className="col-sm-4 col-12 col-form-label text-left">
                 { t('Current Image') }
               </label>
               <div className="col-sm-8 col-12">
@@ -153,7 +153,7 @@ class ProfileImageSettings extends React.Component {
               </div>
             </div>
             <div className="row">
-              <label className="col-sm-4 col-12 control-label">
+              <label className="col-sm-4 col-12 col-form-label text-left">
                 {t('Upload new image')}
               </label>
               <div className="col-sm-8 col-12">

src/server/views/widget/passport/ldap-association-tester.html

@@ -1,103 +0,0 @@
-<form id="formTestLdapCredentials" method="post" class="form-horizontal" role="form">
-  <div class="alert-container"></div>
-  <fieldset>
-    <div class="form-group">
-      <label for="username" class="col-xs-3 control-label">{{ t('username') }}</label>
-      <div class="col-xs-6">
-        <input class="form-control" name="loginForm[username]">
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="password" class="col-xs-3 control-label">{{ t('Password') }}</label>
-      <div class="col-xs-6">
-        <input class="form-control col-xs-4" type="password" name="loginForm[password]">
-      </div>
-    </div>
-
-
-  </fieldset>
-
-  {% if showLog %}
-  <fieldset>
-    <h5>Logs</h5>
-    <textarea id="taLogs" class="col-xs-12" rows="4" readonly></textarea>
-  </fieldset>
-  {% endif %}
-
-  <fieldset class="mt-4">
-    <button type="button" class="btn btn-default col-xs-offset-5 col-xs-2" onclick="testLdapCredentials()">{{ t('Test') }}</button>
-  </fieldset>
-
-  <script>
-    /**
-     * test association (ajax)
-     */
-    function testLdapCredentials() {
-      function showMessage(formId, msg, status) {
-        $('#' + formId + ' .alert-container .alert').remove();
-
-        var $message = $('<p class="alert"></p>');
-        $message.addClass('alert-' + status);
-        $message.html(msg.replace(/\n/g, '<br>'));
-        $message.appendTo('#' + formId + '> .alert-container');
-
-        if (status == 'success') {
-          setTimeout(function()
-          {
-            $message.fadeOut({
-              complete: function() {
-                $message.remove();
-              }
-            });
-          }, 5000);
-        }
-      }
-      /**
-       * add logs
-       */
-      function addLogs(formId, log) {
-        const textarea = $(`#${formId} #taLogs`);
-        const newLog = `${new Date()} - ${log}\n\n`;
-        textarea.val(`${newLog}${textarea.val()}`);
-      }
-
-      var $form = $('#formTestLdapCredentials');
-      var $action = '/_api/login/testLdap';
-      var $id = $form.attr('id');
-      var $button = $('button', this);
-      $button.attr('disabled', 'disabled');
-
-      var jqxhr = $.post($action, $form.serialize(), function(data)
-        {
-          if (!data.status) {
-            showMessage($id, 'data.status not found', 'danger');
-          }
-          else {
-            showMessage($id, data.message, data.status);
-          }
-
-          // add logs
-          if ('true' === '{{showLog}}') {
-            if (data.err) {
-              addLogs($id, JSON.stringify(data.err, null, 2));
-            }
-            if (data.ldapConfiguration) {
-              const prettified = JSON.stringify(data.ldapConfiguration.server, undefined, 4);
-              addLogs($id, `LDAP Configuration : ${prettified}`);
-            }
-            if (data.ldapAccountInfo) {
-              const prettified = JSON.stringify(data.ldapAccountInfo, undefined, 4);
-              addLogs($id, `Retrieved LDAP Account : ${prettified}`);
-            }
-          }
-        })
-        .fail(function() {
-          showMessage($id, 'エラーが発生しました', 'danger');
-        })
-        .always(function() {
-          $button.prop('disabled', false);
-        });
-        return false;
-    }
-  </script>
-</form>