We’ve migrated our documentation to a new site, which means some URLs have changed. If you hit a broken link, submit a support ticket.
Subscriptions
Subscriptions
Breadcrumbs

Identity Management Templates

In order to customize the text and style of your registration templates, you'll need to go to Manage → Templates → Piano ID. There you will find the following templates:

My Account Piano ID Components

This determines what information the user can see when they navigate to My Account. This template can’t be previewed, as it’s a header template designed for use within other templates.

Piano ID custom form

This is the screen that appears when users are displayed a form through Custom Fields.

Piano ID generic error page

his is the screen users will see if there is a fatal error during registration/login. This template doesn’t support a preview.

Piano ID initiate password reset

This screen appears when users click a link on the login screen to reset their passwords. On the reset password screen, there is a field where users can insert the email associated with their account. Once that email address is submitted, a success message appears and password reset instructions are emailed to the user.

Piano ID layout

This template controls the style and layout of all Identity Management screens. By default, this template includes your business logo from Edit Business and some basic CSS. You're free to change the image and customize the CSS.

Piano ID login confirm page

This template determines the style and content of the login screen returning users see when they attempt to sign up rather than login.

Piano ID login page

This template controls the text and main functionality of the login screen. Its default code overlaps significantly with that of the Identity Management registration page template, discussed here.

We don't have an out-of-box solution for the Identity Management login and register templates to be shown on the same screen via two separate tabs.

You should be able to achieve this functionality by utilizing our Identity Management functions, mainly the tp.pianoId.show() one with the respective screen parameter specified. To this end, you would customize the login template's HTML to contain two tabs, one of which would be the default tab the user lands on when trying to log in, and utilize a custom script built to show the registration screen when a user switches tabs.

Piano ID new password page

This screen will appear after a user clicks a reset password link within a reset password email.

Piano ID profile in My Account

This template determines which fields the user will be able to see and edit when they navigate to their profile in My Account.

Piano ID register confirm page

This template controls the registration confirmation screen displayed when users need to complete additional information after signing up with a social login provider.

The default screen heading is Concluding registration (previously Last step for registration in older versions).

If you have customized this template and still use the previous heading text, update it to Concluding registration to keep your implementation consistent with the default template.

The heading has been updated as follows:

Before:

HTML
<p class="lead">
  <t>Last step for registration</t>
</p>

After:

HTML
<p class="lead">
  <t>Concluding registration</t>
</p>

When users reach this screen through a social authentication flow that requires additional input, they must complete all required fields before they can continue. The close button is automatically hidden in this scenario, preventing users from dismissing the form and creating incomplete or orphaned identity records.

This behavior is intentional and ensures that all required registration information is collected before the identity record is finalized.

Piano ID register page

This template controls the text and main functionality of the register screen.

You can require email and/or password confirmation during registration to prevent user error. Before you use this option:

  1. First, the admin needs to select the Require email confirmation and/or Require password confirmation checkboxes in the Admin dashboard (Admin dashboard → Edit application → User provider → Identity Management configuration(the Main tab)).

  2. Then, you need to follow Edit Business on the Home page → User Provider → Identity Management configuration(the Main tab) and select one checkbox or both of them.

Here's the default code of this template with inline comments explaining its functionality (the code fragments for email and for password confirmation included):

HTML
<p class="lead"><t>Sign Up</t></p>
<p class="sub-lead">
    <span showIfSocialAuthNotAvailable><t>Sign up a new account.</t></span>
    <span showIfSocialAuthAvailable><t>Sign up a new account using a social account</t></span>
</p>

<!-- If an authentication via social networks was configured, then social network buttons will appear here -->
<div showIfSocialAuthAvailable class="social-wrapper">
    <span class="social-buttons-wrapper">
        <facebook-signin>Facebook</facebook-signin>
        <google-signin>Google</google-signin>
        <twitter-signin>Twitter</twitter-signin>
        <linkedin-signin>LinkedIn</linkedin-signin>
    </span>

<!-- Instead of the above span class listing the individual social networks, you can also use the below code to show all configured social networks: 

    <span class="social-buttons-wrapper"> 
         <social-sign-in></social-sign-in>
    </span>

-->

    <div class="divider"><t>or</t></div>
</div>
<!-- If a user tries to register without filling out the fields below, an error will appear here -->
<errors-list></errors-list>

<!-- These are the four fields a user can enter: first name, last name, email, and password. -->

<p class="input-group">
    <input fieldRegisterFirstName type="text" value="">
    <span class="placeholder"><i class="icon icon-user"></i><t>first name</t></span>
</p>
<p class="input-group">
    <input fieldRegisterLastName type="text" value="">
    <span class="placeholder"><i class="icon icon-user"></i><t>last name</t></span>
</p>
<p class="input-group">
    <input fieldRegisterEmail type="text" value="" autofocus>
    <span class="placeholder"><i class="icon icon-email"></i><t>email</t></span>
</p>

<!-- This code creates an additional field to confirm email to prevent misspelling during registration -->

