WIP: reconstruct layouts

* login page and installer

lib/views/installer.html

@@ -1,89 +1,113 @@
-{% extends 'layout-growi/base/layout.html' %}
+{% extends 'layout/layout.html' %}
+
+{% block html_base_css %}installer nologin{% endblock %}
 
 {% block html_title %}セットアップ {% endblock %}
 
-{% block content_main %}
 
 
-<div class="login-dialog-container col-md-5">
+{#
+ # Remove default contents
+ #}
+{% block html_head_loading_legacy %}
+{% endblock %}
+{% block html_head_loading_app %}
+{% endblock %}
+{% block layout_head_nav %}
+{% endblock %}
+{% block sidebar %}
+{% endblock %}
 
-<div class="installer-header">
-  <img src="/images/logo/135x32.png" alt="Crowi">
-  <h1>
-    Crowi のセットアップへようこそ!
-  </h1>
-</div>
 
 
-<div class="login-dialog"  id="login-dialog">
-  <div class="login-dialog-inner">
-    <h2>管理者の作成</h2>
+{% block layout_main %}
 
-    <p class="text-info">
-    はじめに、管理者アカウントを作成してください。
-    </p>
+<div class="main container-fluid">
 
-    {% 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 class="row">
 
-    <form role="form" action="/installer/createAdmin" method="post">
-      <label>ユーザーID</label>
-      <div class="input-group" id="input-group-username">
-        <span class="input-group-addon"><strong>@</strong></span>
-        <input type="text" class="form-control" placeholder="記入例: taroyama" name="registerForm[username]" value="{{ req.body.registerForm.username }}" required>
-      </div>
-      <p class="help-block">
-      <span id="help-block-username" class="text-danger"></span>
-      ユーザーIDは、ユーザーページのURLなどに利用されます。半角英数字と一部の記号のみ利用できます。
-      </p>
-
-      <label>名前</label>
-      <div class="input-group">
-        <span class="input-group-addon"><i class="icon-user"></i></span>
-        <input type="text" class="form-control" placeholder="記入例: 山田 太郎" name="registerForm[name]" value="{{ req.body.registerForm.name }}" required>
-      </div>
+    <div class="login-header col-sm-offset-4 col-sm-4">
+      <div class="logo">{% include 'widget/logo.html' %}</div>
+      <h1>GROWI</h1>
 
-      <label >メールアドレス</label>
-      <div class="input-group">
-        <span class="input-group-addon"><i class="icon-envelope"></i></span>
-        <input type="email" class="form-control" placeholder="E-mail" name="registerForm[email]" value="{{ googleEmail|default(req.body.registerForm.email) }}" required>
+      <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>
+    </div>
 
-      <label>パスワード</label>
-      <div class="input-group">
-        <span class="input-group-addon"><i class="icon-key"></i></span>
-        <input type="password" class="form-control" placeholder="Password" name="registerForm[password]" required>
-      </div>
-      <p class="help-block">
-      パスワードは6文字以上の半角英数字または記号
+    <div class="login-dialog p-t-10 p-b-10 col-sm-offset-4 col-sm-4" id="login-dialog">
+      <p class="alert alert-success">
+        <strong>最初のアカウントの作成</strong><br>
+        <small>初めに作成するアカウントは、自動的に管理者権限が付与されます</small>
       </p>
 
-      <input type="hidden" name="_csrf" value="{{ csrf() }}">
-      <input type="submit" class="btn btn-primary btn-lg btn-block" value="作成">
-    </form>
+      <form role="form" action="/installer/createAdmin" method="post" id="register-form">
+
+        <div class="input-group" id="input-group-username">
+          <span class="input-group-addon"><i class="icon-user"></i></span>
+          <input type="text" class="form-control" placeholder="{{ t('User ID') }}" name="registerForm[username]" value="{{ req.body.registerForm.username }}" required>
+        </div>
+        <p class="help-block">
+          <span id="help-block-username"></span>
+        </p>
+
+        <div class="input-group">
+          <span class="input-group-addon"><i class="icon-tag"></i></span>
+          <input type="text" class="form-control" placeholder="{{ t('Name') }}" name="registerForm[name]" value="{{ googleName|default(req.body.registerForm.name) }}" required>
+        </div>
+
+        <div class="input-group">
+          <span class="input-group-addon"><i class="icon-envelope"></i></span>
+          <input type="email" class="form-control" placeholder="{{ t('Email') }}" name="registerForm[email]" value="{{ googleEmail|default(req.body.registerForm.email) }}" required>
+        </div>
+
+        <div class="input-group">
+          <span class="input-group-addon"><i class="icon-lock"></i></span>
+          <input type="password" class="form-control" placeholder="{{ t('Password') }}" name="registerForm[password]" required>
+        </div>
+
+        <input type="hidden" name="_csrf" value="{{ csrf() }}">
+        <div class="input-group m-t-30 m-b-20 d-flex justify-content-center">
+          <button type="submit" class="fcbtn btn btn-success btn-1b btn-register">
+            <span class="btn-label"><i class="icon-user-follow"></i></span>
+            {{ t('Create') }}
+          </button>
+        </div>
+
+        <div class="input-group m-t-30 d-flex justify-content-center">
+          <a href="https://growi.org" class="link-growi-org">
+            <span class="growi">GROWI</span>.<span class="org">ORG
+          </a>
+        </div>
+      </form>
+    </div>
 
-  </div>
-</div>
+  </div>{# /.row #}
 
-</div>
+</div>{# /.main #}
 
 <script>
 $(function() {
   $('#register-form input[name="registerForm[username]"]').change(function(e) {
     var username = $(this).val();
+    $('#login-dialog').removeClass('has-error');
     $('#input-group-username').removeClass('has-error');
     $('#help-block-username').html("");
 
     $.getJSON('/_api/check_username', {username: username}, function(json) {
       if (!json.valid) {
-        $('#help-block-username').html('<i class="fa fa-warning"></i>このユーザーIDは利用できません。<br>');
+        $('#help-block-username').html(
+          '<i class="icon-fw icon-ban"></i>このユーザーIDは利用できません。'
+        );
+        $('#login-dialog').addClass('has-error');
         $('#input-group-username').addClass('has-error');
       }
     });

lib/views/login.html

@@ -147,11 +147,17 @@
         </div>
 
         {% if config.crowi['security:registrationMode'] != 'Closed' %}
-        <a href="#register" id="register" class="pull-right link-switch">
-          <i class="ti-check-box"></i> {{ t('Sign up is here') }}
-        </a>
+        <div class="row">
+          <div class="col-xs-12 text-right">
+            <a href="#register" id="register" class="link-switch">
+              <i class="ti-check-box"></i> {{ t('Sign up is here') }}
+            </a>
+          </div>
+        </div>
         {% endif %}
       </div>
+
+
       {% if config.crowi['security:registrationMode'] != 'Closed' %}
       <div class="back">
         {% if config.crowi['security:registrationMode'] == 'Restricted' %}
@@ -180,6 +186,9 @@
             <span class="input-group-addon"><i class="icon-user"></i></span>
             <input type="text" class="form-control" placeholder="{{ t('User ID') }}" name="registerForm[username]" value="{{ req.body.registerForm.username }}" required>
           </div>
+          <p class="help-block">
+            <span id="help-block-username"></span>
+          </p>
 
           <div class="input-group">
             <span class="input-group-addon"><i class="icon-tag"></i></span>
@@ -233,9 +242,13 @@
           {% endif %}
         </div>
 
-        <a href="#login" id="login" class="pull-right link-switch">
-          <i class="icon-fw icon-login"></i>{{ t('Sign in is here') }}
-        </a>
+        <div class="row">
+          <div class="col-xs-12 text-right">
+            <a href="#login" id="login" class="link-switch">
+              <i class="icon-fw icon-login"></i>{{ t('Sign in is here') }}
+            </a>
+          </div>
+        </div>
       </div>
       {% endif %} {# if registrationMode == Closed #}
 
@@ -266,12 +279,16 @@
 
   $('#register-form input[name="registerForm[username]"]').change(function(e) {
     var username = $(this).val();
+    $('#login-dialog').removeClass('has-error');
     $('#input-group-username').removeClass('has-error');
     $('#help-block-username').html("");
 
     $.getJSON('/_api/check_username', {username: username}, function(json) {
       if (!json.valid) {
-        $('#help-block-username').html('<i class="fa fa-warning"></i> This User ID is not available.<br>');
+        $('#help-block-username').html(
+          '<i class="icon-fw icon-ban"></i> This User ID is not available.'
+        );
+        $('#login-dialog').addClass('has-error');
         $('#input-group-username').addClass('has-error');
       }
     });

resource/styles/agile-admin/inverse/widgets.scss

@@ -1269,7 +1269,7 @@ table.focus-on {
 */
 
   /*Inputs*/
-/*
+
 .form-control-line {
     border-left: 0 none;
     border-radius: 0;
@@ -1298,7 +1298,6 @@ table.focus-on {
     box-shadow: none !important;
   }
 }
-*/
 
 .input-group-addon {
   border-radius: $radius;

resource/styles/scss/_login.scss

@@ -1,4 +1,4 @@
-.login-page {
+.login-page, .installer {
   $gray-dark-for-login: darken(white, 30%);
 
   // background color
@@ -16,7 +16,7 @@
     height: 100vh;
 
     #page-wrapper {
-      height: 80vh;
+      height: 100vh;
       display: flex;
       align-items: center;
 
@@ -28,15 +28,6 @@
           margin-left: 20px;
         }
 
-        @media(min-width: 480px) {
-          .col-sm-offset-4 {
-            margin-left: calc(50% - 170px);
-          }
-          .col-sm-4 {
-            width: 340px;
-          }
-        }
-
         .login-header {
           padding-top: 30px;
           padding-bottom: 10px;
@@ -60,45 +51,11 @@
           }
         }
 
-        .link-growi-org {
-          position: absolute;
-          bottom: 9px;
-        }
-
-        // flip animation
-        .login-dialog.flipper {
-          transition: min-height 0.2s;
-
-          &.to-flip {
-            min-height: 313px;
-          }
-
-          .front, .back {
-            backface-visibility: hidden;
-            transition: 0.4s;
-            transform-style: preserve-3d;
-          }
-          .front {
-            z-index: 2;
-          }
-          .back {
-            position: absolute;
-            top: 0;
-            left: 15px;
-            right: 15px;
-          }
-          .back,
-          &.to-flip .front {
-            transform: rotateY(180deg);
-          }
-          &.to-flip .back {
-            transform: rotateY(0deg);
-          }
-        }
       }  // .main
     }  // #page-wrapper
   } // #wrapper
 
+  // styles
   .login-header {
     background-color: rgba(white, 0.5);
     .logo {
@@ -129,7 +86,6 @@
       background-color: rgba(black, 0.4);
     }
     .form-control {
-      border: none;
       color: white;
       background-color: rgba(lighten(black, 10%), 0.4);
       &::placeholder {
@@ -137,6 +93,11 @@
       }
     }
   }
+  .input-group:not(.has-error) {
+    .form-control {
+      border: transparent;
+    }
+  }
 
   // button style
   .btn-login.fcbtn, .btn-register.fcbtn {
@@ -201,3 +162,73 @@
     }
   }
 }
+
+
+.login-page {
+  // layout
+  .main .row {
+    @media(min-width: 350px) {
+      .col-sm-offset-4 {
+        margin-left: calc(50% - 160px);
+      }
+      .col-sm-4 {
+        width: 320px;
+      }
+    }
+  }
+
+  // flip animation
+  .login-dialog.flipper {
+    transition: min-height 0.2s;
+
+    &.to-flip {
+      min-height: 295px;
+      // has-error
+      &.has-error {
+        min-height: #{295px + 32px};
+      }
+    }
+
+    .front, .back {
+      backface-visibility: hidden;
+      transition: 0.4s;
+      transform-style: preserve-3d;
+    }
+    .front {
+      z-index: 2;
+    }
+    .back {
+      position: absolute;
+      top: 0;
+      left: 15px;
+      right: 15px;
+    }
+    .back,
+    &.to-flip .front {
+      transform: rotateY(180deg);
+    }
+    &.to-flip .back {
+      transform: rotateY(0deg);
+    }
+  }
+
+  .link-growi-org {
+    position: absolute;
+    bottom: 9px;
+  }
+}
+
+
+.installer {
+  // layout
+  .main .row {
+    @media(min-width: 510px) {
+      .col-sm-offset-4 {
+        margin-left: calc(50% - 240px);
+      }
+      .col-sm-4 {
+        width: 480px;
+      }
+    }
+  }
+}