protected void createLogin()
{
    sNewPassword = null;
    sConfirmPassword = null;
    
    boolean bChangePwd = isChangePassword();
    
    cslayLoginPanel = new CssLayout();
    cslayLoginPanel.addStyleName("login-panel");
    cslayLoginPanel.setSizeFull();
    
    layoutMode = getLayoutMode();
    
    boolean bMini = layoutMode == LayoutMode.Mini;
    
    if (bMini)
    {
        winLogin.addStyleName("small");
        
        cslayLoginPanel.addStyleName("small");
    }
    else
    {
        winLogin.removeStyleName("small");
    }
    
    //----------------------------------------------------------------------------
    // Header
    //----------------------------------------------------------------------------
    
        lblTitle = new Label();
        lblTitle.setSizeUndefined();
        lblTitle.addStyleName("welcome");
    
        lblInfo = new Label();
        lblInfo.setSizeUndefined();
        lblInfo.addStyleName("info");
        
        lblError = new Label();
        lblError.setSizeUndefined();
        lblError.addStyleName("welcomerror");
        
    VerticalLayout vlayLabels = new VerticalLayout();
    vlayLabels.setSpacing(false);
    vlayLabels.setWidth("100%");
    vlayLabels.setSizeUndefined();
    vlayLabels.setMargin(true);
    vlayLabels.addStyleName("labels");

    vlayLabels.addComponent(lblTitle);
    vlayLabels.addComponent(lblError);
    
    if (!bMini)
    {
        vlayLabels.addComponent(lblInfo);
    }

    //----------------------------------------------------------------------------
    // Username and Password
    //----------------------------------------------------------------------------

    AbstractOrderedLayout aolFields;
    
    if (bMini)
    {
        aolFields = new VerticalLayout();
    }
    else
    {
        aolFields = new HorizontalLayout();
    }
    
    aolFields.setSpacing(true);
    aolFields.setMargin(true);
    aolFields.addStyleName("fields");

        tfUserName = new TextField(projx.translate("Username"));
        tfUserName.setIcon(VaadinIcons.USER);
        tfUserName.setId("UserName");
        tfUserName.addStyleName(ValoTheme.TEXTFIELD_INLINE_ICON);
        
        if (sUserName != null)
        {
            tfUserName.setValue(sUserName);
        }

        pfPassword = new PasswordField();

        if (bChangePwd)
        {
            pfPassword.setIcon(VaadinIcons.UNLOCK);
        }
        else
        {
            pfPassword.setIcon(VaadinIcons.LOCK);
        }
        
        pfPassword.setId("Password");
        pfPassword.addStyleName(ValoTheme.TEXTFIELD_INLINE_ICON);
        
        if (sPassword != null)
        {
            pfPassword.setValue(sPassword);
        }
    
        butLogin = new Button();
        butLogin.addStyleName("default");
        butLogin.addStyleName("ok");
        butLogin.setId("OK");
        
        if (bChangePwd)    
        {
            butLogin.setCaption(projx.translate("Change"));
        }
        else
        {
            butLogin.setCaption(projx.translate("Login"));
        }

    aolFields.addComponent(tfUserName);
    aolFields.addComponent(pfPassword);
            
    if (sUserName == null)
    {
        tfUserName.focus();
    }
    else
    {
        pfPassword.focus();
    }
    
    //----------------------------------------------------------------------------
    // New Password and Confirm Password
    //----------------------------------------------------------------------------
    
    AbstractOrderedLayout aolPasswordFields;

    if (bChangePwd)
    {
        lblTitle.setValue(projx.translate(CHANGE_PASSWORD));
        
        pfPassword.setCaption(projx.translate("Old Password"));

        if (bMini)
        {
            aolPasswordFields = new VerticalLayout();
        }
        else
        {
            aolPasswordFields = new HorizontalLayout();
        }
        
        aolPasswordFields.setSpacing(true);
        aolPasswordFields.setMargin(true);
        aolPasswordFields.addStyleName("fields");
        aolPasswordFields.addStyleName("passwordfields");
        
        pfNewPassword = new PasswordField(projx.translate("New Password"));
        pfNewPassword.setId("PasswordNew");
        pfNewPassword.setIcon(VaadinIcons.LOCK);
        pfNewPassword.addStyleName(ValoTheme.TEXTFIELD_INLINE_ICON);
        
        
        if (sNewPassword != null)
        {
            pfNewPassword.setValue(sNewPassword);
        }
        
        pfPassword.focus();

        pfConfirmPassword = new PasswordField(projx.translate("Confirm Password"));
        pfConfirmPassword.setId("PasswordConfirm");
        pfConfirmPassword.setIcon(VaadinIcons.LOCK);
        pfConfirmPassword.addStyleName(ValoTheme.TEXTFIELD_INLINE_ICON);
        
        AbstractOrderedLayout aolButtons;
        
        if (bMini)
        {
            aolButtons = new HorizontalLayout();
            aolButtons.addStyleName("nopadding");
            aolButtons.setSpacing(true);
            aolButtons.setMargin(false);
            aolButtons.setSizeFull();
        }
        else
        {
            aolButtons = aolPasswordFields;
        }
        
        butCancel = new Button(projx.translate("Cancel"));
        butCancel.addStyleName("default");
        butCancel.addStyleName("cancel");
        butCancel.setId("Cancel");
        
        aolPasswordFields.addComponent(pfNewPassword);
        aolPasswordFields.addComponent(pfConfirmPassword);

        aolButtons.addComponent(butLogin);
        aolButtons.setComponentAlignment(butLogin, Alignment.BOTTOM_LEFT);

        Label lblOr = new Label(projx.translate("or"), ContentMode.HTML);
        lblOr.addStyleName("or");
        
        if (!bMini)
        {
            aolButtons.addComponent(lblOr);
            aolButtons.setComponentAlignment(lblOr, Alignment.BOTTOM_LEFT);
        }
        
        aolButtons.addComponent(butCancel);
        
        if (bMini)
        {
            aolButtons.setComponentAlignment(butCancel, Alignment.BOTTOM_RIGHT);
        }
        else
        {
            aolButtons.setComponentAlignment(butCancel, Alignment.BOTTOM_LEFT);
        }

        if (aolButtons != aolPasswordFields)
        {
            aolPasswordFields.addComponent(aolButtons);
        }
        
        if (projx.isConnected())
        {
            lblInfo.setValue(projx.translate("Please enter and confirm the new password."));
            
            tfUserName.setEnabled(false);
        }
        else
        {
            if (projx.isForceChangePassword())
            {
                lblInfo.setValue(projx.translate("Please enter and confirm the new password."));
                
                tfUserName.setEnabled(false);
                pfPassword.setEnabled(false);
            }
            else
            {
                lblInfo.setValue(projx.translate("Please enter your username and passwords."));
            }
        }
        
        ShortcutListener sclEsc = new ShortcutListener(projx.translate("Cancel"), KeyCode.ESCAPE, null) 
        {
            public void handleAction(Object pSender, Object pTarget) 
            {
                doCancel();
            }
        };
        
        butCancel.addClickListener(new ClickListener() 
        {
            public void buttonClick(ClickEvent event) 
            {
                doCancel();
            }
        });
        
        butLogin.addShortcutListener(sclEsc);
    }
    else
    {
        pfPassword.setCaption(projx.translate("Password"));
        
        lblTitle.setValue(projx.translate(WELCOME));

        lblInfo.setValue(projx.translate("Please enter your username and password."));
        
        pfNewPassword = null;
        pfConfirmPassword = null;
        
        aolFields.addComponent(butLogin);
        aolFields.setComponentAlignment(butLogin, Alignment.BOTTOM_LEFT);
        
        aolPasswordFields = null;
    }
    
    //----------------------------------------------------------------------------
    // ALL together
    //----------------------------------------------------------------------------
    
    cslayLoginPanel.addComponent(vlayLabels);
    cslayLoginPanel.addComponent(aolFields);

    if (aolPasswordFields != null)
    {
        cslayLoginPanel.addComponent(aolPasswordFields);
    }
    
    ((CssLayout)winLogin.getContent()).addComponent(cslayLoginPanel);
    
    //----------------------------------------------------------------------------
    // Event handling
    //----------------------------------------------------------------------------
    
    ShortcutListener sclEnter = new ShortcutListener(projx.translate("Login"), KeyCode.ENTER, null) 
    {
        public void handleAction(Object pSender, Object pTarget) 
        {
            doOk();
        }
    };

    butLogin.addClickListener(new ClickListener() 
    {
        public void buttonClick(ClickEvent event) 
        {
            doOk();
        }
    });

    butLogin.addShortcutListener(sclEnter);
    
    updateError();
}