Skip to content
This repository has been archived by the owner on Apr 8, 2019. It is now read-only.

Commit

Permalink
GTNPORTAL-2909 OAuth design init
Browse files Browse the repository at this point in the history
  • Loading branch information
@mposolda
vrockai authored and mposolda committed May 7, 2013
1 parent 4d198df commit aef8ca7
Show file tree
Hide file tree
Showing 27 changed files with 903 additions and 302 deletions.
110 changes: 110 additions & 0 deletions mobile-integration/extension-login-war/src/main/webapp/login/css/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,4 +166,114 @@ input[type=checkbox]

#footer {
text-align:center;
}

#social-login {
text-align: center;
margin-bottom: 1em;
}

#social-login a.login-button {
border-radius: .5em;
border: .1em solid;
box-shadow: 0 .18em .31em rgba(0, 0, 0, 0.2);
display: block;

background-color: #a0a0a0;
background: linear-gradient(to bottom, #c0c0c0, #a0a0a0);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c0c0c0), to(#a0a0a0));
border-color:#A0A0A0;

text-decoration: none;

font-size: .75em;

margin: .62em .93em .31em .93em;
}

#social-login a.login-button:hover {
background-color: #b0b0b0;
background: linear-gradient(to bottom, #d0d0d0, #b0b0b0);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d0d0d0), to(#b0b0b0));
border-color:#b0b0b0;
}

#social-login a.login-button > div {
border: .1em solid;
border-radius: .5em;
color: white;
padding: .25em .5em .25em 1.84em;
background: url("/eXoResources/skin/DefaultSkin/portal/webui/component/widget/UILoginForm/background/generic.png") left no-repeat;
border-color: #D0D0D0 #D0D0D0 #B0B0B0;
}

#social-login #login-GOOGLE {
background-color: #ac2b1c;
background: linear-gradient(to bottom, #dd4b39, #ac2b1c);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dd4b39), to(#ac2b1c));
border-color:#8f301f #8f301f #8f301f #8f301f;
}

#social-login #login-GOOGLE:hover {
background-color: #bc3b2c;
background: linear-gradient(to bottom, #ed5b49, #bc3b2c);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ed5b49), to(#bc3b2c));
border-color:#9f402f;
}

#social-login #login-GOOGLE > div {
background: url("/eXoResources/skin/DefaultSkin/portal/webui/component/widget/UILoginForm/background/google.png") left no-repeat;
border-color: #ec9b8c #ec9b8c #dd4d29 #ec9b8c;
}

#social-login #login-FACEBOOK {
background-color: #4164a3;
background: linear-gradient(to bottom, #5a7aaf, #4164a3);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5a7aaf), to(#4164a3));
border-color:#1b386b;
}

#social-login #login-FACEBOOK:hover {
background-color: #5174b3;
background: linear-gradient(to bottom, #6a8abf, #5174b3);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6a8abf), to(#5174b3));
border-color:#2b487b;
}

#social-login #login-FACEBOOK > div {
background: url("/eXoResources/skin/DefaultSkin/portal/webui/component/widget/UILoginForm/background/facebook.png") left no-repeat;
border-color: #728cbc #728cbc #728cbc #728cbc;
}

#social-login #login-TWITTER {
background-color: #429dd5;
background: linear-gradient(to bottom, #52ade5, #429dd5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52ade5), to(#429dd5));
border-color:#328dc5;
}

#social-login #login-TWITTER:hover {
background: #52ade5;
background: linear-gradient(to bottom, #62bdf5, #52ade5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#62bdf5), to(#52ade5));
border-color:#429dd5;
}

#social-login #login-TWITTER > div {
background: url("/eXoResources/skin/DefaultSkin/portal/webui/component/widget/UILoginForm/background/twitter.png") left no-repeat;
border-color: #62bdf5 #62bdf5 #62bdf5 #62bdf5;
}

.SignInDelimiter {
margin: .31em 0;
text-align: center;
}

.SignInDelimiter span:before, .SignInDelimiter span:after {
background: none repeat scroll 0 0 red;
border-bottom: 0.0625em solid #E9E9E9;
display: inline-block;
content: "";
margin: .25em .87em;
width: 30%;
}
5 changes: 5 additions & 0 deletions mobile-integration/extension-login-war/src/main/webapp/login/css/enchanced.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,11 @@
label[for=rememberme], #forgot {
font-size: 0.84em;
}

#social-login a.login-button {
display: inline-block;
margin: 10px 5px 5px 5px;
}
}

/* Big screen devices ( >600px ) */
Expand Down
23 changes: 20 additions & 3 deletions mobile-integration/extension-login-war/src/main/webapp/login/jsp/login.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@
<%@ page import="javax.servlet.http.Cookie"%>
<%@ page import="org.exoplatform.container.PortalContainer"%>
<%@ page import="org.exoplatform.services.resources.ResourceBundleService"%>
<%@ page import="org.gatein.security.oauth.common.OAuthProviderType"%>
<%@ page import="org.gatein.security.oauth.registry.OAuthProviderTypeRegistry"%>;
<%@ page import="java.util.ResourceBundle"%>
<%@ page import="org.gatein.common.text.EntityEncoder"%>
<%@ page language="java"%>
Expand All @@ -38,10 +40,12 @@
username = encoder.encode(username);
}
ResourceBundleService service = (ResourceBundleService) PortalContainer.getCurrentInstance(session.getServletContext())
.getComponentInstanceOfType(ResourceBundleService.class);
PortalContainer portalContainer = PortalContainer.getCurrentInstance(session.getServletContext());
ResourceBundleService service = (ResourceBundleService) portalContainer.getComponentInstanceOfType(ResourceBundleService.class);
ResourceBundle res = service.getResourceBundle(service.getSharedResourceBundleNames(), request.getLocale()) ;
OAuthProviderTypeRegistry registry = (OAuthProviderTypeRegistry) portalContainer.getComponentInstanceOfType(OAuthProviderTypeRegistry.class);
Cookie cookie = new Cookie(org.exoplatform.web.login.LoginServlet.COOKIE_NAME, "");
cookie.setPath(request.getContextPath());
cookie.setMaxAge(0);
Expand Down Expand Up @@ -80,7 +84,20 @@
<% } %>
<form id="login-form" name="login-form" action="<%= contextPath + "/login"%>" method="post">
<fieldset>
<legend>Sign in</legend>
<legend>Sign in</legend>
<% if(registry.isOAuthEnabled()) { %>
<div id="social-login">
<% for (OAuthProviderType oauthProvType : registry.getEnabledOAuthProviders()) { %>
<a href="<%= oauthProvType.getInitOAuthURL(contextPath) %>" id="login-<%= oauthProvType.getKey() %>" class="login-button">
<div><%= res.getString("UILoginForm.label.SignInWith") %> <%= oauthProvType.getFriendlyName() %></div>
</a>
<% } %>
</div>

<div class="SignInDelimiter">
<span>or</span>
</div>
<% } %>
<label for="username"><%=res.getString("UILoginForm.label.UserName")%></label>
<input type="text" id="username" name="username" value=""/>

Expand Down
88 changes: 87 additions & 1 deletion ...in/src/main/webapp/skin/ResponsiveSkin/portal/webui/component/UILoginForm/UILoginForm.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,89 @@
display: inline;
}

.UILoginForm div.SocialLoginButtons {
text-align: center;
}

.UILoginForm a.login-button {
border-radius: 3px;
border: 1px solid;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
display: inline-block;

background-color: #d54529;
background-image: linear-gradient(to bottom, #dd4b39, #ac2b1c);
border-color:#8f301f #8f301f #8f301f #8f301f;

margin: 10px 5px 5px 5px;

}

.UILoginForm a.login-button > div {
border: .0714em solid;
color: white;
font-size: .875em;
padding: .2142em .4285em .2142em 1.5714em;
background: url("/eXoResources/skin/DefaultSkin/portal/webui/component/widget/UILoginForm/background/generic.png") left no-repeat;
border-color: #ec9b8c #ec9b8c #dd4d29 #ec9b8c;
}

.UILoginForm #login-GOOGLE {
background-color: #ac2b1c;
background: linear-gradient(to bottom, #dd4b39, #ac2b1c);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dd4b39), to(#ac2b1c));
border-color:#8f301f #8f301f #8f301f #8f301f;
}

.UILoginForm #login-GOOGLE:hover {
background-color: #bc3b2c;
background: linear-gradient(to bottom, #ed5b49, #bc3b2c);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ed5b49), to(#bc3b2c));
border-color:#9f402f;
}

.UILoginForm #login-GOOGLE > div {
background: url("/eXoResources/skin/DefaultSkin/portal/webui/component/widget/UILoginForm/background/google.png") left no-repeat;
border-color: #ec9b8c #ec9b8c #dd4d29 #ec9b8c;
}

.UILoginForm #login-FACEBOOK {
background-color: #4164a3;
background: linear-gradient(to bottom, #5a7aaf, #4164a3);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5a7aaf), to(#4164a3));
border-color:#1b386b;
}

.UILoginForm #login-FACEBOOK:hover {
background-color: #5174b3;
background: linear-gradient(to bottom, #6a8abf, #5174b3);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6a8abf), to(#5174b3));
border-color:#2b487b;
}

.UILoginForm #login-FACEBOOK > div {
background: url("/eXoResources/skin/DefaultSkin/portal/webui/component/widget/UILoginForm/background/facebook.png") left no-repeat;
border-color: #728cbc #728cbc #728cbc #728cbc;
}

.UILoginForm #login-TWITTER {
background-color: #429dd5;
background: linear-gradient(to bottom, #52ade5, #429dd5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52ade5), to(#429dd5));
border-color:#328dc5;
}

.UILoginForm #login-TWITTER:hover {
background: #52ade5;
background: linear-gradient(to bottom, #62bdf5, #52ade5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#62bdf5), to(#52ade5));
border-color:#429dd5;
}

.UILoginForm #login-TWITTER > div {
background: url("/eXoResources/skin/DefaultSkin/portal/webui/component/widget/UILoginForm/background/twitter.png") left no-repeat;
border-color: #62bdf5 #62bdf5 #62bdf5 #62bdf5;
}

@media screen and (max-width: 25em) {
.UILogin .UIFormGrid .UserNameField,.UILogin .UIFormGrid .PasswordField {
Expand Down Expand Up @@ -123,9 +206,12 @@
font-size: 0.75em;
margin: 0;
}

.UILogin .UIForm .UIAction .ActionButton {
width: 90%;
display: block;
}
.UILoginForm a.login-button {
display: block;
}
}

4 changes: 2 additions & 2 deletions ...let/exoadmin/src/main/java/org/exoplatform/account/webui/component/UIRegisterPortlet.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@

package org.exoplatform.account.webui.component;

import org.exoplatform.portal.webui.login.UISocialLoginButtons;
import org.exoplatform.portal.webui.register.UIRegisterEditMode;
import org.exoplatform.portal.webui.register.UIRegisterForm;
import org.exoplatform.portal.webui.register.UISocialRegisterButtons;
import org.exoplatform.webui.config.annotation.ComponentConfig;
import org.exoplatform.webui.core.UIPortletApplication;
import org.exoplatform.webui.core.lifecycle.UIApplicationLifecycle;
Expand All @@ -38,7 +38,7 @@ public class UIRegisterPortlet extends UIPortletApplication {

public UIRegisterPortlet() throws Exception {
addChild(UIRegisterForm.class, null, null);
addChild(UISocialLoginButtons.class, null, null);
addChild(UISocialRegisterButtons.class, null, null);
addChild(UIRegisterEditMode.class, null, null).setRendered(false);
}
}
15 changes: 8 additions & 7 deletions portlet/exoadmin/src/main/webapp/groovy/organization/webui/component/UIRegisterPortlet.gtmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,17 @@
<%
if(_ctx.getRequestContext().getApplicationMode() == PortletMode.VIEW)
{
uicomponent.renderChild("UIRegisterForm");
OAuthProviderTypeRegistry registry = uicomponent.getApplicationComponent(OAuthProviderTypeRegistry.class);
if (registry.isOAuthEnabled()) {
uicomponent.renderChild("UISocialRegisterButtons");

%>
<div>Subscribe with:
<p>
<% uicomponent.renderChild("UISocialLoginButtons"); %>
</div>

<% }
<div class="RegisterDelimiter">
<span><%=_ctx.appRes("UIRegisterForm.label.Or")%></span>
</div>
<%
}
uicomponent.renderChild("UIRegisterForm");
}
else
{
Expand Down
29 changes: 29 additions & 0 deletions ...xoadmin/src/main/webapp/groovy/organization/webui/component/UISocialRegisterButtons.gtmpl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<%
import org.gatein.security.oauth.common.OAuthProviderType;
import org.gatein.security.oauth.registry.OAuthProviderTypeRegistry;
import org.exoplatform.portal.webui.util.Util;
String contextPath = Util.getPortalRequestContext().getRequestContextPath();
%>

<div class="UIFormWithTitle">
<div class="TitleBar"><%=_ctx.appRes("UIRegisterForm.label.RegisterWith")%></div>
<div class="HorizontalLayout">
<div class="FormContainer">
<div class="SocialRegisterButtons">
<%
OAuthProviderTypeRegistry registry = uicomponent.getApplicationComponent(OAuthProviderTypeRegistry.class);
for (OAuthProviderType oauthProvType : registry.getEnabledOAuthProviders()) {
%>
<a href="<%= oauthProvType.getInitOAuthURL(contextPath); %>"" class="register-button register-<%= oauthProvType.getKey(); %>">
<div><%=_ctx.appRes("UIRegisterForm.label.RegisterWith")%> <%= oauthProvType.getFriendlyName(); %></div>
</a>
<%
}
%>
</div>
</div>
</div>
</div>
</div>


0 comments on commit aef8ca7

Please sign in to comment.