Login Controller

By default, if you use standard authentication you will get a standard login window when navigating to the application. You can customize the login window by setting some controller properties or replacing it with a different controller altogether.

By default, a view named Login is used if present. As an example of a stand-alone login view, here is the entire content of a file named Login.yaml:

Controller: Login
  BorderPanel:
    NorthView:
      Controller: HtmlPanel
        Height: 180
        Html: |
          <div style="text-align: center">
            <p/>
            <p><img src="%IMAGE(main_logo)%"></img></p>
            <p><b>Application Name</b></p>
            <p style="margin-left: 10px">A link <a href="mailto:one@domain.com">one@domain.com</a><br>
              Another link <a href="mailto:two@domain.com">two@domain.com</a><br><br>
            </p>
            <p/>
          </div>
    SouthView:
      Controller: HtmlPanel
        Height: 60
        Html: |
          <div style="text-align: center; font-size: 11px;">
            <p>Technical support: <a href="mailto:support@domain.com">support@domain.com</a></p>
          </div>
  ExtraWidth: 300
  ExtraHeight: 180

As you can see in the example above, the Login controller hosts a BorderPanel which allows you to integrate other controllers in it, such as an HtmlPanel.

Here is an example of a login view defined inline in Config.yaml (from the HelloKitto example):

Login:
  Controller:
    Title: Login to "HelloKitto" %APP_VERSION%
    BorderPanel:
      NorthView:
        Controller: HtmlPanel
          Height: 80
          Html: |
            <div style="text-align: center">
              <p/>
              <p><img src="%IMAGE(hello_kitto_150)%"></img></p>
              <p/>
            </div>
    LabelWidth: 150
    ExtraWidth: 350
    ExtraHeight: 100
    LocalStorage:
      Mode: Password
      AskUser: True
        .Default: False
      AutoLogin: False

Title Bar

The login dialog always shows a title bar at the top. By default the application title (from Config.yaml → AppTitle) is used. You can override it with the Title property:

Controller: Login
  Title: Welcome to My Application

The title bar uses the same dark chrome style as dialog headers (--kx-chrome-dark background).

BorderPanel

The BorderPanel node allows you to embed custom content above and below the login form.

NorthView

The NorthView/Controller sub-node defines a controller rendered above the login form, typically used for a logo or branding:

BorderPanel:
  NorthView:
    Controller: HtmlPanel
      Height: 100
      Html: <center><img src="%IMAGE(logo)%"></center>

SouthView

The SouthView/Controller sub-node defines a controller rendered below the login form (after the submit button), typically used for support info or disclaimers:

BorderPanel:
  SouthView:
    Controller: HtmlPanel
      Height: 60
      Html: |
        <div style="text-align: center; font-size: 11px;">
          Technical support: +39 0123 456789
        </div>

Both NorthView and SouthView are optional and can be used independently.

Dialog Sizing

Use ExtraWidth and ExtraHeight to adjust the dialog dimensions:

Controller: Login
  ExtraWidth: 300
  ExtraHeight: 180

These values are added to the base dialog size. You can also set a freeform CSS Style property.

Form Customization

The FormPanel sub-node controls the form fields:

Property	Default	Description
FormPanel/UserName	User Name	Label for the user name field
FormPanel/Password	Password	Label for the password field
FormPanel/Language	Language	Label for the language selector
FormPanel/LabelWidth	100	Width in pixels for field labels
FormPanel/InputStyle	(empty)	Extra CSS for input fields
FormPanel/ButtonStyle	(empty)	Extra CSS for the login button
FormPanel/BodyStyle	(empty)	Extra CSS for the form body
FormPanel/RememberCredentials	Remember Credentials	Checkbox label when LocalStorage/Mode is Password
FormPanel/RememberUserName	Remember User Name	Checkbox label when LocalStorage/Mode is UserName

LocalStorage

The LocalStorage sub-node controls persistent credential storage in the browser's localStorage:

Controller: Login
  LocalStorage:
    Mode: Password
    AskUser: True
      .Default: False
    AutoLogin: False

Property	Values	Description
Mode	UserName, Password, (empty)	What to store. Password stores both user name and password. UserName stores only the user name. Empty or missing disables storage.
AskUser	True / False	If True, shows a checkbox letting the user opt in/out of storage.
AskUser/Default	True / False	Default checked state of the checkbox (default: True).
AutoLogin	True / False	If True and both fields are pre-filled from localStorage, the form is automatically submitted after a short delay.

WARNING

The LocalStorageMode shorthand (e.g. LocalStorageMode: Password) is still accepted for backwards compatibility but the LocalStorage sub-node form is preferred as it allows full control.

Links

You can enable clickable links below the credential fields by adding boolean nodes:

Controller: Login
  ResetPassword: True
  RegisterNewUser: True
  PrivacyPolicy: True

Each link triggers a view request (kx/view/ResetPassword, etc.) so the corresponding views must be defined. You can customize the link style with HrefStyle:

ResetPassword: True
  HrefStyle: color: blue; font-size: 11px;

Default labels (translatable):

• ResetPassword → Password forgotten?
• RegisterNewUser → New User? Register...
• PrivacyPolicy → Privacy policy...

Language Selector

If LanguagePerSession: True is set in Config.yaml, the login form displays a language drop-down that lets the user choose the UI language before logging in. The selected language is stored in the session and used for all subsequent localized strings.

# Config.yaml
LanguagePerSession: True

Authentication

The Login controller works with Kitto^x's pluggable authentication system. The authenticator type is configured in Config.yaml:

Auth: DB
  IsClearPassword: False
  IsPassepartoutEnabled: True
  PassepartoutPassword: password
  .Defaults:
    UserName: administrator
    Password: password

Available authenticator types:

Type	Description
DB	Database-backed authentication using KITTO_USERS table with MD5 password hashing
DBCrypt	Like DB but uses BCrypt for password hashing (recommended). Auto-migrates from MD5 on first login
TextFile	File-based user list
OSDB	Operating system user authentication
(empty)	No authentication required

See Authentication for full configuration details.

Footer

The login footer (containing the login button and status indicator) has a styled background matching the form toolbar style, with a top border separator. This is automatic and requires no configuration.

---

The Login controller renders as a centered dialog window. The login form uses HTMX to submit credentials and receive the server response (success redirect or error message) without a full page reload.