diff options
author | Petr Vobornik <pvoborni@redhat.com> | 2014-04-23 16:27:51 +0200 |
---|---|---|
committer | Petr Vobornik <pvoborni@redhat.com> | 2014-06-10 10:23:28 +0200 |
commit | ea93590ef1051c17fa55115edc14d646581188e4 (patch) | |
tree | 31ba8697a415b5f8742b299297bfee892a3dce69 /install | |
parent | 4f45e3ea924cd64f4c1f698dfd762d561226199e (diff) | |
download | freeipa-ea93590ef1051c17fa55115edc14d646581188e4.tar.gz freeipa-ea93590ef1051c17fa55115edc14d646581188e4.tar.xz freeipa-ea93590ef1051c17fa55115edc14d646581188e4.zip |
webui: adjust login page to PatternFly
Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>
Diffstat (limited to 'install')
-rw-r--r-- | install/ui/images/login-screen-background.jpg | bin | 69168 -> 93748 bytes | |||
-rw-r--r-- | install/ui/less/brand.less | 64 | ||||
-rw-r--r-- | install/ui/less/ipa.less | 3 | ||||
-rw-r--r-- | install/ui/less/layout.less | 7 | ||||
-rw-r--r-- | install/ui/less/login.less | 146 | ||||
-rw-r--r-- | install/ui/less/variables.less | 4 | ||||
-rw-r--r-- | install/ui/src/freeipa/facets/Facet.js | 3 | ||||
-rw-r--r-- | install/ui/src/freeipa/plugins/load_page.js | 1 | ||||
-rw-r--r-- | install/ui/src/freeipa/widgets/LoginScreen.js | 85 |
9 files changed, 142 insertions, 171 deletions
diff --git a/install/ui/images/login-screen-background.jpg b/install/ui/images/login-screen-background.jpg Binary files differindex b2ffc1ac5..47b5b4045 100644 --- a/install/ui/images/login-screen-background.jpg +++ b/install/ui/images/login-screen-background.jpg diff --git a/install/ui/less/brand.less b/install/ui/less/brand.less index 437dd4152..c9030bb0b 100644 --- a/install/ui/less/brand.less +++ b/install/ui/less/brand.less @@ -18,30 +18,60 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. */ -// This file contains overrides of reference RCUE implementation to comply -// with IPA design +// this file should be overridden with brand/platform specific content +@login-details-border: #777777; + +.login-pf { + + .login-pf-body { + padding-top: 50px; + } + + #badge img { + display: none; + } + + #brand { + position: absolute; + top: -135px; + img { + height: auto; + } + } + + .container { + padding-top: 40px; + + .details p:first-child { + border-top: 1px solid @login-details-border; + } + } +} + +// 768px == @screen-sm-min @media (min-width: 768px) { .navbar-pf .navbar-brand { padding: 2px 0 3px; } -} - -#simple-container .content { - height: 100%; - background-color: #1D2226; - background-image: url("../images/login-screen-background.jpg"); - background-position: top left; - background-size: auto; - background-repeat: no-repeat; -} -@media (min-width: 1280px) { - #simple-container .content { - background-size: 100% auto; + .login-pf .container .details { + p:first-child { + border-top: 0; + } + border-left: 1px solid @login-details-border; } } -#container { - background-color: white; +@media (max-height: 520px) { + .reset-login-pf-height; + .login-pf { + .login-pf-body { + padding-top: 0; + } + #badge { + margin-top: 0; + height: 70px; + } + } }
\ No newline at end of file diff --git a/install/ui/less/ipa.less b/install/ui/less/ipa.less index 57c249fb7..8a2f61d86 100644 --- a/install/ui/less/ipa.less +++ b/install/ui/less/ipa.less @@ -6,10 +6,11 @@ @import "variables"; @import "mixins"; -@import "brand"; +@import "layout"; @import "forms-override"; @import "alerts"; @import "widgets"; @import "plugins/otp"; @import "login.less"; @import "config-pages.less"; +@import "brand"; diff --git a/install/ui/less/layout.less b/install/ui/less/layout.less new file mode 100644 index 000000000..bf425d4e7 --- /dev/null +++ b/install/ui/less/layout.less @@ -0,0 +1,7 @@ +#simple-container .content { + height: 100%; +} + +#container { + background-color: white; +}
\ No newline at end of file diff --git a/install/ui/less/login.less b/install/ui/less/login.less index 7bb6ca0f4..281ad2568 100644 --- a/install/ui/less/login.less +++ b/install/ui/less/login.less @@ -24,144 +24,32 @@ height: 100%; } -.rcue-login-screen { - width: 100%; - +.login-pf-body { height: 100%; - background-color: #1D2226; - background-image: url("../images/login-screen-background.jpg"); - background-position: top left; + background: @login-bg-color url("@{img-path}/@{img-bg-login}") repeat-x 50% 0; 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; - 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; - } + color: #fff; } - -.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; +.reset-login-pf-height() { + .login-pf { + height: auto; + .login-pf-body { + height: auto; } } -} - -@media (max-height: 700px) { - .login_small; -} - -@media (max-height: 480px) { - .login_small; - .rcue-login-screen .login-form legend { + .login-pf .container { position: relative; } } -@media (max-width: 740px) { - .rcue-login-screen .login-form { - fieldset { - border-right: none; - legend { - padding-left: 0; - width: 100%; - } - } - aside { - clear: both; - } +// 768px = @screen-sm-min) +@media (min-width: 768px) { + .login-pf-body { + background-size: 100% auto; } } + +@media (max-height: 300px) { + .reset-login-pf-height; +}
\ No newline at end of file diff --git a/install/ui/less/variables.less b/install/ui/less/variables.less index 2adfb27b2..5a7a3ead7 100644 --- a/install/ui/less/variables.less +++ b/install/ui/less/variables.less @@ -1 +1,5 @@ // FreeIPA Less Variables + +@img-path: '../images'; +@img-bg-login: 'login-screen-background.jpg'; +@login-bg-color: #25292d;
\ No newline at end of file diff --git a/install/ui/src/freeipa/facets/Facet.js b/install/ui/src/freeipa/facets/Facet.js index 8b55cec12..fe2e6631e 100644 --- a/install/ui/src/freeipa/facets/Facet.js +++ b/install/ui/src/freeipa/facets/Facet.js @@ -239,6 +239,9 @@ define(['dojo/_base/declare', 'data-name': this.name }); } + if (this['class']) { + dom_class.add(this.dom_node, this['class']); + } if (this.container_node) { construct.place(this.dom_node, this.container_node); } diff --git a/install/ui/src/freeipa/plugins/load_page.js b/install/ui/src/freeipa/plugins/load_page.js index c8ff85b23..eb8f22acd 100644 --- a/install/ui/src/freeipa/plugins/load_page.js +++ b/install/ui/src/freeipa/plugins/load_page.js @@ -40,6 +40,7 @@ define([ load.facet_spec = { name: 'load', preferred_container: 'simple', + 'class': 'login-pf-body', widgets: [ { $type: 'activity', 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); }, |