Document revision: 2025-02-21
Refers to WEBDLG2 version: B0840 2501-4
The login dialog can be customized in two levels:
This document covers the latter method. It requires that a
custom start document is used.
The login dialog template needs to be added to the
<body> of the document.
Example login dialog template:
<div id="eq-login-dialog" class="eq-login-dialog">
<div>Please enter your login and password to start:</div>
<div class="eq-title"></div>
<label>
<span class="eq-label">Login:</span>
<input type="text" class="eq-login">
</label>
<label>
<span class="eq-label">Password:</span>
<input type="password" class="eq-password">
</label>
<div class="eq-button">
<label class="eq-save">
<input type="checkbox">
<span>Save login</span>
</label>
<button type="button" class="eq-ok">Login</button>
<button type="button" class="eq-cancel">Cancel</button>
</div>
</div>
Please note:
- If an #eq-login-dialog element exists, the WEBDLG2 CSS attributes it with
a display=none style and uses it as template for the login dialog.
- When the login dialog is opened, this template is cloned.
The CSS identifier is removed from the clone. As a consequence, the
#eq-login-dialog CSS identifier cannot be used to style the dialog.
- The example above sets class="eq-login-dialog" and thus uses the
default login dialog CSS rules. If the default layout should not be used, a
custom CSS class name may be set according to custom CSS rules, for example:
class="my-login-dialog"
The following elements are recognized:
- class=eq-login (required): Login name INPUT element
- class=eq-password (required): Password INPUT element
- class=eq-ok (required): OK button
- class=eq-cancel (required): Cancel button
- class=eq-save (optional): Save login LABEL>CHECKBOX
- class=eq-title (optional): WEBDLG2 inserts the application title
The resulting login dialog is embedded into a WEBDLG2 window showing the
application title. If this is not desired, i.e., if the custom login dialog
should be displayed without any window decoration, the eq-inline
class needs to be added, such as:
<div id="eq-login-dialog"
class="my-login-dialog eq-inline">
…
|
