libre.sh/keycloak-scim
2
0
Fork 0
Code Issues 14 Pull requests Releases Packages Activity Actions 6

Fixes to login forms

Browse source
This commit is contained in:
Stian Thorgersen 2014-02-07 17:23:13 +00:00
parent a89a1d524c
commit 5ff965c7b7
10 changed files with 92 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
forms/common-themes/src/main/resources/theme/login/base/error.ftl
View file

@ -1,6 +1,5 @@
<#-- TODO: Only a placeholder, implementation needed -->
<#import "template.ftl" as layout>
<@layout.registrationLayout; section>
<@layout.registrationLayout displayMessage=false; section>
<#if section = "title">
${rb.errorTitle}
@ -9,8 +8,7 @@
<#elseif section = "form">
<div id="kc-error-message">
<p class="instruction">${rb.errorGenericMsg}</p>
<p id="error-summary" class="instruction second">${message.summary}</p>
<p class="instruction">${message.summary}</p>
</div>
</#if>
</@layout.registrationLayout>

16
forms/common-themes/src/main/resources/theme/login/base/login-config-totp.ftl
View file

@ -9,23 +9,23 @@
<#elseif section = "form">
<ol id="kc-totp-settings">
<li>
<p><strong>1</strong>${rb.loginTotpStep1_1} <a href="http://code.google.com/p/google-authenticator/" target="_blank">${rb.loginTotpStep1_2}</a> ${rb.loginTotpStep1_3}</p>
<p>${rb.loginTotpStep1_1} <a href="http://code.google.com/p/google-authenticator/" target="_blank">${rb.loginTotpStep1_2}</a> ${rb.loginTotpStep1_3}</p>
</li>
<li class="clearfix">
<p><strong>2</strong>${rb.loginTotpStep2}</p>
<li>
<p>${rb.loginTotpStep2}</p>
<img src="${totp.totpSecretQrCodeUrl}" alt="Figure: Barcode">
<span class="code">${totp.totpSecretEncoded}</span>
</li>
<li class="clearfix">
<p><strong>3</strong>${rb.loginTotpStep3}</p>
<form action="${url.loginUpdateTotpUrl}" method="post">
<li>
<p>${rb.loginTotpStep3}</p>
</li>
</ol>
<form action="${url.loginUpdateTotpUrl}" id="kc-totp-settings-form" method="post">
<div class="field-wrapper">
<label for="otp" class="two-lines">${rb.loginTotpOneTime}</label><input type="text" id="totp" name="totp" />
<input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}" />
</div>
<input type="submit" class="btn-primary" value="${rb.submit}" />
</form>
</li>
</ol>
</#if>
</@layout.registrationLayout>

7
forms/common-themes/src/main/resources/theme/login/base/login-update-profile.ftl
View file

@ -6,15 +6,8 @@
<#elseif section = "header">
${rb.loginProfileTitle}
<#elseif section = "feedback">
<div id="kc-feedback" class="feedback warning show">
<p><strong>${rb.loginProfileWarning}</strong><br>${rb.loginProfileWarningFollow}</p>
</div>
<#elseif section = "form">
<form id="kc-update-profile-form" action="${url.loginUpdateProfileUrl}" method="post">
<div class="feedback error bottom-left">
<p><strong>${rb.loginProfileError}</strong><br>${rb.loginProfileErrorSteps}</p>
</div>
<p class="subtitle">All fields required</p>
<div class="field-wrapper">
<label for="email">${rb.email}</label><input type="text" id="email" name="email" value="${user.email!''}" />

2
forms/common-themes/src/main/resources/theme/login/base/login-verify-email.ftl
View file

@ -7,7 +7,7 @@
${rb.emailVerifyTitle}
<#elseif section = "form">
<div id="kc-verify-email" class="app-form">
<div id="kc-verify-email">
<p class="instruction">
${rb.emailVerifyInstr}
</p>

2
forms/common-themes/src/main/resources/theme/login/base/login.ftl
View file

