<ChangeCredential />

The ChangeCredential component renders a form that lets a signed-in user set a new value for one of their own credentials. It collects only a new value and its confirmation, checks it against the applicable rules as the user types, and posts the change through the Nuxt server route to ThunderID. It is auto-registered by the Nuxt module.

It reads the rules it needs from the user type schema already resolved by ThunderIDRoot (GET /users/me/meta), so it adds no network request beyond the write itself. Every default label, placeholder, and message is built from the credential attribute's own displayName in that schema, so it always matches whatever an admin named it there.

By default it manages the password credential. To manage a different one, for example a PIN declared on the user type schema, set attribute; render the component once per credential to let a user manage more than one.

note

ChangeCredential collects only a new value and its confirmation, not the account's existing value. The self-service credential write path does not verify the current value today, so asking for one would only teach the user a false sense of security. Once server-side current-value verification ships, that field returns without a breaking change to this component's public props.

Usage

Basic Usage

pages/account.vue

<template>
  <div>
    <h2>Security</h2>
    <ChangeCredential />
  </div>
</template>

Managing a Different Credential

Render one instance per credential the user type schema declares, keyed by its attribute name:

pages/account.vue

<template>
  <ChangeCredential attribute="password" />
  <ChangeCredential attribute="pin" />
</template>

Custom Title

Pass an empty string to omit the heading entirely, for example when the surrounding layout (a card header, a dialog title) already names the credential:

pages/account.vue

<template>
  <section>
    <h2>Password</h2>
    <ChangeCredential title="" />
  </section>
</template>

Props

Prop	Type	Required	Description
attribute	string	❌	The credential attribute this instance manages, any attribute the user type schema declares credential: true for. Defaults to 'password'.
cardLayout	boolean	❌	Whether to wrap the form in a bordered card. Defaults to false.
className	string	❌	Additional CSS class added to the root element. Defaults to ''.
policy	PasswordPolicy	❌	The rules the new value must satisfy. Defaults to the applicable rules from the user type schema.
preferences	Preferences	❌	Component-level preference overrides, including i18n.
showRequirements	boolean	❌	Whether to render the live requirement checklist. Defaults to true.
title	string	❌	Overrides the default "Change {credential}" heading. Pass an empty string to omit the heading entirely. Defaults to a translated, schema-derived heading.

Events

Event	Payload	Description
success	none	Emitted after the credential has been changed successfully.