<p class="input-group" *showIfRequireConfirm="'email'">
  <input fieldConfirmRegisterEmail type="text" value="">
  <span class="placeholder"><i class="icon icon-email"></i><t>confirm email</t></span>
</p>
<p class="input-group with-icon">
    <input fieldRegisterPassword type="password" value="">
    <span class="placeholder"><i class="icon icon-password"></i><t>password</t></span>

    <!-- This code creates a button that allows users to see the password they've typed in (passwords are hidden by default). -->

    <span class="float">
        <i showRegisterPassword class="icon icon-show"></i>
        <i hideRegisterPassword class="icon icon-hide"></i>
    </span>
</p>

<!-- This code creates an additional field to confirm password to prevent misspelling during registration -->

<p class="input-group with-icon" *showIfRequireConfirm="'password'">
  <input fieldConfirmPassword type="password" value="">
  <span class="placeholder"><i class="icon icon-password"></i><t>confirm password</t></span>
  <span class="float">
        <i showPassword class="icon icon-show"></i>
        <i hidePassword class="icon icon-hide"></i>
    </span>
</p>

<!-- If custom fields have been configured, then they will appear here -->

<custom-fields></custom-fields>
<!-- This creates a "remember me" button that auto-fills information for users upon repeat visits -->
<div class="cf remember-and-restore">
    <span class="pull-left">
        <label class="remember-me">
            <remember-me></remember-me>
            <t>Stay logged in</t>
        </label>
    </span>
</div>

<!-- If captcha has been configured, then it will appear here -->

<re-captcha></re-captcha>

<!-- In the section below you can add your own links and replace the # with an actual URL where your Terms of Use and Privacy Policy content is located. -->

<p class="small">
    <t>By clicking below to sign up, you're agreeing to our</t>
    <a href="#"><t>Terms of Use</t></a>
    <t>and</t>
    <a href="#"><t>Privacy Policy</t></a>
</p>

<!-- If consents have been configured, then they will appear here -->

<p>
    <consent-boxes></consent-boxes>
</p>
<p>
    <button actionRegister class="btn prime"><t>Sign Up</t></button>
</p>
<p class="final">
    <a [showScreen]="'login'" class="link"><t>I have an account</t></a>
</p>

If you'd like to show only a specific custom field during registration, you can add it manually using the code snippet below:

<custom-field fieldName="field_name"></custom-field>

Where you would replace the field_name value with the actual custom field name from your application.

Piano also has a new directive showIfStage, which can be used in the registration and login template. To use this directive, pass a "stage" parameter via URL, e.g. https://id.piano.io/id/api/v1/identity/vxauth/authorize?response_type=code&client_id=&stage=mobile. Users registering from this address will see any content under a <custom-field fieldName="field_name"></custom-field> tag.

More information about these directives is available in the section here.

Piano ID newsletters

This template controls the text and main functionality of the Newsletters tab in My Account where users can manage their ESP campaign newsletter subscriptions or unsubscribe from all campaigns.

Piano ID email confirmation view

This template is displayed when the user clicks the verification link sent to their email address.

If you are having issues with users not being redirected to checkout properly after verifying their email, please replace the following part of the template:

HTML
<span *showIfVerificationCodeCanStartCheckout>
                    <t>You will now be taken back to checkout. Click</t>
                    <a actionVerificationCodeStartCheckout
                       class="pn-welcome-back-email__link"
                       href=""
                       target="_blank"
                       data-e2e="welcome-back-start-checkout"><t>here</t></a>
                    <t>to continue or</t>
                </span>

With this code snippet:

HTML
<span *showIfVerificationCodeCanStartCheckout>
                    <t>You will now be taken back to checkout. Click</t>
                    <a actionVerificationCodeStartCheckout
                       class="pn-welcome-back-email__link"
                       data-e2e="welcome-back-start-checkout"><t>here</t></a>
                    <t>to continue or</t>
                </span>

In this template, you can also take advantage of the variable {{ contractInfo.homepageUrl }} that will automatically populate the Landing page URL configured in your Edit Business section here, unless defined otherwise directly within your Site License's Contract.

If you'd like to dynamically populate your business URL in Identity Management templates based on the website URL available in your application's Edit Business section, you can do so by including the variable {{'businessUrl' | token }} in any of the above templates.

Note, that we allow the following characters for email addresses.

Other Identity Management Templates

Other Identity Management templates include:

Available only if the related features are enabled on your application.

Template Display Directives

Authorization

Directives that can be used in Login, Register, Confirmation, and related authorization templates:

Actions

  • microsoftQuickAuthButton - Initializes Microsoft Quick Auth.

  • actionClose - Closes the Identity Management modal after clicking an element.

  • actionDoiSdkSkip - Skips the DOI confirmation screen when the Identity Management template is inside the Mobile SDK.

  • actionGoBack - Handles navigation to the previous screen.

  • actionLogin - Logs in the user after clicking an element.

  • actionOpenHome - Opens the business URL in a new browser tab.

  • actionPasswordlessLogin - Calls passwordless login after clicking an element.

  • actionRegister - Registers the user after clicking an element.

  • actionResendConfirmationEmail - Resends the confirmation email after clicking an element.

  • actionResendPasswordlessData, actionResendPasswordlessEmail - Resends passwordless data after clicking an element. When isGdprSecurityEnabled is true, the container no longer closes automatically after the resend action fires.

  • actionResendPhoneNumberConfirmation - Resends an SMS to confirm a phone number after clicking an element.

  • actionResendTwoFactorAuthEmail - Resends the two-factor authentication confirmation email after clicking an element.

  • actionRestore - Initiates password restore after clicking an element.

  • actionSaveNewPassword - Saves the new password after clicking an element.

  • actionStepNext - Submits the current step after clicking an element.

  • actionVerificationCodeStartCheckout - Opens checkout after email verification via magic link when the user clicks an element.

Input fields and field controls

  • fieldConfirmEmail - Controls the email confirmation field in the login form.

  • fieldConfirmPassword - Controls the password confirmation field in the register form.

  • fieldConfirmRegisterEmail - Controls the email confirmation field in the register form.

  • fieldEmail, fieldRegisterEmail - Manages email input field behavior in registration and social registration confirm forms.

  • fieldLoginEmail, fieldUserName - Controls the username field in the login form.

  • fieldLoginPassword - Controls the password field in the login form.

  • fieldPhone - Controls the phone number field in the register form.

  • fieldRegisterFirstName - Controls the first name field in the register form.

  • fieldRegisterLastName - Controls the last name field in the register form.

  • fieldRegisterPassword - Controls the password field in the register form.

  • fieldRestoreEmail - Manages the email input field in the password restoration form.

  • fieldSaveNewPassword - Controls the password field in the new password form.

  • fieldUserNameIcon - Shows an icon based on the username field value, for example when a user enters a phone number.

  • mailcheck - Provides email address suggestions for common typos and domain mistakes.

  • hidePassword, hideLoginPassword, hideRegisterPassword, hideNewPassword - Hides a password value after clicking an element.

  • showPassword, showLoginPassword, showRegisterPassword, showNewPassword - Shows a password value after clicking an element.

Server error messages

  • setAliasServerErrorMessage - Manages display of server-side error messages for alias fields.

  • setConfirmEmailServerErrorMessage - Displays server error messages specific to the email confirmation field.

  • setConfirmPasswordServerErrorMessage - Displays server error messages related to the confirm password field.

  • setEmailServerErrorMessage - Displays server error messages for the email field.

  • setFirstNameServerErrorMessage - Handles server error messages for the first name field.

  • setLastNameServerErrorMessage - Sets the server error message for the last name field.

  • setPasswordServerErrorMessage - Sets the server error message for the password field.

  • setPhoneServerErrorMessage - Sets server error messages for the phone field.

  • setUserNameServerErrorMessage - Displays server error messages for username-related fields, such as email and phone.

Authentication and screen state

  • aliasTitle - Displays the alias title based on configuration settings.

  • appName - Renders the configured application name within an element.

  • continueOnMobileApp - Manages mobile app continuation flow, including redirect URI and authentication token for mobile device transitions.

  • currentScreenClass - Adds the current screen class to an element.

  • setPasswordlessButtonTitle - Dynamically sets the button title based on enabled passwordless authentication methods.

  • showScreen - Changes the screen to the given one on element click.

  • signInButtonText - Sets the appropriate sign-in button text based on available authentication methods.

  • socialTypeClass - Adds the social type class to an element.

  • userEmail - Displays the current user's email address.

  • userName - Displays the user's identifier, such as email or phone, based on login context.

  • userPhone - Displays the user's phone number.

Registration, social auth, and mode visibility

  • *hideIfAuthCompleted - Hides content when the multi-step feature is enabled and authentication is completed.

  • *hideIfCreatePasswordlessUser - Hides content when create passwordless user is enabled.

  • *hideIfPasswordless - Hides content when passwordless is enabled.

  • *hideIfPasswordlessOrCreatePasswordlessUser - Hides content when passwordless or create passwordless user is enabled.

  • *hideIfSingleStep - Hides content when single-step mode is enabled.

  • *showIfAuthCompleted - Shows content when the multi-step feature is enabled and authentication is completed.

  • *showIfEmailNeeded - Shows content when a social auth provider does not provide an email and Identity Management asks the user to enter one.

  • *showIfEmailRegistrationEnabled - Shows content when email registration is enabled.

  • *showIfMobileSdk - Shows content when the Identity Management template is inside the Mobile SDK.

  • *showIfPasswordAuthAvailable - Shows content when password authentication is available.

  • *showIfPasswordAuthNotAvailable - Shows content when password login is not available.

  • *showIfPhoneNumbersSupport - Shows content when phone number feature support is enabled.

  • *hideIfPhoneNumbersSupport - Hides content when phone number feature support is disabled.

  • *showIfPhoneRegistrationEnabled - Shows content when phone registration is enabled.

  • *showIfRequireConfirm - Shows content when email or password confirmation is required.

  • *showIfSocialAuthAvailable - Shows content when social auth is available.

  • *showIfSocialAuthNotAvailable - Shows content when social auth is not available.

