git.roojs.org Git - Pman.BAdmin/blob - Pman.Dialog.BAdminStaffTwoFactorQRCode.js

   1 //<script type="text/javascript">
   2
   3 // Auto generated file - created by app.Builder.js- do not edit directly (at present!)
   4
   5 Roo.namespace('Pman.Dialog');
   6
   7 Pman.Dialog.BAdminStaffTwoFactorQRCode= function() {}
   8 Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
   9
  10  _strings : {
  11   '1459eb538ddc78e1908bbd761a444395' :"1. Download an Authentication App on your phone, like \"<a href='#' class='download-google-authenticator' style='color:#337ab7;'>Google Authenticator</a>\" or \"<a href='#' class='download-authy' style='color:#337ab7;'>Authy</a>\" ",
  12   'e8e9a5b1083b253b726d1fa7f31176f5' :"2. After adding this to Authenticator app, type in the generated number below to confirm.",
  13   '2194867d6c27ce97cd1f0a5db8d5c95e' :"Setup 2-Factor Authentication",
  14   '22e960368d2513a40b7467ec143440cc' :"5. After adding this to Authenticator app, type in the generated number below to confirm.",
  15   '131e3875e777f6c9a8e510f96a4d20d2' :"Skip for now",
  16   'f93dadd0b45b370c51bf80fb0a3eadfa' :"3. For the Account Name user \"{0}\"",
  17   '8e5b55264e2acf73fb73b6a327bccd51' :"4. Enter the code below as \"Your Key\"",
  18   '4141195b21d661e36e56d91f19d53273' :"2. In the App, select \"<b>Create or Setup an Account</b>\"",
  19   'ea4788705e6873b424c65e91c2846b19' :"Cancel",
  20   'ee468f72ab7fe4937fb014d6fcea540b' :"Enter Two factor Authentication code",
  21   '6d9785b18748c30bb3adbf7506f40202' :"1. Open Authenticator App in your phone, and scan this QR code.",
  22   '780573538d031cf7387477f9ea3204f6' :"Copy Key",
  23   '70d9be9b139893aa6c69b5e77e614311' :"Confirm"
  24  },
  25  _named_strings : {
  26   'two_factor_auth_code_fieldLabel' : 'ee468f72ab7fe4937fb014d6fcea540b' /* Enter Two factor Authentication code */
  27  },
  28
  29  dialog : false,
  30  callback:  false,
  31
  32  show : function(data, cb)
  33  {
  34   if (!this.dialog) {
  35    this.create();
  36   }
  37
  38   this.callback = cb;
  39   this.data = data;
  40   this.dialog.show(this.data._el);
  41   if (this.form) {
  42    this.form.reset();
  43    this.form.setValues(data);
  44    this.form.fireEvent('actioncomplete', this.form,  { type: 'setdata', data: data });
  45   }
  46
  47  },
  48
  49  create : function()
  50  {
  51   var _this = this;
  52   this.dialog = Roo.factory({
  53     xtype : 'Modal',
  54     allow_close : true,
  55     animate : false,
  56     cls : 'enable-overflow coba-qr-dialog',
  57     title : _this._strings['2194867d6c27ce97cd1f0a5db8d5c95e'] /* Setup 2-Factor Authentication */,
  58     listeners : {
  59      hide : function (_self)
  60       {
  61           if(_this.callback){
  62               _this.callback.call(_this, false);
  63           }
  64
  65       },
  66      show : function (_self)
  67       {
  68           if(!Pman.Login.authUser) {
  69               Roo.bootstrap.MessageBox.alert('Error', 'Please login again');
  70               return;
  71           }
  72
  73           if(
  74               !_this.data.id ||
  75               _this.data.id.length == 0
  76           ) {
  77               Roo.bootstrap.MessageBox.alert('Error', 'Please select a person again');
  78               return;
  79           }
  80
  81           _this.dialog.closeEl.hide();
  82           _this.skipBtn.hide();
  83           _this.cancelBtn.hide();
  84
  85           if(_this.data.allow_close) {
  86               _this.dialog.closeEl.show();
  87               _this.skipBtn.show();
  88           }
  89
  90           if(_this.data.allow_cancel) {
  91               _this.cancelBtn.show();
  92           }
  93
  94           _this.desktopView.hide();
  95           _this.mobileView.hide();
  96
  97           new Pman.Request({
  98               url: baseURL + '/Roo/Core_person.php',
  99               method : 'GET',
 100               mask : 'Loading...',
 101               params : {
 102                   _to_qr_code : 1,
 103                   id: _this.data.id
 104               },
 105
 106               success : function(res) {
 107                   _this.qrcode_image.setSrc(res.data.image);
 108                   _this.secret.setValue(res.data.secret);
 109                   _this.issuer_notify.el.dom.innerHTML = String.format(_this.issuer_notify._html, res.data.issuer);
 110
 111                   _this.desktopView.show();
 112                   _this.mobileView.hide();
 113
 114                   if(Roo.isTouch) {
 115                       _this.desktopView.hide();
 116                       _this.mobileView.show();
 117                   }
 118               },
 119
 120               failure : function(res) {
 121                   Roo.log(res);
 122               }
 123           });
 124       }
 125     },
 126     xns : Roo.bootstrap,
 127     '|xns' : 'Roo.bootstrap',
 128     buttons : [
 129      {
 130       xtype : 'Button',
 131       html : _this._strings['131e3875e777f6c9a8e510f96a4d20d2'] /* Skip for now */,
 132       weight : 'default',
 133       listeners : {
 134        click : function (_self, e)
 135         {
 136             _this.dialog.hide();
 137
 138             return;
 139         },
 140        render : function (_self)
 141         {
 142             _this.skipBtn = this;
 143         }
 144       },
 145       xns : Roo.bootstrap,
 146       '|xns' : 'Roo.bootstrap'
 147      },
 148      {
 149       xtype : 'Button',
 150       html : _this._strings['ea4788705e6873b424c65e91c2846b19'] /* Cancel */,
 151       weight : 'default',
 152       listeners : {
 153        click : function (_self, e)
 154         {
 155             _this.dialog.hide();
 156
 157             return;
 158         },
 159        render : function (_self)
 160         {
 161             _this.cancelBtn = this;
 162         }
 163       },
 164       xns : Roo.bootstrap,
 165       '|xns' : 'Roo.bootstrap'
 166      },
 167      {
 168       xtype : 'Button',
 169       html : _this._strings['70d9be9b139893aa6c69b5e77e614311'] /* Confirm */,
 170       weight : 'primary',
 171       listeners : {
 172        click : function (_self, e)
 173         {
 174             _this.form.doAction('submit');
 175         }
 176       },
 177       xns : Roo.bootstrap,
 178       '|xns' : 'Roo.bootstrap'
 179      }
 180     ],
 181     items  : [
 182      {
 183       xtype : 'Row',
 184       listeners : {
 185        render : function (_self)
 186         {
 187             _this.desktopView = this;
 188         }
 189       },
 190       xns : Roo.bootstrap,
 191       '|xns' : 'Roo.bootstrap',
 192       items  : [
 193        {
 194         xtype : 'Column',
 195         xs : 12,
 196         xns : Roo.bootstrap,
 197         '|xns' : 'Roo.bootstrap',
 198         items  : [
 199          {
 200           xtype : 'Row',
 201           xns : Roo.bootstrap,
 202           '|xns' : 'Roo.bootstrap',
 203           items  : [
 204            {
 205             xtype : 'Column',
 206             xs : 12,
 207             xns : Roo.bootstrap,
 208             '|xns' : 'Roo.bootstrap',
 209             items  : [
 210              {
 211               xtype : 'Container',
 212               html : _this._strings['6d9785b18748c30bb3adbf7506f40202'] /* 1. Open Authenticator App in your phone, and scan this QR code. */,
 213               well : 'sm',
 214               xns : Roo.bootstrap,
 215               '|xns' : 'Roo.bootstrap'
 216              }
 217             ]
 218            }
 219           ]
 220          },
 221          {
 222           xtype : 'Row',
 223           xns : Roo.bootstrap,
 224           '|xns' : 'Roo.bootstrap',
 225           items  : [
 226            {
 227             xtype : 'Column',
 228             cls : 'text-center',
 229             xs : 12,
 230             xns : Roo.bootstrap,
 231             '|xns' : 'Roo.bootstrap',
 232             items  : [
 233              {
 234               xtype : 'Img',
 235               cls : 'qr-code',
 236               imgResponsive : false,
 237               src : 'about:blank',
 238               listeners : {
 239                render : function (_self)
 240                 {
 241                     _this.qrcode_image = this;
 242
 243                     this.el.setVisibilityMode(Roo.Element.DISPLAY);
 244
 245                 }
 246               },
 247               xns : Roo.bootstrap,
 248               '|xns' : 'Roo.bootstrap'
 249              }
 250             ]
 251            }
 252           ]
 253          },
 254          {
 255           xtype : 'Row',
 256           xns : Roo.bootstrap,
 257           '|xns' : 'Roo.bootstrap',
 258           items  : [
 259            {
 260             xtype : 'Column',
 261             xs : 12,
 262             xns : Roo.bootstrap,
 263             '|xns' : 'Roo.bootstrap',
 264             items  : [
 265              {
 266               xtype : 'Container',
 267               html : _this._strings['e8e9a5b1083b253b726d1fa7f31176f5'] /* 2. After adding this to Authenticator app, type in the generated number below to confirm. */,
 268               well : 'sm',
 269               xns : Roo.bootstrap,
 270               '|xns' : 'Roo.bootstrap'
 271              }
 272             ]
 273            }
 274           ]
 275          }
 276         ]
 277        }
 278       ]
 279      },
 280      {
 281       xtype : 'Row',
 282       listeners : {
 283        render : function (_self)
 284         {
 285             _this.mobileView = this;
 286         }
 287       },
 288       xns : Roo.bootstrap,
 289       '|xns' : 'Roo.bootstrap',
 290       items  : [
 291        {
 292         xtype : 'Column',
 293         xs : 12,
 294         xns : Roo.bootstrap,
 295         '|xns' : 'Roo.bootstrap',
 296         items  : [
 297          {
 298           xtype : 'Row',
 299           xns : Roo.bootstrap,
 300           '|xns' : 'Roo.bootstrap',
 301           items  : [
 302            {
 303             xtype : 'Column',
 304             xs : 12,
 305             xns : Roo.bootstrap,
 306             '|xns' : 'Roo.bootstrap',
 307             items  : [
 308              {
 309               xtype : 'Container',
 310               html : _this._strings['1459eb538ddc78e1908bbd761a444395'] /* 1. Download an Authentication App on your phone, like "<a href='#' class='download-google-authenticator' style='color:#337ab7;'>Google Authenticator</a>" or "<a href='#' class='download-authy' style='color:#337ab7;'>Authy</a>"  */,
 311               well : 'sm',
 312               listeners : {
 313                render : function (_self)
 314                 {
 315                     this.el.select('.download-google-authenticator', true).first().on('click', function(e){
 316                         e.preventDefault();
 317
 318                         if(Roo.isIOS) {
 319                             window.open("https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8", "_blank");
 320                             return;
 321                         }
 322
 323                         window.open("https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2", "_blank");
 324                     });
 325
 326                     this.el.select('.download-authy', true).first().on('click', function(e){
 327                         e.preventDefault();
 328
 329                         if(Roo.isIOS) {
 330                             window.open("https://itunes.apple.com/us/app/authy/id494168017?mt=8", "_blank");
 331                             return;
 332                         }
 333
 334                         window.open("https://play.google.com/store/apps/details?id=com.ionicpremium.authy", "_blank");
 335                     });
 336                 }
 337               },
 338               xns : Roo.bootstrap,
 339               '|xns' : 'Roo.bootstrap'
 340              }
 341             ]
 342            }
 343           ]
 344          },
 345          {
 346           xtype : 'Row',
 347           xns : Roo.bootstrap,
 348           '|xns' : 'Roo.bootstrap',
 349           items  : [
 350            {
 351             xtype : 'Column',
 352             xs : 12,
 353             xns : Roo.bootstrap,
 354             '|xns' : 'Roo.bootstrap',
 355             items  : [
 356              {
 357               xtype : 'Container',
 358               html : _this._strings['4141195b21d661e36e56d91f19d53273'] /* 2. In the App, select "<b>Create or Setup an Account</b>" */,
 359               well : 'sm',
 360               xns : Roo.bootstrap,
 361               '|xns' : 'Roo.bootstrap'
 362              }
 363             ]
 364            }
 365           ]
 366          },
 367          {
 368           xtype : 'Row',
 369           xns : Roo.bootstrap,
 370           '|xns' : 'Roo.bootstrap',
 371           items  : [
 372            {
 373             xtype : 'Column',
 374             xs : 12,
 375             xns : Roo.bootstrap,
 376             '|xns' : 'Roo.bootstrap',
 377             items  : [
 378              {
 379               xtype : 'Container',
 380               _html : _this._strings['f93dadd0b45b370c51bf80fb0a3eadfa'] /* 3. For the Account Name user "{0}" */,
 381               html : _this._strings['f93dadd0b45b370c51bf80fb0a3eadfa'] /* 3. For the Account Name user "{0}" */,
 382               well : 'sm',
 383               listeners : {
 384                render : function (_self)
 385                 {
 386                     _this.issuer_notify = this;
 387                 }
 388               },
 389               xns : Roo.bootstrap,
 390               '|xns' : 'Roo.bootstrap'
 391              }
 392             ]
 393            }
 394           ]
 395          },
 396          {
 397           xtype : 'Row',
 398           xns : Roo.bootstrap,
 399           '|xns' : 'Roo.bootstrap',
 400           items  : [
 401            {
 402             xtype : 'Column',
 403             xs : 12,
 404             xns : Roo.bootstrap,
 405             '|xns' : 'Roo.bootstrap',
 406             items  : [
 407              {
 408               xtype : 'Container',
 409               html : _this._strings['8e5b55264e2acf73fb73b6a327bccd51'] /* 4. Enter the code below as "Your Key" */,
 410               well : 'sm',
 411               xns : Roo.bootstrap,
 412               '|xns' : 'Roo.bootstrap'
 413              }
 414             ]
 415            }
 416           ]
 417          },
 418          {
 419           xtype : 'Row',
 420           xns : Roo.bootstrap,
 421           '|xns' : 'Roo.bootstrap',
 422           items  : [
 423            {
 424             xtype : 'Column',
 425             xs : 12,
 426             xns : Roo.bootstrap,
 427             '|xns' : 'Roo.bootstrap',
 428             items  : [
 429              {
 430               xtype : 'Input',
 431               name : 'secret',
 432               readOnly : true,
 433               listeners : {
 434                render : function (_self)
 435                 {
 436                     _this.secret = this;
 437                 }
 438               },
 439               xns : Roo.bootstrap,
 440               '|xns' : 'Roo.bootstrap'
 441              }
 442             ]
 443            },
 444            {
 445             xtype : 'Column',
 446             cls : 'text-center',
 447             xs : 12,
 448             xns : Roo.bootstrap,
 449             '|xns' : 'Roo.bootstrap',
 450             items  : [
 451              {
 452               xtype : 'Button',
 453               html : _this._strings['780573538d031cf7387477f9ea3204f6'] /* Copy Key */,
 454               preventDefault : true,
 455               size : 'sm',
 456               style : 'margin-bottom: 15px;',
 457               listeners : {
 458                click : function (_self, e)
 459                 {
 460                     var el = _this.secret.inputEl().dom;
 461
 462                         if (document.body.createTextRange) {
 463                             // IE
 464                         var textRange = document.body.createTextRange();
 465                         textRange.moveToElementText(el);
 466                         textRange.select();
 467                         textRange.execCommand("Copy");
 468                     } else if (window.getSelection && document.createRange) {
 469                         // Non-IE
 470                         var editable = el.contentEditable; // Record contentEditable status of element
 471                         var readOnly = el.readOnly; // Record readOnly status of element
 472                         el.contentEditable = true; // iOS will only select text on non-form elements if contentEditable = true;
 473                         el.readOnly = false; // iOS will not select in a read only form element
 474                         var range = document.createRange();
 475                         range.selectNodeContents(el);
 476                         var sel = window.getSelection();
 477                         sel.removeAllRanges();
 478                         sel.addRange(range); // Does not work for Firefox if a textarea or input
 479
 480                         if (el.nodeName == "TEXTAREA" || el.nodeName == "INPUT") {
 481                             el.select(); // Firefox will only select a form element with select()
 482                         }
 483
 484                         if (el.setSelectionRange && navigator.userAgent.match(/ipad|ipod|iphone/i)) {
 485                             el.setSelectionRange(0, 999999); // iOS only selects "form" elements with SelectionRange
 486                         }
 487
 488                         el.contentEditable = editable; // Restore previous contentEditable status
 489                         el.readOnly = readOnly; // Restore previous readOnly status
 490
 491                         document.execCommand('copy');
 492                     }
 493                 }
 494               },
 495               xns : Roo.bootstrap,
 496               '|xns' : 'Roo.bootstrap'
 497              }
 498             ]
 499            }
 500           ]
 501          },
 502          {
 503           xtype : 'Row',
 504           xns : Roo.bootstrap,
 505           '|xns' : 'Roo.bootstrap',
 506           items  : [
 507            {
 508             xtype : 'Column',
 509             xs : 12,
 510             xns : Roo.bootstrap,
 511             '|xns' : 'Roo.bootstrap',
 512             items  : [
 513              {
 514               xtype : 'Container',
 515               html : _this._strings['22e960368d2513a40b7467ec143440cc'] /* 5. After adding this to Authenticator app, type in the generated number below to confirm. */,
 516               well : 'sm',
 517               xns : Roo.bootstrap,
 518               '|xns' : 'Roo.bootstrap'
 519              }
 520             ]
 521            }
 522           ]
 523          }
 524         ]
 525        }
 526       ]
 527      },
 528      {
 529       xtype : 'Row',
 530       xns : Roo.bootstrap,
 531       '|xns' : 'Roo.bootstrap',
 532       items  : [
 533        {
 534         xtype : 'Column',
 535         xs : 12,
 536         xns : Roo.bootstrap,
 537         '|xns' : 'Roo.bootstrap',
 538         items  : [
 539          {
 540           xtype : 'Form',
 541           method : 'GET',
 542           url : baseURL + '/Roo/Core_person.php',
 543           listeners : {
 544            actioncomplete : function (_self, action)
 545             {
 546                 if(action.type == 'setdata') {
 547
 548                     this.clearInvalid();
 549                 }
 550
 551                 if(action.type == 'submit') {
 552
 553                     switch(action.result.data) {
 554
 555                         case 'DONE':
 556                             var cb = function() {
 557                                 _this.dialog.hide();
 558                             };
 559
 560                             Roo.bootstrap.MessageBox.alert('Success', 'Two Factor authentication has been enabled', cb);
 561                             return;
 562
 563                         default:
 564                             Roo.log('invalid usage');
 565                             break;
 566                     }
 567                 }
 568             },
 569            actionfailed : function (_self, action)
 570             {
 571                 if(action.type == 'submit') {
 572
 573                     switch(action.result.errorMsg) {
 574                         case '_invalid_auth_code':
 575                             Roo.bootstrap.MessageBox.alert(
 576                                 'Invalid authentication code',
 577                                 'Please re-enter the latest authentication code.'
 578                             );
 579                             break;
 580                         default:
 581                             Roo.log('invalid usage');
 582                             break;
 583                     }
 584                 }
 585             },
 586            render : function (_self)
 587             {
 588                 _this.form = this;
 589             }
 590           },
 591           xns : Roo.bootstrap,
 592           '|xns' : 'Roo.bootstrap',
 593           items  : [
 594            {
 595             xtype : 'NumberField',
 596             allowBlank : false,
 597             allowDecimals : false,
 598             allowNegative : false,
 599             allowZero : false,
 600             decimalPrecision : 0,
 601             fieldLabel : _this._strings['ee468f72ab7fe4937fb014d6fcea540b'] /* Enter Two factor Authentication code */,
 602             indicatorpos : 'right',
 603             labelAlign : 'top',
 604             maxLength : 6,
 605             name : 'two_factor_auth_code',
 606             xs : 12,
 607             xns : Roo.bootstrap,
 608             '|xns' : 'Roo.bootstrap'
 609            },
 610            {
 611             xtype : 'Input',
 612             inputType : 'hidden',
 613             name : 'id',
 614             xns : Roo.bootstrap,
 615             '|xns' : 'Roo.bootstrap'
 616            }
 617           ]
 618          }
 619         ]
 620        }
 621       ]
 622      }
 623     ]
 624    }  );
 625  }
 626 });
 627 Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode, Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype);