summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--install/ui/images/login-screen-background.jpgbin69168 -> 93748 bytes
-rw-r--r--install/ui/less/brand.less64
-rw-r--r--install/ui/less/ipa.less3
-rw-r--r--install/ui/less/layout.less7
-rw-r--r--install/ui/less/login.less146
-rw-r--r--install/ui/less/variables.less4
-rw-r--r--install/ui/src/freeipa/facets/Facet.js3
-rw-r--r--install/ui/src/freeipa/plugins/load_page.js1
-rw-r--r--install/ui/src/freeipa/widgets/LoginScreen.js85
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
index b2ffc1ac5..47b5b4045 100644
--- a/install/ui/images/login-screen-background.jpg
+++ b/install/ui/images/login-screen-background.jpg
Binary files differ
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);
},
generated by cgit (git 2.34.1) at 2024-06-23 04:43:59 +0000