How to customise login screen?

Hi,
I am not able to add an extra box to the left of the extended login window loginMainBox to customise it and add some text content in it. what to do ???
If I am adding vbox then two login box are appearing in the login window.

Hi,

Could you share XML of your custom LoginWindow and, if possible, markup of what you want to achieve?

Regards,
Gleb

<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        
    <dialogMode height="600"
                width="800"/>
    <layout>
        <vbox id="loginWrapper"
              spacing="true">
            <label align="MIDDLE_CENTER"
                   ext:index="0"
                   value="Ecommerce Application"
                   visible="false"/>
            <groupBox ext:index="1"
                      orientation="horizontal">
                <vbox id="loginMainBox"
                      align="MIDDLE_CENTER"
                      margin="true"
                      stylename="c-login-panel"
                      width="AUTO">
                    <hbox id="loginTitleBox"
                          align="MIDDLE_CENTER"
                          spacing="true"
                          stylename="c-login-title">
                        <embedded id="logoImage"
                                  align="MIDDLE_LEFT"
                                  stylename="c-login-icon"
                                  type="IMAGE"/>
                        <label id="welcomeLabel"
                               align="MIDDLE_LEFT"
                               stylename="c-login-caption"
                               value="mainMsg://loginWindow.welcomeLabel"
                               visible="false"/>
                    </hbox>
                    <capsLockIndicator id="capsLockIndicator"
                                       align="MIDDLE_CENTER"
                                       stylename="c-login-capslockindicator"/>
                    <grid id="loginFormLayout"
                          align="MIDDLE_CENTER"
                          spacing="true"
                          stylename="c-login-form">
                        <rows>
                            <row id="loginFieldRow">
                                <label id="loginFieldLabel"
                                       align="MIDDLE_RIGHT"
                                       stylename="login-form-label-username"
                                       value="mainMsg://loginWindow.loginField"/>
                                <textField id="loginField"
                                           stylename="c-login-username"
                                           width="theme://cuba.web.LoginWindow.field.width"/>
                            </row>
                            <row id="passwordFieldRow">
                                <label id="passwordFieldLabel"
                                       align="MIDDLE_RIGHT"
                                       stylename="login-form-label-password"
                                       value="mainMsg://loginWindow.passwordField"/>
                                <passwordField id="passwordField"
                                               autocomplete="true"
                                               capsLockIndicator="capsLockIndicator"
                                               stylename="c-login-password"
                                               width="theme://cuba.web.LoginWindow.field.width"/>
                            </row>
                            <row id="localesRow">
                                <label id="localesSelectLabel"
                                       align="MIDDLE_RIGHT"
                                       stylename="login-form-label"
                                       value="mainMsg://loginWindow.localesSelect"/>
                                <lookupField id="localesSelect"
                                             nullOptionVisible="false"
                                             textInputAllowed="false"
                                             width="theme://cuba.web.LoginWindow.field.width"/>
                            </row>
                            <row>
                                <label id="authlabel"
                                       align="MIDDLE_RIGHT"
                                       stylename="login-form-label-authkey"
                                       value="AuthKey"
                                       visible="false"/>
                                <textField id="authtextField"
                                           stylename="c-login-authkey"
                                           visible="false"/>
                            </row>
                            <row id="rememberMeRow">
                                <label id="rememberMeSpacer"/>
                                <checkBox id="rememberMeCheckBox"
                                          caption="mainMsg://loginWindow.rememberMe"/>
                            </row>
                            <row id="submitRow">
                                <label id="submitSpacer"/>
                                <button id="loginButton"
                                        action="submit"
                                        stylename="c-login-submit-button"/>
                            </row>
                        </rows>
                    </grid>
                    <label/>
                </vbox>
                <label value="bcfbhcdfbhfcdbhfcd"/>
            </groupBox>
        </vbox>
        <label id="poweredByLink"
               visible="false"/>
    </layout>
</window>

I want to add some text in the form of bullet points to the right of login screen.
@gorelov

Thanks…!!

If I am wrapping the login wrapper to a hbox then unexpected error occurs.
@gorelov

Thanks…!!!

It appears that the above XML is incomplete around the window element, so I can’t test it.

According to your description I can suggest the following:

  1. Remove extends attribute of the window element if present. So, in this case, we will design Login Window XML from scratch.
  2. Copy layout and actions from the default LoginWindow.
  3. Make the required changes. In your case, I would recommend replacing loginWrapper with grid that has 3 columns and 1 row.

