Merge pull request #1734 from weseek/support/apply-bootstrap4-installer-form

Support/apply bootstrap4 installer form

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

@@ -69,7 +69,7 @@ class AppSetting extends React.Component {
         <div className="row form-group mb-5">
           <label className="col-3 col-form-label">{t('admin:app_setting.default_language')}</label>
           <div className="col-6">
-            <div className="custom-control custom-radio d-inline">
+            <div className="custom-control custom-radio custom-control-inline">
               <input
                 type="radio"
                 id="radioLangEn"
@@ -81,7 +81,7 @@ class AppSetting extends React.Component {
               />
               <label className="custom-control-label" htmlFor="radioLangEn">{t('English')}</label>
             </div>
-            <div className="custom-control custom-radio d-inline">
+            <div className="custom-control custom-radio custom-control-inline">
               <input
                 type="radio"
                 id="radioLangJa"

src/client/js/components/InstallerForm.jsx

@@ -46,110 +46,115 @@ class InstallerForm extends React.Component {
     const checkedBtn = this.state.checkedBtn;
 
     return (
-      <div className={`login-dialog py-3 col-sm-offset-4 col-sm-4${hasErrorClass}`}>
-        <p className="alert alert-success">
-          <strong>{ this.props.t('installer.create_initial_account') }</strong><br />
-          <small>{ this.props.t('installer.initial_account_will_be_administrator_automatically') }</small>
-        </p>
-
-        <form role="form" action="/installer" method="post" id="register-form">
-          <div className="form-group text-center">
-            <div className="form-check">
+      <div className={`login-dialog p-3 mx-auto${hasErrorClass}`}>
+        <div className="row">
+          <div className="col-md-12">
+            <p className="alert alert-success">
+              <strong>{ this.props.t('installer.create_initial_account') }</strong><br />
+              <small>{ this.props.t('installer.initial_account_will_be_administrator_automatically') }</small>
+            </p>
+          </div>
+        </div>
+        <div className="row">
+          <form role="form" action="/installer" method="post" id="register-form" className="col-md-12">
+            <div className="form-group text-center">
+              <div className="custom-control custom-radio custom-control-inline">
+                <input
+                  type="radio"
+                  className="custom-control-input"
+                  id="register-form-check-en"
+                  name="registerForm[app:globalLang]"
+                  value="en-US"
+                  checked={checkedBtn === 'en-US'}
+                  inline
+                  onChange={(e) => { if (e.target.checked) { this.changeLanguage('en-US') } }}
+                />
+                <label className="custom-control-label" htmlFor="register-form-check-en">
+                  English
+                </label>
+              </div>
+              <div className="custom-control custom-radio custom-control-inline">
+                <input
+                  type="radio"
+                  className="custom-control-input"
+                  id="register-form-check-jp"
+                  name="registerForm[app:globalLang]"
+                  value="ja"
+                  checked={checkedBtn === 'ja'}
+                  inline
+                  onChange={(e) => { if (e.target.checked) { this.changeLanguage('ja') } }}
+                />
+                <label className="custom-control-label" htmlFor="register-form-check-jp">
+                  日本語
+                </label>
+              </div>
+            </div>
+
+            <div className={`input-group${hasErrorClass}`}>
+              <span className="input-group-addon"><i className="icon-user" /></span>
               <input
-                type="radio"
-                className="form-check-input"
-                id="register-form-check-en"
-                name="registerForm[app:globalLang]"
-                value="en-US"
-                checked={checkedBtn === 'en-US'}
-                inline
-                onChange={(e) => { if (e.target.checked) { this.changeLanguage('en-US') } }}
+                type="text"
+                className="form-control"
+                placeholder={this.props.t('User ID')}
+                name="registerForm[username]"
+                defaultValue={this.props.userName}
+                onBlur={this.checkUserName}
+                required
               />
-              <label className="form-check-label" htmlFor="register-form-check-en">
-                English
-              </label>
             </div>
-            <div className="form-check">
+            <p className="form-text">{ unavailableUserId }</p>
+
+            <div className="input-group">
+              <span className="input-group-addon"><i className="icon-tag" /></span>
               <input
-                type="radio"
-                className="form-check-input"
-                id="register-form-check-jp"
-                name="registerForm[app:globalLang]"
-                value="ja"
-                checked={checkedBtn === 'ja'}
-                inline
-                onChange={(e) => { if (e.target.checked) { this.changeLanguage('ja') } }}
+                type="text"
+                className="form-control"
+                placeholder={this.props.t('Name')}
+                name="registerForm[name]"
+                defaultValue={this.props.name}
+                required
               />
-              <label className="form-check-label" htmlFor="register-form-check-jp">
-                日本語
-              </label>
             </div>
-          </div>
 
-          <div className={`input-group${hasErrorClass}`}>
-            <span className="input-group-addon"><i className="icon-user" /></span>
-            <input
-              type="text"
-              className="form-control"
-              placeholder={this.props.t('User ID')}
-              name="registerForm[username]"
-              defaultValue={this.props.userName}
-              onBlur={this.checkUserName}
-              required
-            />
-          </div>
-          <p className="help-block">{ unavailableUserId }</p>
-
-          <div className="input-group">
-            <span className="input-group-addon"><i className="icon-tag" /></span>
-            <input
-              type="text"
-              className="form-control"
-              placeholder={this.props.t('Name')}
-              name="registerForm[name]"
-              defaultValue={this.props.name}
-              required
-            />
-          </div>
-
-          <div className="input-group">
-            <span className="input-group-addon"><i className="icon-envelope" /></span>
-            <input
-              type="email"
-              className="form-control"
-              placeholder={this.props.t('Email')}
-              name="registerForm[email]"
-              defaultValue={this.props.email}
-              required
-            />
-          </div>
+            <div className="input-group">
+              <span className="input-group-addon"><i className="icon-envelope" /></span>
+              <input
+                type="email"
+                className="form-control"
+                placeholder={this.props.t('Email')}
+                name="registerForm[email]"
+                defaultValue={this.props.email}
+                required
+              />
+            </div>
 
-          <div className="input-group">
-            <span className="input-group-addon"><i className="icon-lock" /></span>
-            <input
-              type="password"
-              className="form-control"
-              placeholder={this.props.t('Password')}
-              name="registerForm[password]"
-              required
-            />
-          </div>
+            <div className="input-group">
+              <span className="input-group-addon"><i className="icon-lock" /></span>
+              <input
+                type="password"
+                className="form-control"
+                placeholder={this.props.t('Password')}
+                name="registerForm[password]"
+                required
+              />
+            </div>
 
-          <input type="hidden" name="_csrf" value={this.props.csrf} />
+            <input type="hidden" name="_csrf" value={this.props.csrf} />
 
-          <div className="input-group mt-4 mb-3 d-flex justify-content-center">
-            <button type="submit" className="fcbtn btn btn-success btn-1b btn-register">
-              <span className="btn-label"><i className="icon-user-follow" /></span>
-              <span className="btn-label-text">{ this.props.t('Create') }</span>
-            </button>
-          </div>
+            <div className="input-group mt-4 mb-3 d-flex justify-content-center">
+              <button type="submit" className="fcbtn btn btn-success btn-1b btn-register">
+                <span className="btn-label"><i className="icon-user-follow" /></span>
+                <span className="btn-label-text">{ this.props.t('Create') }</span>
+              </button>
+            </div>
 
-          <div className="input-group mt-4 d-flex justify-content-center">
-            <a href="https://growi.org" className="link-growi-org">
-              <span className="growi">GROWI</span>.<span className="org">ORG</span>
-            </a>
-          </div>
-        </form>
+            <div className="input-group mt-4 d-flex justify-content-center">
+              <a href="https://growi.org" className="link-growi-org">
+                <span className="growi">GROWI</span>.<span className="org">ORG</span>
+              </a>
+            </div>
+          </form>
+        </div>
       </div>
     );
   }

src/client/styles/scss/_admin.scss

@@ -156,10 +156,6 @@
       background-color: rgba($info, 0.1);
     }
   }
