adjust outer frame

src/client/js/components/InstallerForm.jsx

@@ -46,110 +46,112 @@ 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 py-3 mx-auto${hasErrorClass}`}>
+        <div className="row">
+          <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 col-md-12">
+              <div className="form-check">
+                <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') } }}
+                />
+                <label className="form-check-label" htmlFor="register-form-check-en">
+                  English
+                </label>
+              </div>
+              <div className="form-check">
+                <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') } }}
+                />
+                <label className="form-check-label" htmlFor="register-form-check-jp">
+                  日本語
+                </label>
+              </div>
+            </div>
+
+            <div className={`input-group col-md-12${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="form-text col-md-12">{ 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="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="email"
+                className="form-control"
+                placeholder={this.props.t('Email')}
+                name="registerForm[email]"
+                defaultValue={this.props.email}
+                required
               />
-              <label className="form-check-label" htmlFor="register-form-check-en">
-                English
-              </label>
             </div>
-            <div className="form-check">
+
+            <div className="input-group">
+              <span className="input-group-addon"><i className="icon-lock" /></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="password"
+                className="form-control"
+                placeholder={this.props.t('Password')}
+                name="registerForm[password]"
+                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-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} />
-
-          <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>
+
+            <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 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/_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/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>