webui: adjust login page to PatternFly

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>

1 files changed, 61 insertions, 24 deletions

diff --git a/install/ui/src/freeipa/widgets/LoginScreen.js b/install/ui/src/freeipa/widgets/LoginScreen.js
index 560393f45..9582e57f9 100644
--- a/install/ui/src/freeipa/widgets/LoginScreen.js
+++ b/install/ui/src/freeipa/widgets/LoginScreen.js
@@ -53,14 +53,16 @@ define(['dojo/_base/declare',
      */
     var LoginScreen = declare([Stateful, Evented, FormMixin, ContainerMixin, ConfirmMixin], {
 
-        id: 'rcue-login-screen',
+        id: '',
 
-        'class': 'rcue-login-screen',
+        'class': 'login-pf',
 
         logo_src: 'images/login-screen-logo.png',
 
         product_name_src: 'images/product-name.png',
 
+        product_name: '',
+
         expired_msg: "Your session has expired. Please re-login.",
 
         form_auth_msg: "To login with username and password, enter them in the fields below, then click Login.",
@@ -149,57 +151,92 @@ define(['dojo/_base/declare',
 
         render_content: function() {
 
-            construct.empty(this.dom_node);
+            var login_body = construct.create('div', {
+                'class': 'login-pf-body'
+            }, this.dom_node);
+
+            construct.empty(login_body);
+
+            this.render_badge(login_body);
+
+            var cnt = construct.create('div', {
+                'class': 'container'
+            }, login_body);
+
+            var row = construct.create('div', {
+                'class': 'row'
+            }, cnt);
 
+
+            this.render_brand(row);
+            this.render_form(row);
+            this.render_aside(row);
+        },
+
+        render_badge: function(container) {
+
+            var cnt = construct.create('span', {
+                'id': 'badge'
+            }, container);
             construct.create('img', {
-                'class': 'logo',
-                src: this.logo_src
-            }, this.dom_node);
+                src: this.logo_src,
+                alt: this.product_name
+            }, cnt);
+        },
 
-            this.render_form(this.dom_node);
+        render_brand: function(container) {
+            var c1 = construct.create('div', {
+                'class': 'col-sm-12'
+            }, container);
+            var c2 = construct.create('div', {
+                'id': 'brand'
+            }, c1);
+            construct.create('img', {
+                src: this.product_name_src,
+                height: '80px'
+            }, c2);
         },
 
         render_form: function(container) {
 
             var form_cont = construct.create('div', {
-                'class': 'login-form'
+                'class': 'col-sm-7 col-md-6 col-lg-5 login'
             }, container);
 
-            var fieldset = construct.create('fieldset', {}, form_cont);
-
-            var legend = construct.create('legend', {}, fieldset);
-            construct.create('img', {
-                src: this.product_name_src
-            }, legend);
-
-            var layout = IPA.fluid_layout({});
+            var layout = IPA.fluid_layout({
+                label_cls: 'col-sm-3 col-md-3 control-label',
+                widget_cls: 'col-sm-9 col-md-9 controls'
+            });
             var form = layout.create(this.get_widgets());
-            construct.place(form[0], fieldset);
+            construct.place(form[0], form_cont);
             this.register_caps_check();
 
+            var btn_row = construct.create('div', {
+                'class': 'row'
+            }, form_cont);
+
             this.buttons_node = construct.create('div', {
-                'class': 'buttons'
-            }, fieldset);
+                'class': 'col-sm-12 col-md-offset-3 col-md-9 submit'
+            }, btn_row);
 
             this.login_btn_node = IPA.button({
                 label: text.get('@i18n:login.login', "Login"),
-                'class': 'btn-primary',
+                'class': 'btn-primary btn-lg',
                 click: lang.hitch(this, this.on_confirm)
             })[0];
             construct.place(this.login_btn_node, this.buttons_node);
 
             this.reset_btn_node = IPA.button({
                 label: text.get('@i18n:buttons.reset_password_and_login', "Reset Password and Login"),
-                'class': 'btn-primary',
+                'class': 'btn-primary btn-lg',
                 click: lang.hitch(this, this.on_confirm)
             })[0];
-
-            this.render_aside(form_cont);
         },
 
         render_aside: function(container) {
 
-            this.aside_node = construct.create('aside', {
+            this.aside_node = construct.create('div', {
+                'class': 'col-sm-5 col-md-6 col-lg-7 details',
                 innerHTML: this.aside
             }, container);
         },