db.cloud.userInteraction


An observable that emits data for login dialogs. This observable shall be used in combination with setting db.cloud.configure()#customlogingui to true.

For an example on how to consume this observable and provide a custom GUI, see authentication#customizing-login-gui

Type

Observable<DXCUserInteraction>
export type DXCUserInteraction =
  | DXCGenericUserInteraction
  | DXCEmailPrompt
  | DXCOTPPrompt
  | DXCMessageAlert
  | DXCLogoutConfirmation;

export interface DXCGenericUserInteraction<Type extends string="generic", TFields extends {[name: string]: DXCInputField} = any> {
  type: Type;
  title: string;
  alerts: DXCAlert[];
  fields: TFields;
  submitLabel: string;
  cancelLabel: string | null;
  onSubmit: (params: { [P in keyof TFields]: string} ) => void;
  onCancel: () => void;
}

/** When the system needs to prompt for an email address for login.
 * 
*/
export interface DXCEmailPrompt {
  type: 'email';
  title: string;
  alerts: DXCAlert[];
  fields: {
    email: {
      type: 'text';
      placeholder: string;
    };
  };
  submitLabel: string;
  cancelLabel: string;
  onSubmit: (params: { email: string } | { [paramName: string]: string }) => void;
  onCancel: () => void;
}

/** When the system needs to prompt for an OTP code.
 * 
*/
export interface DXCOTPPrompt {
  type: 'otp';
  title: string;
  alerts: DXCAlert[];
  fields: {
    otp: {
      type: 'text';
      label: string;
    }
  };
  submitLabel: string;
  cancelLabel: string;
  onSubmit: (params: { otp: string } | { [paramName: string]: string }) => void;
  onCancel: () => void;
}

/** When the system must inform about errors, warnings or information */
export interface DXCMessageAlert {
  type: 'message-alert';
  title: string;
  alerts: DXCAlert[];
  fields: {
    [name: string]: DXCInputField;
  };
  submitLabel: string;
  cancelLabel?: null;
  onSubmit: (params: { [paramName: string]: string }) => void;
  onCancel: () => void;
}

/** When the system needs confirmation to logout current user when
 * there are unsynced changes that would be lost.
 */
export interface DXCLogoutConfirmation {
  type: 'logout-confirmation';
  title: string;
  alerts: DXCAlert[];
  fields: {
    [name: string]: DXCInputField;
  };
  submitLabel: string;
  cancelLabel: string;
  onSubmit: (params: { [paramName: string]: string }) => void;
  onCancel: () => void;
}

export type DXCAlert = DXCErrorAlert | DXCWarningAlert | DXCInfoAlert;

export interface DXCErrorAlert {
  type: 'error';
  messageCode: 'INVALID_OTP' | 'INVALID_EMAIL' | 'LICENSE_LIMIT_REACHED' | 'GENERIC_ERROR';
  message: string;
  messageParams: { [paramName: string]: string; };
}

export interface DXCWarningAlert {
  type: 'warning';
  messageCode: 'GENERIC_WARNING' | 'LOGOUT_CONFIRMATION';
  message: string;
  messageParams: { [paramName: string]: string; };
}

export interface DXCInfoAlert {
  type: 'info';
  messageCode: 'GENERIC_INFO' | 'OTP_SENT';
  message: string;
  messageParams: { [paramName: string]: string; };
}

export type DXCInputField = DXCTextField | DXCPasswordField;

export interface DXCTextField {
  type: 'text' | 'email' | 'otp';
  label?: string;
  placeholder?: string;
}

export interface DXCPasswordField {
  type: 'password';
  label?: string;
  placeholder?: string;
}

Localization

If you need to localize the login dialog, you can ignore the given texts and use custom texts based on:

  • type: (‘otp’, ‘email’, ‘message-alert’ or ‘logout-confirmation’)
  • alerts[n].type: (‘error’, ‘warning’ or ‘info’)
  • alerts[n].messageCode, which can be any of the following values:
    • ‘INVALID_OTP’
    • ‘INVALID_EMAIL’
    • ‘LICENSE_LIMIT_REACHED’
    • ‘GENERIC_ERROR’
    • ‘GENERIC_WARNING’
    • ‘LOGOUT_CONFIRMATION’ - messageParams will contain {currentUserId, numUnsyncedChanges}
    • ‘GENERIC_INFO’
    • ‘OTP_SENT’ - messageParams will contain { email }
  • fields[name].type (‘text’, ‘email’, ‘otp’ or ‘password’)