Using crypto-js

In Sabre Red 360 the current version of crypto-js is 4.0.0 and @types/crypto-js is 3.1.47. For Red App development only the latter is required (crypto-js is going to be present in runtime), so please make sure that the npm repository that you are using contains @types/crypto-js package in the current version.

Using crypto-js in typescript

import {AbstractView} from 'sabre-ngv-app/app/AbstractView';
import {AbstractViewOptions} from 'sabre-ngv-app/app/AbstractViewOptions';
import {BasicModel} from '../models/BasicModel';
import {Template} from "sabre-ngv-core/decorators/classes/view/Template";
import {Initial} from 'sabre-ngv-core/decorators/classes/Initial';
import {I18nService, ScopedTranslator} from "sabre-ngv-app/app/services/impl/I18nService";
import {getService} from "../Context";
import * as CryptoJS from 'crypto-js'; // (1)

const i18nService: I18nService = getService(I18nService);

@Initial<AbstractViewOptions>({
    templateOptions: {
        helpers: {
            t: i18nService.getScopedHelper('com-sabre-redapp-example3-web-handlebar-web-module/translations'),
            customHelper: (options) => 'Got -' + options +'- from my custom helper'
        }
    }
})
@Template('com-sabre-redapp-example3-web-handlebar-web-module:BasicView')
export class BasicView extends AbstractView<BasicModel> {

    constructor(options?: AbstractViewOptions) {
        super(options);
        super.addDomEvents({
            'click .enable-input': 'enableInput',
            'click .add-message': 'add',
            'click .encrypt': 'encrypt'
        })

    }

    enableInput() {
        super.$('.brand-input').prop('disabled', false);
        super.getModel().enableInput();
    }

    add(event : JQueryEventObject) {
        console.log(event);
        const x: string = super.$('.brand-input').val();
        super.getModel().addMessage(x);
        super.rerender();
    }

    encrypt() {
        const toEncrypt: string = super.$('.encrypt-input').val();
        const passphrase: string = super.$('.passphrase-input').val();
        const encrypted: string = CryptoJS.AES.encrypt(toEncrypt, passphrase).toString(); // (2)
        super.getModel().setEncrypted(encrypted);
        super.rerender();
    }
}

  1. You may notice that the syntax is a little bit different than importing modules that are part of Sabre Red 360 SDK. That is because we are importing a javascript library. For building purposes, the actual js library is not required, only proper typescript types for this library which are contained in @types/crypto-js package.

  2. Here we are using AES cipher to encrypt a value taken from one of the inputs from the view.

The result of this is showcased in com.sabre.redapp.example3.web.handlebar

For other crypto-js methods please refer to crypto-js documentation and please make sure you are using the documentation for a version that is matching with the one used in Sabre Red 360.