UI improvements for login screen

This commit is contained in:
fmittag committed 2014-11-04 17:57:31 +01:00
1 parent 8bb1b9f0d1
commit b18d733f18
19 files changed
+300 -160

No files matched your search

@@ -0,0 +1,43 @@
package com.sap.sse.security.ui.client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;
public interface IconResources extends ClientBundle {
public static final IconResources INSTANCE = GWT.create(IconResources.class);
@Source("com/sap/sse/security/ui/images/logo.png")
public ImageResource sapLogo();
@Source("com/sap/sse/security/ui/images/user.png")
ImageResource user();
@Source("com/sap/sse/security/ui/images/user_small.png")
ImageResource userSmall();
@Source("com/sap/sse/security/ui/images/user_icon.png")
ImageResource userIcon();
@Source("com/sap/sse/security/ui/images/status_red.png")
public ImageResource statusRed();
@Source("com/sap/sse/security/ui/images/status_green.png")
public ImageResource statusGreen();
@Source("com/sap/sse/security/ui/images/status_yellow.png")
public ImageResource statusYellow();
@Source("com/sap/sse/security/ui/images/status_blue.png")
public ImageResource statusBlue();
@Source("com/sap/sse/security/ui/images/status_grey.png")
public ImageResource statusGrey();
@Source("com/sap/sse/security/ui/images/delete.png")
public ImageResource delete();
@Source("com/sap/sse/gwt/client/images/remove.png")
public ImageResource remove();
}
@@ -2,7 +2,6 @@ package com.sap.sse.security.ui.client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;
import com.sap.sse.security.ui.loginpanel.Css;
public interface Resources extends ClientBundle {
@@ -11,13 +10,4 @@ public interface Resources extends ClientBundle {
@Source("css/LoginPanel.css")
public Css css();
@Source("com/sap/sse/security/ui/images/user.png")
ImageResource user();
@Source("com/sap/sse/security/ui/images/user_small.png")
ImageResource userSmall();
@Source("com/sap/sse/security/ui/images/user_icon.png")
ImageResource userIcon();
}
@@ -6,133 +6,70 @@ public interface StringMessages extends com.sap.sse.gwt.client.StringMessages {
public static final StringMessages INSTANCE = GWT.create(StringMessages.class);
String name();
String password();
String passwordRepeat();
String loggedIn(String username);
String signIn();
String invalidUsername();
String signUp();
String signOut();
String couldNotSignOut(String message);
String createUser();
String settings();
String filterUsers();
String welcome(String name);
String tryingToVerifyUser();
String fetchingUserInformation();
String signedInAs(String name);
String close();
String loading();
String users();
String addURLFilter();
String ok();
String cancel();
String username();
String email();
String usernameMustHaveAtLeastNCharacters(int minimumUsernameLength);
String passwordMustHaveAtLeastNCharacters(int minimumPasswordLength);
String passwordsDontMatch();
String couldNotCreateUser(String message);
String changePassword();
String userDetails();
String deleteUser();
String deleteUserQuestion();
String doYouReallyWantToDeleteUser(String username);
String errorDeletingUser();
String account(String accountType);
String save();
String remove();
String add();
String edit();
String errorUpdatingRoles(String username, String message);
String enterRoleName();
String errorCreatingUser(String username, String message);
String signedUpSuccessfully(String username);
String unknownErrorCreatingUser(String username);
String userAlreadyExists(String text);
String currentPassword();
String passwordSuccessfullyChanged();
String passwordDoesNotMeetRequirements();
String errorChangingPassword(String message);
String invalidCredentials();
String editEmail();
String errorUpdatingEmail(String message);
String successfullyUpdatedEmail(String username, String email);
String resetPassword();
String errorDuringPasswordReset(String message);
String cannotResetPasswordWithoutValidatedEmail(String username);
String newPasswordSent(String username);
String errorValidatingEmail(String username, String message);
String emailValidatedSuccessfully(String username);
String errorResettingPassword(String username, String message);
String successfullyResetPassword(String username);
String failedToSignIn();
String emailValidationUnsuccessful(String username);
String roles();
String signInWith();
String welcomeToSapSailing();
String pleaseSignIn();
}
@@ -62,4 +62,6 @@ successfullyResetPassword=Successfully reset password for user {0}. e-Mail has b
failedToSignIn=Failed to sign in. Check your credentials.
emailValidationUnsuccessful=Validation of e-mail address for user {0} failed. Did you really use the latest validation code?
roles=Roles
signInWith=Sign in with...
signInWith=Sign in with...
welcomeToSapSailing=Welcome to SAP Sailing.
pleaseSignIn=Please sign in.
@@ -62,4 +62,6 @@ successfullyResetPassword=Passwort für Benutzer {0} erfolgreich zurückgesetzt.
failedToSignIn=Anmeldung fehlgeschlagen. Zugangsdaten überprüfen.
emailValidationUnsuccessful=Validierung der e-Mail-Adresse für Benutzer {0} fehlgeschlagen. Handelte es sich wirklich um den zuletzt ausgestellten Validierungs-Code?
roles=Rollen
signInWith=Anmelden mit...
signInWith=Anmelden mit...
welcomeToSapSailing=Willkommen bei SAP Sailing.
pleaseSignIn=Bitte melden Sie sich an.
@@ -26,8 +26,8 @@ import com.google.gwt.user.client.ui.ScrollPanel;
import com.google.gwt.user.client.ui.TabLayoutPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.sap.sse.gwt.client.AbstractEntryPoint;
import com.sap.sse.security.ui.client.IconResources;
import com.sap.sse.security.ui.client.StringMessages;
import com.sap.sse.security.ui.client.resources.IconResources;
import com.sap.sse.security.ui.shared.UserManagementServiceAsync;
public class SettingsPanel extends LayoutPanel {
@@ -28,12 +28,11 @@ import com.sap.sse.gwt.client.controls.listedit.StringListEditorComposite;
import com.sap.sse.gwt.client.dialog.DataEntryDialog;
import com.sap.sse.security.shared.DefaultRoles;
import com.sap.sse.security.shared.UserManagementException;
import com.sap.sse.security.ui.client.Resources;
import com.sap.sse.security.ui.client.IconResources;
import com.sap.sse.security.ui.client.StringMessages;
import com.sap.sse.security.ui.client.UserChangeEventHandler;
import com.sap.sse.security.ui.client.UserService;
import com.sap.sse.security.ui.client.component.AbstractUserDialog.UserData;
import com.sap.sse.security.ui.client.resources.IconResources;
import com.sap.sse.security.ui.oauth.client.SocialUserDTO;
import com.sap.sse.security.ui.shared.AccountDTO;
import com.sap.sse.security.ui.shared.SuccessInfo;
@@ -116,7 +115,7 @@ public class UserDetailsView extends FlowPanel {
FlowPanel fp = new FlowPanel();
fp.setWidth("100%");
ImageResourceRenderer renderer = new ImageResourceRenderer();
final ImageResource userImageResource = Resources.INSTANCE.userSmall();
final ImageResource userImageResource = IconResources.INSTANCE.userSmall();
fp.add(new HTML(renderer.render(userImageResource)));
HorizontalPanel namePanel = new HorizontalPanel();
fp.add(namePanel);
@@ -5,6 +5,7 @@ import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.user.cellview.client.CellList;
import com.google.gwt.user.client.ui.ImageResourceRenderer;
import com.sap.sse.security.ui.client.IconResources;
import com.sap.sse.security.ui.shared.UserDTO;
public class UserList extends CellList<UserDTO> {
@@ -19,7 +20,7 @@ public class UserList extends CellList<UserDTO> {
return;
}
ImageResourceRenderer renderer = new ImageResourceRenderer();
final ImageResource userImageResource = com.sap.sse.security.ui.client.Resources.INSTANCE.userIcon();
final ImageResource userImageResource = IconResources.INSTANCE.userIcon();
sb.appendHtmlConstant("<table>");
sb.appendHtmlConstant("<tr>");
sb.appendHtmlConstant("<td>");
@@ -1,31 +0,0 @@
package com.sap.sse.security.ui.client.resources;
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;
public interface IconResources extends ClientBundle {
public static final IconResources INSTANCE = GWT.create(IconResources.class);
@Source("../../images/status_red.png")
public ImageResource statusRed();
@Source("../../images/status_green.png")
public ImageResource statusGreen();
@Source("../../images/status_yellow.png")
public ImageResource statusYellow();
@Source("../../images/status_blue.png")
public ImageResource statusBlue();
@Source("../../images/status_grey.png")
public ImageResource statusGrey();
@Source("../../images/delete.png")
public ImageResource delete();
@Source("com/sap/sse/gwt/client/images/remove.png")
public ImageResource remove();
}
@@ -6,41 +6,41 @@
<g:HTMLPanel>
<div>
<ui:text from='{i18n.signInWith}'/>
<g:Anchor href="javascript:;" styleName="{local_res.css.oauthLogo}" ui:field="facebookAnchor">
<img src="{local_res.facebookIcon.getSafeUri}" title="facebook" />
<g:Anchor href="javascript:;" ui:field="facebookAnchor">
<img src="{local_res.facebookIcon.getSafeUri}" class="{local_res.css.oauthLogo}" title="facebook" />
</g:Anchor>
<g:Anchor href="javascript:;" styleName="{local_res.css.oauthLogo}" ui:field="googleAnchor">
<img src="{local_res.googleIcon.getSafeUri}" title="Google"/>
<g:Anchor href="javascript:;" ui:field="googleAnchor">
<img src="{local_res.googleIcon.getSafeUri}" class="{local_res.css.oauthLogo}" title="Google"/>
</g:Anchor>
<g:Anchor href="javascript:;" styleName="{local_res.css.oauthLogo}" ui:field="twitterAnchor">
<img src="{local_res.twitterIcon.getSafeUri}" title="Twitter" />
<g:Anchor href="javascript:;" ui:field="twitterAnchor">
<img src="{local_res.twitterIcon.getSafeUri}" class="{local_res.css.oauthLogo}" title="Twitter" />
</g:Anchor>
<g:Anchor href="javascript:;" styleName="{local_res.css.oauthLogo}" ui:field="linkedinAnchor">
<img src="{local_res.linkedinIcon.getSafeUri}" title="LinkedIn" />
<g:Anchor href="javascript:;" ui:field="linkedinAnchor">
<img src="{local_res.linkedinIcon.getSafeUri}" class="{local_res.css.oauthLogo}" title="LinkedIn" />
</g:Anchor>
<g:Anchor href="javascript:;" styleName="{local_res.css.oauthLogo}" ui:field="yahooAnchor">
<img src="{local_res.yahooIcon.getSafeUri}" title="Yahoo" />
<g:Anchor href="javascript:;" ui:field="yahooAnchor">
<img src="{local_res.yahooIcon.getSafeUri}" class="{local_res.css.oauthLogo}" title="Yahoo" />
</g:Anchor>
<g:Anchor href="javascript:;" styleName="{local_res.css.oauthLogo}" ui:field="vimeoAnchor">
<img src="{local_res.vimeoIcon.getSafeUri}" title="Vimeo" />
<g:Anchor href="javascript:;" ui:field="vimeoAnchor">
<img src="{local_res.vimeoIcon.getSafeUri}" class="{local_res.css.oauthLogo}" title="Vimeo" />
</g:Anchor>
<g:Anchor href="javascript:;" styleName="{local_res.css.oauthLogo}" ui:field="githubAnchor">
<img src="{local_res.githubIcon.getSafeUri}" title="github" />
<g:Anchor href="javascript:;" ui:field="githubAnchor">
<img src="{local_res.githubIcon.getSafeUri}" class="{local_res.css.oauthLogo}" title="github" />
</g:Anchor>
<g:Anchor href="javascript:;" styleName="{local_res.css.oauthLogo}" ui:field="instagramAnchor">
<img src="{local_res.instagramIcon.getSafeUri}" title="Instagram" />
<g:Anchor href="javascript:;" ui:field="instagramAnchor">
<img src="{local_res.instagramIcon.getSafeUri}" class="{local_res.css.oauthLogo}" title="Instagram" />
</g:Anchor>
<g:Anchor href="javascript:;" styleName="{local_res.css.oauthLogo}" ui:field="flickrAnchor">
<img src="{local_res.flickrIcon.getSafeUri}" title="flickr" />
<g:Anchor href="javascript:;" ui:field="flickrAnchor">
<img src="{local_res.flickrIcon.getSafeUri}" class="{local_res.css.oauthLogo}" title="flickr" />
</g:Anchor>
<g:Anchor href="javascript:;" styleName="{local_res.css.oauthLogo}" ui:field="liveAnchor">
<img src="{local_res.liveIcon.getSafeUri}" title="Windows Live" />
<g:Anchor href="javascript:;" ui:field="liveAnchor">
<img src="{local_res.liveIcon.getSafeUri}" class="{local_res.css.oauthLogo}" title="Windows Live" />
</g:Anchor>
<g:Anchor href="javascript:;" styleName="{local_res.css.oauthLogo}" ui:field="tumblrAnchor">
<img src="{local_res.tumblrIcon.getSafeUri}" title="tumblr." />
<g:Anchor href="javascript:;" ui:field="tumblrAnchor">
<img src="{local_res.tumblrIcon.getSafeUri}" class="{local_res.css.oauthLogo}" title="tumblr." />
</g:Anchor>
<g:Anchor href="javascript:;" styleName="{local_res.css.oauthLogo}" ui:field="foursquareAnchor">
<img src="{local_res.foursquareIcon.getSafeUri}" title="foursquare" />
<g:Anchor href="javascript:;" ui:field="foursquareAnchor">
<img src="{local_res.foursquareIcon.getSafeUri}" class="{local_res.css.oauthLogo}" title="foursquare" />
</g:Anchor>
</div>
</g:HTMLPanel>
@@ -1,4 +1,4 @@
.oauthLogo {
width: 11px;
height: 11px;
width: 16px;
height: 16px;
}
@@ -13,8 +13,6 @@ import com.google.gwt.user.client.ui.Anchor;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.PasswordTextBox;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;
import com.sap.sse.gwt.client.async.MarkedAsyncCallback;
import com.sap.sse.security.shared.UserManagementException;
@@ -34,9 +32,9 @@ public class LoginView extends Composite {
private final UserManagementServiceAsync userManagementService;
private final UserService userService;
@UiField TextBox userNameTextBox;
@UiField TextBoxWithWatermark userNameTextBox;
@UiField Button passwordResetButton;
@UiField PasswordTextBox passwordTextBox;
@UiField PasswordTextBoxWithWatermark passwordTextBox;
@UiField Button loginButton;
@UiField Anchor signUpAnchor;
@UiField HTMLPanel oAuthPanel;
@@ -49,6 +47,9 @@ public class LoginView extends Composite {
initWidget(uiBinder.createAndBindUi(this));
userNameTextBox.setWatermark(StringMessages.INSTANCE.username());
passwordTextBox.setWatermark(StringMessages.INSTANCE.password());
String registrationLink = EntryPointLinkFactory.createRegistrationLink(Collections.<String, String> emptyMap());
signUpAnchor.setHref(registrationLink);
@@ -1,21 +1,26 @@
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:s="urn:import:com.sap.sse.security.ui.login">
<ui:with field="i18n" type="com.sap.sse.security.ui.client.StringMessages"/>
<ui:with field="icon_res" type="com.sap.sse.security.ui.client.IconResources" />
<ui:with field="local_res" type="com.sap.sse.security.ui.login.LoginViewResources" />
<g:HTMLPanel styleName="{local_res.css.loginform}">
<div styleName="{local_res.css.loginform_header}">
Login to SAP Sailing Analytics
<div class="{local_res.css.loginform_header}">
<img src="{icon_res.sapLogo.getSafeUri}" />
</div>
<div styleName="{local_res.css.loginform_content}">
<div><ui:text from='{i18n.username}'/></div>
<div><g:TextBox ui:field="userNameTextBox" /></div>
<div><ui:text from='{i18n.password}'/></div>
<div><g:PasswordTextBox ui:field="passwordTextBox" /></div>
<g:Button ui:field="loginButton" text="{i18n.signIn}" />
<g:Button ui:field="passwordResetButton" text="{i18n.resetPassword}" />
<g:Anchor ui:field="signUpAnchor" text="{i18n.signUp}" />
<div class="{local_res.css.loginform_content}">
<div><ui:text from="{i18n.welcomeToSapSailing}" /><ui:text from="{i18n.pleaseSignIn}" /></div>
<div><s:TextBoxWithWatermark ui:field="userNameTextBox" styleName="{local_res.css.glowing_border}" /></div>
<div>
<s:PasswordTextBoxWithWatermark ui:field="passwordTextBox" styleName="{local_res.css.glowing_border}" />
<g:Button ui:field="loginButton" text="{i18n.signIn}" styleName="{local_res.css.button}" />
</div>
<g:HTMLPanel ui:field="oAuthPanel" />
<g:Button ui:field="passwordResetButton" text="{i18n.resetPassword}" styleName="{local_res.css.button}" />
<hr/>
<div>New to SAP Sailing?</div>
<g:Anchor ui:field="signUpAnchor" text="{i18n.signUp}" />
</div>
</g:HTMLPanel>
</ui:UiBinder>
</ui:UiBinder>
@@ -13,13 +13,58 @@ body {
display:table;/* shrinks to fit conntent */
margin:auto;
border: 1px solid gray;
line-height: 2.0;
}
.loginform_header {
height: 1.5em;
background-color: lightgray;
color: blue;
min-height: 40px;
background-color: #333333;
border-bottom: 4px solid #f0ab00;
color: white;
}
.loginform_content {
padding: 10px;
}
.textInput_watermark {
color: gray;
}
.passwordTextInput_watermark {
color: ;
}
.glowing_border {
border: 2px solid #dadada;
}
.glowing_border:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
.button {
font-size: 15px;
font-size: 1rem;
display: inline-block;
font-weight: 600;
color: #fff;
border: none;
line-height: 0.75em;
padding: 0.666666666666667em 1.133333333333333em;
background-color: #f0ab00;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
-ms-transition: background-color 0.2s;
transition: background-color 0.2s;
text-decoration: none;
}
.button:hover,
.button:focus {
background-color: #d89a00;
outline: none;
text-decoration: none;
}
@@ -14,5 +14,9 @@ public interface LoginViewResources extends ClientBundle {
String loginform();
String loginform_header();
String loginform_content();
String textInput_watermark();
String passwordTextInput_watermark();
String glowing_border();
String button();
}
}
@@ -0,0 +1,71 @@
package com.sap.sse.security.ui.login;
import com.google.gwt.event.dom.client.BlurEvent;
import com.google.gwt.event.dom.client.BlurHandler;
import com.google.gwt.event.dom.client.FocusEvent;
import com.google.gwt.event.dom.client.FocusHandler;
import com.google.gwt.user.client.ui.PasswordTextBox;
import com.google.web.bindery.event.shared.HandlerRegistration;
public class PasswordTextBoxWithWatermark extends PasswordTextBox implements BlurHandler, FocusHandler {
private String watermark;
private HandlerRegistration blurHandler;
private HandlerRegistration focusHandler;
public PasswordTextBoxWithWatermark() {
super();
}
public PasswordTextBoxWithWatermark(String defaultValue) {
this();
setText(defaultValue);
}
public PasswordTextBoxWithWatermark(String defaultValue, String watermark) {
this(defaultValue);
setWatermark(watermark);
}
/**
* Adds a watermark if the parameter is not NULL or EMPTY
*
* @param watermark
*/
public void setWatermark(final String watermark) {
this.watermark = watermark;
if (watermark != null && !watermark.isEmpty()) {
blurHandler = addBlurHandler(this);
focusHandler = addFocusHandler(this);
enableWatermark();
} else {
// Remove handlers
blurHandler.removeHandler();
focusHandler.removeHandler();
}
}
@Override
public void onBlur(BlurEvent event) {
enableWatermark();
}
void enableWatermark() {
String text = getText();
if ((text.length() == 0) || (text.equalsIgnoreCase(watermark))) {
// Show watermark
setText(watermark);
addStyleName(LoginViewResources.INSTANCE.css().passwordTextInput_watermark());
}
}
@Override
public void onFocus(FocusEvent event) {
removeStyleName(LoginViewResources.INSTANCE.css().passwordTextInput_watermark());
if (getText().equalsIgnoreCase(watermark)) {
// Hide watermark
setText("");
}
}
}
@@ -0,0 +1,71 @@
package com.sap.sse.security.ui.login;
import com.google.gwt.event.dom.client.BlurEvent;
import com.google.gwt.event.dom.client.BlurHandler;
import com.google.gwt.event.dom.client.FocusEvent;
import com.google.gwt.event.dom.client.FocusHandler;
import com.google.gwt.user.client.ui.TextBox;
import com.google.web.bindery.event.shared.HandlerRegistration;
public class TextBoxWithWatermark extends TextBox implements BlurHandler, FocusHandler {
private String watermark;
private HandlerRegistration blurHandler;
private HandlerRegistration focusHandler;
public TextBoxWithWatermark() {
super();
}
public TextBoxWithWatermark(String defaultValue) {
this();
setText(defaultValue);
}
public TextBoxWithWatermark(String defaultValue, String watermark) {
this(defaultValue);
setWatermark(watermark);
}
/**
* Adds a watermark if the parameter is not NULL or EMPTY
*
* @param watermark
*/
public void setWatermark(final String watermark) {
this.watermark = watermark;
if (watermark != null && !watermark.isEmpty()) {
blurHandler = addBlurHandler(this);
focusHandler = addFocusHandler(this);
enableWatermark();
} else {
// Remove handlers
blurHandler.removeHandler();
focusHandler.removeHandler();
}
}
@Override
public void onBlur(BlurEvent event) {
enableWatermark();
}
void enableWatermark() {
String text = getText();
if ((text.length() == 0) || (text.equalsIgnoreCase(watermark))) {
// Show watermark
setText(watermark);
addStyleName(LoginViewResources.INSTANCE.css().textInput_watermark());
}
}
@Override
public void onFocus(FocusEvent event) {
removeStyleName(LoginViewResources.INSTANCE.css().textInput_watermark());
if (getText().equalsIgnoreCase(watermark)) {
// Hide watermark
setText("");
}
}
}
@@ -16,7 +16,7 @@ import com.google.gwt.user.client.ui.Label;
import com.sap.sse.gwt.client.async.MarkedAsyncCallback;
import com.sap.sse.gwt.client.dialog.DataEntryDialog.DialogCallback;
import com.sap.sse.security.ui.client.EntryPointLinkFactory;
import com.sap.sse.security.ui.client.Resources;
import com.sap.sse.security.ui.client.IconResources;
import com.sap.sse.security.ui.client.StringMessages;
import com.sap.sse.security.ui.client.UserService;
import com.sap.sse.security.ui.client.UserStatusEventHandler;
@@ -105,7 +105,7 @@ public class LoginPanel extends HorizontalPanel implements UserStatusEventHandle
}
});
final ImageResource userImageResource = Resources.INSTANCE.userIcon();
final ImageResource userImageResource = IconResources.INSTANCE.userIcon();
ImageResourceRenderer renderer = new ImageResourceRenderer();
final HTML imageContainer = new HTML(renderer.render(userImageResource));
imageContainer.getElement().addClassName(css.userIcon());
Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB