espurna/code/html/src/panel-password.html

<div class="panel block" id="panel-password">
    <div class="header">
        <h1>SECURITY</h1>
    </div>

    <div class="page">
        <form id="form-setup-password" class="pure-form pure-form-aligned form-settings">
            <fieldset>
                <legend>Update the device password</legend>
                <p class="setup-password-initial">
                    Before using this device you are required to change the default password.
                </p>

                <p>
                    Password will be used for:
                </p>
                <ul>
                    <li>
                        <strong>Web interface</strong>, for the <strong>admin</strong> user.
                        <span class="pure-form-message-inline">
                            You are here now
                        </span>
                    </li>
                    <li><strong>WiFi access point</strong> created by the device</li>
                    <li class="module-ota"><strong>OTA</strong> - over-the-air updates</li>
                    <li class="module-telnet"><strong>TELNET</strong> aka plain socket connection</li>
                </ul>
                <p class="setup-password-initial">
                    Password <strong>must</strong> be <strong>8…63 characters</strong>. Our password policy also requires:
                </p>
                <ul class="setup-password-initial">
                    <li>At least one <strong>special character</strong>: <code>_,.;:~!?@#$%^&amp;*&lt;&gt;\|(){}[])</code></li>
                    <li>At least one <strong>lowercase</strong> or <strong>uppercase</strong> letter</li>
                    <li>At least one <strong>number</strong></li>
                </ul>

                <div class="pure-control-group">
                    <label>New Password</label>
                    <input class="pure-input-3-4"
                        data-action="reload"
                        data-settings-real-name="adminPass"
                        minlength="8" maxlength="63"
                        required type="password" name="adminPass0"
                        autocomplete="new-password" spellcheck="false" >
                    <span class="no-select password-reveal"></span>
                </div>

                <div class="pure-control-group">
                    <label>Repeat password</label>
                    <input class="pure-input-3-4"
                        data-action="reload"
                        data-settings-real-name="adminPass"
                        minlength="8" maxlength="63"
                        required type="password" name="adminPass1"
                        autocomplete="new-password" spellcheck="false" >
                    <span class="no-select password-reveal"></span>
                </div>

                <button class="pure-input-1 pure-button button-generate-password" type="button" title="Generate password based on password policy">Generate</button>
                <button class="pure-input-1 pure-button button-setup-password button-setup-strict" type="button" title="Save new password">Save</button>
                <button class="pure-input-1 pure-button button-setup-password" type="button" title="Save new password">Save without checking password policy</button>
            </fieldset>

        </form>

    </div>
</div>