Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Password

Description

Purpose: A password-field is intended for entering passwords.
Composition: Text password will render an input-tag with type="password". Optionally, an eye-closed/open glyph is rendered above the input to toggle revelation/masking.
Effect: Text password is restricted to one line of text and will mask the entered characters. When configured with the revelation-option, the clear-text password will be shown (respectively hidden) upon clicking the glyph.

Context

Rivals

text field: Use a text field for discloseable information (i.e. information that can safely be displayed to an audience)

Rules

Usage

Password Input MUST be used for passwords.

Composition

The input MUST always be rendered with the attribute autocomplete="off". This advises browsers to NOT autofill the input field with cached passwords and avoids potential exposure of confidential data, especially in shared environments.

Interaction

Password Input SHOULD NOT limit the number of characters.
When used for authentication, Password Input MUST NOT reveal any settings by placing constraints on it.
On the other hand, when setting a password, Password Input SHOULD enforce strong passwords by appropiate contraints.

Example 1: Base

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field\Password;
 
/**
 * Example of how to create and render a basic password field and attach it to a form.
 */
function base()
{
    //Step 0: Declare dependencies.
    global $DIC;
    $ui = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    //Step 1: Define the input field.
    $pwd_input = $ui->input()->field()->password("Password", "enter your password here");
 
    //Step 2: Define the form and attach the field.
    $form = $ui->input()->container()->form()->standard("#", [$pwd_input]);
 
    //Step 4: Render the form.
    return $renderer->render($form);
}

Example 2: In form

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field\Password;
 
/**
 * Example of how to process passwords.
 * Note that the value of Password is a Data\Password, not a string-primitive.
 */
function in_form()
{
    //Step 0: Declare dependencies
    global $DIC;
    $ui = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $request = $DIC->http()->request();
 
    //Step 1: Define the input field.
    $pwd_input = $ui->input()->field()->password("Password", "Value will be displayed...")
        ->withRevelation(true);
 
    //Step 2: Define the form and attach the field.
    $form = $ui->input()->container()->form()->standard('#', ['password' => $pwd_input]);
 
    //Step 3: Define some data processing.
    $result = '';
    if ($request->getMethod() == "POST") {
        $form = $form->withRequest($request);
        $result = $form->getData();
    }
 
    //Step 4: Render the form/result.
    return
        "<pre>" . print_r($result, true) . "</pre><br/>" .
        $renderer->render($form);
}

Example 3: With contraints

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field\Password;
 
/**
 * Passwords (when setting) usually have some constraints.
  */
function with_contraints()
{
    //Step 0: Declare dependencies
    global $DIC;
    $ui = $DIC->ui()->factory();
    $lng = $DIC->language();
    $renderer = $DIC->ui()->renderer();
    $request = $DIC->http()->request();
    $data = new \ILIAS\Data\Factory();
    $refinery = new \ILIAS\Refinery\Factory($data, $lng);
    $pw_validation = $refinery->password();
 
    //Step 1: Define the input field
    //and add some constraints.
    $pwd_input = $ui->input()->field()->password("Password", "constraints in place.")
        ->withAdditionalTransformation(
            $refinery->logical()->parallel([
                $pw_validation->hasMinLength(8),
                $pw_validation->hasLowerChars(),
                $pw_validation->hasUpperChars(),
                $pw_validation->hasNumbers(),
                $pw_validation->hasSpecialChars()
            ])
        );
 
    //Step 2: Define the form and attach the field.
    $form = $ui->input()->container()->form()->standard('#', ['pwd' => $pwd_input]);
 
    //Step 3: Define some data processing.
    $result = '';
    if ($request->getMethod() == "POST") {
        $form = $form->withRequest($request);
        $result = $form->getData();
    }
 
    //Step 4: Render the form/result.
    return
        "<pre>" . print_r($result, true) . "</pre><br/>" .
        $renderer->render($form);
}

Relations

Parents

UIComponent
Input
Field