webui: login screen widget

Reimplementation of unauthorized dialog into separate widget. It uses RCUE
design.

New features compared to unauthorized dialog:

- reflects auth methods from `auth` module
- validation summary
- differentiates Kerberos auth failure with session expiration
- Caps Lock warning
- form based method doesn't allow password only submission

https://fedorahosted.org/freeipa/ticket/4017
https://fedorahosted.org/freeipa/ticket/3903

Reviewed-By: Adam Misnyovszki <amisnyov@redhat.com>

2 files changed, 168 insertions, 0 deletions

diff --git a/install/ui/less/login.less b/install/ui/less/login.less
new file mode 100644
index 000000000..de9d651b0
--- /dev/null
+++ b/install/ui/less/login.less
@@ -0,0 +1,167 @@
+/**
+ *  Authors:
+ *    UXD team
+ *    Petr Vobornik <pvoborni@redhat.com>
+ *
+ * Copyright (C) 2013 Red Hat
+ * see file 'COPYING' for use and warranty information
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+.facet[name=login] {
+    height: 100%;
+}
+
+.rcue-login-screen {
+    width: 100%;
+
+    height: 100%;
+    background-color: #1D2226;
+    background-image: url("../images/login-screen-background.jpg");
+    background-position: top left;
+    background-size: auto;
+    background-repeat: no-repeat;
+
+    img.logo {
+        // position: absolute;
+        // top: 50px;
+        // right: 64px;
+        display: none;
+    }
+
+    .login-form {
+        position: absolute;
+        bottom: 15%;
+        left: 0;
+        right: 0;
+        border-top: 1px rgba(255, 255, 255, 0.05) solid;
+        border-bottom: 1px rgba(255, 255, 255, 0.05) solid;
+        background-color: rgba(0, 0, 0, 0.3);
+        color: #fff;
+
+        aside {
+            padding: 30px;
+            p {
+                margin-bottom: 8px;
+            }
+        }
+
+        fieldset {
+            float: left;
+            margin: 30px 30px 30px 0;
+            padding: 10px;
+            padding-right: 34px;
+            width: 426px;
+            border-right: 1px rgba(255, 255, 255, 0.15) solid;
+
+            legend {
+                position: absolute;
+                top: -100px;
+                padding-left: 100px;
+                width: auto;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+                font-weight: 200;
+                font-size: 22px;
+                border-bottom: none;
+
+                strong {
+                    margin-right: 4px;
+                    font-weight: 700;
+                }
+            }
+
+            input[type="text"],
+            input[type="password"] {
+                width: 282px;
+                color: black;
+            }
+
+            .buttons {
+                float: right;
+            }
+
+            label, button {
+                font-size: 13px;
+            }
+
+            small {
+                line-height: 22px;
+                margin-left: 87px;
+                margin-top: 10px;
+                display: block;
+                float: left;
+            }
+        }
+    }
+}
+
+@media (min-width: 1280px) {
+    .rcue-login-screen {
+        background-size: 100% auto;
+    }
+}
+
+
+.login_small() {
+    .rcue-login-screen .login-form {
+        top: 100px;
+        bottom: inherit;
+    }
+}
+
+@media (max-width: 480px) {
+
+    .login_small;
+
+    .rcue-login-screen .login-form {
+        fieldset  {
+            float: none;
+            width: auto;
+            .buttons {
+                float: none;
+            }
+        }
+        aside {
+            padding: 10px;
+        }
+    }
+}
+
+@media (max-height: 700px) {
+    .login_small;
+}
+
+@media (max-height: 480px) {
+    .login_small;
+    .rcue-login-screen .login-form  legend {
+        position: relative;
+    }
+}
+
+@media (max-width: 740px) {
+    .rcue-login-screen .login-form {
+        fieldset  {
+            border-right: none;
+            legend {
+                padding-left: 0;
+                width: 100%;
+            }
+        }
+        aside {
+            clear: both;
+        }
+    }
+}
diff --git a/install/ui/less/rcue.less b/install/ui/less/rcue.less
index 60e41d95f..2d41aa283 100644
--- a/install/ui/less/rcue.less
+++ b/install/ui/less/rcue.less
@@ -11,3 +11,4 @@
 @import "forms-override";
 @import "widgets";
 @import "plugins/otp";
+@import "login.less";