showPasswordEditor

client.showPasswordEditor({
  container: HTMLElement|id,
  // Optional arguments
  accessToken: string,
  userId: string,
  showLabels: boolean,
  promptOldPassword: boolean,
  onReady: function,
  onSuccess: function,
  onError: function,
  theme: object,
  i18n: object,
})

See the example

Description

Show the widget allowing the current profile to edit his password after email validation.

You can pass the profile’s access token retrieved after authentication or you can provide the profile’s identifier.

Examples

import { ErrorResponse } from '@reachfive/identity-ui'

const accessToken = // Here paste the authorization token of the profile retrieved after login

// Update the password with the access token
client.showPasswordEditor({
    container: 'password-editor-container',
    accessToken,
    showLabels: true,
    promptOldPassword: true,
    onReady: instance => {
      // Destroy the widget
      // if (...) instance.destroy()
    },
    onSuccess: () => {
        // Handle the password update success
        console.log('Password successfully updated!')
    },
    onError: (error: ErrorResponse)  => {
        // Handle the password update error
        console.error(error)
    },
    theme: {
        primaryColor: '#274890',
        borderRadius: '#374890'
    },
    i18n: {
        newPassword: 'Your new password',
        oldPassword: 'Your old password',
        passwordConfirmation: 'Confirm your new password'
    }
})

Widget

Password editor

showPasswordEditor

Password editor with custom password policy

Set password constraints in the ReachFive Console (Settings  Security  Password policy).
showPasswordEditor custom rules

Parameters

container HTMLElement |id

The DOM element or the id of a DOM element in which the widget should be embedded.

accessToken function

The profile’s access token.

userId string

The profile’s identifier.

showLabels boolean

Whether the signup form fields' labels are displayed on the login view.

Defaults to false.

promptOldPassword boolean

Ask for the old password before entering a new one.

Defaults to false.

onReady function

Callback function called after the widget has been successfully loaded and rendered inside the container. The callback is called with the widget instance.

onSuccess function

Callback function called when the request was successful.

onError function

Callback function called when the request has failed.

theme object

The options to set up to customize the appearance of the widget.

primaryColor string

The button and link default color.

Default to #229955.

borderRadius string

The radius of the social login button and other input (in px).

This can be used to make inline and/or circle social login buttons.

Default to 3.

socialButton object

Social button theming options.

Parameters

  • inline- Boolean that specifies if the buttons are inline (horizonally-aligned).

  • textVisible - Boolean that specifies if the text is visible.

  • fontWeight - Specifies the font-weight (such as normal, bold, or 900).

  • fontSize - Specifies the font-size.

  • lineHeight - Specifies the line-height.

  • paddingX - Specifies the padding for the x axis. (left and right)

  • paddingY - Specifies the padding for the y axis. (top and bottom)

  • borderRadius - Specifies the border-radius.

  • borderWidth - Specifies the border-width.

  • focusBoxShadow - Boolean that specifies if there is a box shadow on the button or not.

i18n object

Widget labels and error messages to override. Falls back to the default wordings in en, fr, es, it and nl.

For example, you might re-word the socialAccounts.linkNewAccount or change the way other wordings display to the user while leaving the remaining text on the widget intact.