Passwordless authentication

  • *showAfterPasswordlessAuth - Shows content after passwordless auth confirmation. Also hidden when isGdprSecurityEnabled && isRegistration.

  • *showIfOnlyPasswordlessDigitalCodeEnabled - Shows content when passwordless confirmation is enabled only by digital code. Also hidden when isGdprSecurityEnabled && isRegistration.

  • *showIfOnlyPasswordlessMagicLinkEnabled - Shows content when only magic link authentication is enabled. Also hidden when isGdprSecurityEnabled && isRegistration.

  • *showIfPasswordlessAuthFailed - Shows content when passwordless auth confirmation failed.

  • *showIfPasswordlessButUserHasPassword - Shows content when passwordless is enabled and the user has a password.

  • *showIfPasswordlessLinkSent - Shows content when a passwordless magic link email was sent. Also hidden when isGdprSecurityEnabled && isRegistration.

  • *showIfPasswordlessMagicLinkAndDigitalCodeEnabled - Shows content when both magic link and digital code options are available. Also hidden when isGdprSecurityEnabled && isRegistration.

  • *showIfPasswordlessOrCreatePasswordlessUser - Shows content when passwordless or create passwordless user is enabled.

GDPR Security Protection

The following structural directives are intended for passwordless registration flows. They are evaluated only when GDPR Security Protection is enabled and the user arrived from a registration screen.

  • *showIfSecurityProtectionEnabledOnRegistration - Shows the element when GDPR security protection is enabled and the user arrived from a registration screen, regardless of which passwordless mode is configured. Condition: isGdprSecurityEnabled && isRegistration.

  • *showIfDigitalCodeWithSecurityProtectionEnabledOnRegistration - Shows the element when security protection is enabled, the user arrived from a registration screen, digital code is enabled, and magic link is not enabled. Condition: isGdprSecurityEnabled && isRegistration && isPasswordlessDigitalCodeEnabled && !isPasswordlessMagicLinkEnabled.

  • *showIfMagicLinkWithSecurityProtectionEnabledOnRegistration - Shows the element when security protection is enabled, the user arrived from a registration screen, magic link is enabled, and digital code is not enabled. Condition: isGdprSecurityEnabled && isRegistration && isPasswordlessMagicLinkEnabled && !isPasswordlessDigitalCodeEnabled.

  • *showIfDigitalCodeAndMagicLinkWithSecurityProtectionEnabledOnRegistration - Shows the element when security protection is enabled, the user arrived from a registration screen, and both digital code and magic link are enabled. Condition: isGdprSecurityEnabled && isRegistration && isPasswordlessDigitalCodeEnabled && isPasswordlessMagicLinkEnabled.

These directives are mutually exclusive: at most one renders for a given user depending on the configured passwordless method or methods.

HTML
<p *showIfSecurityProtectionEnabledOnRegistration class="pn-email-confirmation__head">
  <t>Almost finished!</t>
</p>

<p *showIfDigitalCodeWithSecurityProtectionEnabledOnRegistration class="pn-email-confirmation__text">
  <t>To complete registration, please enter the confirmation code we emailed to </t>
  <span class="pn-email-confirmation__email" userEmail></span>
</p>

<p *showIfMagicLinkWithSecurityProtectionEnabledOnRegistration class="pn-email-confirmation__text">
  <t>To complete registration, please click the validation link we emailed to </t>
  <span class="pn-email-confirmation__email" userEmail></span>
</p>

<p *showIfDigitalCodeAndMagicLinkWithSecurityProtectionEnabledOnRegistration class="pn-email-confirmation__text">
  <t>To complete registration, please click the validation link or enter the confirmation code we emailed to </t>
  <span class="pn-email-confirmation__email" userEmail></span>
</p>

Password reset and new password

  • *afterNewPasswordRequired - Shows content after a new password is saved in the new password screen.

  • *afterRestoreRequired - Shows content after password restore is initiated in the restore password screen.

  • *beforeNewPasswordRequired - Shows content before the new password is saved.

  • *beforeRestoreRequired - Shows content before a password restore is initiated.

  • *showIfRestoreByEmail - Shows content when password reset uses email.

  • *showIfRestoreByPhone - Shows content when password reset uses a phone number.

Double opt-in and verification code

  • *showIfVerificationCodeAlreadyConfirmed - Shows content when the verification code is already confirmed by the user. DOI flow.

  • *showIfVerificationCodeCanStartCheckout - Shows content after email verification when checkout can be started. DOI flow.

  • *showIfVerificationCodeConfirmed - Shows content when the verification code is confirmed. DOI flow.

  • *showIfVerificationCodeError - Shows content when code verification fails with an error. DOI flow.

  • *showIfVerificationCodeExpired - Shows content when the verification code has expired. DOI flow.

  • *showIfVerificationCodeGiveAccess - Shows content when the user has been given access to a resource. DOI flow.

  • verificationCodeError - Displays verification code error messages.

  • verificationCodeResource - Adds the resource name to the element. DOI flow.

Other authorization utilities

  • externalEvent - Emits an external event.

  • recaptcha - Controls CAPTCHA.

  • t - Shows translated text and updates translations when the language changes.

Common

Directives that could be used in all Identity Management templates:

  • appLogo - Renders application logo based on configuration.

  • autofocus, pn-autofocus - Sets automatic focus on element when rendered.

  • actionCustomEvent - Sends a custom event and closes a Identity Management modal. Used in the Passwordless confirmation screen. Example

  • showIfCustomEventOrParam - Shows content when either custom event or parameter is present. Used in the Passwordless confirmation screen.

  • showIfCustomEvent - Shows content when a specific custom event is present in the custom_events query param. Used in the Passwordless confirmation screen.

  • showIfCustomParam - Shows content when a specific custom parameter is present in the custom_params query params. Used in the Passwordless confirmation screen.

  • mobileControlZoomFix - Fixes a mobile input's zooming after tapping on the control.

  • actionStepBack - Handles navigation to the previous step in multi-step forms.

  • *hideIfFirstStep - Hides content when a user is on the first step of a multi-step form.

  • *hideIfLastStep - Hides content when a user is on the last step of a multi-step form.

  • *hideIfMultistep - Hides content when a form is in multi-step mode.

  • *showIfFirstStep - Shows content when the user is on the first step of a multi-step form.

  • *showIfLastStep - Shows content when a user is on the last step of a multi-step form.

  • *showIfMultistep - Shows content when a custom form has steps.

  • formStepTitle - Attribute directive that defines the title for a step in a multi-step form or wizard. Used to provide a descriptive heading for each step of the process.

    Example: <custom-field fieldName="field_name"></custom-field>

  • showIfPasswordInvalid - Displays validation errors for the password field.

  • showIfConfirmPasswordInvalid - Structural directive that conditionally displays content when the confirm password field in a form is invalid. Typically used to show error messages when passwords don't match or when the confirmation password validation fails.

    Example: <custom-field fieldName="field_name"></custom-field>


  • showIfEmailInvalidBy - Structural directive that conditionally displays content when the email field is invalid based on specific validation criteria. Provides fine-grained control over email validation error messages.

    Example: <div *showIfEmailFieldInvalidBy="'required'"> Email is required </div> <div *showIfEmailFieldInvalidBy="'email'"> Please enter a valid email format </div>


  • showIfEmailInvalid - Structural directive that conditionally displays content when the email field in a form is invalid. Used to show validation error messages for email input fields.

    Example: <div *showIfEmailFieldInvalid> Please enter a valid email address </div>


  • showIfFirstNameInvalidBy - Structural directive that conditionally displays content when the first name field is invalid based on specific validation criteria. Allows for more granular control over when to show specific error messages.

    Example: <div *showIfFirstNameInvalidBy="'required'"> First name is required </div> <div *showIfFirstNameInvalidBy="'minlength'"> First name must be at least 2 characters </div>


  • showIfFirstNameInvalid - Structural directive that conditionally displays content when the first name field in a form is invalid. Used to show validation error messages for first name input fields.

    Example: <div *showIfFirstNameInvalid> First name is required </div>


  • showIfForLastNameInvalid - Structural directive that conditionally displays content when the last name field in a form is invalid. This directive is typically used with form validation to show error messages for last name input fields.

    Example: <div *showIfForLastNameInvalid> Last name is required </div>


  • showIfLastNameInvalidBy - Displays specific validation errors for the last name field.

  • showIfNewPasswordInvalidBy - Displays specific validation errors for the new password field.

  • showIfNewPasswordInvalid - Displays general validation errors for the new password field.

  • showIfPasswordInvalidBy - Displays specific validation errors for the password field.

  • showIfPhoneInvalidBy - Displays specific validation errors for the phone number field.

  • showIfPhoneInvalid - Displays general validation errors for the phone number field.

  • showIfRegisterConfirmPasswordInvalidBy - Shows content when the Confirm password field has a specified validation error.

  • showIfRegisterConfirmEmailInvalidBy, showIfRegisterConfirmUserNameInvalidBy - Displays specific validation errors for username/email confirmation during registration.

  • showIfUserNameInvalidBy - Displays specific validation errors for the username field.

  • showIfUserNameInvalid - Shows error message when username field validation fails.

  • externalEvent - Action. Emits an external event.

  • t - Shows translated text. Automatically updates translations when the language changes.

  • hideIfCheckoutForm - Hides content when the widget is a Custom form widget and inside the checkout form. Used to hide passwordless and phone number fields in the checkout form.

    Example: <div *showIfForLastNameInvalid> Last name is required </div>


  • hideIfDisplayMode - Hides content when display mode is specified.

  • hideIfFormMode - Hides content when the widget is a Custom form widget.

  • hideIfInsideCheckout - Hides content when the Identity Management template is embedded in the checkout widget.

  • *hideIfOauth - Hides content when OAuth authentication is active.

  • hideIfRegisterMode - Hides content when Auth widget.

  • hideIfRegistrationDisabled - Hides content when registration is disabled.

  • *hideIfStage - Hides content when the stage config is equal to the passed value.

    Example: <div *showIfForLastNameInvalid> Last name is required </div>


  • setClassDependsOnAppLogo

  • showIfDisplayMode - Shows content when display mode is specified.

  • showIfFormMode - Shows content when the widget is a Custom form widget.

  • showIfInsideCheckout - Shows content when the Identity Management template is embedded in the checkout widget.

  • *showIfOauth - Shows content when OAuth authentication is active.

  • showIfRegisterMode - Shows content when the Auth widget is in register mode.

  • *showIfStage - Shows content when the stage config is equal to the passed value.

    Example: <div *showIfForLastNameInvalid> Last name is required </div>


  • actionGoBack - Handles navigation to the previous screen.

  • *hideIfPhoneNumbersSupport - Hides content when phone number feature support is disabled.

  • *showIfEmailRegistrationEnabled - Shows content when email registration is enabled.

  • *showIfPhoneNumbersSupport - Shows content when the phone number feature is supported.

  • *showIfPhoneRegistrationEnabled - Shows content when phone registration is enabled.

