CredentialButton

A popper button that opens a password change form.

Import

import { CredentialButton } from "@schukai/monster/source/components/form/credential-button.mjs";

Source

View source code

Package

@schukai/monster

Since

3.91.0

Continue with credentials

Open the popper and submit the password to simulate a protected action.

Introduction

monster-credential-button triggers credential-related flows such as requesting authentication data or continuing a protected action.

Key Features

Authentication entry point: Starts credential-based workflows.
Reusable action button: Fits login, confirm, or secure step flows.
Composable behavior: Integrates with forms and external logic.

Credential Button Simple

This example opens the credential popper, accepts a new password, and submits it against a mocked endpoint.

Change password

Javascript

import "@schukai/monster/source/components/form/credential-button.mjs";

const button = document.getElementById("credential-button-demo");
const originalFetch = window.fetch.bind(window);

window.fetch = (input, init = {}) => {
  const url = typeof input === "string" ? input : input?.url;

  if (url === "/mock/credential-button") {
    return Promise.resolve(
      new Response(JSON.stringify({ ok: true }), {
        status: 200,
        headers: { "content-type": "application/json" },
      }),
    );
  }

  return originalFetch(input, init);
};

button.setOption("url", "/mock/credential-button");
button.setOption("labels.button", "Change password");
button.setOption("labels.title", "Password");
button.setOption("labels.description", "Enter a new password and submit it.");<script type="module">import "@schukai/monster/source/components/form/credential-button.mjs";

const button = document.getElementById("credential-button-demo-run");
const originalFetch = window.fetch.bind(window);

window.fetch = (input, init = {}) => {
  const url = typeof input === "string" ? input : input?.url;

  if (url === "/mock/credential-button") {
    return Promise.resolve(
      new Response(JSON.stringify({ ok: true }), {
        status: 200,
        headers: { "content-type": "application/json" },
      }),
    );
  }

  return originalFetch(input, init);
};

button.setOption("url", "/mock/credential-button");
button.setOption("labels.button", "Change password");
button.setOption("labels.title", "Password");
button.setOption("labels.description", "Enter a new password and submit it.");</script>

HTML

<monster-credential-button id="credential-button-demo">
  Change password
</monster-credential-button>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Credential Button Retry

This example demonstrates the failure and retry flow of monster-credential-button with a mocked endpoint.

Rotate API key

First submit will fail, second will succeed.

Javascript

import "@schukai/monster/source/components/form/credential-button.mjs";

const button = document.getElementById("credential-button-retry-demo");
const status = document.getElementById("credential-button-retry-status");
const originalFetch = window.fetch.bind(window);
let attempts = 0;

window.fetch = (input, init = {}) => {
  const url = typeof input === "string" ? input : input?.url;

  if (url === "/mock/credential-button-retry") {
    attempts += 1;
    status.textContent = "Submit attempt " + attempts;

    if (attempts === 1) {
      return Promise.resolve(
        new Response(JSON.stringify({ message: "Temporary policy check failed." }), {
          status: 400,
          headers: { "content-type": "application/json" },
        }),
      );
    }

    return Promise.resolve(
      new Response(JSON.stringify({ ok: true }), {
        status: 200,
        headers: { "content-type": "application/json" },
      }),
    );
  }

  return originalFetch(input, init);
};

button.setOption("url", "/mock/credential-button-retry");
button.setOption("labels.button", "Rotate API key");
button.setOption("labels.title", "New credential");
button.setOption("labels.description", "Submit once to see the failure state, then retry.");
button.setOption("payload.data", { scope: "deployments" });<script type="module">import "@schukai/monster/source/components/form/credential-button.mjs";

const button = document.getElementById("credential-button-retry-demo-run");
const status = document.getElementById("credential-button-retry-status-run");
const originalFetch = window.fetch.bind(window);
let attempts = 0;

window.fetch = (input, init = {}) => {
  const url = typeof input === "string" ? input : input?.url;

  if (url === "/mock/credential-button-retry") {
    attempts += 1;
    status.textContent = "Submit attempt " + attempts;

    if (attempts === 1) {
      return Promise.resolve(
        new Response(JSON.stringify({ message: "Temporary policy check failed." }), {
          status: 400,
          headers: { "content-type": "application/json" },
        }),
      );
    }

    return Promise.resolve(
      new Response(JSON.stringify({ ok: true }), {
        status: 200,
        headers: { "content-type": "application/json" },
      }),
    );
  }

  return originalFetch(input, init);
};

button.setOption("url", "/mock/credential-button-retry");
button.setOption("labels.button", "Rotate API key");
button.setOption("labels.title", "New credential");
button.setOption("labels.description", "Submit once to see the failure state, then retry.");
button.setOption("payload.data", { scope: "deployments" });</script>

HTML

<div style="display:grid;gap:1rem;">
  <monster-credential-button id="credential-button-retry-demo">
    Rotate API key
  </monster-credential-button>
  <div id="credential-button-retry-status">First submit will fail, second will succeed.</div>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The button extends the shared form action model and adds credential-specific handling so secure actions can be requested with a focused UI element.

Styling Hooks

labels: Adjusts button text and related messaging.
dataset: Connects the action to surrounding workflow data.
::part(button): Styles the visible trigger.

HTML Structure

<monster-credential-button></monster-credential-button>

JavaScript Initialization

const element = document.createElement('monster-credential-button');
document.body.appendChild(element);

Exported

CredentialButton

Derived from

PopperButton

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the PopperButton.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

labels

object

undefined

Label definitions

labels.button

string

undefined

Button label

labels.title

string

undefined

Field-set title

labels.password

string

undefined

Password label

labels.description

string

undefined

Description text

labels.submit

string

undefined

Submit button label

labels.messageEmptyPassword

string

undefined

Empty password message

labels.messageNotConfigured

string

undefined

Not configured message

labels.messageSuccess

string

undefined

Success message

labels.messageFailed

string

undefined

Failure message

url

string

API URL

fetch

object

Fetch options

fetch.redirect

string

error

Fetch redirect option

fetch.method

string

POST

Fetch method

fetch.mode

string

same-origin

Fetch mode

fetch.credentials

string

same-origin

Fetch credentials

fetch.headers

object

undefined

Fetch headers

mapping

object

undefined

Mapping configuration

mapping.password

string

undefined

Key for the password field in the payload

mapping.data

object|function

undefined

Additional payload data or builder

payload

object

Payload configuration

payload.password

string

password

Key for the password field in the payload

payload.data

object|function

Additional payload data or builder

placeholder

object

Placeholder configuration

placeholder.password

string

Password placeholder

autocomplete

object

Autocomplete configuration

autocomplete.password

string

new-password

Password autocomplete

classes

object

undefined

Class definitions

layout

object

Layout configuration

layout.containerStyle

string

width: 20rem;

Inline style for the container

layout.submitStyle

string

margin-top: var(--monster-space-4);

Inline style for the submit button

timeoutForMessage

number

3500

Duration in milliseconds to show messages

timeoutForSuccess

number

1200

Duration in milliseconds for success state

features

object

Feature flags

features.closeOnSuccess

boolean

true

Close popper on success

features.clearOnSuccess

boolean

true

Clear password on success

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the PopperButton.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the PopperButton.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{CredentialButton}

Events

The component emits the following events:

monster-credential-submit
monster-credential-successful
monster-credential-failed

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.