-
-  label.custom-control-label {
-    font-weight: normal;
-  }
 }
 
 .admin-navigation > a + a {

src/client/styles/scss/_login.scss

@@ -299,7 +299,6 @@
   }
 }
 
-.installer,
 .invited,
 .nologin.error {
   .main .row {
@@ -314,6 +313,11 @@
   }
 }
 
+.login-header,
+.login-dialog {
+  max-width: 480px;
+}
+
 .nologin.error {
   .alert h2 {
     line-height: 1em;

src/client/styles/scss/atoms/_custom_control.scss

@@ -0,0 +1,3 @@
+label.custom-control-label {
+  font-weight: normal;
+}

src/client/styles/scss/style-app.scss

@@ -18,6 +18,7 @@
 @import 'atoms/buttons';
 @import 'atoms/nav';
 @import 'atoms/spinners';
+@import 'atoms/custom_control';
 
 // crowi component
 @import 'admin';

src/client/styles/scss/theme/_apply-colors.scss

@@ -55,8 +55,6 @@ $link-hover-color: $color-link-hover;
     transition: fill 0.8s ease-out;
   }
 
-  background-color: darken($bgcolor-navbar, 10%);
-
   .logo-mark {
     svg {
       fill: $fillcolor-logo-mark;
@@ -79,6 +77,10 @@ $link-hover-color: $color-link-hover;
   .nav-item > .nav-link {
     color: white;
   }
+
+  .logo {
+    background-color: darken($bgcolor-navbar, 10%);
+  }
 }
 
 .grw-title-bar {

src/server/views/installer.html

@@ -49,31 +49,32 @@
     <div class="main container-fluid">
 
       <div class="row">
-
-        <div class="login-header col-sm-offset-4 col-sm-4">
-          <div class="logo">{% include 'widget/logo.html' %}</div>
-          <h1>GROWI</h1>
-
-          <div class="login-form-errors">
-            {% if req.form.errors.length > 0 %}
-            <div class="alert alert-danger">
-              <ul>
-              {% for error in req.form.errors %}
-                <li>{{ error }}</li>
-              {% endfor %}
-              </ul>
+        <div class="col-md-12">
+          <div class="login-header mx-auto">
+            <div class="logo">{% include 'widget/logo.html' %}</div>
+            <h1 class="my-3">GROWI</h1>
+
+            <div class="login-form-errors">
+              {% if req.form.errors.length > 0 %}
+              <div class="alert alert-danger">
+                <ul>
+                {% for error in req.form.errors %}
+                  <li>{{ error }}</li>
+                {% endfor %}
+                </ul>
+              </div>
+              {% endif %}
             </div>
-            {% endif %}
           </div>
         </div>
-
-        <div id='installer-form'
-          data-user-name="{{ req.body.registerForm.username }}"
-          data-name="{{ req.body.registerForm.name }}"
-          data-email="{{ req.body.registerForm.email }}"
-          data-csrf="{{ csrf() }}">
+        <div class="col-md-12">
+          <div id="installer-form"
+            data-user-name="{{ req.body.registerForm.username }}"
+            data-name="{{ req.body.registerForm.name }}"
+            data-email="{{ req.body.registerForm.email }}"
+            data-csrf="{{ csrf() }}">
+          </div>
         </div>
-
       </div>{# /.row #}
 
     </div>