Custom form

Directives that can be used in the Custom form widget:

  • actionSkip - Action. Skip form filling.

  • actionSubmit - Action. Submits a custom form after clicking on an element.

  • formTitle - Displays a form title based on configuration.

Newsletters

Directives that can be used in the Newsletters widget:

  • actionUnsubscribeFromAllNewsletters - Handles bulk unsubscription from all newsletters.

  • newslettersCount - Displays the total count of available newsletters.

Profile

Directives that can be used in the Profile template:

  • actionCloseConfirmPhone - Handles closing of phone confirmation dialog.

  • actionCloseDeleteAccount - Handles closing of the account deletion dialog.

  • actionDeleteAccountInitiated - Action. Initiates account deletion.

  • actionDeleteAccount - Action. Deletes the account.

  • actionResendConfirmationEmail - Action. Resends confirmation email.

  • actionResendConfirmationPhone - Action. Resends phone number confirmation.

  • actionRestoreProfileAliases - Action. Restores the alias value.

  • actionRestoreProfileCustomFields - Action. Restores the custom field value.

  • actionRestoreProfileEmail - Action. Restores email value.

  • actionRestoreProfileName - Action. Restores name value.

  • actionRestoreProfilePassword - Action. Restores password value.

  • actionRestoreProfilePhone - Action. Restores phone number value.

  • actionUpdateProfileAliases - Action. Updates the alias's value.

  • actionUpdateProfileCustomFields - Action. Updates custom fields.

  • actionUpdateProfileEmail - Action Updates email.

  • actionUpdateProfileName - Action. Updates the name.

  • actionUpdateProfilePassword - Action. Updates the password.

  • actionUpdateProfilePhone - Action. Updates the phone number.

  • actionUpdateProfile - Action. Updates the profile.

  • *showIfAliasesExist - Shows content if aliases exist

  • customFieldLabel - Shows custom field label.

  • *hideIfDeleteAccountEnabled - Hides content if delete account is enabled.

  • *hideIfDeleteAccountFailed - Hides content when the account deletion process has failed.

  • *hideIfDeleteAccountInitiated - Hides content when the account deletion process has been initiated.

  • *showIfDeleteAccountEnabled - Shows content when the account deletion feature is enabled.

  • *showIfDeleteAccountFailed - Shows content when the account deletion process has failed.

  • *showIfDeleteAccountInitiated - Shows content when the account deletion process has been initiated.

  • fieldAlias - Controls the alias field behavior in profile forms, handling input events and validation.

  • fieldProfileConfirmDeleteAccountPassword - Controls Confirm delete account password field.

  • fieldProfileCurrentPassword - Controls password field in profile form.

  • fieldProfileEmailCurrentPassword - Controls the current password input field in email change flow.

  • fieldProfileEmail - Controls the Email field.

  • fieldProfileFirstName - Controls the First name field.

  • fieldProfileLastName - Controls the Last name field.

  • fieldProfileNewPassword - Controls the New password field.

  • fieldProfilePhone - Controls the phone number field behavior in profile forms, handling input events and validation.

  • fieldProfileRepeatNewPassword - Controls the Repeat new password field.

  • flashProfileAliasesUpdated - Shows content for 2 seconds after profile aliases are updated.

  • flashProfileCustomFieldsUpdated - Shows content for 2 seconds after profile custom fields are updated.

  • flashProfileEmailConfirmSent - Shows content for 2 seconds after the email confirmation link is sent.

  • flashProfileEmailUpdated - Shows content for 2 seconds after profile email is updated.

  • flashProfileNameUpdated - Shows content for 2 seconds after the profile name is updated.

  • flashProfilePasswordUpdated - Shows content for 2 seconds after the profile password is updated.

  • flashProfilePhoneConfirmSent - Shows content for 3 seconds after profile aliases are updated.

  • flashProfilePhoneUpdated - Shows content for 2 seconds after profile phone is updated.

  • flashProfileUpdated - Shows content for 2 seconds after the profile is updated.

  • *hideChangePassword - Hides content when password or email changes are initiated, or when it is passwordless.

  • *hideIfChangePassword - Hides content when password changing is initiated.

  • *hideIfConfirmPhone - Hides content when phone number confirmation is required.

  • *hideIfPasswordless - Hides content when passwordless is enabled.

  • *showChangePasswordPasswordless - Shows content when passwordless is enabled and password adding is initiated.

  • *showChangePassword - Shows content when password or email changes are initiated.

  • *showIfCanAddPassword - Shows content when the Identity Management template is inside the Mobile SDK.

  • *showIfChangePasswordPasswordless - Shows content when passwordless is enabled and password adding is initiated.

  • *showIfChangePassword - Shows content when password change functionality is active.

  • *showIfConfirmPhone - Shows content when phone number confirmation is required.

  • *showIfEmailChanged - Shows content when the email address has been modified.

  • *showIfPasswordless - Shows content when passwordless authentication is enabled.

  • showIfAppleAvailable - Shows content when Apple social auth is available.

  • showIfAppleLinked - Shows content when the Apple social account is linked.

  • showIfAppleUnlinked - Shows content when the Apple account is not linked.

  • showIfFacebookAvailable - Shows content when Facebook login integration is available.

  • showIfFacebookLinked - Shows content when the user account is linked to Facebook.

  • showIfFacebookUnlinked - Shows content when the user account is not linked to Facebook.

  • showIfGoogleAvailable - Shows content when Google login integration is available.

  • showIfGoogleLinked - Shows content when the user account is linked to Google.

  • showIfGoogleUnlinked - Shows content when the user account is not linked to Google.

  • showIfLinkedinAvailable - Shows content when LinkedIn login integration is available.

  • showIfLinkedinLinked - Shows content when the user account is linked to LinkedIn.

  • showIfLinkedinUnlinked - Shows content when the user account is not linked to LinkedIn.

  • showIfMicrosoftAvailable - Shows content when Microsoft login integration is available.

  • showIfMicrosoftLinked - Shows content when the user account is linked to Microsoft.

  • showIfMicrosoftUnlinked - Shows content when the user account is not linked to Microsoft.

  • openIdIcon - Sets OpenID provider icon.

  • openIdTitle - Displays properly formatted OpenID provider titles. Capitalizes the first letter and formats the rest of the provider name in lowercase.

  • showIfOpenIdAvailable - Shows content when OpenID login integration is available.

  • showIfOpenIdLinked - Shows content when the user account is linked to OpenID.

  • showIfOpenIdUnlinked - Shows content when the user account is not linked to OpenID.

  • showIfSocialAuthAvailable - Shows content when social authentication is available.

  • showIfTwitterAvailable - Shows content when Twitter login integration is available.

  • showIfTwitterLinked - Shows content when the Twitter social account is linked.

  • showIfTwitterUnlinked - Shows content when the Twitter account is unlinked.

  • offChangePassword - Controls visibility and interaction of password change form elements based on state.

  • onChangePassword - Controls visibility and interaction of password change form elements based on state.

  • *showIfResendConfirmationEmailNeeded - Shows content if a resending of the confirmation email is needed.

