showProfileEditor

client.showProfileEditor({
  container: HTMLElement|id,
  accessToken: string,
  fields: Field[], (1)
  // Optional arguments
  showLabels: boolean,
  countryCode: string,
  redirectUrl: string,
  onReady: function,
  onSuccess: function,
  onError: function,
  theme: object,
  i18n: object,
  phoneNumberOptions:  object
})
1 You can force certain fields to be optional when needed by passing the key for the field and required: false as shown in the example below.

showProfileEditor optional fields

client.showProfileEditor({
    container: 'profile-editor-container',
    accessToken,
    fields: [
        { key: 'phone_number', required: false }, (1)
        'given_name',
        'family_name',
        'gender',
        'birthdate',
        'consents.newsletter',
        'custom_fields.loyalty_card_number'
    ],
    showLabels: true,
    countryCode: 'US',
    onReady: instance => {
      // Destroy the widget
      // if (...) instance.destroy()
    },
})
1 phone_number is optional in this example.

Description

Show the widget allowing the current profile to edit his data.

Examples

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

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

// The SMS feature is disabled on the ReachFive account
client.showProfileEditor({
    container: 'profile-editor-container',
    accessToken,
    fields: [
        'given_name',
        'family_name',
        'phone_number',
        'gender',
        'birthdate',
        'consents.newsletter',
        'custom_fields.loyalty_card_number'
    ],
    showLabels: true,
    countryCode: 'US',
    onReady: instance => {
      // Destroy the widget
      // if (...) instance.destroy()
    },
    onSuccess: () => {
        console.log("Profile updated with success!")
    },
    onError: (error: ErrorResponse) => {
        console.error(error)
    },
    theme: {
        primaryColor: '#274890',
        borderRadius: '#374890'
    },
    i18n: {
        'save': 'Save your profile\'s data'
    }
})

Widget

showProfileEditor

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.

fields Field[]

List of the fields to display in the form.

You can force certain fields to be optional when needed by passing the key for the field and required: false as shown here.

The following fields cannot be changed with this widget:

  • password

  • password_confirmation

It is not possible to update the primary identifier submitted at registration (email or phone number). When the primary identifier is the email address (SMS feature disabled), users can only enter a phone number and update without limit.
Note on consents

Any consent used in the fields property that is archived won’t be checkable on the showProfileEditor widget. This means the user cannot interact with the archived consent (unless they had previously accepted the consent), potentially lessening the overall user experience. If the now archived consent was in fact previously accepted, the user is able to uncheck (refuse) the consent.

Archived consent with no user history/previously rejected

  • Consent to receiving monthly newsletter.

Previously accepted consent

  • Consent to receiving monthly newsletter.

showLabels boolean

Boolean for whether the signup form fields' labels are displayed on the login view.

Defaults to false. If set to true, the labels are shown which includes an asterisk (*) next to required fields.

countryCode string

The ISO country code useful to format phone numbers.

Defaults to the predefined country code in your account settings or FR.

redirectUrl string

The URL sent in the email to which the user is redirected. This URL must be whitelisted in the Allowed Callback URLs field of your ReachFive client settings.

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.

Below is an example of some of the theme attributes.

For a full list, see theme attributes.

primaryColor string

The button and link default color.

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

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

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.

phoneNumberOptions object

Object that lets you set display options for the phone number field.

Options

  • withCountrySelect: boolean that lets you display the option to select the country for a phone number. Defaults to false.

theme attributes

base

attribute

animateWidgetEntrance

fontSize

smallTextFontSize

lineHeight

headingColor

textColor

mutedTextColor

borderRadius

borderColor

borderWidth

backgroundColor

primaryColor

dangerColor

warningColor

successColor

lightBackgroundColor

maxWidth

paddingY

paddingX

spacing

_absoluteLineHeight

_blockInnerHeight

_blockHeight

link

color

decoration

hoverColor

hoverDecoration

input

color

placeholderColor

background

disabledBackground

boxShadow

focusBoxShadow

fontSize

lineHeight

paddingX

paddingY

borderRadius

borderColor

borderWidth

focusBorderColor

height

button

fontWeight

fontSize

lineHeight

paddingX

paddingY

borderRadius

borderWidth

focusBoxShadow

height

socialButton

inline

textVisible

fontWeight

fontSize

lineHeight

paddingX

paddingY

borderRadius

borderWidth

focusBoxShadow

height

passwordStrengthValidator

color0

color1

color2

color3

color4