Moved authentication related view implementations to sse.security.ui

2026-10-17 01:31:01 +00:00 · 2016-01-26 11:08:00 +01:00
1 parent 4bb7c26782
commit 14f8e66dcb
@@ -0,0 +1,30 @@
+package com.sap.sse.security.ui.authentication.confirm;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.Label;
+import com.google.gwt.user.client.ui.Widget;
+import com.sap.sse.security.ui.authentication.UserManagementSharedResources;
+
+public class ConfirmationInfoViewImpl extends Composite implements ConfirmationInfoView {
+    private static WidgetUiBinder uiBinder = GWT.create(WidgetUiBinder.class);
+
+    interface WidgetUiBinder extends UiBinder<Widget, ConfirmationInfoViewImpl> {
+    }
+
+    @UiField protected Label messageUi;
+    @UiField(provided = true) final UserManagementSharedResources res;
+
+    public ConfirmationInfoViewImpl(UserManagementSharedResources resources) {
+        this.res = resources;
+        initWidget(uiBinder.createAndBindUi(this));
+    }
+    
+    @Override
+    public void setMessage(String message) {
+        messageUi.setText(message);
+    }
+
+}
@@ -0,0 +1,7 @@
+<!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">
+    <ui:with field="res" type="com.sap.sse.security.ui.authentication.UserManagementSharedResources" />
+    <ui:with field="local_res" type="com.sap.sse.security.ui.authentication.UserManagementResources" />
+    <g:Label addStyleNames="{local_res.css.form_description}" ui:field="messageUi"></g:Label>
+</ui:UiBinder>    
@@ -0,0 +1,143 @@
+package com.sap.sse.security.ui.authentication.create;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.DivElement;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.KeyCodes;
+import com.google.gwt.event.dom.client.KeyUpEvent;
+import com.google.gwt.event.dom.client.KeyUpHandler;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Button;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.HasEnabled;
+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.security.ui.authentication.UserManagementResources;
+import com.sap.sse.security.ui.authentication.UserManagementSharedResources;
+import com.sap.sse.security.ui.client.i18n.StringMessages;
+
+public class CreateAccountViewImpl extends Composite implements CreateAccountView {
+    
+    interface CreateAccountViewImplUiBinder extends UiBinder<Widget, CreateAccountViewImpl> {
+    }
+    
+    private static CreateAccountViewImplUiBinder uiBinder = GWT.create(CreateAccountViewImplUiBinder.class);
+    
+    @UiField TextBox emailUi;
+    @UiField TextBox usernameUi;
+    @UiField TextBox nameUi;
+    @UiField TextBox companyUi;
+    @UiField PasswordTextBox passwordUi;
+    @UiField PasswordTextBox passwordConfirmationUi;
+    @UiField Button createAccountUi;
+    @UiField Button signInUi;
+    
+    @UiField DivElement formErrorUi;
+    
+    @UiField(provided = true)
+    final UserManagementSharedResources res;
+
+    private Presenter presenter;
+    
+    public CreateAccountViewImpl(UserManagementSharedResources resources) {
+        this.res = resources;
+        UserManagementResources.INSTANCE.css().ensureInjected();
+        initWidget(uiBinder.createAndBindUi(this));
+        
+        StringMessages i18n = StringMessages.INSTANCE;
+        setPlaceholder(passwordUi, i18n.newPasswordPlaceholder());
+        setPlaceholder(passwordConfirmationUi, i18n.passwordRepeatPlaceholder());
+        
+        emailUi.addKeyUpHandler(new FieldKeyUpHandler() {
+            @Override
+            void updateFieldValue() {
+                presenter.onChangeEmail(emailUi.getValue());
+            }
+        });
+        usernameUi.addKeyUpHandler(new FieldKeyUpHandler() {
+            @Override
+            void updateFieldValue() {
+                presenter.onChangeUsername(usernameUi.getValue());
+            }
+        });
+        nameUi.addKeyUpHandler(new FieldKeyUpHandler() {
+            @Override
+            void updateFieldValue() {
+                presenter.onChangeFullName(nameUi.getValue());
+            }
+        });
+        companyUi.addKeyUpHandler(new FieldKeyUpHandler() {
+            @Override
+            void updateFieldValue() {
+                presenter.onChangeCompany(companyUi.getValue());
+            }
+        });
+        passwordUi.addKeyUpHandler(new FieldKeyUpHandler() {
+            @Override
+            void updateFieldValue() {
+                presenter.onChangePassword(passwordUi.getValue());
+            }
+        });
+        passwordConfirmationUi.addKeyUpHandler(new FieldKeyUpHandler() {
+            @Override
+            void updateFieldValue() {
+                presenter.onChangePasswordConfirmation(passwordConfirmationUi.getValue());
+            }
+        });
+    }
+    
+    @Override
+    public HasEnabled getCreateAccountControl() {
+        return createAccountUi;
+    }
+    
+    @Override
+    public void setPresenter(Presenter presenter) {
+        this.presenter = presenter;
+    }
+    
+    @Override
+    public void setErrorMessage(String errorMessage) {
+        formErrorUi.setInnerText(errorMessage);
+    }
+    
+    @Override
+    protected void onLoad() {
+        selectAll(emailUi);
+    }
+    
+    @UiHandler("createAccountUi")
+    void onCreateAccountUiControlClicked(ClickEvent event) {
+        presenter.createAccount();
+    }
+    
+    @UiHandler("signInUi")
+    void onSignInControlUiClicked(ClickEvent event) {
+        presenter.signIn();
+    }
+    
+    private void setPlaceholder(Widget widget, String placeholderText) {
+        widget.getElement().setAttribute("placeholder", placeholderText);
+    }
+    
+    private void selectAll(TextBox textBox) {
+        textBox.setFocus(true);
+        textBox.selectAll();
+    }
+    
+    private abstract class FieldKeyUpHandler implements KeyUpHandler {
+        @Override
+        public void onKeyUp(KeyUpEvent event) {
+            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
+                presenter.createAccount();
+            } else {
+                updateFieldValue();
+            }
+        }
+        
+        abstract void updateFieldValue();
+    }
+}
@@ -0,0 +1,28 @@
+<!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">
+    <ui:with field="i18n_sec" type="com.sap.sse.security.ui.client.i18n.StringMessages" />
+    <ui:with field="res" type="com.sap.sse.security.ui.authentication.UserManagementSharedResources" />
+    <ui:with field="local_res" type="com.sap.sse.security.ui.authentication.UserManagementResources" />
+    <g:HTMLPanel>
+        <div class="{local_res.css.form_description}"><ui:text from="{i18n_sec.generalWelcome}" /></div>
+        <div class="{local_res.css.form_errors}" ui:field="formErrorUi"></div>
+        <label class="{local_res.css.form_label}"><ui:text from="{i18n_sec.email}" /></label>
+        <g:TextBox addStyleNames="{local_res.css.form_input}" ui:field="emailUi"/>
+        <label class="{local_res.css.form_label}"><ui:text from="{i18n_sec.username}" /></label>
+        <g:TextBox addStyleNames="{local_res.css.form_input}" ui:field="usernameUi"/>
+        <label class="{local_res.css.form_label}"><ui:text from="{i18n_sec.name}" /></label>
+        <g:TextBox addStyleNames="{local_res.css.form_input}" ui:field="nameUi"/>
+        <label class="{local_res.css.form_label}"><ui:text from="{i18n_sec.company}" /></label>
+        <g:TextBox addStyleNames="{local_res.css.form_input}" ui:field="companyUi"/>
+        <label class="{local_res.css.form_label}"><ui:text from="{i18n_sec.password}" /></label>
+        <g:PasswordTextBox addStyleNames="{local_res.css.form_input}" ui:field="passwordUi"/>
+        <label class="{local_res.css.form_label}"><ui:text from="{i18n_sec.passwordRepeat}" /></label>
+        <g:PasswordTextBox addStyleNames="{local_res.css.form_input}" ui:field="passwordConfirmationUi"/>
+        <div class="{local_res.css.form_actions}">
+            <g:Button addStyleNames="{local_res.css.form_action_button} {res.mainCss.button} {res.mainCss.buttonprimaryoutlined}" 
+                    ui:field="signInUi"><ui:text from="{i18n_sec.signIn}" /></g:Button>
+            <g:Button addStyleNames="{local_res.css.form_action_button} {res.mainCss.button} {res.mainCss.buttonprimary} {res.mainCss.buttonarrowrightwhite}" 
+                    ui:field="createAccountUi"><ui:text from="{i18n_sec.signUp}" /></g:Button>
+        </div>
+    </g:HTMLPanel>
+</ui:UiBinder>
@@ -0,0 +1,64 @@
+package com.sap.sse.security.ui.authentication.info;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.DivElement;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Anchor;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.Widget;
+import com.sap.sse.security.ui.authentication.UserManagementResources;
+import com.sap.sse.security.ui.authentication.UserManagementSharedResources;
+import com.sap.sse.security.ui.authentication.app.AuthenticationContext;
+
+public class LoggedInUserInfoViewImpl extends Composite implements LoggedInUserInfoView {
+    
+    interface LoggedInUserInfoUiBinder extends UiBinder<Widget, LoggedInUserInfoViewImpl> {
+    }
+    
+    private static LoggedInUserInfoUiBinder uiBinder = GWT.create(LoggedInUserInfoUiBinder.class);
+    
+    @UiField DivElement userImageUi;
+    @UiField DivElement userRealnameUi;
+    @UiField DivElement userUsernameUi;
+
+    @UiField Anchor userProfileUi;
+    @UiField Anchor signOutUi;
+    
+    @UiField(provided = true)
+    final UserManagementSharedResources res;
+    
+    private Presenter presenter;
+    
+    public LoggedInUserInfoViewImpl(UserManagementSharedResources resources) {
+        this.res = resources;
+        UserManagementResources.INSTANCE.css().ensureInjected();
+        initWidget(uiBinder.createAndBindUi(this));
+    }
+    
+    @Override
+    public void setUserInfo(AuthenticationContext userManagementContext) {
+        userImageUi.getStyle().setBackgroundImage("url('images/home/userdefault.svg')");
+        
+        userRealnameUi.setInnerText(userManagementContext.getUserTitle());
+        userUsernameUi.setInnerText(userManagementContext.getUserSubtitle());
+    }
+    
+    @UiHandler("userProfileUi")
+    void onUserProfileUiControlClicked(ClickEvent event) {
+        this.presenter.gotoProfileUi();
+    }
+    
+    @UiHandler("signOutUi")
+    void onSignOutUiControlClicked(ClickEvent event) {
+        this.presenter.signOut();
+    }
+
+    @Override
+    public void setPresenter(Presenter presenter) {
+        this.presenter = presenter;
+    }
+    
+}
@@ -0,0 +1,22 @@
+<!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">
+    <ui:with field="i18n_sec" type="com.sap.sse.security.ui.client.i18n.StringMessages" />
+    <ui:with field="res" type="com.sap.sse.security.ui.authentication.UserManagementSharedResources" />
+    <ui:with field="local_res" type="com.sap.sse.security.ui.authentication.UserManagementResources" />
+    <g:HTMLPanel>
+        <div class="{local_res.css.form_title} {local_res.css.form_subtitle}"><ui:text from="{i18n_sec.signedInAsTitle}" /></div>
+        <div class="{local_res.css.info_user}">
+            <div class="{local_res.css.info_user_image}">
+                <div class="{local_res.css.info_user_image_item}" ui:field="userImageUi"></div>
+            </div>
+            <div class="{local_res.css.info_user_realname}" ui:field="userRealnameUi"></div>
+            <div class="{local_res.css.info_user_username}" ui:field="userUsernameUi"></div>
+        </div>
+         <div class="{local_res.css.form_actions}">
+            <g:Anchor addStyleNames="{local_res.css.form_action_button} {res.mainCss.button} {res.mainCss.buttonprimaryoutlined}" 
+                    ui:field="userProfileUi"><ui:text from="{i18n_sec.userDetails}" /></g:Anchor>
+            <g:Anchor addStyleNames="{local_res.css.form_action_button} {res.mainCss.button} {res.mainCss.buttonprimaryoutlined}" 
+                    ui:field="signOutUi"><ui:text from="{i18n_sec.signOut}" /></g:Anchor>
+        </div>
+    </g:HTMLPanel>
+</ui:UiBinder>
@@ -0,0 +1,76 @@
+package com.sap.sse.security.ui.authentication.recover;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.DivElement;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.KeyCodes;
+import com.google.gwt.event.dom.client.KeyUpEvent;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.TextBox;
+import com.google.gwt.user.client.ui.Widget;
+import com.sap.sse.security.ui.authentication.UserManagementResources;
+import com.sap.sse.security.ui.authentication.UserManagementSharedResources;
+
+public class PasswordRecoveryViewImpl extends Composite implements PasswordRecoveryView {
+    
+    interface PasswordRecoveryViewImplUiBinder extends UiBinder<Widget, PasswordRecoveryViewImpl> {
+    }
+    
+    private static PasswordRecoveryViewImplUiBinder uiBinder = GWT.create(PasswordRecoveryViewImplUiBinder.class);
+    
+    @UiField TextBox emailUi;
+    @UiField TextBox usernameUi;
+    
+    @UiField DivElement formErrorUi;
+    
+    @UiField(provided = true)
+    final UserManagementSharedResources res;
+
+    private Presenter presenter;
+    
+    public PasswordRecoveryViewImpl(UserManagementSharedResources resources) {
+        this.res = resources;
+        UserManagementResources.INSTANCE.css().ensureInjected();
+        initWidget(uiBinder.createAndBindUi(this));
+    }
+    
+    @Override
+    public void setPresenter(Presenter presenter) {
+        this.presenter = presenter;
+    }
+
+    @Override
+    public void setErrorMessage(String errorMessage) {
+        formErrorUi.setInnerText(errorMessage);
+        selectAll(usernameUi.getValue().isEmpty() ? emailUi : usernameUi);
+    }
+    
+    @Override
+    protected void onLoad() {
+        selectAll(emailUi);
+    }
+    
+    @UiHandler("resetPasswordUi")
+    void onResetPasswordUiControlClicked(ClickEvent event) {
+        triggerPasswordReset();
+    }
+    
+    @UiHandler({ "emailUi", "usernameUi"})
+    void onResetPasswordKeyPressed(KeyUpEvent event) {
+        if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
+            triggerPasswordReset();
+        }
+    }
+    
+    private void triggerPasswordReset() {
+        presenter.resetPassword(emailUi.getValue(), usernameUi.getValue());
+    }
+    
+    private void selectAll(TextBox textBox) {
+        textBox.setFocus(true);
+        textBox.selectAll();
+    }
+}
@@ -0,0 +1,18 @@
+<!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">
+    <ui:with field="i18n_sec" type="com.sap.sse.security.ui.client.i18n.StringMessages" />
+    <ui:with field="res" type="com.sap.sse.security.ui.authentication.UserManagementSharedResources" />
+    <ui:with field="local_res" type="com.sap.sse.security.ui.authentication.UserManagementResources" />
+    <g:HTMLPanel>
+        <div class="{local_res.css.form_description}"><ui:text from="{i18n_sec.enterUsernameOrEmail}" /></div>
+        <div class="{local_res.css.form_errors}" ui:field="formErrorUi"></div>
+        <label class="{local_res.css.form_label}"><ui:text from="{i18n_sec.email}" /></label>
+        <g:TextBox addStyleNames="{local_res.css.form_input}" ui:field="emailUi"/>
+        <label class="{local_res.css.form_label}"><ui:text from="{i18n_sec.username}" /></label>
+        <g:TextBox addStyleNames="{local_res.css.form_input}" ui:field="usernameUi"/>
+        <div class="{local_res.css.form_actions}">
+            <g:Anchor addStyleNames="{local_res.css.form_action_button} {res.mainCss.button} {res.mainCss.buttonprimary} {res.mainCss.buttonarrowrightwhite}" 
+                    ui:field="resetPasswordUi"><ui:text from="{i18n_sec.resetPassword}" /></g:Anchor>
+        </div>
+    </g:HTMLPanel>
+</ui:UiBinder>
@@ -0,0 +1,108 @@
+package com.sap.sse.security.ui.authentication.signin;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.DivElement;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.KeyCodes;
+import com.google.gwt.event.dom.client.KeyUpEvent;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Anchor;
+import com.google.gwt.user.client.ui.Composite;
+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.security.ui.authentication.UserManagementResources;
+import com.sap.sse.security.ui.authentication.UserManagementSharedResources;
+
+public class SignInViewImpl extends Composite implements SignInView {
+    
+    interface SignInViewImplUiBinder extends UiBinder<Widget, SignInViewImpl> {
+    }
+    
+    private static SignInViewImplUiBinder uiBinder = GWT.create(SignInViewImplUiBinder.class);
+    
+    @UiField TextBox loginNameUi;
+    @UiField PasswordTextBox passwordUi;
+    @UiField Anchor forgotPasswordUi;
+    @UiField Anchor createAccountUi;
+    @UiField Anchor signInUi;
+    @UiField Anchor loginFacebookUi;
+    @UiField Anchor loginGoogleUi;
+    
+    @UiField DivElement formErrorUi;
+    @UiField DivElement socialLoginUi;
+    
+    @UiField(provided = true)
+    final UserManagementSharedResources res;
+
+    private Presenter presenter;
+
+    public SignInViewImpl(UserManagementSharedResources resources) {
+        this.res = resources;
+        UserManagementResources.INSTANCE.css().ensureInjected();
+        initWidget(uiBinder.createAndBindUi(this));
+        
+        // TODO implement social login functionality
+        socialLoginUi.removeFromParent();
+    }
+    
+    @Override
+    public void setPresenter(Presenter presenter) {
+        this.presenter = presenter;
+    }
+    
+    @Override
+    public void setErrorMessage(String errorMessage) {
+        formErrorUi.setInnerText(errorMessage);
+        selectAll(passwordUi.getValue().isEmpty() ? loginNameUi : passwordUi);
+    }
+    
+    @Override
+    protected void onLoad() {
+        selectAll(loginNameUi);
+    }
+    
+    @UiHandler("forgotPasswordUi")
+    void onForgotPasswordUiControlClicked(ClickEvent event) {
+        presenter.forgotPassword();
+    }
+    
+    @UiHandler("createAccountUi")
+    void onCreateAccountUiControlClicked(ClickEvent event) {
+        presenter.createAccount();
+    }
+    
+    @UiHandler("signInUi")
+    void onSignInControlUiClicked(ClickEvent event) {
+        triggerLogin();
+    }
+    
+    @UiHandler({"loginNameUi","passwordUi"}) 
+    void onSignInKeyPressed(KeyUpEvent event) {
+        if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
+            triggerLogin();
+        }
+    }
+    
+    @UiHandler("loginFacebookUi")
+    void onLoginFacebookUiClicked(ClickEvent event) {
+        presenter.loginWithFacebook();
+    }
+    
+    @UiHandler("loginGoogleUi")
+    void onLoginGoogleUiClicked(ClickEvent event) {
+        presenter.loginWithGoogle(); 
+    }
+    
+    private void triggerLogin() {
+        presenter.login(loginNameUi.getValue(), passwordUi.getValue());
+    }
+    
+    private void selectAll(TextBox textBox) {
+        textBox.setFocus(true);
+        textBox.selectAll();
+    }
+    
+}
@@ -0,0 +1,29 @@
+<!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">
+    <ui:with field="i18n_sec" type="com.sap.sse.security.ui.client.i18n.StringMessages" />
+    <ui:with field="res" type="com.sap.sse.security.ui.authentication.UserManagementSharedResources" />
+    <ui:with field="local_res" type="com.sap.sse.security.ui.authentication.UserManagementResources" />
+    <g:HTMLPanel>
+        <div class="{local_res.css.form_errors}" ui:field="formErrorUi"></div>
+        <label class="{local_res.css.form_label}"><ui:text from="{i18n_sec.username}" /></label>
+        <g:TextBox addStyleNames="{local_res.css.form_input}" ui:field="loginNameUi"/>
+        <label class="{local_res.css.form_label}"><ui:text from="{i18n_sec.password}" /></label>
+        <g:PasswordTextBox addStyleNames="{local_res.css.form_input}" ui:field="passwordUi"/>
+        <g:Anchor addStyleNames="{local_res.css.form_link}" ui:field="forgotPasswordUi"><ui:text from="{i18n_sec.forgotPassword}" /></g:Anchor>
+        <div class="{local_res.css.form_actions}">
+            <g:Anchor addStyleNames="{local_res.css.form_action_button} {res.mainCss.button} {res.mainCss.buttonprimaryoutlined}" 
+                    ui:field="createAccountUi"><ui:text from="{i18n_sec.signUp}" /></g:Anchor>
+            <g:Anchor addStyleNames="{local_res.css.form_action_button} {res.mainCss.button} {res.mainCss.buttonprimary} {res.mainCss.buttonarrowrightwhite}" 
+                    ui:field="signInUi"><ui:text from="{i18n_sec.signIn}" /></g:Anchor>
+        </div>
+        <div ui:field="socialLoginUi">
+            <div class="{local_res.css.form_social_seperator}">
+                <div class="{local_res.css.form_social_seperator_text}">TODO or</div>
+            </div>
+            <g:Anchor addStyleNames="{local_res.css.form_social_button} {local_res.css.form_social_button_facebook}"
+                    ui:field="loginFacebookUi">TODO Login with Facebook</g:Anchor>
+            <g:Anchor addStyleNames="{local_res.css.form_social_button} {local_res.css.form_social_button_google}"
+                    ui:field="loginGoogleUi">TODO Login with Google</g:Anchor>
+        </div>
+    </g:HTMLPanel>
+</ui:UiBinder>