Skip to main content

Signup Registration

Updated

SignupRegistration is a component used to register users from outside the back office. It supports multi-step forms, field validation, OTP confirmation, document agreements, and flexible language handling.

Basic configuration example:

<ui-signup-registration
  :steps="[
    {
      title: 'Account information',
      aliases: ['sponsor_id', 'firstname', 'lastname', 'partner']
    },
    {
      title: 'Contact details',
      aliases: ['phone', 'email', 'password', 'password_confirm']
    }
  ]"
  :force-fields="{ title: 'Mr. Forced', lastname: 'Overriden' }"
  :optional-fields="['partner', 'phone']"
  :field-titles="{ partner: 'Custom partner code' }"
  :otp-confirm="{
    email: true,
    phone: 'optional'
  }"
  :input-properties="{
    preferredCountries: ['ru','kz','us'],

    passwordMinLength: 6,
    passwordHasCamelcase: true,
    passwordHasSpecSymbols: true,

    variant: 'filled',
    density: 'comfortable',
    rounded: false,
    flat: false
  }"
  :agreement-files="[
    {
      link: 'https://drive.google.com/file/d//view',
      title: 'ESIGN Consent',
      condition: ''
    },
    {
      link: 'https://drive.google.com/file/d//view',
      title: 'Policies & Procedures',
      condition: ''
    }
  ]"
  :agreement-linkbox-props="{
    backgroundClass: 'bg-none elevation-0',
    disableWrapper: true,
    fileIcon: 'mdi-file-document-outline',
    fileClass: 'v-col-md-6',
    fileBackgroundClass: 'bg-amber'
  }"
  agreement-warning="Warning text"
  language-mode="hidden_no_api"
></ui-signup-registration>

OTP confirmation

The :otp-confirm option controls contact verification behavior.

  • true — verification is required
  • 'optional' — verification page is shown, but confirmation is not mandatory
  • false — verification step is disabled

Field control

:optional-fields — array of field aliases that are not required.

:force-fields — an object with predefined field values that are not requested from the user but are still sent to the API.

:force-fields="{ gender: 'MaleTest' }"

Field names must use profile aliases. For dictionary-type fields, values must be passed as string keys (e.g. '0', '1').

:auto-login — set to false to disable automatic login after successful registration.

:input-properties — custom input field styling and validation (see the Input Properties article).

Note: preferredCountries should not be specified here. Refer to the article Country List in Back Office Forms.

Agreements and documents

The :agreement-files property is optional. If provided, an additional agreement step is activated.

export interface FileEntry {
  link: string;
  title: string;
  icon?: string;
  backgroundClass?: string;
  badge?: string;
  class?: string;
  condition?: string;
}

:agreement-linkbox-props controls the visual appearance of document buttons.

export interface LinkBoxProps {
  id?: string;
  files: FileEntry[];
  title?: string;
  fileIcon?: string;
  fileBackgroundClass?: string;
  fileClass?: string;
  backgroundClass?: string;
  headerClass?: string;
  rowHeight?: number;
  disableWrapper?: boolean;
}

agreement-warning — optional warning text displayed during the agreement step. Accepts both plain text and limited HTML (b, i, br, p, strong, ol, ul, li).

Language mode

language-mode controls how the user language is handled during registration.

Type: 'hidden_no_api' | 'hidden_auto' | 'editable_auto'
Default: 'hidden_no_api'

Modes

  • hidden_no_api
    Language field is hidden.
    Language is not sent to the API.
  • hidden_auto
    Language field is hidden.
    Language is auto-detected from the browser and sent to the API as profile.language_id if supported.
  • editable_auto
    Language field is visible and editable.
    Pre-filled from the browser (if supported).
    Final value is sent as profile.language_id.

If language_id is not included in the steps configuration, it will be automatically added to the first step and prefilled.

Language sources

Available languages are loaded from: GET /api3/language.

Language is sent to the API only if it exists in the allowed language list. Otherwise, language_id is omitted from the profile.

Auto-detection uses browser settings and normalizes the value to a short code (en, ru) with an attempt to map region-specific variants (en-US, ru-RU).

Related articles