@ -9,7 +9,7 @@
<#elseif section = "form">
<form id="kc-form-login" action="${url.loginAction}" method="post">
<div class="field-wrapper">
<label for="username">${rb.username}</label><input id="username" name="username" value="${login.username!''}" type="text" />
<label for="username">${rb.username}</label><input id="username" name="username" value="${login.username!''}" type="text" autofocus />
</div>
<div class="field-wrapper">
<label for="password">${rb.password}</label><input id="password" name="password" type="password" />

2
forms/common-themes/src/main/resources/theme/login/base/register.ftl
View file

@ -1,5 +1,5 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout bodyClass="register" displaySeparator=true; section>
<@layout.registrationLayout displaySeparator=true; section>
<#if section = "title">
${rb.registerWith} ${realm.name}

6
forms/common-themes/src/main/resources/theme/login/base/template.ftl
View file

@ -1,4 +1,4 @@
<#macro registrationLayout bodyClass="" displaySeparator=false displaySocial=false>
<#macro registrationLayout bodyClass="" displaySeparator=false displaySocial=false displayMessage=true>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
@ -25,8 +25,8 @@
<div class="background-area">
<div class="form-area ${displaySocial?string('social','')} ${displaySeparator?string('separator','')} clearfix">
<div class="section app-form">
<#if message?has_content>
<div class="feedback ${message.type} bottom-left show">
<#if displayMessage && message?has_content>
<div class="feedback ${message.type}">
<p><strong>${message.summary}</strong></p>
</div>
</#if>

196
forms/common-themes/src/main/resources/theme/login/rcue/resources/css/styles.css
View file

