From dc5a83134a6fd685177aa0ca478be3e5fcae2e29 Mon Sep 17 00:00:00 2001 From: Stian Thorgersen Date: Mon, 5 Aug 2013 16:39:40 +0100 Subject: [PATCH] Updated login form and added initial registration form --- .../main/java/org/keycloak/sdk/LoginBean.java | 239 ++++++++++-------- .../META-INF/resources/sdk/login.xhtml | 14 +- .../META-INF/resources/sdk/register.html | 58 ----- .../META-INF/resources/sdk/register.xhtml | 13 + .../resources/sdk/theme/saas/css/forms.css | 65 ++--- .../sdk/theme/saas/css/login-screen.css | 23 +- .../img/customer-login-screen-bg2.jpg | Bin .../{css => }/img/login-screen-background.jpg | Bin .../resources/sdk/theme/saas/login.xhtml | 95 +++---- .../resources/sdk/theme/saas/register.xhtml | 40 +++ .../resources/sdk/theme/saas/template.xhtml | 65 +++++ 11 files changed, 320 insertions(+), 292 deletions(-) delete mode 100755 sdk-html/src/main/resources/META-INF/resources/sdk/register.html create mode 100644 sdk-html/src/main/resources/META-INF/resources/sdk/register.xhtml rename sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/{css => }/img/customer-login-screen-bg2.jpg (100%) rename sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/{css => }/img/login-screen-background.jpg (100%) create mode 100755 sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/register.xhtml create mode 100644 sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/template.xhtml diff --git a/sdk-html/src/main/java/org/keycloak/sdk/LoginBean.java b/sdk-html/src/main/java/org/keycloak/sdk/LoginBean.java index b070e12f2a..a5f3dc8ce3 100644 --- a/sdk-html/src/main/java/org/keycloak/sdk/LoginBean.java +++ b/sdk-html/src/main/java/org/keycloak/sdk/LoginBean.java @@ -1,11 +1,14 @@ package org.keycloak.sdk; import java.net.URI; +import java.util.HashMap; import java.util.Iterator; import java.util.LinkedList; import java.util.List; +import java.util.Map; import javax.annotation.PostConstruct; +import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import javax.faces.context.FacesContext; @@ -19,129 +22,174 @@ import org.keycloak.services.models.RequiredCredentialModel; @RequestScoped public class LoginBean { - private String style = "saas"; - - private String clientId; - - private String scope; - - private String state; - - private String redirectUri; + private RealmModel realm; private String loginAction; private String socialLoginUrl; - private String themeUrl; - - private List providers; - - private List requiredCredentials; - - private RealmModel realm; - private String username; - private String baseUrl; + private List requiredCredentials; + + private List hiddenProperties; + + private List providers; + + private String theme = "saas"; + + private String themeUrl; + + private Map themeConfig; @PostConstruct public void init() { - HttpServletRequest request = (HttpServletRequest) FacesContext.getCurrentInstance().getExternalContext().getRequest(); + FacesContext ctx = FacesContext.getCurrentInstance(); + + HttpServletRequest request = (HttpServletRequest) ctx.getExternalContext().getRequest(); realm = (RealmModel) request.getAttribute(RealmModel.class.getName()); - clientId = (String) request.getAttribute("client_id"); - scope = (String) request.getAttribute("scope"); - state = (String) request.getAttribute("state"); - redirectUri = (String) request.getAttribute("redirect_uri"); - loginAction = ((URI) request.getAttribute("KEYCLOAK_LOGIN_ACTION")).toString(); - socialLoginUrl = ((URI) request.getAttribute("KEYCLOAK_SOCIAL_LOGIN")).toString(); username = (String) request.getAttribute("username"); - providers = new LinkedList(); - for (Iterator itr = ServiceRegistry - .lookupProviders(org.keycloak.social.SocialProvider.class); itr.hasNext();) { - org.keycloak.social.SocialProvider p = itr.next(); - providers.add(new SocialProvider(p.getId(), p.getName())); + if (request.getAttribute("KEYCLOAK_LOGIN_ERROR_MESSAGE") != null) { + FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR, + (String) request.getAttribute("KEYCLOAK_LOGIN_ERROR_MESSAGE"), null); + ctx.addMessage(null, message); } - requiredCredentials = new LinkedList(); - for (RequiredCredentialModel m : realm.getRequiredCredentials()) { - if (m.isInput()) { - requiredCredentials.add(new RequiredCredential(m.getType(), m.isSecret())); - } + addRequiredCredentials(); + addHiddenProperties(request, "client_id", "scope", "state", "redirect_uri"); + addSocialProviders(); + + // TODO Get theme name from realm + theme = "saas"; + themeUrl = FacesContext.getCurrentInstance().getExternalContext().getRequestContextPath() + "/sdk/theme/" + theme; + + themeConfig = new HashMap(); + + themeConfig.put("styles", themeUrl + "/styles.css"); + + if (RealmModel.DEFAULT_REALM.equals(realm.getName())) { + themeConfig.put("logo", themeUrl + "/img/red-hat-logo.png"); + themeConfig.put("background", themeUrl + "/img/login-screen-background.jpg"); + } else { + themeConfig.put("background", themeUrl + "/img/customer-login-screen-bg2.jpg"); + themeConfig.put("displayPoweredBy", true); } - - baseUrl = FacesContext.getCurrentInstance().getExternalContext().getRequestContextPath() + "/sdk"; - themeUrl = baseUrl + "/theme/" + style; - } - public List getRequiredCredentials() { - return requiredCredentials; - } - - public String getStylesheet() { - return themeUrl + "/styles.css"; - } - - public String getLoginTemplate() { - return "theme/" + style + "/login.xhtml"; - } - - public String getLoginAction() { - return loginAction; - } - - public String getStyle() { - return style; + public Map getThemeConfig() { + return themeConfig; } public String getName() { return realm.getName(); } - public String getClientId() { - return clientId; + public String getLoginAction() { + return loginAction; } - public String getScope() { - return scope; + public List getHiddenProperties() { + return hiddenProperties; } - public String getState() { - return state; + public List getRequiredCredentials() { + return requiredCredentials; } - public String getRedirectUri() { - return redirectUri; - } - - public String getUsername() { - return username; + public String getTheme() { + return theme; } public String getThemeUrl() { return themeUrl; } - public String socialLoginUrl(String id) { - StringBuilder sb = new StringBuilder(); - sb.append(socialLoginUrl); - sb.append("?provider_id=" + id); - sb.append("&client_id=" + clientId); - if (scope != null) { - sb.append("&scope=" + scope); + public String getUsername() { + return username; + } + + public boolean isSocial() { + // TODO Check if social is enabled in realm + return true && providers.size() > 0; + } + + public boolean isRegistrationAllowed() { + return realm.isRegistrationAllowed(); + } + + private void addHiddenProperties(HttpServletRequest request, String... names) { + hiddenProperties = new LinkedList(); + for (String name : names) { + Object v = request.getAttribute(name); + if (v != null) { + hiddenProperties.add(new Property(name, (String) v)); + } } - if (state != null) { - sb.append("&state=" + state); + } + + private void addRequiredCredentials() { + requiredCredentials = new LinkedList(); + for (RequiredCredentialModel m : realm.getRequiredCredentials()) { + if (m.isInput()) { + requiredCredentials.add(new RequiredCredential(m.getType(), m.isSecret())); + } + } + } + + private void addSocialProviders() { + // TODO Add providers configured for realm instead of all providers + providers = new LinkedList(); + for (Iterator itr = ServiceRegistry + .lookupProviders(org.keycloak.social.SocialProvider.class); itr.hasNext();) { + org.keycloak.social.SocialProvider p = itr.next(); + providers.add(new SocialProvider(p.getId(), p.getName())); + } + } + + public class Property { + private String name; + private String value; + + public Property(String name, String value) { + this.name = name; + this.value = value; + } + + public String getName() { + return name; + } + + public String getValue() { + return value; + } + } + + public class RequiredCredential { + private String type; + private boolean secret; + + public RequiredCredential(String type, boolean secure) { + this.type = type; + this.secret = secure; + } + + public String getName() { + return type; + } + + public String getLabel() { + return type; + } + + public String getInputType() { + return secret ? "password" : "text"; } - sb.append("&redirect_uri=" + redirectUri); - return sb.toString(); } public List getProviders() { @@ -169,38 +217,11 @@ public class LoginBean { StringBuilder sb = new StringBuilder(); sb.append(socialLoginUrl); sb.append("?provider_id=" + id); - sb.append("&client_id=" + clientId); - if (scope != null) { - sb.append("&scope=" + scope); + for (Property p : hiddenProperties) { + sb.append("&" + p.getName() + "=" + p.getValue()); } - if (state != null) { - sb.append("&state=" + state); - } - sb.append("&redirect_uri=" + redirectUri); return sb.toString(); } - - public String getIconUrl() { - return themeUrl + "/icons/" + id + ".png"; - } - } - - public class RequiredCredential { - private String type; - private boolean secret; - - public RequiredCredential(String type, boolean secure) { - this.type = type; - this.secret = secure; - } - - public String getType() { - return type; - } - - public boolean isSecret() { - return secret; - } } } diff --git a/sdk-html/src/main/resources/META-INF/resources/sdk/login.xhtml b/sdk-html/src/main/resources/META-INF/resources/sdk/login.xhtml index 317157d595..c283e9aae3 100644 --- a/sdk-html/src/main/resources/META-INF/resources/sdk/login.xhtml +++ b/sdk-html/src/main/resources/META-INF/resources/sdk/login.xhtml @@ -1,13 +1 @@ - - - - Log in to #{login.name} - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/sdk-html/src/main/resources/META-INF/resources/sdk/register.html b/sdk-html/src/main/resources/META-INF/resources/sdk/register.html deleted file mode 100755 index ea498c31a1..0000000000 --- a/sdk-html/src/main/resources/META-INF/resources/sdk/register.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - - - - - -
-
-

Register with {{config.name}}

- -
{{info}}
-
{{error}}
- -
- - - - - - - - - - - - - - - - - - -
- - Cancel -
-
-
- -
-

Login with

- -
- -
-
-
- - - \ No newline at end of file diff --git a/sdk-html/src/main/resources/META-INF/resources/sdk/register.xhtml b/sdk-html/src/main/resources/META-INF/resources/sdk/register.xhtml new file mode 100644 index 0000000000..f25d7ea79e --- /dev/null +++ b/sdk-html/src/main/resources/META-INF/resources/sdk/register.xhtml @@ -0,0 +1,13 @@ + + + + Register with #{register.name} + + + + + + + + \ No newline at end of file diff --git a/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/css/forms.css b/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/css/forms.css index 052b5e12ee..a8a21b3a3a 100644 --- a/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/css/forms.css +++ b/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/css/forms.css @@ -1,67 +1,56 @@ fieldset { border: none; } - input[type="text"], -input[type="password"] { - font-size: 1.1em; - padding: 0 0.545454545454545em; /* 0 6px */ - min-width: 18.1818181818182em; /* 200px */ - height: 2.18181818181818em; /* 24px */ - border: 1px #b6b6b6 solid; - border-radius: 2px; - box-shadow: inset 0px 2px 2px rgba(0,0,0,0.1); - color: #333; +input[type="password"], +input[type="email"] { + font-size: 1.1em; + padding: 0 0.545454545454545em; + min-width: 18.1818181818182em; + height: 2.18181818181818em; + border: 1px #b6b6b6 solid; + border-radius: 2px; + box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1); + color: #333; } - input[type="text"]:hover, -input[type="password"]:hover { +input[type="password"]:hover, +input[type="email"]:hover { border-color: #62afdb; } - input[type="text"]:focus, -input[type="password"]:focus { +input[type="password"]:focus, +input[type="email"]:focus { border-color: #62afdb; box-shadow: #62afdb 0 0 5px; } - input[type="submit"] { - font-size: 1.3em; - padding: 0.30769230769231em 1.07692307692308em; /* 4px 14px */ - border: 1px #21799e solid; - border-radius: 2px; - background-image: linear-gradient(top, #00A9EC 0%, #009BD3 100%); - background-image: -o-linear-gradient(top, #00A9EC 0%, #009BD3 100%); - background-image: -moz-linear-gradient(top, #00A9EC 0%, #009BD3 100%); - background-image: -webkit-linear-gradient(top, #00A9EC 0%, #009BD3 100%); - background-image: -ms-linear-gradient(top, #00A9EC 0%, #009BD3 100%); - background-image: -webkit-gradient( - linear, - left top, - left bottom, - color-stop(0.0, #00A9EC), - color-stop(1,0, #009BD3) - ); - color: #fff; - font-weight: bold; - letter-spacing: 0.04em; + font-size: 1.3em; + padding: 0.30769230769231em 1.07692307692308em; + border: 1px #21799e solid; + border-radius: 2px; + background-image: linear-gradient(top, #00a9ec 0%, #009bd3 100%); + background-image: -o-linear-gradient(top, #00a9ec 0%, #009bd3 100%); + background-image: -moz-linear-gradient(top, #00a9ec 0%, #009bd3 100%); + background-image: -webkit-linear-gradient(top, #00a9ec 0%, #009bd3 100%); + background-image: -ms-linear-gradient(top, #00a9ec 0%, #009bd3 100%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00a9ec), color-stop(1, 0, #009bd3)); + color: #fff; + font-weight: bold; + letter-spacing: 0.04em; } - input[type="submit"]:hover, input[type="submit"]:focus { background-color: #009BD3; background-image: none; cursor: pointer; } - input[type="submit"]:active { background-color: #0099d4; background-image: none; cursor: pointer; box-shadow: inset 0 0 5px 3px #0074ae; } - input[type="checkbox"] { margin-right: 0.5em; } - diff --git a/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/css/login-screen.css b/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/css/login-screen.css index 70e9cc3545..7e33a6d6e0 100644 --- a/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/css/login-screen.css +++ b/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/css/login-screen.css @@ -3,7 +3,6 @@ body { } .rcue-login-register { background-color: #1D2226; - background-image: url("img/login-screen-background.jpg"); background-position: top left; background-size: auto; background-repeat: no-repeat; @@ -22,14 +21,12 @@ body { } .rcue-login-register .content { position: absolute; - bottom: 15%; + bottom: 10%; width: 100%; min-width: 76em; } .rcue-login-register h2 { padding-left: 4.34782608695652em; - /* 100px */ - font-family: "Overpass", sans-serif; font-size: 2.3em; font-weight: 100; @@ -255,14 +252,16 @@ a.zocial:before { line-height: 1.3em; } /* Customer login */ -.rcue-login-register.customer { - background-image: url("img/customer-login-screen-bg2.jpg"); + +.rcue-login-register p.powered { + font-size: 1.1em; + margin-top: 1.27272727272727em; + text-align: right; + margin-right: 5.81818181818182em; } -.rcue-login-register.customer h2 { - display: inline-block; +.rcue-login-register p.powered a { + color: #666; } -.rcue-login-register.customer p.powered { - display: inline-block; - font-size: 1.3em; - margin-left: 1.2em; +.rcue-login-register p.powered a:hover { + color: #0099D3; } diff --git a/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/css/img/customer-login-screen-bg2.jpg b/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/img/customer-login-screen-bg2.jpg similarity index 100% rename from sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/css/img/customer-login-screen-bg2.jpg rename to sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/img/customer-login-screen-bg2.jpg diff --git a/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/css/img/login-screen-background.jpg b/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/img/login-screen-background.jpg similarity index 100% rename from sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/css/img/login-screen-background.jpg rename to sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/img/login-screen-background.jpg diff --git a/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/login.xhtml b/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/login.xhtml index c1cc3622e6..a56e9cf5ae 100755 --- a/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/login.xhtml +++ b/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/login.xhtml @@ -1,65 +1,36 @@ - -

Red Hat logo

-
-

- Log in to #{login.name} -

-
- -
+ + +
+ +
+ + + + + + +
+ +

Forgot Username or Password?

+
+ + + + + + + +

No account? Register.

+ + \ No newline at end of file diff --git a/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/register.xhtml b/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/register.xhtml new file mode 100755 index 0000000000..73b9ef226a --- /dev/null +++ b/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/register.xhtml @@ -0,0 +1,40 @@ + + + Register with #{login.name} + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + + + + +
+

By registering you agree to the Terms of Service and the Privacy Policy.

+
+ + +
+ + + +

Already have an account? Log in.

+ + \ No newline at end of file diff --git a/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/template.xhtml b/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/template.xhtml new file mode 100644 index 0000000000..2511a41969 --- /dev/null +++ b/sdk-html/src/main/resources/META-INF/resources/sdk/theme/saas/template.xhtml @@ -0,0 +1,65 @@ + + + + + + Log in to #{login.name} + + + + + + \ No newline at end of file