moh-common-lib
Version:
A library of Angular components, services, and styles for B.C. Government Ministry of Health (MoH).
283 lines (276 loc) • 11.7 kB
JavaScript
import { RecaptchaModule, RecaptchaFormsModule } from 'ng-recaptcha';
import { Injectable, Component, Renderer2, Output, Input, EventEmitter, NgModule } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class RecaptchaDataService {
/**
* @param {?} httpClient
*/
constructor(httpClient) {
this.httpClient = httpClient;
}
/**
* @param {?} apiBaseUrl
* @param {?} nonce
* @param {?} token
* @return {?}
*/
verifyRecaptcha(apiBaseUrl, nonce, token) {
return this.httpClient
.post(apiBaseUrl + '/verify/captcha', { nonce: nonce, token: token }, { observe: 'response' });
}
}
RecaptchaDataService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
RecaptchaDataService.ctorParameters = () => [
{ type: HttpClient }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class RecaptchaComponent {
/**
* @param {?} dataService
* @param {?} _renderer
* @param {?} _http
*/
constructor(dataService, _renderer, _http) {
this.dataService = dataService;
this._renderer = _renderer;
this._http = _http;
this.language = 'en';
this.onValidToken = new EventEmitter();
this.errorVerifyAnswer = null;
/**
* ************************
* * Translated Messages **
* * *UPDATE REQUIRED* **
* **************************
*/
this.translatedMessages = {
playAudio: {
en: 'Play Audio',
zh: '播放声音',
fr: 'Lecture audio',
pa: 'ਆਡੀਓ ਚਲਾਓ',
},
tryAnotherImg: {
en: 'Try another image',
zh: '换个图像',
fr: 'Essayez une autre image',
pa: 'ਕੋਈ ਹੋਰ ਚਿੱਤਰ ਅਜ਼ਮਾਓ',
},
userPromptMessage: {
en: 'Enter the text you either see in the box or you hear in the audio',
zh: '请输入看到或听到的文字',
fr: 'Entrez le texte que vous voyez dans la case ou que vous entendez dans le son',
pa: 'ਉਹ ਟੈਕਸਟ ਦਾਖਲ ਕਰੋ ਜੋ ਤੁਸੀਂ ਬਕਸੇ ਵਿੱਚ ਦੇਖਦੇ ਹੋ ਜਾਂ ਤੁਸੀਂ ਆਡੀਓ ਵਿੱਚ ਸੁਣਦੇ ਹੋ',
},
incorrectAnswer: {
en: 'Incorrect answer, please try again.',
zh: '答案不对。请重试。',
fr: 'Mauvaise réponse, veuillez réessayer.',
pa: 'ਗਲਤ ਜਵਾਬ, ਕਿਰਪਾ ਕਰਕੇ ਦੁਬਾਰਾ ਕੋਸ਼ਿਸ਼ ਕਰੋ.',
},
successMessage: {
en: 'You can submit your application now.',
zh: '你现在可以提交申请了。',
fr: 'Vous pouvez soumettre votre candidature maintenant.',
pa: 'ਤੁਸੀਂ ਆਪਣੀ ਅਰਜ਼ੀ ਹੁਣੇ ਪੇਸ਼ ਕਰ ਸਕਦੇ ਹੋ',
},
correct: {
en: 'Correct.',
zh: '正确。',
fr: 'Correct.',
pa: 'ਸਹੀ ਕਰੋ',
},
loadingImage: {
en: 'Loading CAPTCHA image',
zh: '正在下载验证码',
fr: 'Chargement de l\'image CAPTCHA',
pa: 'ਕੈਪਟਚਾ ਚਿੱਤਰ ਲੋਡ ਕਰ ਰਿਹਾ ਹੈ',
},
browserNotSupportAudio: {
en: 'Your browser does not support the audio element.',
zh: '你的浏览器不支持播音',
fr: 'Votre navigateur ne supporte pas l\'élément audio.',
pa: 'ਤੁਹਾਡਾ ਬ੍ਰਾਉਜ਼ਰ ਆਡੀਓ ਐਲੀਮੈਂਟ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ.',
},
verifyingAnswer: {
en: 'Verifying your answer...',
zh: '正在验证答案...',
fr: 'Vérification de votre réponse ...',
pa: 'ਤੁਹਾਡਾ ਜਵਾਬ ਤਸਦੀਕ ਕਰ ਰਿਹਾ ਹੈ ...',
},
errorRetrievingImg: {
en: 'Error happened while retrieving CAPTCHA image. Please {{Click Here}} to try again',
zh: '验证码下载错误。请{{点击这里}}重试',
fr: 'Une erreur s\'est produite lors de la récupération de l\'image CAPTCHA. S\'il vous plaît {{Cliquez Ici}} pour réessayer',
pa: 'ਕੈਪਟਚਾ ਚਿੱਤਰ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦੇ ਸਮੇਂ ਤਰੁੱਟੀ ਉਤਪੰਨ ਹੋਈ. ਕਿਰਪਾ ਕਰਕੇ ਦੁਬਾਰਾ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਲਈ {{ਇੱਥੇ ਕਲਿਕ ਕਰੋ}}',
},
errorVerifyingAnswer: {
en: 'Error happened while verifying your answer. Please {{Click Here}} to try again',
zh: '验证答案过程发生错误。请{{点击这里}}重试',
fr: 'Une erreur s\'est produite lors de la vérification de votre réponse. S\'il vous plaît {{Cliquez Ici}} pour réessayer',
pa: 'ਤੁਹਾਡਾ ਜਵਾਬ ਤਸਦੀਕ ਕਰਨ ਵੇਲੇ ਗਲਤੀ ਆਈ ਕਿਰਪਾ ਕਰਕੇ ਦੁਬਾਰਾ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਲਈ {{ਇੱਥੇ ਕਲਿਕ ਕਰੋ}}',
},
};
}
/**
* @return {?}
*/
ngOnInit() {
/** @type {?} */
let script = this._renderer.createElement('script');
script.defer = true;
script.async = true;
script.src = "https://www.google.com/recaptcha/api.js";
this._renderer.appendChild(document.body, script);
}
/**
* @param {?} token
* @return {?}
*/
resolved(token) {
console.log(token);
this.state = CAPTCHA_STATE.VERIFYING_TOKEN;
this.dataService.verifyRecaptcha(this.apiBaseUrl, this.nonce, token).subscribe((/**
* @param {?} response
* @return {?}
*/
response => {
/** @type {?} */
const payload = response.body;
if (this.isValidPayload(payload)) {
this.state = CAPTCHA_STATE.SUCCESS_VERIFY_ANSWER_CORRECT;
this.onValidToken.emit(payload.jwt);
}
else {
this.state = CAPTCHA_STATE.ERROR_VERIFY;
this.errorVerifyAnswer = this.createErrorTextLine(response);
}
}));
}
/**
* Case where HTTP 200 response code is received by the payload is incorrect or corrupt.
* The occurance of this type of case should be rare.
* @private
* @param {?} payload
* @return {?}
*/
isValidPayload(payload) {
if (!payload) {
console.error('payload cannot be null or undefined or 0');
return false;
}
else {
/** @type {?} */
const hasValidProp = payload.hasOwnProperty('valid');
console.log("hasValidProp:", hasValidProp);
if (hasValidProp) {
console.log("payload.valid:", payload.valid);
console.log("typeof payload.valid:", typeof payload.valid);
}
if (!hasValidProp || payload.valid === false) {
console.error('Error verifying captcha');
return false;
}
else {
return true;
}
}
}
/**
* @private
* @param {?} error
* @return {?}
*/
createErrorTextLine(error) {
/** @type {?} */
let line = 'Error status: ' + error.status;
if (error.statusText) {
line = line + ', status text: ' + error.statusText;
}
return line;
}
}
RecaptchaComponent.decorators = [
{ type: Component, args: [{
selector: 'common-recaptcha',
template: "<div class=\"bcgov-recaptcha\">\r\n <re-captcha (resolved)=\"resolved($event)\" siteKey={{publicKey}}>\r\n </re-captcha>\r\n\r\n <div class=\"error-captcha\" *ngIf=\"state === 6\" role=\"alert\" aria-live=\"assertive\">\r\n <svg class=\"icon-exclamation-triangle\"><use xlink:href=\"#icon-exclamation-triangle-def\"></use></svg>\r\n <span>{{translatedMessages.errorVerifyingAnswer[language].substring(0,translatedMessages.errorVerifyingAnswer[language].indexOf('{'))}}\r\n {{translatedMessages.errorVerifyingAnswer[language].substring(translatedMessages.errorVerifyingAnswer[language].lastIndexOf('}')+1)}}\r\n </span>\r\n <p>\r\n </p>\r\n </div>\r\n</div>\r\n",
styles: [""]
}] }
];
/** @nocollapse */
RecaptchaComponent.ctorParameters = () => [
{ type: RecaptchaDataService },
{ type: Renderer2 },
{ type: HttpClient }
];
RecaptchaComponent.propDecorators = {
apiBaseUrl: [{ type: Input, args: ['apiBaseUrl',] }],
nonce: [{ type: Input, args: ['nonce',] }],
publicKey: [{ type: Input, args: ['publicKey',] }],
language: [{ type: Input, args: ['language',] }],
onValidToken: [{ type: Output }]
};
/** @enum {number} */
const CAPTCHA_STATE = {
VERIFYING_TOKEN: 1,
SUCCESS_VERIFY_ANSWER_CORRECT: 2,
ERROR_VERIFY: 3,
};
CAPTCHA_STATE[CAPTCHA_STATE.VERIFYING_TOKEN] = 'VERIFYING_TOKEN';
CAPTCHA_STATE[CAPTCHA_STATE.SUCCESS_VERIFY_ANSWER_CORRECT] = 'SUCCESS_VERIFY_ANSWER_CORRECT';
CAPTCHA_STATE[CAPTCHA_STATE.ERROR_VERIFY] = 'ERROR_VERIFY';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ReCaptchaModule {
/**
* @return {?}
*/
static forRoot() {
return {
ngModule: ReCaptchaModule,
providers: [RecaptchaDataService]
};
}
}
ReCaptchaModule.decorators = [
{ type: NgModule, args: [{
declarations: [
RecaptchaComponent
],
imports: [
HttpClientModule,
CommonModule,
RecaptchaModule,
RecaptchaFormsModule,
],
providers: [
RecaptchaDataService
],
exports: [
RecaptchaComponent
],
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { ReCaptchaModule, RecaptchaDataService as ɵb, RecaptchaComponent as ɵa };
//# sourceMappingURL=moh-common-lib-recaptcha.js.map