mirror of
https://salsa.debian.org/freeipa-team/freeipa.git
synced 2025-02-25 18:55:28 -06:00
webui: adjust login page to PatternFly
Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>
This commit is contained in:
Petr Vobornik
parent
4f45e3ea92
commit
ea93590ef1
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 92 KiB |
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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";
|
||||
|
||||
7
install/ui/less/layout.less
Normal file
7
install/ui/less/layout.less
Normal file
@ -0,0 +1,7 @@
|
||||
#simple-container .content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#container {
|
||||
background-color: white;
|
||||
}
|
||||
@ -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;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
.reset-login-pf-height() {
|
||||
.login-pf {
|
||||
height: auto;
|
||||
.login-pf-body {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
.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;
|
||||
}
|
||||
@ -1 +1,5 @@
|
||||
// FreeIPA Less Variables
|
||||
|
||||
@img-path: '../images';
|
||||
@img-bg-login: 'login-screen-background.jpg';
|
||||
@login-bg-color: #25292d;
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -40,6 +40,7 @@ define([
|
||||
load.facet_spec = {
|
||||
name: 'load',
|
||||
preferred_container: 'simple',
|
||||
'class': 'login-pf-body',
|
||||
widgets: [
|
||||
{
|
||||
$type: 'activity',
|
||||
|
||||
@ -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);
|
||||
|
||||
construct.create('img', {
|
||||
'class': 'logo',
|
||||
src: this.logo_src
|
||||
var login_body = construct.create('div', {
|
||||
'class': 'login-pf-body'
|
||||
}, this.dom_node);
|
||||
|
||||
this.render_form(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', {
|
||||
src: this.logo_src,
|
||||
alt: this.product_name
|
||||
}, cnt);
|
||||
},
|
||||
|
||||
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);
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user