Several display directives hide or display HTML template elements when the condition is true or false. Below, we are going to provide some additional examples for some of the directives that are most commonly used.

selector: '[*showIfStage]'

Show the directive element and its inside elements if the current stage equals the given one.

For example, it can be used in the Identity Management register and login template. To use this directive, pass a "stage" parameter via URL, e.g. https://id.piano.io/id/api/v1/identity/vxauth/authorize?response_type=code&client_id=<AID>&stage=mobile. Users registering from this address will see any content under a <div showIfStage="mobile"></div> tag.

Another possibility would be to use the parameter in the Identity Management function, like this:

tp.pianoId.show({screen: 'register', stage:'mobile'})

Alternatively, you can also use the selector showIfStage!=="mobile" in order to show specific parts of Identity Management templates only in case the stage is not equal to the given one. In this example, you would show the content wrapped within this selector only if the current stage does not equal "mobile".

This directive is currently not available in our iOS/Android SDKs.

selector: '[*hideIfStage]'

Hide the directive element and inside elements if the current stage equals the given one.

selector: '[*showIfInsideCheckout]'

Show the directive element and inside elements if the current form is inside checkout.

selector: '[*hideIfInsideCheckout]'

Hide the directive element and inside elements if the current form is inside checkout.

For example:

HTML
<div hideIfInsideCheckout> <p>Do not show me on checkout</p> </div>

selector: '[*hideIfFormMode]'

Hide directive element and inside elements if the current mode is profile.

selector: '[*hideIfRegisterMode]'

Hide the directive element and inside elements if the current mode is register.

selector: '[*showIfFormMode]'

Show directive element and inside elements if the current mode is login.

selector: '[*setClassDependsOnAppLogo]'

It sets the class with-logo to an element if a logo is defined and without-logo if the logo is undefined.

selector: '[*hideIfCheckoutForm]'

Hide the directive element and inside elements if the current form is in checkout.

selector: '[*showIfOauth]'

