PHP8
[Pman.BAdmin] / Pman.Dialog.BAdminStaffTwoFactorQRCode.js
index 74e8d18..46295e0 100644 (file)
@@ -8,11 +8,18 @@ Pman.Dialog.BAdminStaffTwoFactorQRCode= function() {}
 Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
 
  _strings : {
-  'dc7b0c7f9d3941532bda06cd58eec7bd' :"<ol class='qr-list' start=\"1\">\n    <li>Open Google Authenticator in your phone, and scan this QR code.</li>\n</ol>",
-  '5d412a3d8de0189df31c8f331e2e6630' :"<ol class='qr-list' start=\"2\">\n    <li>After adding this to Google Authenticator, type in the generated number below to confirm.</li>\n</ol>",
+  '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>\" ",
+  'e8e9a5b1083b253b726d1fa7f31176f5' :"2. After adding this to Authenticator app, type in the generated number below to confirm.",
+  '2194867d6c27ce97cd1f0a5db8d5c95e' :"Setup 2-Factor Authentication",
+  '22e960368d2513a40b7467ec143440cc' :"5. After adding this to Authenticator app, type in the generated number below to confirm.",
+  '131e3875e777f6c9a8e510f96a4d20d2' :"Skip for now",
+  'f93dadd0b45b370c51bf80fb0a3eadfa' :"3. For the Account Name user \"{0}\"",
+  '8e5b55264e2acf73fb73b6a327bccd51' :"4. Enter the code below as \"Your Key\"",
+  '4141195b21d661e36e56d91f19d53273' :"2. In the App, select \"<b>Create or Setup an Account</b>\"",
   'ea4788705e6873b424c65e91c2846b19' :"Cancel",
   'ee468f72ab7fe4937fb014d6fcea540b' :"Enter Two factor Authentication code",
-  '4674ee874911c910f2356ef9ec6ab7f9' :"Scan this into Google Authenticator",
+  '6d9785b18748c30bb3adbf7506f40202' :"1. Open Authenticator App in your phone, and scan this QR code.",
+  '780573538d031cf7387477f9ea3204f6' :"Copy Key",
   '70d9be9b139893aa6c69b5e77e614311' :"Confirm"
  },
  _named_strings : {
@@ -47,7 +54,7 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
     allow_close : true,
     animate : false,
     cls : 'enable-overflow coba-qr-dialog',
-    title : _this._strings['4674ee874911c910f2356ef9ec6ab7f9'] /* Scan this into Google Authenticator */,
+    title : _this._strings['2194867d6c27ce97cd1f0a5db8d5c95e'] /* Setup 2-Factor Authentication */,
     listeners : {
      hide : function (_self)
       {
@@ -72,16 +79,21 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
           }
           
           _this.dialog.closeEl.hide();
+          _this.skipBtn.hide();
           _this.cancelBtn.hide();
           
           if(_this.data.allow_close) {
               _this.dialog.closeEl.show();
+              _this.skipBtn.show();
           }
           
           if(_this.data.allow_cancel) {
               _this.cancelBtn.show();
           }
           
+          _this.desktopView.hide();
+          _this.mobileView.hide();
+          
           new Pman.Request({
               url: baseURL + '/Roo/Core_person.php',
               method : 'GET',
@@ -92,7 +104,17 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
               },
               
               success : function(res) {
-                  _this.qrcode_image.setSrc(res.data);
+                  _this.qrcode_image.setSrc(res.data.image);
+                  _this.secret.setValue(res.data.secret);
+                  _this.issuer_notify.el.dom.innerHTML = String.format(_this.issuer_notify._html, res.data.issuer);
+                  
+                  _this.desktopView.show();
+                  _this.mobileView.hide();
+                  
+                  if(Roo.isTouch) {
+                      _this.desktopView.hide();
+                      _this.mobileView.show();
+                  }
               },
               
               failure : function(res) {
@@ -104,6 +126,25 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
     xns : Roo.bootstrap,
     '|xns' : 'Roo.bootstrap',
     buttons : [
+     {
+      xtype : 'Button',
+      html : _this._strings['131e3875e777f6c9a8e510f96a4d20d2'] /* Skip for now */,
+      weight : 'default',
+      listeners : {
+       click : function (_self, e)
+        {
+            _this.dialog.hide();
+            
+            return;
+        },
+       render : function (_self)
+        {
+            _this.skipBtn = this;
+        }
+      },
+      xns : Roo.bootstrap,
+      '|xns' : 'Roo.bootstrap'
+     },
      {
       xtype : 'Button',
       html : _this._strings['ea4788705e6873b424c65e91c2846b19'] /* Cancel */,
@@ -140,6 +181,12 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
     items  : [
      {
       xtype : 'Row',
+      listeners : {
+       render : function (_self)
+        {
+            _this.desktopView = this;
+        }
+      },
       xns : Roo.bootstrap,
       '|xns' : 'Roo.bootstrap',
       items  : [
@@ -150,48 +197,81 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
         '|xns' : 'Roo.bootstrap',
         items  : [
          {
-          xtype : 'Container',
-          html : _this._strings['dc7b0c7f9d3941532bda06cd58eec7bd'] /* 
-          <ol class='qr-list' start="1">          
-    <li>Open Google Authenticator in your phone, and scan this QR code.</li>          
-</ol>
-          */ ,
-          well : 'sm',
+          xtype : 'Row',
           xns : Roo.bootstrap,
-          '|xns' : 'Roo.bootstrap'
-         }
-        ]
-       }
-      ]
-     },
-     {
-      xtype : 'Row',
-      xns : Roo.bootstrap,
-      '|xns' : 'Roo.bootstrap',
-      items  : [
-       {
-        xtype : 'Column',
-        cls : 'text-center',
-        xs : 12,
-        xns : Roo.bootstrap,
-        '|xns' : 'Roo.bootstrap',
-        items  : [
+          '|xns' : 'Roo.bootstrap',
+          items  : [
+           {
+            xtype : 'Column',
+            xs : 12,
+            xns : Roo.bootstrap,
+            '|xns' : 'Roo.bootstrap',
+            items  : [
+             {
+              xtype : 'Container',
+              html : _this._strings['6d9785b18748c30bb3adbf7506f40202'] /* 1. Open Authenticator App in your phone, and scan this QR code. */,
+              well : 'sm',
+              xns : Roo.bootstrap,
+              '|xns' : 'Roo.bootstrap'
+             }
+            ]
+           }
+          ]
+         },
          {
-          xtype : 'Img',
-          cls : 'qr-code',
-          imgResponsive : false,
-          src : 'about:blank',
-          listeners : {
-           render : function (_self)
-            {
-                _this.qrcode_image = this;
-                
-                this.el.setVisibilityMode(Roo.Element.DISPLAY);
-                
-            }
-          },
+          xtype : 'Row',
+          xns : Roo.bootstrap,
+          '|xns' : 'Roo.bootstrap',
+          items  : [
+           {
+            xtype : 'Column',
+            cls : 'text-center',
+            xs : 12,
+            xns : Roo.bootstrap,
+            '|xns' : 'Roo.bootstrap',
+            items  : [
+             {
+              xtype : 'Img',
+              cls : 'qr-code',
+              imgResponsive : false,
+              src : 'about:blank',
+              listeners : {
+               render : function (_self)
+                {
+                    _this.qrcode_image = this;
+                    
+                    this.el.setVisibilityMode(Roo.Element.DISPLAY);
+                    
+                }
+              },
+              xns : Roo.bootstrap,
+              '|xns' : 'Roo.bootstrap'
+             }
+            ]
+           }
+          ]
+         },
+         {
+          xtype : 'Row',
           xns : Roo.bootstrap,
-          '|xns' : 'Roo.bootstrap'
+          '|xns' : 'Roo.bootstrap',
+          items  : [
+           {
+            xtype : 'Column',
+            xs : 12,
+            xns : Roo.bootstrap,
+            '|xns' : 'Roo.bootstrap',
+            items  : [
+             {
+              xtype : 'Container',
+              html : _this._strings['e8e9a5b1083b253b726d1fa7f31176f5'] /* 2. After adding this to Authenticator app, type in the generated number below to confirm. */,
+              well : 'sm',
+              xns : Roo.bootstrap,
+              '|xns' : 'Roo.bootstrap'
+             }
+            ]
+           }
+          ]
          }
         ]
        }
@@ -199,6 +279,12 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
      },
      {
       xtype : 'Row',
+      listeners : {
+       render : function (_self)
+        {
+            _this.mobileView = this;
+        }
+      },
       xns : Roo.bootstrap,
       '|xns' : 'Roo.bootstrap',
       items  : [
@@ -209,15 +295,231 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
         '|xns' : 'Roo.bootstrap',
         items  : [
          {
-          xtype : 'Container',
-          html : _this._strings['5d412a3d8de0189df31c8f331e2e6630'] /* 
-          <ol class='qr-list' start="2">          
-    <li>After adding this to Google Authenticator, type in the generated number below to confirm.</li>          
-</ol>
-          */ ,
-          well : 'sm',
+          xtype : 'Row',
+          xns : Roo.bootstrap,
+          '|xns' : 'Roo.bootstrap',
+          items  : [
+           {
+            xtype : 'Column',
+            xs : 12,
+            xns : Roo.bootstrap,
+            '|xns' : 'Roo.bootstrap',
+            items  : [
+             {
+              xtype : 'Container',
+              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>"  */,
+              well : 'sm',
+              listeners : {
+               render : function (_self)
+                {
+                    this.el.select('.download-google-authenticator', true).first().on('click', function(e){
+                        e.preventDefault();
+                        
+                        if(Roo.isIOS) {
+                            window.open("https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8", "_blank");
+                            return;
+                        }
+                        
+                        window.open("https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2", "_blank");
+                    });
+                    
+                    this.el.select('.download-authy', true).first().on('click', function(e){
+                        e.preventDefault();
+                        
+                        if(Roo.isIOS) {
+                            window.open("https://itunes.apple.com/us/app/authy/id494168017?mt=8", "_blank");
+                            return;
+                        }
+                        
+                        window.open("https://play.google.com/store/apps/details?id=com.ionicpremium.authy", "_blank");
+                    });
+                }
+              },
+              xns : Roo.bootstrap,
+              '|xns' : 'Roo.bootstrap'
+             }
+            ]
+           }
+          ]
+         },
+         {
+          xtype : 'Row',
+          xns : Roo.bootstrap,
+          '|xns' : 'Roo.bootstrap',
+          items  : [
+           {
+            xtype : 'Column',
+            xs : 12,
+            xns : Roo.bootstrap,
+            '|xns' : 'Roo.bootstrap',
+            items  : [
+             {
+              xtype : 'Container',
+              html : _this._strings['4141195b21d661e36e56d91f19d53273'] /* 2. In the App, select "<b>Create or Setup an Account</b>" */,
+              well : 'sm',
+              xns : Roo.bootstrap,
+              '|xns' : 'Roo.bootstrap'
+             }
+            ]
+           }
+          ]
+         },
+         {
+          xtype : 'Row',
+          xns : Roo.bootstrap,
+          '|xns' : 'Roo.bootstrap',
+          items  : [
+           {
+            xtype : 'Column',
+            xs : 12,
+            xns : Roo.bootstrap,
+            '|xns' : 'Roo.bootstrap',
+            items  : [
+             {
+              xtype : 'Container',
+              _html : _this._strings['f93dadd0b45b370c51bf80fb0a3eadfa'] /* 3. For the Account Name user "{0}" */,
+              html : _this._strings['f93dadd0b45b370c51bf80fb0a3eadfa'] /* 3. For the Account Name user "{0}" */,
+              well : 'sm',
+              listeners : {
+               render : function (_self)
+                {
+                    _this.issuer_notify = this;
+                }
+              },
+              xns : Roo.bootstrap,
+              '|xns' : 'Roo.bootstrap'
+             }
+            ]
+           }
+          ]
+         },
+         {
+          xtype : 'Row',
+          xns : Roo.bootstrap,
+          '|xns' : 'Roo.bootstrap',
+          items  : [
+           {
+            xtype : 'Column',
+            xs : 12,
+            xns : Roo.bootstrap,
+            '|xns' : 'Roo.bootstrap',
+            items  : [
+             {
+              xtype : 'Container',
+              html : _this._strings['8e5b55264e2acf73fb73b6a327bccd51'] /* 4. Enter the code below as "Your Key" */,
+              well : 'sm',
+              xns : Roo.bootstrap,
+              '|xns' : 'Roo.bootstrap'
+             }
+            ]
+           }
+          ]
+         },
+         {
+          xtype : 'Row',
+          xns : Roo.bootstrap,
+          '|xns' : 'Roo.bootstrap',
+          items  : [
+           {
+            xtype : 'Column',
+            xs : 12,
+            xns : Roo.bootstrap,
+            '|xns' : 'Roo.bootstrap',
+            items  : [
+             {
+              xtype : 'Input',
+              name : 'secret',
+              readOnly : true,
+              listeners : {
+               render : function (_self)
+                {
+                    _this.secret = this;
+                }
+              },
+              xns : Roo.bootstrap,
+              '|xns' : 'Roo.bootstrap'
+             }
+            ]
+           },
+           {
+            xtype : 'Column',
+            cls : 'text-center',
+            xs : 12,
+            xns : Roo.bootstrap,
+            '|xns' : 'Roo.bootstrap',
+            items  : [
+             {
+              xtype : 'Button',
+              html : _this._strings['780573538d031cf7387477f9ea3204f6'] /* Copy Key */,
+              preventDefault : true,
+              size : 'sm',
+              style : 'margin-bottom: 15px;',
+              listeners : {
+               click : function (_self, e)
+                {
+                    var el = _this.secret.inputEl().dom;
+                    
+                       if (document.body.createTextRange) {
+                           // IE
+                        var textRange = document.body.createTextRange();
+                        textRange.moveToElementText(el);
+                        textRange.select();
+                        textRange.execCommand("Copy");
+                    } else if (window.getSelection && document.createRange) {
+                        // Non-IE
+                        var editable = el.contentEditable; // Record contentEditable status of element
+                        var readOnly = el.readOnly; // Record readOnly status of element
+                               el.contentEditable = true; // iOS will only select text on non-form elements if contentEditable = true;
+                               el.readOnly = false; // iOS will not select in a read only form element
+                        var range = document.createRange();
+                        range.selectNodeContents(el);
+                        var sel = window.getSelection();
+                        sel.removeAllRanges();
+                        sel.addRange(range); // Does not work for Firefox if a textarea or input
+                        
+                        if (el.nodeName == "TEXTAREA" || el.nodeName == "INPUT") {
+                            el.select(); // Firefox will only select a form element with select()
+                        }
+                       
+                        if (el.setSelectionRange && navigator.userAgent.match(/ipad|ipod|iphone/i)) {
+                            el.setSelectionRange(0, 999999); // iOS only selects "form" elements with SelectionRange
+                        }
+                       
+                        el.contentEditable = editable; // Restore previous contentEditable status
+                        el.readOnly = readOnly; // Restore previous readOnly status 
+                        
+                        document.execCommand('copy');
+                    }
+                }
+              },
+              xns : Roo.bootstrap,
+              '|xns' : 'Roo.bootstrap'
+             }
+            ]
+           }
+          ]
+         },
+         {
+          xtype : 'Row',
           xns : Roo.bootstrap,
-          '|xns' : 'Roo.bootstrap'
+          '|xns' : 'Roo.bootstrap',
+          items  : [
+           {
+            xtype : 'Column',
+            xs : 12,
+            xns : Roo.bootstrap,
+            '|xns' : 'Roo.bootstrap',
+            items  : [
+             {
+              xtype : 'Container',
+              html : _this._strings['22e960368d2513a40b7467ec143440cc'] /* 5. After adding this to Authenticator app, type in the generated number below to confirm. */,
+              well : 'sm',
+              xns : Roo.bootstrap,
+              '|xns' : 'Roo.bootstrap'
+             }
+            ]
+           }
+          ]
          }
         ]
        }