@ -35,9 +35,6 @@ strong {
.hidden {
display: none;
}
.feedback.show {
display: inline-block !important;
}
.pull-right {
float: right;
}
@ -274,77 +271,6 @@ button.primary:enabled:active {
width: 20em;
font-weight: normal;
}
.feedback-aligner {
position: absolute;
top: 1.5em;
text-align: center;
width: 100%;
height: 0;
z-index: 100;
}
.feedback-aligner .feedback {
position: relative;
display: inline-block;
text-align: left;
border-width: 1px;
}
.feedback-aligner .feedback p {
border-width: 1px;
}
.feedback {
position: absolute;
opacity: 0;
transition: opacity 0.33s ease-in-out;
-moz-transition: opacity 0.33s ease-in-out;
-webkit-transition: opacity 0.33s ease-in-out;
}
.feedback p {
padding: 0.90909090909091em 3.63636363636364em;
border-style: solid;
border-width: 1px 1px 0px 1px;
background-repeat: no-repeat;
background-position: 1.2em center;
font-size: 1.1em;
line-height: 1.4em;
border-radius: 2px;
color: #4d5258;
margin-bottom: 0;
}
.feedback.show {
opacity: 1;
}
.feedback.bottom-left {
background-position: left bottom;
background-repeat: no-repeat;
padding-bottom: 1em;
}
.feedback.bottom-left p {
background-position: 1.27272727272727em center;
}
.feedback.error {
background-image: url(../img/feedback-error-arrow-down.png);
}
.feedback.error p {
border-color: #b91415;
background-image: url(../img/feedback-error-sign.png);
background-color: #f8e7e7;
}
.feedback.success {
background-image: url(../img/feedback-success-arrow-down.png);
}
.feedback.success p {
border-color: #4b9e39;
background-image: url(../img/feedback-success-sign.png);
background-color: #e4f1e1;
}
.feedback.warning {
background-image: url(../img/feedback-warning-arrow-down.png);
}
.feedback.warning p {
border-color: #f17528;
background-image: url(../img/feedback-warning-sign.png);
background-color: #fef1e9;
}
button,
a.button {
background-color: #eeeeee;
@ -574,7 +500,7 @@ body {
}
body.kc-login-register {
background-image: url("../img/login-screen-background.jpg");
background-image: url("../img/login-bkgrnd.png");
}
.kc-title {
@ -728,11 +654,6 @@ body.kc-login-register {
right: 4.09090909090909em;
top: -0.636363636363636em;
}
.kc-login-register .feedback.bottom-left {
left: 35.7em;
bottom: 17em;
min-width: 35em;
}
.kc-login-register input.error[type="text"],
.kc-login-register input.error[type="password"],
.kc-login-register input.error[type="email"] {
@ -940,58 +861,35 @@ a.zocial:before {
font-size: 1.3em;
}
.kc-login-register.totp .form-area {
background-image: none;
}
.kc-login-register.reset .form-area p.instruction {
font-size: 1.3em;
line-height: 1.3em;
margin-bottom: 1.81818181818182em;
}
.kc-login-register.totp {
min-height: 0;
}
.kc-login-register.totp ol li {
margin-bottom: 3em;
width: 100%;
}
.kc-login-register.totp ol li p {
font-size: 1.3em;
margin-bottom: 1.92307692307692em;
}
.kc-login-register.totp ol li p strong {
text-indent: -1em;
float: left;
font-size: 1.84615384615385em;
font-weight: normal;
margin-top: -0.20833333333333em;
color: #999;
}
.kc-login-register.totp ol li img {
border: 7px solid #fff;
width: 150px;
}
.kc-login-register.totp ol li .code {
font-size: 1.3em;
margin-left: 1.53846153846154em;
}
.kc-login-register.totp ol li form {
width: 357px;
}
.kc-login-register.totp ol li form input[type="text"] {
width: 22em;
}
.kc-login-register.totp ol li form input[type="submit"] {
float: right;
ol#kc-totp-settings {
list-style: decimal;
padding-left: 2em;
}
.kc-login-register.totp ol li:last-child {
margin-bottom: 0;
ol#kc-totp-settings li {
margin-bottom: 1em;
font-size: 1.5em;
}
.kc-login-register.totp .content {
position: inherit;
margin-top: 16em;
ol#kc-totp-settings img {
margin: 1em 0;
}
ol#kc-totp-settings span.code {
display: block;
}
form#kc-totp-settings-form {
margin-top: 3em;
width: 38.9em;
}
.kc-login-register.email .background-area .section {
width: 41.2em;
}
@ -1001,8 +899,54 @@ a.zocial:before {
.kc-login-register.email label {
width: 6.78571428571429em;
}
.kc-login-register.email .feedback.bottom-left {
left: 38.3em;
.feedback {
background-position: left bottom;
background-repeat: no-repeat;
padding-bottom: 1em;
position: absolute;
top: -7.7em;
left: 35em;
white-space: nowrap;
}
.feedback p {
padding: 0.90909090909091em 3.63636363636364em;
border-style: solid;
border-width: 1px 1px 0px 1px;
background-repeat: no-repeat;
background-position: 1.27272727272727em center;
font-size: 1.1em;
line-height: 1.4em;
border-radius: 2px;
color: #4d5258;
margin-bottom: 0;
}
.feedback.error {
background-image: url(../img/feedback-error-arrow-down.png);
}
.feedback.error p {
border-color: #b91415;
background-image: url(../img/feedback-error-sign.png);
background-color: #f8e7e7;
}
.feedback.success {
background-image: url(../img/feedback-success-arrow-down.png);
}
.feedback.success p {
border-color: #4b9e39;
background-image: url(../img/feedback-success-sign.png);
background-color: #e4f1e1;
}
.feedback.warning {
background-image: url(../img/feedback-warning-arrow-down.png);
}
.feedback.warning p {
border-color: #f17528;
background-image: url(../img/feedback-warning-sign.png);
background-color: #fef1e9;
}
.zocial.google {
@ -1011,3 +955,5 @@ a.zocial:before {
.zocial.google:before {
content: "+" !important;
}

BIN
forms/common-themes/src/main/resources/theme/login/rcue/resources/img/login-bkgrnd.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

2
forms/common-themes/src/main/resources/theme/login/rcue/theme.properties
View file

@ -1,2 +1,2 @@
parent=base
styles=css/reset.css ../lib/zocial/zocial.css css/styles.css
styles=css/reset.css lib/zocial/zocial.css css/styles.css