Show the directive element and inside elements if the current form is OAuth.

selector: '[*hideIfOauth]'

Hide the directive element and inside elements if the current form is OAuth.

showIfDisplayMode

Show the directive element and inside elements if the current display mode equals the given one.

For example:

HTML
<div showIfDisplayMode="modal"> <p>Text appears only during modal view</p> </div>

selector: '[*hideIfDisplayMode]'

Hide the directive element and inside elements if the current display mode equals the given one.

selector: '[*hideIfRegistrationDisabled]'

Hide the directive element and inside elements if the user registration is disabled.

social-sign-in

Shows the social login buttons that are configured on the Other login methods tab. By default, only the round buttons are displayed, but you can add the type="withTitle" attribute to display the title.

For example:

XML
<social-sign-in></social-sign-in>
<social-sign-in type="withTitle"></social-sign-in>

*showIfRemovePasswordEnabled

  • Purpose: Shows the element only when the remove-password feature is enabled (is_remove_password_enabled: true in config)

  • Type: Structural (conditional visibility)

  • Usage:

<button *showIfRemovePasswordEnabled actionInitiateRemovePassword class="remove-password-btn" ...></button>

actionInitiateRemovePassword

  • Purpose: On click, transitions the password block into "remove password" confirmation mode

  • Type: Behavioral (click action)

  • Usage:

<button actionInitiateRemovePassword>...</button>

Template before:

<div class="controls">
  <input disabled id="password" ... type="password" value="********" />
</div>

Template after:

<div class="controls remove-password-controls">
  <input disabled id="password" ... type="password" value="********" />
  <button *showIfRemovePasswordEnabled actionInitiateRemovePassword class="remove-password-btn"
          tooltipText="{{ 'Remove password' | t }}" type="button">
  </button>
</div>

actionCloseRemovePassword

  • Purpose: On click, closes/dismisses the remove-password confirmation UI, returning to the normal password block view

  • Type: Behavioral (click action)

  • Usage:

<button class="remove-password-confirmation-close-btn" actionCloseRemovePassword></button>

actionRemovePassword

  • Purpose: On click, submits the remove-password request using the value from the confirmation input

  • Type: Behavioral (click action)

  • Usage:

<button actionRemovePassword class="btn"><t>Confirm</t></button>

fieldProfileConfirmRemovePassword

  • Purpose: Binds the password confirmation input in the remove-password form. Validates as required, triggers removePassword() on Enter, and resets the failed state on each input change

  • Type: Behavioral (field control)

  • Usage:

<input fieldProfileConfirmRemovePassword id="confirm_remove_password"
       placeholder="{{ 'Password' | t }}" type="password">

*showIfRemovePasswordInitiated

  • Purpose: Shows the element when the remove-password confirmation flow has been initiated (i.e., after the user clicks the remove button)

  • Type: Structural (conditional visibility)

  • Usage:

<div *showIfRemovePasswordInitiated class="remove-password-container">...</div>

*hideIfRemovePasswordInitiated

  • Purpose: Hides the element when the remove-password confirmation flow is active

  • Type: Structural (conditional visibility)

  • Usage:

<div class="control-group" *hideIfRemovePasswordInitiated>...</div>
<div *hideIfRemovePasswordInitiated class="tp-data-block-actions">...</div>

*showIfRemovePasswordFailed

  • Purpose: Shows the element when the remove-password API call has failed (e.g., wrong password entered)

  • Type: Structural (conditional visibility)

  • Usage:

<p *showIfRemovePasswordFailed class="remove-password-failed">
  <t>Failed to remove password. Please, make sure that password is valid.</t>
</p>

*hideIfRemovePasswordFailed

  • Purpose: Hides the element when the remove-password attempt has failed (used to swap hint text for error text)

  • Type: Structural (conditional visibility)

  • Usage:

<div *hideIfRemovePasswordFailed>
  <p class="remove-password-hint">
    <t>Enter the password to confirm your decision to remove password.</t>
  </p>
</div>

*showIfGlobalMode

  • Purpose: Shows a warning banner when passwordless global mode is active, indicating the password will be removed across all applications in that mode

  • Type: Structural (conditional visibility)

  • Usage:

<div *showIfGlobalMode class="remove-password-global-mode-warning">
  <i class="remove-password-global-mode-warning-icon"></i>
  <t>Password will be removed from all applications in global mode</t>
</div>

flashProfilePasswordRemoved

  • Purpose: Wraps a success message that flashes after a password is successfully removed

  • Type: Behavioral (flash message)

  • Usage:

<div flashProfilePasswordRemoved>
  <div class="complete-msg" data-e2e="password-removed-msg">
    <i class="complete-msg-icon"></i>
    <t>Password has been removed.</t>
  </div>
</div>

tooltipText

  • Purpose: Attaches a hover tooltip to any element using the provided text string. Tooltip appears after 500ms and hides after 100ms. Sets role="button" and tabindex="0" on the host element for accessibility.

  • Type: Behavioral (tooltip)

  • Usage:

<button tooltipText="{{ 'Remove password' | t }}"></button>

Last updated: