Toggles password visibility in the browser. Implemented in the wires script,\nloaded by the standard Zotonic JavaScript includes. It works with dynamically\nrendered forms through Cotonic's delegated DOM events, without inline JavaScript\nor rebinding click handlers after a template update.<\/p>\n
With The partial provides an attached eye-icon button with a translated Show password<\/strong>\naccessible label and tooltip, a generated ID,\n For a custom button, use the same attributes and give both elements unique IDs:<\/p>\n Keep the label stable: Topic: The payload must contain The handler requires a button with the matching The input type switches between This is a local browser topic. The toggle handler does not read or publish the\npassword value, contact the server, return a reply, or publish a result event.\nDo not include password values in toggle messages.<\/p>\n The model also subscribes to Visibility is not persisted across these updates. New templates should render\npassword inputs masked and their toggle buttons unpressed. Replacing a form does\nnot require registering new click handlers.<\/p>\nmod_authentication<\/code> enabled, use its shared button template after a password\ninput, inside an input-group<\/code> container. Pass the input's HTML ID as target_id<\/code>:<\/p>\n<div class="input-group">\n <input class="form-control" type="password" id="new-password" name="password"\n autocomplete="new-password" required>\n {% include "_password_visibility.tpl" target_id="new-password" %}\n<\/div>\n<\/code><\/pre>\ntype="button"<\/code>, aria-controls<\/code>, aria-pressed<\/code>, and data-onclick-topic<\/code>.\nThe eye is crossed out while the password is visible.\nEach password field can have its own button. Include buttons only for fields\nthat the user can interact with, not hidden password fields in intermediate\nlogin or two-factor steps.<\/p>\n<input type="password" id="account-password" name="password"\n autocomplete="current-password">\n<button type="button" id="account-password-toggle"\n aria-controls="account-password" aria-pressed="false"\n data-onclick-topic="model\/password\/post\/toggle">\n {_ Show password _}\n<\/button>\n<\/code><\/pre>\naria-pressed="true"<\/code> indicates that showing the password\nis enabled. Native buttons support mouse and keyboard activation without\nsubmitting the form.<\/p>\npost\/toggle<\/h2>\n
model\/password\/post\/toggle<\/code>.<\/p>\nmessage.id<\/code>, the ID of the button<\/strong>, not the input.\nCotonic's data-onclick-topic<\/code> handling supplies this from the button attributes.\nA direct publish from an already loaded script has the same shape:<\/p>\ncotonic.broker.publish("model\/password\/post\/toggle", {\n message: { id: "account-password-toggle" }\n});\n<\/code><\/pre>\ndata-onclick-topic<\/code>. It reads\naria-controls<\/code> and searches for the input inside the button's form, or the\ndocument if the button has no form. Inputs must have type password<\/code> or text<\/code>.\nMissing buttons, missing inputs, and disabled inputs are ignored.<\/p>\npassword<\/code> and text<\/code>, and the button's\naria-pressed<\/code> becomes false<\/code> or true<\/code> respectively. The existing input element,\nvalue, name, and autocomplete attributes are preserved.<\/p>\nTemplate updates<\/h2>\n
model\/ui\/event\/dom-updated\/+key<\/code>. The event payload's\nid<\/code> identifies the updated DOM container. Its toggle buttons and associated\ninputs are reset to aria-pressed="false"<\/code> and type="password"<\/code>, including when\nIncremental DOM has reused an input that was previously revealed. The input value\nis preserved. The container itself is also handled if it is a toggle button.<\/p>\nImplementation<\/h2>\n