We’ve migrated our documentation to a new site, which means some URLs have changed.
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→Identity Management. 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: This 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 how users are asked to confirm their registration and fill in custom fields after using one of the available social login options.

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

The close button is hidden on this screen when end users arrive here through social authentication with an additional input state. Users must complete all required fields before they can proceed or navigate away. This is intentional behavior to prevent orphaned or incomplete identity records in the system.

If you have customized this template and used the old text "Last step for registration", you may want to update your custom template to use "Concluding registration" for consistency with the default template.

When this screen is displayed, users are prompted to complete any required custom fields that were not collected during the social login flow. The form cannot be dismissed until all required fields are filled in.

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 the registration, you can add it manually using the below code snippet:

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

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.

Unlock the full potential of our feature and take your skills to the next level! Dive into our Training Center and discover exclusive Best Practice resources that will elevate your implementation strategy. With expert tips and insider knowledge, you'll become a master in no time. Access the links below to learn more and gain a competitive edge.

Ready to get started? Our Training Center is just a click away: here.

*For more information about our Training center, please visit the article here.

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 withing 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 could be used in the Login, Register and Confirmation templates:

  • microsoftQuickAuthButton - Initializes the Microsoft Quick Auth.

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

  • actionDoiSdkSkip - Skips the DOI confirmation screen if a user clicks on an element. Used when the Identity Management template is inside the Mobile SDK.

  • actionLogin - Login user after click on element.

  • actionOpenHome - Opens the business URL in a new browser tab. This allows users to navigate to the origin site seamlessly.

  • actionPasswordlessLogin - Calls passwordless login after click on element.

  • actionRegister - Registers the user after clicking on an element.

  • actionResendConfirmationEmail - Resends confirmation email after click on element.

  • actionResendPasswordlessData, actionResendPasswordlessEmail - Resends email with passwordless link after click on element.

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

  • actionResendTwoFactorAuthEmail - Resends confirmation email after click on element.

  • actionRestore - Initiates password restore after click on element.

  • actionSaveNewPassword - Saves new password after click on element.

  • actionStepNext - Submits the current step after click on element.

  • aliasTitle - Displays alias title based on configuration settings.

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

  • fieldConfirmPassword - Controls Password confirmation field in register form.

  • fieldConfirmRegisterEmail - Controls Email confirmation field in register form.

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


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

  • fieldConfirmEmail - Controls Email confirmation field in login form.

  • fieldRegisterEmail, fieldEmail - Manages email input field behavior in registration and social registration confirm forms. Handles validation, formatting, and error states.

  • fieldLoginPassword - Controls Password field in the login form.

  • fieldPhone - Controls Phone number field in register form.

  • fieldRegisterFirstName - Controls First name field in register form.

  • fieldRegisterLastName - Controls Last name field in register form.

  • fieldRegisterPassword - Controls Password field in register form.

  • fieldRestoreEmail - Manages email input field in password restoration form. Handles validation and accessibility attributes.

  • fieldSaveNewPassword - Controls Password field in the register form.

  • fieldUserNameIcon - Shows icon depending on the user name field value. When a user enters a phone number.

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

  • 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 the username-related fields (email and phone).

  • fieldLoginPassword, fieldRegisterPassword, fieldSaveNewPassword, fieldConfirmPassword - Used to change visibility of password field value.

  • mailcheck - Provides email address suggestion functionality. Monitors email input, suggests corrections for common typos and domain mistakes. Allows users to quickly apply suggested corrections with a single click.

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

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

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

  • *hideIfCreatePasswordlessUser - Hides content when create passwordless user is enabled. Used in the single-step feature. Example:


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

  • *hideIfPasswordless - Hides content when passwordless is enabled.

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

  • *showAfterPasswordlessAuth - Shows content when passwordless auth confirmation.

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

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

  • *showIfOnlyPasswordlessDigitalCodeEnabled - Shows content when passwordless confirmation is enabled only by digital code

  • *showIfPasswordlessLinkSent - Shows content when a passwordless magic link mail was sent.

  • *showIfPasswordlessMagicLinkAndDigitalCodeEnabled - Shows content when both magic link and digital code options are available.

  • *showIfOnlyPasswordlessMagicLinkEnabled - Shows content when only magic link authentication is enabled. Hides content for phone-based authentication flows.

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

  • recaptcha - Controls CAPTCHA.

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

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

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

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

  • *showIfRestoreByEmail - Shows content when for password reset email was used.

  • *showIfRestoreByPhone - Shows content when for password resetting was used phone number.

  • setPasswordlessButtonTitle - Dynamically sets button title based on enabled passwordless authentication methods. Handles different combinations of digital code and magic link authentication options.

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

  • showScreen - Changes screen to the givenone on element click. Example:

    Show register


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

  • *showIfEmailNeeded - Shows content when a social auth provider does not provide an email, ID asks to enter an email. Registration via a social button flow.

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

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

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

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

  • socialTypeClass - Adds social type class to the element.

  • hidePassword, hideLoginPassword, hideRegisterPassword, hideNewPassword - Hides password after click on element.

  • showPassword, showLoginPassword, showRegisterPassword, showNewPassword - Shows password after click on element.

  • userName - Displays user's identifier (email or phone) based on login context.

  • userPhone - Displays the user's phone number.

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

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

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

  • *showIfVerificationCodeCanStartCheckout - Shows content after email verification and can start checkout. DOI flow.

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

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

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

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

  • verificationCodeError - Displays verification code error messages.

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

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:


  • 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:

    Passwords do not match


  • 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:

    Email is required

    Please enter a valid email format


  • 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:

    Please enter a valid email address


  • 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:

    First name is required

    First name must be at least 2 characters


  • 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:

    First name is required


  • 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:

    Last name is required


  • 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:


  • 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:


  • 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.

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


  • 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=&stage=mobile. Users registering from this address will see any content under a

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 to 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>

Last updated: