WIP: Login page styles

lib/views/layout/layout.html

@@ -83,7 +83,9 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
   {% block html_head_loading_legacy %}
     <script src="{{ webpack_asset('legacy').js }}" defer></script>
   {% endblock %}
+  {% block html_head_loading_app %}
   <script src="{{ webpack_asset('app').js }}" defer></script>
+  {% endblock %}
 
   <!-- Google Fonts -->
   <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
@@ -210,6 +212,7 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
   {% include '../modal/create_page.html' %}
   {% endblock  %} {# layout_head_nav #}
 
+  {% block sidebar %}
   <!-- Left navbar-header -->
   <div class="navbar-default sidebar" role="navigation">
     <div class="sidebar-nav navbar-collapse slimscrollsidebar">
@@ -225,6 +228,7 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
     </div>
   </div>
   <!-- Left navbar-header end -->
+  {% endblock %}
 
   <!-- Page Content -->
   <div id="page-wrapper">

lib/views/login.html

@@ -1,241 +1,298 @@
-{% extends 'layout-growi/base/layout.html' %}
+{% extends 'layout/layout.html' %}
 
-{% block html_title %}{{ t('Sign in') }} · {% endblock %}
-
-{% block content_main %}
-
-<h1 class="login-page">
-  {% if config.crowi['app:title'] == 'Crowi' %}
-    <img src="/images/logo/135x32.png" alt="Crowi">
-  {% else %}
-    {{ config.crowi['app:title'] }}<br>
-    <img src="/images/logo/100x11_w.png" alt="powered by Crowi">
-  {% endif %}
-</h1>
-
-<div class="login-dialog-container col-md-5">
+{% block html_base_css %}login-page nologin{% endblock %}
 
-<div class="login-dialog flipper {% if req.query.register or req.body.registerForm or isRegistering or googleId %}to-flip{% endif %}" id="login-dialog">
-
-  <div class="login-dialog-inner front">
-    <h2>{{ t('Sign in') }}</h2>
-
-    <div id="login-form-errors">
-      {% if isLdapSetupFailed() %}
-      <div class="alert alert-warning">
-        LDAP is enabled but the configuration has something wrong.<br>
-        <small>(set the environment variables <code>DEBUG=crowi:service:PassportService</code> and get the logs)</small>
-      </div>
-      {% endif %}
-
-      {#
-       # The case that there already exists a user whose username matches ID of the newly created LDAP user
-       # https://github.com/weseek/crowi-plus/issues/193
-       #}
-      {% set isDuplicatedUsernameExceptionOccured = req.flash('isDuplicatedUsernameExceptionOccured') %}
-      {% if isDuplicatedUsernameExceptionOccured != null %}
-      <div class="alert alert-warning">
-        <i class="fa fa-fw fa-info-circle"></i>
-        <strong>DuplicatedUsernameException occured</strong>
-        <p>
-          Your LDAP authentication was succeess, but a new user could not be created.
-          See the issue <a href="https://github.com/weseek/crowi-plus/issues/193">#193</a>.
-        </p>
-      </div>
-      {% endif %}
+{% block html_title %}{{ t('Sign in') }} · {% endblock %}
 
-      {% set success = req.flash('successMessage') %}
-      {% if success.length %}
-      <div class="alert alert-success">
-        {{ success }}
-      </div>
-      {% endif %}
 
-      {% set warn = req.flash('warningMessage') %}
-      {% if warn.length %}
-      {% for w in warn %}
-      <div class="alert alert-warning">
-        {{ w }}
-      </div>
-      {% endfor %}
-      {% endif %}
 
-      {% set error = req.flash('errorMessage') %}
-      {% if error.length %}
-      {% for e in error %}
-      <div class="alert alert-danger">
-        {{ e }}
-      </div>
-      {% endfor %}
-      {% endif %}
+{#
+ # Remove default contents
+ #}
+{% block html_head_loading_legacy %}
+{% endblock %}
+{% block html_head_loading_app %}
+{% endblock %}
+{% block layout_head_nav %}
+{% endblock %}
+{% block sidebar %}
+{% endblock %}
 
-      {% 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>
-    <form role="form" action="/login" method="post">
-      <div class="input-group">
-        <span class="input-group-addon"><i class="icon-fw icon-user"></i></span>
-        <input type="text" class="form-control" placeholder="Username or E-mail" name="loginForm[username]">
-        {% if isLdapSetup() %}
-        <span class="input-group-addon">
-          <small class="text-primary">
-            <i class="fa fa-fw fa-check-circle"></i> LDAP
-          </small>
-        </span>
-        {% endif %}
-      </div>
 
-      <div class="input-group">
-        <span class="input-group-addon"><i class="icon-fw icon-lock"></i></span>
-        <input type="password" class="form-control" placeholder="Password" name="loginForm[password]">
-      </div>
 
-      <input type="hidden" name="_csrf" value="{{ csrf() }}">
-      <input type="submit" class="btn btn-primary btn-lg btn-block" value="{{ t('Sign in') }}">
-    </form>
+{% block layout_main %}
 
-    <hr>
+<div class="main container">
 
-    <div class="row">
-      {% if googleLoginEnabled() %}
-      <div class="col-md-8">
-        <p>{{ t('Sign in by Google Account') }}</p>
-        <form role="form" action="/login/google" method="get">
-          <button type="submit" class="btn btn-block btn-google"><i class="fa fa-google-plus-square"></i> {{ t('Sign in') }}</button>
-          <input type="hidden" name="_csrf" value="{{ csrf() }}">
-        </form>
-      </div>
+  <div class="row">
+    <h1>
+      {% if config.crowi['app:title'] == 'Crowi' %}
+        <img src="/images/logo/135x32.png" alt="Crowi">
+      {% else %}
+        {{ config.crowi['app:title'] }}<br>
+        <img src="/images/logo/100x11_w.png" alt="powered by Crowi">
       {% endif %}
-    </div>
-
-    {% if config.crowi['security:registrationMode'] != 'Closed' %}
-    <p class="bottom-text"><a href="#register" id="register"><i class="ti-check-box"></i> {{ t('Sign up is here') }}</a></p>
-    {% endif %}
+    </h1>
   </div>
 
-  {% if config.crowi['security:registrationMode'] != 'Closed' %}
-  <div class="register-dialog-inner back">
-
-    <h2>{{ t('Sign up') }}</h2>
-
-    {% if config.crowi['security:registrationMode'] == 'Restricted' %}
-    <p class="alert alert-warning">
-      {{ t('page_register.notice.restricted') }}<br>
-      {{ t('page_register.notice.restricted_defail') }}
-    </p>
-    {% endif %}
-
-    {% if googleId %}
-    <div class="google-info alert alert-info">
-      {% if googleImage %}
-      <p class="text-center">
-        <img src="{{ googleImage }}" class="img-circle img-circle-lg">
-      </p>
-      {% endif %}
-      <code>{{ googleEmail }}</code> {{ t('page_register with this Google Account') }}<br>
-      {{ t('page_register.notice.google_account_continue') }}
-    </div>
-    {% endif %}
-
-    <div id="register-form-errors">
-      {% set message = req.flash('registerWarningMessage') %}
-      {% if message.length %}
-      <div class="alert alert-danger">
-        {% for msg in message %}
-        {{ msg }}<br>
-        {% endfor  %}
-      </div>
-      {% endif %}
-
-      {% 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>
-
-    <form role="form" method="post" action="/register" id="register-form">
-      <input type="hidden" class="form-control" name="registerForm[googleId]" value="{{ googleId|default(req.body.registerForm.googleId) }}">
-
-      <label>{{ t('User ID') }}</label>
-      <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('Example') }}: taroyama" name="registerForm[username]" value="{{ req.body.registerForm.username }}" required>
-      </div>
-      <p class="help-block">
-      <span id="help-block-username" class="text-danger"></span>
-      {{ t('page_register.form_help.user_id') }}
-      </p>
-
-      <label>{{ t('Name') }}</label>
-      <div class="input-group">
-        <span class="input-group-addon"><i class="icon-tag"></i></span>
-        <input type="text" class="form-control" placeholder="{{ t('Example') }}: {{ t('Taro Yamada') }}" name="registerForm[name]" value="{{ googleName|default(req.body.registerForm.name) }}" required>
+  <div class="row">
+    <div class="login-dialog col-md-12 flipper {% if req.query.register or req.body.registerForm or isRegistering or googleId %}to-flip{% endif %}" id="login-dialog">
+
+      <div>
+        <div class="col-md-4"></div>
+        <div class="front col-md-4">
+          <div id="login-form-errors">
+            {% if isLdapSetupFailed() %}
+            <div class="alert alert-warning">
+              LDAP is enabled but the configuration has something wrong.<br>
+              <small>(set the environment variables <code>DEBUG=crowi:service:PassportService</code> and get the logs)</small>
+            </div>
+            {% endif %}
+
+            {#
+            # The case that there already exists a user whose username matches ID of the newly created LDAP user
+            # https://github.com/weseek/crowi-plus/issues/193
+            #}
+            {% set isDuplicatedUsernameExceptionOccured = req.flash('isDuplicatedUsernameExceptionOccured') %}
+            {% if isDuplicatedUsernameExceptionOccured != null %}
+            <div class="alert alert-warning">
+              <i class="fa fa-fw fa-info-circle"></i>
+              <strong>DuplicatedUsernameException occured</strong>
+              <p>
+                Your LDAP authentication was succeess, but a new user could not be created.
+                See the issue <a href="https://github.com/weseek/crowi-plus/issues/193">#193</a>.
+              </p>
+            </div>
+            {% endif %}
+
+            {% set success = req.flash('successMessage') %}
+            {% if success.length %}
+            <div class="alert alert-success">
+              {{ success }}
+            </div>
+            {% endif %}
+
+            {% set warn = req.flash('warningMessage') %}
+            {% if warn.length %}
+            {% for w in warn %}
+            <div class="alert alert-warning">
+              {{ w }}
+            </div>
+            {% endfor %}
+            {% endif %}
+
+            {% set error = req.flash('errorMessage') %}
+            {% if error.length %}
+            {% for e in error %}
+            <div class="alert alert-danger">
+              {{ e }}
+            </div>
+            {% endfor %}
+            {% endif %}
+
+            {% 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>
+
+          <form role="form" action="/login" method="post">
+            <div class="input-group">
+              <span class="input-group-addon"><i class="icon-fw icon-user"></i></span>
+              <input type="text" class="form-control" placeholder="Username or E-mail" name="loginForm[username]">
+              {% if isLdapSetup() %}
+              <span class="input-group-addon">
+                <small class="text-primary">
+                  <i class="fa fa-fw fa-check-circle"></i> LDAP
+                </small>
+              </span>
+              {% endif %}
+            </div>
+
+            <div class="input-group">
+              <span class="input-group-addon"><i class="icon-fw icon-lock"></i></span>
+              <input type="password" class="form-control" placeholder="Password" name="loginForm[password]">
+            </div>
+
+            <div class="input-group m-t-30 d-flex justify-content-center">
+              <input type="hidden" name="_csrf" value="{{ csrf() }}">
+              <button type="submit" class="btn btn-default btn-lg btn-login">{{ t('Sign in') }}</button>
+            </div>
+          </form>
+
+          <hr>
+
+          <div class="row">
+            {% if googleLoginEnabled() %}
+            <div class="col-md-8">
+              <p>{{ t('Sign in by Google Account') }}</p>
+              <form role="form" action="/login/google" method="get">
+                <button type="submit" class="btn btn-block btn-google"><i class="fa fa-google-plus-square"></i> {{ t('Sign in') }}</button>
+                <input type="hidden" name="_csrf" value="{{ csrf() }}">
+              </form>
+            </div>
+            {% endif %}
+          </div>
+
+          {% if config.crowi['security:registrationMode'] != 'Closed' %}
+          <p class="bottom-text"><a href="#register" id="register"><i class="ti-check-box"></i> {{ t('Sign up is here') }}</a></p>
+          {% endif %}
+        </div>
       </div>
 
-      <label>{{ t('Email') }}</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="clearfix"></div>
+
+      {% if config.crowi['security:registrationMode'] != 'Closed' %}
+      <div>
+        <div class="back col-md-6">
+          <h2>{{ t('Sign up') }}</h2>
+
+          {% if config.crowi['security:registrationMode'] == 'Restricted' %}
+          <p class="alert alert-warning">
+            {{ t('page_register.notice.restricted') }}<br>
+            {{ t('page_register.notice.restricted_defail') }}
+          </p>
+          {% endif %}
+
+          {% if googleId %}
+          <div class="google-info alert alert-info">
+            {% if googleImage %}
+            <p class="text-center">
+              <img src="{{ googleImage }}" class="img-circle img-circle-lg">
+            </p>
+            {% endif %}
+            <code>{{ googleEmail }}</code> {{ t('page_register with this Google Account') }}<br>
+            {{ t('page_register.notice.google_account_continue') }}
+          </div>
+          {% endif %}
+
+          <div id="register-form-errors">
+            {% set message = req.flash('registerWarningMessage') %}
+            {% if message.length %}
+            <div class="alert alert-danger">
+              {% for msg in message %}
+              {{ msg }}<br>
+              {% endfor  %}
+            </div>
+            {% endif %}
+
+            {% 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>
+
+          <form role="form" method="post" action="/register" id="register-form">
+            <input type="hidden" class="form-control" name="registerForm[googleId]" value="{{ googleId|default(req.body.registerForm.googleId) }}">
+
+            <label>{{ t('User ID') }}</label>
+            <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('Example') }}: taroyama" name="registerForm[username]" value="{{ req.body.registerForm.username }}" required>
+            </div>
+            <p class="help-block">
+            <span id="help-block-username" class="text-danger"></span>
+            {{ t('page_register.form_help.user_id') }}
+            </p>
+
+            <label>{{ t('Name') }}</label>
+            <div class="input-group">
+              <span class="input-group-addon"><i class="icon-tag"></i></span>
+              <input type="text" class="form-control" placeholder="{{ t('Example') }}: {{ t('Taro Yamada') }}" name="registerForm[name]" value="{{ googleName|default(req.body.registerForm.name) }}" required>
+            </div>
+
+            <label>{{ t('Email') }}</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>
+            {% if config.crowi['security:registrationWhiteList'] && config.crowi['security:registrationWhiteList'].length %}
+            <p class="help-block">
+              {{ t('page_register.form_help.email') }}
+            </p>
+            <ul>
+              {% for em in config.crowi['security:registrationWhiteList'] %}
+              <li><code>{{ em }}</code></li>
+              {% endfor %}
+            </ul>
+            {% endif %}
+
+            <label>{{ t('Password') }}</label>
+            <div class="input-group">
+              <span class="input-group-addon"><i class="icon-lock"></i></span>
+              <input type="password" class="form-control" placeholder="Password" name="registerForm[password]" required>
+            </div>
+            <p class="help-block">
+              {{ t('page_register.form_help.password') }}
+            </p>
+
+            {% if googleImage %}
+              <input type="hidden" name="registerForm[googleImage]" value="{{ googleImage }}">
+            {% endif  %}
+            <input type="hidden" name="_csrf" value="{{ csrf() }}">
+            <input type="submit" class="btn btn-primary btn-lg btn-block" value="{{ t('Sign up') }}">
+          </form>
+
+          <hr>
+
+          <div class="row">
+            {% if googleLoginEnabled() %}
+            <div class="col-md-6">
+              <p>{{ t('Sign up with Google Account') }}</p>
+              <form role="form" method="post" action="/register/google">
+                <input type="hidden" name="_csrf" value="{{ csrf() }}">
+                <button type="submit" class="btn btn-block btn-google"><i class="fa fa-google-plus-square"></i> {{ t('Login') }}</button>
+              </form>
+            </div>
+            {% endif %}
+          </div>
+
+          <p class="bottom-text"><a href="#login" id="login"><i class="fa fa-sign-out"></i> {{ t('Sign in is here') }}</a></p>
+        </div>
       </div>
-      {% if config.crowi['security:registrationWhiteList'] && config.crowi['security:registrationWhiteList'].length %}
-      <p class="help-block">
-        {{ t('page_register.form_help.email') }}
-      </p>
-      <ul>
-        {% for em in config.crowi['security:registrationWhiteList'] %}
-        <li><code>{{ em }}</code></li>
-        {% endfor %}
-      </ul>
-      {% endif %}
+      {% endif %} {# if registrationMode == Closed #}
 
-      <label>{{ t('Password') }}</label>
-      <div class="input-group">
-        <span class="input-group-addon"><i class="icon-lock"></i></span>
-        <input type="password" class="form-control" placeholder="Password" name="registerForm[password]" required>
-      </div>
-      <p class="help-block">
-        {{ t('page_register.form_help.password') }}
-      </p>
-
-      {% if googleImage %}
-        <input type="hidden" name="registerForm[googleImage]" value="{{ googleImage }}">
-      {% endif  %}
-      <input type="hidden" name="_csrf" value="{{ csrf() }}">
-      <input type="submit" class="btn btn-primary btn-lg btn-block" value="{{ t('Sign up') }}">
-    </form>
-
-    <hr>
-
-    <div class="row">
-      {% if googleLoginEnabled() %}
-      <div class="col-md-6">
-        <p>{{ t('Sign up with Google Account') }}</p>
-        <form role="form" method="post" action="/register/google">
-          <input type="hidden" name="_csrf" value="{{ csrf() }}">
-          <button type="submit" class="btn btn-block btn-google"><i class="fa fa-google-plus-square"></i> {{ t('Login') }}</button>
-        </form>
-      </div>
-      {% endif %}
     </div>
-
-    <p class="bottom-text"><a href="#login" id="login"><i class="fa fa-sign-out"></i> {{ t('Sign in is here') }}</a></p>
   </div>
-  {% endif %} {# if registrationMode == Closed #}
 
 </div>
 
-</div>
+{% endblock %}
+
 
+{% block body_end %}
+<script>
+  // login
+  $('#register').on('click', function() {
+    $('#login-dialog').addClass('to-flip');
+    return false;
+  });
+  $('#login').on('click', function() {
+    $('#login-dialog').removeClass('to-flip');
+    return false;
+  });
+
+  $('#register-form input[name="registerForm[username]"]').change(function(e) {
+    var username = $(this).val();
+    $('#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>');
+        $('#input-group-username').addClass('has-error');
+      }
+    });
+  });
+</script>
 {% endblock %}

resource/js/legacy/crowi.js

@@ -435,29 +435,6 @@ $(function() {
     }
   });
 
-  // login
-  $('#register').on('click', function() {
-    $('#login-dialog').addClass('to-flip');
-    return false;
-  });
-  $('#login').on('click', function() {
-    $('#login-dialog').removeClass('to-flip');
-    return false;
-  });
-
-  $('#register-form input[name="registerForm[username]"]').change(function(e) {
-    var username = $(this).val();
-    $('#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>');
-        $('#input-group-username').addClass('has-error');
-      }
-    });
-  });
-
   if (pageId) {
 
     // for Crowi Template LangProcessor

resource/styles/scss/theme/_login.scss

@@ -0,0 +1,82 @@
+.login-page {
+  // background color
+  background:
+    linear-gradient(45deg, darken($inverse, 30%)  0%, hsla(340, 100%, 55%, 0) 70%),
+    linear-gradient(135deg, $growi-green 10%, hsla(225, 95%, 50%, 0) 70%),
+    linear-gradient(225deg, $growi-blue  10%, hsla(140, 90%, 50%, 0) 80%),
+    linear-gradient(315deg, darken($inverse, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
+  #page-wrapper {
+    background: none;
+  }
+
+  // centering
+  .main {
+    height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    // align-items: center;
+  }
+  .login-dialog {
+  }
+
+  .input-group {
+    margin-bottom: 10px;
+
+    .input-group-addon {
+      border: none;
+      border-radius: 0;
+      color: white;
+      background-color: rgba(black, 0.4);
+    }
+    .form-control {
+      border: none;
+      color: white;
+      background-color: rgba(lighten(black, 10%), 0.4);
+      &::placeholder {
+        color: rgba($gray-light, 0.6);
+      }
+    }
+  }
+
+  .btn-login {
+    border: none;
+    color: rgb(216, 133, 133);
+    width: 150px;
+    background-color: rgba(lighten(black, 20%), 0.4);
+  }
+
+  // flip animation
+  .flipper {
+    .front, .back {
+      // backface-visibility: hidden;
+      transition: 0.4s;
+      // transform-style: preserve-3d;
+    }
+
+    .front {
+      z-index: 2;
+    }
+
+    .back {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      // position: absolute;
+      // top: 0;
+    }
+
+    &.to-flip .front {
+      transform: translateX(-200%);
+    }
+
+    .back {
+      transform: translateY(-50%) translateX(200%);
+    }
+    &.to-flip .back {
+      transform: translateY(-50%) translateX(-50%);
+    }
+  }
+
+}

resource/styles/scss/theme/default.scss

@@ -9,3 +9,6 @@
 
 // override
 @import 'override-agileadmin';
+
+// login page styles
+@import 'login';