Screens

The Janrain Registration screens include the following:


accountDeactivated (Social Data)

This screen is shown when a user attempts to sign in to a deactivated account. (An account is deactivated if there is a date/timestamp in the deactivateAccountattribute in the user’s record.)

Rendered Screen

Next Screens

There are no screens that follow the accountDeactivated screen.

Previous Screens

This screen may have been rendered after visiting one of the following screens:

  • signIn
  • forgotPassword
  • confirmAccountDeactivation

changePassword

This screen is displayed when the user clicks on the Change Password link on the Edit Profile page. The user is required to enter the current password, new password, and confirm the new password. If this passes validation, the password is updated when the user clicks Save.

Note. This screen is not displayed unless the user is logged in.

Rendered Screen

Next Screens

One of the following screens can be reached from this screen:

Condition

Next Screen

User successfully changes their password.

editProfile

Previous Screens

This screen may have been rendered after visiting one of the following screens:

  • editProfile

confirmAccountDeactivation

This screen is displayed when the user clicks the Deactivate Account link on the Edit Profile page. If the user clicks Yes, the current date/time is entered into the deactivateAccount attribute in the user’s record.

Note. This screen is not displayed unless the user is logged in.

Rendered Screen

Next Screens

Condition

Next Screen

User clicks Yes to confirm account deactivation.

accountDeactivated

Note: User is logged out, redirected to index.html, and accountDeactivated is displayed.

Email Sent: accountDeactivated

User clicks No to avoid deactivating their account.

editProfile

Since account deactivation involves logging out the user and redirecting the user away from the Edit Profile page, this functionality is implemented as the client-side function handleAccountDeactivation that is registered with the onCaptureAccountDeactivateSuccess event. This function is provided by your Janrain representative with the reference implementation inside the janrain-init.js file. You must include this function to handle account deactivation.

Previous Screens

This screen may have been displayed after visiting one of the following screens:

  • editProfile

editProfile

This screen can be displayed to a user after the user has logged into a site. Unlike all other screens, it is embedded by default.

The Linked Accounts section is populated with the list of previously-linked social accounts and the ability to add additional social accounts using the login widget.

The Password section is displayed only for a traditional account (an account that has an associated password) based on the CSS class janrain_traditional_account_only.

Rendered Screen - Logged-in User

If the user does not have a Janrain access token, the user is presented with a “permission denied” message. Attempting to render this screen via the Janrain function renderScreen also generates this message since the function doesn’t support additional arguments (so no token is passed to the screen logic).

Rendered Screen - Logged-out User

Next Screens

One of the following screens can be reached from this screen:

Condition

Next Screen

User clicks Deactivate Account.

confirmAccountDeactivation

User clicks Change Password.

changePassword

User clicks Link Account.

linkAccount

User clicks Choose a new photo.

photoManager

User updates fields including email and clicks Save 
AND form passes server-side validation.

editProfile
Email Sent: emailAddressChanged

User updates fields not including email and clicks Save 
AND form passes server-side validation.

editProfile

User edits form and clicks Save 
AND form fails server-side validation.

editProfile

Previous Screens

There are no screens that cause the editProfile screen to render. In order to access this screen, the user must navigate to edit-profile.html by clicking the Edit Profile link from index.html (after the user has successfully logged in).


emailVerificationNotification

This screen is shown to a user if the user registered without a verified email address.

Rendered Screen

Next Screens

There are no screens that follow the emailVerificationNotification screen.

Previous Screens

This screen may have been rendered after visiting one of the following screens:

  • traditionalRegistration
  • socialRegistration

forgotPassword

This screen is displayed to a user when the user clicks the Forgot your password? link.

Rendered Screen

Next Screens

One of the following screens can be reached from this screen.

Condition

Next Screen

User enters valid email of an active account.

forgotPasswordSuccess
Email Sent: passwordRecover

User enters valid email of a deactivated account.

accountDeactivated

User clicks Back button.

signIn

Previous Screens

This screen may have been rendered after visiting one of the following screens:

  • signIn
  • returnTraditional