The suggestions above let you get rid of errors and have the full control on the login window.

As an example, I added leftBox and rightBox that can be used to place any components from the left and right sides of the login form.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        class="com.company.demo.web.app.loginwindow.ExtAppLoginWindow"
        messagesPack="com.company.demo.web.app.loginwindow"
        caption="mainMsg://loginWindow.caption">

    <actions>
        <action id="submit" shortcut="ENTER" invoke="login"
                caption="mainMsg://loginWindow.okButton"
                icon="app/images/login-button.png"/>
    </actions>

    <layout stylename="c-login-main-layout" expand="loginWrapper">
        <grid id="loginWrapper"
              width="100%">
            <columns count="3"/>
            <rows>
                <row>
                    <vbox id="leftBox"
                          align="MIDDLE_CENTER"
                          width="AUTO">
                        <label value="Left Box"/>
                    </vbox>

                    <vbox id="loginMainBox"
                          align="MIDDLE_CENTER"
                          margin="true"
                          stylename="c-login-panel"
                          width="AUTO">
                        <hbox id="loginTitleBox"
                              align="MIDDLE_CENTER"
                              spacing="true"
                              stylename="c-login-title">
                            <image id="logoImage"
                                   align="MIDDLE_LEFT"
                                   height="AUTO"
                                   scaleMode="SCALE_DOWN"
                                   stylename="c-login-icon"
                                   width="AUTO"/>

                            <label id="welcomeLabel"
                                   align="MIDDLE_LEFT"
                                   stylename="c-login-caption"
                                   value="mainMsg://loginWindow.welcomeLabel"/>
                        </hbox>

                        <capsLockIndicator id="capsLockIndicator"
                                           align="MIDDLE_CENTER"
                                           stylename="c-login-capslockindicator"/>

                        <vbox id="loginForm"
                              spacing="true"
                              stylename="c-login-form">
                            <cssLayout id="loginCredentials"
                                       stylename="c-login-credentials">
                                <textField id="loginField"
                                           htmlName="loginField"
                                           inputPrompt="mainMsg://loginWindow.loginPlaceholder"
                                           stylename="c-login-username"/>
                                <passwordField id="passwordField"
                                               autocomplete="true"
                                               htmlName="passwordField"
                                               inputPrompt="mainMsg://loginWindow.passwordPlaceholder"
                                               capsLockIndicator="capsLockIndicator"
                                               stylename="c-login-password"/>
                            </cssLayout>
                            <hbox id="rememberLocalesBox"
                                  stylename="c-login-remember-locales">
                                <checkBox id="rememberMeCheckBox"
                                          caption="mainMsg://loginWindow.rememberMe"
                                          stylename="c-login-remember-me"/>
                                <lookupField id="localesSelect"
                                             nullOptionVisible="false"
                                             stylename="c-login-locale"
                                             textInputAllowed="false"/>
                            </hbox>
                            <button id="loginButton"
                                    align="MIDDLE_CENTER"
                                    action="submit"
                                    stylename="c-login-submit-button"/>
                        </vbox>
                    </vbox>

                    <vbox id="rightBox"
                          align="MIDDLE_CENTER"
                          width="AUTO">
                        <label value="Right Box"/>
                    </vbox>
                </row>
            </rows>

        </grid>

        <label id="poweredByLink"
               align="MIDDLE_CENTER"
               htmlEnabled="true"
               stylename="c-powered-by"
               value="mainMsg://cuba.poweredBy"/>
    </layout>
</window>

Regards,
Gleb

Sorry for the delayed reply…
If I am removing the extends attribute of the window,then I am getting unexpected error.

@gorelov

   <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        class="com.company.ecommerceadmin.web.screens.ExtAppLoginWindow"
        extends="/com/haulmont/cuba/web/app/loginwindow/loginwindow.xml"
        messagesPack="com.company.ecommerceadmin.web.screens"
        xmlns:ext="http://schemas.haulmont.com/cuba/window-ext.xsd">

This is my xml file.

Thanks…!

Hi,

Is it the complete XML descriptor? If so, then an exception is thrown because your XML is incomplete. Did you try XML above?

Regards,
Gleb

Hi I am attaching the file as I am not able to copy it.

extloginwindow.txt (2.1 KB)

@gorelov

I am not able to paste the complete xml file. Why ??

Please use back quote symbol for code blocks.

Here the demo project that should help custom-login-window.zip (77.7 KB).

Thanks I will check this example… :slight_smile: