Breadcrumb
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();
}
}
-
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.
-
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.