forgotPasswordSuccess

This screen is shown after a user enters a valid email on the forgotPassword screen. There are no fields on this screen.

Rendered Screen

Next Screens

There are no screens that follow the forgotPasswordSuccess screen.

Previous Screens

This screen may have been rendered after visiting one of the following screens:

  • forgotPassword

linkAccount

After signing in and visiting the profile page, the user has the option to link additional social accounts to their existing account. This screen is displayed when the user clicks the Link Account link in their profile.

This screen cannot be modified and is not rendered by including <div> elements on the page. Instead, this screen is included on the editProfile page via JTL tags as shown in the following example:


{* #linkAccountContainer *}
 <div class="capture_header">
 <h1>Link Your Accounts</h1>
 </div>
 <h2>This allows you to sign in to your account using that provider in the future.</h2>
 <div class="capture_signin">
 {* loginWidget *
 </div>
{* /linkAccountContainer *}

This screen cannot be rendered programmatically (via the janrain.capture.ui.renderScreen function, for example). This screen must be rendered manually by:

  1. Logging into an account
  2. Navigating to the editProfile screen
  3. Clicking the Link Account link

Rendered Screen

Next Screens

One of the following screens can be reached from this screen:

Condition

Next Screen

User successfully links social account.

editProfile

User fails to link social account .

linkAccount

Previous Screens

This screen may have been rendered after visiting one of the following screens:

  • editProfile

mergeAccounts (Social Data)

When a user has registered previously and attempts to authenticate with a new social provider (that returns a matching verified email), the mergeAccounts screen is displayed. This screen prompts the user to create a new account or merge with the existing account.

Note. The reverse cannot occur–if a user originally created an account socially and then attempts to register an account traditionally, this screen will not be displayed.

If the user elects to merge the accounts, the user must authenticate through the existing account before this process is complete. If the existing account is a traditional account, the user is presented with the traditionalAuthenticateMerge screen. If the user elects to create a new account, the socialRegistration screen is displayed that asks the user for a new email address.

This screen cannot be rendered with the JavaScript renderScreen function.

Rendered Screen

Next Screens

One of the following screens can be reached from this screen:

Condition

Next Screen

User elects to merge accounts 
AND the pre-existing account is a traditional account.

traditionalAuthenticateMerge

User elects to merge accounts 
AND the pre-existing account is a social account.

(no screen)
Note: User is now logged in.

User elects to create a new account 
(from either a pre-existing social or traditional account).

socialRegistration

Previous Screens

This screen may have been rendered after visiting one of the following screens:

  • signIn

photoManager

After signing in and visiting the profile page, the user can edit the profile image for their account.

Note: You cannot modify this screen, and it is not rendered by including <div> elements on the page. Instead, this screen is included on the editProfile page via the {* photoManager *} JTL tag.

Next Screens

One of the following screens can be reached from this screen:

Condition

Next Screen

User successfully updates their profile image.

editProfile

User fails to update their profile image (attempts to upload a file that is not a .gif, .jpg, or .png).

photoManager

Previous Screens

This screen may have been rendered after visiting one of the following screens:

  • editProfile

resetPassword

Users can submit a request to reset their password via the forgotPassword screen. If successful, the user receives an email that includes a one-time link with an authorization code the user can click to reset their password. This screen is one of two screens that may be displayed; this screen is displayed when the verification code is successfully accepted.

For the case where the verification code is rejected, see the resetPasswordRequestCode screen.

Rendered Screen

Next Screens

One of the following screens can be reached from this screen:

Condition

Next Screen

User enters a new password and clicks Submit.

resetPasswordSuccess

Previous Screens

There are no previous screens. This screen is reached by clicking on the link sent in the passwordRecover email.


resetPasswordRequestCode

Users can submit a request to reset their password via the forgotPassword screen. If successful, the user receives an email that includes a one-time link with an authorization code the user can click to reset their password. This screen is one of two screens that may be displayed; this screen is displayed when the verification code is rejected.

For the case where the verification code is accepted, see the resetPassword screen.

Note. This screen cannot be displayed directly with the JavaScript renderScreen function from index.html. However, it can be rendered by passing this screen to the screenToRender URL parameter and by passing the value foo to the code URL parameter.

{widget URL}/index.html?screenToRender=resetPasswordRequestCode&code=foo

Rendered Screen

Next Screens

One of the following screens can be reached from this screen:

Condition

Next Screen

User provides a valid email address and clicks Send.

resetPasswordRequestCodeSuccess

User provides an invalid email address and clicks Send.

resetPasswordRequestCode 
User is prompted to try again.

Previous Screens

There are no previous screens. This screen is reached by clicking on the link sent in the passwordRecover email.


resetPasswordRequestCodeSuccess

This screen is rendered after a user enters a valid email in the resetPasswordRequestCode screen, in order to resend the passwordRecover email.

Rendered Screen

Next Screens

There are no screens that follow the resetPasswordRequestCodeSuccess screen.

Previous Screens

This screen may have been rendered after visiting one of the following screens:

  • resetPasswordRequestCode

resetPasswordSuccess

This screen is rendered when the user successfully changes their password from the resetPassword screen.

Rendered Screen

Next Screens

There are no screens that follow the resetPasswordSuccess screen.

Previous Screens

This screen may have been rendered after visiting one of the following screens:

  • resetPassword

returnSocial (Social Data)

This screen is displayed when a user returns to the site and had logged in/registered with a social provider on their last visit. The social sign-in options are populated into the loginWidget JTL tag from the customer’s Engage settings. The welcomeName JTL tag is populated from the welcome_info_name cookie.

Note: This screen is rendered only if the janrainLastAuthMethod local storage key is set.

Rendered Screen

Next Screens

One of the following screens can be reached from this screen:

Condition

Next Screen

User signs in with social account.

(no screen)
Note. User is now logged in.

User clicks “Use another account” link.

signIn

Previous Screens

There are no previous Janrain screens.


returnTraditional

This screen is displayed when a user returns to the site and had logged in/registered with a traditional account on their last visit. The displayName attribute on the user record (if it exists) is added to the span with id value traditionalWelcomeName with the function enhanceReturnExperience in the janrain_init.js file. Within the signInForm are the fields that are used for validating a traditional login.

Note. This screen is rendered only if the janrainLastAuthMethod local storage key is set.

Rendered Screen

Next Screens

One of the following screens can be reached from this screen:

Condition

Next Screen

User enters a valid email address and password combination.

(no screen)
Note. User is now logged in.

User clicks “Use another account” link.

signIn

Previous Screens

There are no previous Janrain screens.


signIn (Social Data)

This is the default screen that renders for the widget, and it includes both traditional and social sign-in options. Within the signInForm are the fields that are used for validating a traditional login. The social sign-in options are populated into the loginWidget JTL-tag from the Engage settings as configured in the Engage dashboard.

Note. If the janrainLastAuthMethod local storage key is set, the widget will render the returnTraditional or returnSocial screens instead.

Rendered Screen

Next Screens

One of the following screens can be reached from this screen:

Condition

Next Screen

User clicks Create Account.

traditionalRegistration

User selects social login 
AND the social provider returns an email address that does not match the email address on an existing account 
OR the social provider returns an unverified email address that does match the email address on an existing account 
OR the social provider does not return an email address.

socialRegistration

User selects social login 
AND the social provider returns a verified email address that matches the email address on an existing account that is not linked to that social provider.

mergeAccounts

User clicks Forgot your password?

forgotPassword

User selects social login 
AND their account already exists.

(no screen)
Note. User is now logged in.

User enters a valid email and password combination.

(no screen)
Note. User is now logged in.

User attempts any of the above with an account that has been deactivated.

accountDeactivated (more details below).

Note. For the case where a user attempts to log in with an account that has been deactivated, this functionality is implemented as the client-side functionhandleDeactivatedAccountLogin that is registered with the onCaptureLoginFailed event. This function is provided by your Janrain representative with the reference implementation inside the janrain-init.js file; you must include this function to handle login of deactivated accounts. See the JavaScript API documentation for more information on event handling.

Previous Screens

There are no previous Janrain screens.


socialRegistration

Social Data

This screen is displayed after a user logs in for the first time using a social provider, and may be prepopulated with the data returned by the social provider. Until this form is successfully submitted, the user record does not exist in Janrain’s servers.

Rendered Screen

Next Screens

One of the following screens can be reached from this screen:

Condition

Next Screen

User completes form and clicks Create Account
AND form passes server-side validation
AND email returned by social provider is verified.

(No screen) 
Note. User is now logged in.

User completes form and clicks Create Account
AND form passes server-side validation
AND email returned by social provider has not been verified.

emailVerificationNotification 
Note. User is now logged in.
Email Sent: registrationVerification
(Email not available for Social Data customers)

User completes form and clicks Create Account 
AND form fails server-side validation.

socialRegistration

User clicks Back.

signIn

Previous Screens

This screen may have been rendered after visiting one of the following screens:

  • mergeAccounts
  • signIn

traditionalAuthenticateMerge

This screen is displayed if the user selected the option on the mergeAccounts screen to merge a new social account into an existing traditional account.

Rendered Screen

Next Screens

There are no screens that follow the traditionalAuthenticateMerge screen.

Previous Screens

This screen may have been rendered after visiting one of the following screens:

  • mergeAccounts

traditionalRegistration

This screen is displayed when a user clicks Create Account. After this form is successfully submitted, Janrain creates the user record.

Rendered Screen

Next Screens

One of the following screens can be reached from this screen:

Condition

Next Screen

User completes form and clicks Create Account 
AND form passes server-side validation.

emailVerificationNotification
Note. User is now logged in.
Email Sent: registrationVerification

User completes form and clicks Create Account 
AND form fails server-side validation.

traditionalRegistration

User clicks Back.

signIn

Previous Screens

This screen may have been displayed after visiting one of the following screens:

  • signIn

resendVerificationSuccess

This screen is rendered when a user requests a new verification email on the verifyEmail screen.

Rendered Screen

Next Screens

There are no screens that follow the resendVerificationSuccess screen.

Previous Screens

This screen may have been rendered after visiting one of the following screens:

  • verifyEmail

verifyEmail

When a new user registers with a traditional account or with a social account that does not return a verified email address, an email is sent to the user that includes a one-time link with a verification code the user can click to complete the email verification process. This screen is one of two screens that may be displayed; this screen is displayed when the verification code is not accepted.

See the verifyEmailSuccess screen for the case where the verification code is successfully accepted.

Note: This screen cannot be displayed directly with the JavaScript renderScreen function from index.html. However, it can be displayed by passing this screen to the screenToRender URL parameter and by passing the value foo to the verification_code URL parameter:
 

{widget URL}/index.html?screenToRender=verifyEmail&verification_code=foo

Rendered Screen

Next Screens

Condition

Next Screen

User provides a valid email address and clicks Submit.

resendVerificationSuccess
Email Sent: registrationVerification

User provides an invalid email address and clicks Submit.

verifyEmail 
User is prompted to try again.

User provides a valid email address that has already been verified and clicks Submit.

verifyEmail 
User receives an error message stating that the email has already been verified.

Previous Screens

There are no previous Janrain screens. This screen is reached by clicking the link sent in the verification email after registering via an unverified email.


verifyEmailSuccess

When a new user registers with a traditional account or with a social account that does not return a verified email address, an email is sent to the user that includes a one-time link with a verification code the user can click to complete the email verification process. This screen is one of two screens that may be displayed; this screen is displayed when the verification code is successfully accepted.

See the verifyEmail screen for the case where the code is rejected.

Rendered Screen

Next Screens

There are no screens that follow the verifyEmailSuccess screen.

Previous Screens

There are no previous Janrain screens. This screen is reached by clicking the link sent in the verification email after registering via an unverified email.