Fix #5618 - 2FA on mobile
authorEdward <edward@roojs.com>
Thu, 20 Dec 2018 04:07:51 +0000 (12:07 +0800)
committerEdward <edward@roojs.com>
Thu, 20 Dec 2018 04:07:51 +0000 (12:07 +0800)
Pman.Dialog.BAdminStaffTwoFactorQRCode.bjs
Pman.Dialog.BAdminStaffTwoFactorQRCode.js

index 3d12429..8816cfe 100644 (file)
@@ -9,9 +9,10 @@
   "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}\"",
-  "68fba850c4685fab8bb9f6b3e09dd89f" : "4. After adding this to Authenticator app, type in the generated number below to confirm.",
+  "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",
@@ -25,7 +26,7 @@
  "items" : [
   {
    "listeners" : {
-    "show" : "function (_self)\n{\n    if(!Pman.Login.authUser) {\n        Roo.bootstrap.MessageBox.alert('Error', 'Please login again');\n        return;\n    }\n    \n    if(\n        !_this.data.id ||\n        _this.data.id.length == 0\n    ) {\n        Roo.bootstrap.MessageBox.alert('Error', 'Please select a person again');\n        return;\n    }\n    \n    _this.dialog.closeEl.hide();\n    _this.skipBtn.hide();\n    _this.cancelBtn.hide();\n    \n    if(_this.data.allow_close) {\n        _this.dialog.closeEl.show();\n        _this.skipBtn.show();\n    }\n    \n    if(_this.data.allow_cancel) {\n        _this.cancelBtn.show();\n    }\n    \n    _this.desktopView.hide();\n    _this.mobileView.hide();\n    \n    new Pman.Request({\n        url: baseURL + '/Roo/Core_person.php',\n        method : 'GET',\n        mask : 'Loading...',\n        params : {\n            _to_qr_code : 1,\n            id: _this.data.id\n        },\n        \n        success : function(res) {\n            _this.qrcode_image.setSrc(res.data.image);\n            _this.secret.setValue(res.data.secret);\n            _this.issuer_notify.el.dom.innerHTML = String.format(_this.issuer_notify._html, res.data.issuer);\n            \n            _this.desktopView.show();\n            _this.mobileView.hide();\n            \n            if(Roo.isTouch) {\n                _this.desktopView.hide();\n                _this.mobileView.show();\n            }\n            \n        },\n        \n        failure : function(res) {\n            Roo.log(res);\n        }\n    });\n}",
+    "show" : "function (_self)\n{\n    if(!Pman.Login.authUser) {\n        Roo.bootstrap.MessageBox.alert('Error', 'Please login again');\n        return;\n    }\n    \n    if(\n        !_this.data.id ||\n        _this.data.id.length == 0\n    ) {\n        Roo.bootstrap.MessageBox.alert('Error', 'Please select a person again');\n        return;\n    }\n    \n    _this.dialog.closeEl.hide();\n    _this.skipBtn.hide();\n    _this.cancelBtn.hide();\n    \n    if(_this.data.allow_close) {\n        _this.dialog.closeEl.show();\n        _this.skipBtn.show();\n    }\n    \n    if(_this.data.allow_cancel) {\n        _this.cancelBtn.show();\n    }\n    \n    _this.desktopView.hide();\n    _this.mobileView.hide();\n    \n    new Pman.Request({\n        url: baseURL + '/Roo/Core_person.php',\n        method : 'GET',\n        mask : 'Loading...',\n        params : {\n            _to_qr_code : 1,\n            id: _this.data.id\n        },\n        \n        success : function(res) {\n            _this.qrcode_image.setSrc(res.data.image);\n            _this.secret.setValue(res.data.secret);\n            _this.issuer_notify.el.dom.innerHTML = String.format(_this.issuer_notify._html, res.data.issuer);\n            \n            _this.desktopView.show();\n            _this.mobileView.hide();\n            \n            if(Roo.isTouch) {\n                _this.desktopView.hide();\n                _this.mobileView.show();\n            }\n        },\n        \n        failure : function(res) {\n            Roo.log(res);\n        }\n    });\n}",
     "hide" : "function (_self)\n{\n    if(_this.callback){\n        _this.callback.call(_this, false);\n    }\n    \n}"
    },
    "String cls" : "enable-overflow coba-qr-dialog",
           }
          ]
         },
+        {
+         "xtype" : "Row",
+         "$ xns" : "Roo.bootstrap",
+         "items" : [
+          {
+           "xtype" : "Column",
+           "Number xs" : 12,
+           "$ xns" : "Roo.bootstrap",
+           "items" : [
+            {
+             "xtype" : "Container",
+             "$ xns" : "Roo.bootstrap",
+             "String well" : "sm",
+             "String html" : "4. Enter the code below as \"Your Key\""
+            }
+           ]
+          }
+         ]
+        },
         {
          "xtype" : "Row",
          "$ xns" : "Roo.bootstrap",
              "listeners" : {
               "render" : "function (_self)\n{\n    _this.secret = this;\n}"
              },
+             "String name" : "secret",
              "Boolean readOnly" : true,
              "xtype" : "Input",
              "$ xns" : "Roo.bootstrap"
            "items" : [
             {
              "listeners" : {
-              "click" : "function (_self, e)\n{\n    _this.secret.inputEl().dom.select();\n    document.execCommand('copy');\n}"
+              "click" : "function (_self, e)\n{\n    var el = _this.secret.inputEl().dom;\n    \n\tif (document.body.createTextRange) {\n\t    // IE\n        var textRange = document.body.createTextRange();\n        textRange.moveToElementText(el);\n        textRange.select();\n        textRange.execCommand(\"Copy\");\n    } else if (window.getSelection && document.createRange) {\n        // Non-IE\n        var editable = el.contentEditable; // Record contentEditable status of element\n        var readOnly = el.readOnly; // Record readOnly status of element\n       \tel.contentEditable = true; // iOS will only select text on non-form elements if contentEditable = true;\n       \tel.readOnly = false; // iOS will not select in a read only form element\n        var range = document.createRange();\n        range.selectNodeContents(el);\n        var sel = window.getSelection();\n        sel.removeAllRanges();\n        sel.addRange(range); // Does not work for Firefox if a textarea or input\n        \n        if (el.nodeName == \"TEXTAREA\" || el.nodeName == \"INPUT\") {\n            el.select(); // Firefox will only select a form element with select()\n        }\n    \t\n        if (el.setSelectionRange && navigator.userAgent.match(/ipad|ipod|iphone/i)) {\n            el.setSelectionRange(0, 999999); // iOS only selects \"form\" elements with SelectionRange\n        }\n    \t\n        el.contentEditable = editable; // Restore previous contentEditable status\n        el.readOnly = readOnly; // Restore previous readOnly status \n        \n        document.execCommand('copy');\n    }\n}"
              },
              "String size" : "sm",
              "Boolean preventDefault" : true,
              "xtype" : "Container",
              "$ xns" : "Roo.bootstrap",
              "String well" : "sm",
-             "String html" : "4. After adding this to Authenticator app, type in the generated number below to confirm."
+             "String html" : "5. After adding this to Authenticator app, type in the generated number below to confirm."
             }
            ]
           }
index fee2570..46295e0 100644 (file)
@@ -11,9 +11,10 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
   '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}\"",
-  '68fba850c4685fab8bb9f6b3e09dd89f' :"4. After adding this to Authenticator app, type in the generated number below to confirm.",
+  '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",
@@ -114,7 +115,6 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
                       _this.desktopView.hide();
                       _this.mobileView.show();
                   }
-                  
               },
               
               failure : function(res) {
@@ -393,6 +393,28 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
            }
           ]
          },
+         {
+          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,
@@ -406,6 +428,7 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
             items  : [
              {
               xtype : 'Input',
+              name : 'secret',
               readOnly : true,
               listeners : {
                render : function (_self)
@@ -434,8 +457,39 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
               listeners : {
                click : function (_self, e)
                 {
-                    _this.secret.inputEl().dom.select();
-                    document.execCommand('copy');
+                    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,
@@ -458,7 +512,7 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
             items  : [
              {
               xtype : 'Container',
-              html : _this._strings['68fba850c4685fab8bb9f6b3e09dd89f'] /* 4. After adding this to Authenticator app, type in the generated number below to confirm. */,
+              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'