css: Cleanup login.less and fix layout issues

fixes #4419

application/forms/Authentication/LoginForm.php

@@ -27,6 +27,13 @@ class LoginForm extends Form
      */
     const REDIRECT_URL = 'dashboard';
 
+    public static $defaultElementDecorators = [
+        ['ViewHelper', ['separator' => '']],
+        ['Help', []],
+        ['Errors', ['separator' => '']],
+        ['HtmlTag', ['tag' => 'div', 'class' => 'control-group']]
+    ];
+
     /**
      * {@inheritdoc}
      */
@@ -69,6 +76,18 @@ class LoginForm extends Form
             'rememberme',
             [
                 'label'         => $this->translate('Stay logged in'),
+                'decorators'    => [
+                    ['ViewHelper', ['separator' => '']],
+                    ['Label', [
+                        'tag'       => 'span',
+                        'separator' => '',
+                        'class'     => 'control-label',
+                        'placement' => 'APPEND'
+                    ]],
+                    ['Help', []],
+                    ['Errors', ['separator' => '']],
+                    ['HtmlTag', ['tag' => 'div', 'class' => 'control-group remember-me-box']]
+                ]
             ]
         );
         if (! $this->hasDb()) {

public/css/icinga/login.less

@@ -16,14 +16,6 @@
   background-size: 100% 100%;
   background-size: cover;
 
-  .login-wrapper {
-    height: 100%;
-    padding: 0 1em;
-    margin: 0 auto;
-    z-index: 2;
-    position: relative
-  }
-
   .login-form {
     width: 24em;
     position: relative;
@@ -44,11 +36,6 @@
     }
   }
 
-  .control-label {
-    font-size: 1em;
-    line-height: @line-height;
-  }
-
   .errors,
   .form-errors {
     list-style-type: none;
@@ -66,20 +53,12 @@
   }
 
   .form-errors,
-  input[type="text"],
+  .control-group {
-  input[type="password"] {
     &:not(:last-child) {
       margin-bottom: 1em;
     }
   }
 
-  .control-label-group {
-    display: block;
-    padding: 0;
-    text-align: left;
-    width: 100%;
-  }
-
   input[type=password],
   input[type=text] {
     display: block;
@@ -100,10 +79,6 @@
     .var(outline-color, icinga-blue-light);
   }
 
-  .form-controls {
-    margin-top: 1.5em;
-  }
-
   input[type=submit] {
     border-radius: .25em;
     .var(background, icinga-secondary);
@@ -131,17 +106,11 @@
     }
   }
 
-  .control-group:nth-child(3) {
+  .remember-me-box {
-    text-align: left;
+    display: flex;
-    margin-top: 1.25em;
+    align-items: flex-start;
 
-    > .control-label-group {
+    .toggle-switch {
-      display: inline-block;
-      width: auto;
-    }
-
-    > .toggle-switch {
-      float: left;
       margin-right: 1em;
     }
   }