commit
authorEdward <edward@roojs.com>
Wed, 19 Dec 2018 09:33:58 +0000 (17:33 +0800)
committerEdward <edward@roojs.com>
Wed, 19 Dec 2018 09:33:58 +0000 (17:33 +0800)
Pman.Dialog.BAdminStaffTwoFactorQRCode.bjs
Pman.Dialog.BAdminStaffTwoFactorQRCode.js

index aa961fa..4e9509e 100644 (file)
@@ -6,13 +6,17 @@
  "permname" : "",
  "modOrder" : "001",
  "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>\" ",
+  "e8e9a5b1083b253b726d1fa7f31176f5" : "2. After adding this to Authenticator app, type in the generated number below to confirm.",
   "2194867d6c27ce97cd1f0a5db8d5c95e" : "Setup 2-Factor Authentication",
-  "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>",
   "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.",
+  "4141195b21d661e36e56d91f19d53273" : "2. In the App, select \"<b>Create or Setup an Account</b>\"",
   "ea4788705e6873b424c65e91c2846b19" : "Cancel",
-  "d5586cc2733f9741fdbd51f17fcd0c08" : "1. Download an Authentication App on your phone, like \"Google Authenticator\" or \"Authy\" ",
   "ee468f72ab7fe4937fb014d6fcea540b" : "Enter Two factor Authentication code",
-  "93da2892625bc6aa6c2ceccee35513bf" : "1. Open Google Authenticator in your phone, and scan this QR code.",
+  "6d9785b18748c30bb3adbf7506f40202" : "1. Open Authenticator App in your phone, and scan this QR code.",
+  "780573538d031cf7387477f9ea3204f6" : "Copy Key",
   "70d9be9b139893aa6c69b5e77e614311" : "Confirm"
  },
  "named_strings" : {
@@ -21,7 +25,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    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        },\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",
@@ -64,6 +68,9 @@
      "* prop" : "buttons[]"
     },
     {
+     "listeners" : {
+      "render" : "function (_self)\n{\n    _this.desktopView = this;\n}"
+     },
      "xtype" : "Row",
      "$ xns" : "Roo.bootstrap",
      "items" : [
        "$ xns" : "Roo.bootstrap",
        "items" : [
         {
-         "xtype" : "Container",
+         "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" : "1. Open Authenticator App in your phone, and scan this QR code."
+            }
+           ]
+          }
+         ]
+        },
+        {
+         "xtype" : "Row",
+         "$ xns" : "Roo.bootstrap",
+         "items" : [
+          {
+           "String cls" : "text-center",
+           "xtype" : "Column",
+           "Number xs" : 12,
+           "$ xns" : "Roo.bootstrap",
+           "items" : [
+            {
+             "listeners" : {
+              "render" : "function (_self)\n{\n    _this.qrcode_image = this;\n    \n    this.el.setVisibilityMode(Roo.Element.DISPLAY);\n    \n}"
+             },
+             "Boolean imgResponsive" : false,
+             "String cls" : "qr-code",
+             "xtype" : "Img",
+             "String src" : "about:blank",
+             "$ xns" : "Roo.bootstrap"
+            }
+           ]
+          }
+         ]
+        },
+        {
+         "xtype" : "Row",
          "$ xns" : "Roo.bootstrap",
-         "String well" : "sm",
-         "String html" : "1. Download an Authentication App on your phone, like \"Google Authenticator\" or \"Authy\" "
+         "items" : [
+          {
+           "xtype" : "Column",
+           "Number xs" : 12,
+           "$ xns" : "Roo.bootstrap",
+           "items" : [
+            {
+             "xtype" : "Container",
+             "$ xns" : "Roo.bootstrap",
+             "String well" : "sm",
+             "String html" : "2. After adding this to Authenticator app, type in the generated number below to confirm."
+            }
+           ]
+          }
+         ]
         }
        ]
       }
      ]
     },
     {
+     "listeners" : {
+      "render" : "function (_self)\n{\n    _this.mobileView = this;\n}"
+     },
      "xtype" : "Row",
      "$ xns" : "Roo.bootstrap",
      "items" : [
            "$ xns" : "Roo.bootstrap",
            "items" : [
             {
+             "listeners" : {
+              "render" : "function (_self)\n{\n    this.el.select('.download-google-authenticator', true).first().on('click', function(e){\n        e.preventDefault();\n        \n        if(Roo.isIOS) {\n            window.open(\"https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8\", \"_blank\");\n            return;\n        }\n        \n        window.open(\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2\", \"_blank\");\n    });\n    \n    this.el.select('.download-authy', true).first().on('click', function(e){\n        e.preventDefault();\n        \n        if(Roo.isIOS) {\n            window.open(\"https://itunes.apple.com/us/app/authy/id494168017?mt=8\", \"_blank\");\n            return;\n        }\n        \n        window.open(\"https://play.google.com/store/apps/details?id=com.ionicpremium.authy\", \"_blank\");\n    });\n}"
+             },
              "xtype" : "Container",
              "$ xns" : "Roo.bootstrap",
              "String well" : "sm",
-             "String html" : "1. Open Google Authenticator in your phone, and scan this QR code."
+             "String html" : "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>\" "
+            }
+           ]
+          }
+         ]
+        },
+        {
+         "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" : "2. In the App, select \"<b>Create or Setup an Account</b>\""
             }
            ]
           }
          "$ xns" : "Roo.bootstrap",
          "items" : [
           {
-           "String cls" : "text-center",
            "xtype" : "Column",
            "Number xs" : 12,
            "$ xns" : "Roo.bootstrap",
            "items" : [
             {
              "listeners" : {
-              "render" : "function (_self)\n{\n    _this.qrcode_image = this;\n    \n    this.el.setVisibilityMode(Roo.Element.DISPLAY);\n    \n}"
+              "render" : "function (_self)\n{\n    _this.issuer_notify = this;\n}"
              },
-             "Boolean imgResponsive" : false,
-             "String cls" : "qr-code",
-             "xtype" : "Img",
-             "String src" : "about:blank",
+             "xtype" : "Container",
+             "string _html" : "3. For the Account Name user \"{0}\"",
+             "$ xns" : "Roo.bootstrap",
+             "String well" : "sm",
+             "String html" : "3. For the Account Name user \"{0}\""
+            }
+           ]
+          }
+         ]
+        },
+        {
+         "xtype" : "Row",
+         "$ xns" : "Roo.bootstrap",
+         "items" : [
+          {
+           "xtype" : "Column",
+           "Number xs" : 12,
+           "$ xns" : "Roo.bootstrap",
+           "items" : [
+            {
+             "listeners" : {
+              "render" : "function (_self)\n{\n    _this.secret = this;\n}"
+             },
+             "Boolean readOnly" : true,
+             "xtype" : "Input",
              "$ xns" : "Roo.bootstrap"
             }
            ]
+          },
+          {
+           "String cls" : "text-center",
+           "xtype" : "Column",
+           "Number xs" : 12,
+           "$ xns" : "Roo.bootstrap",
+           "items" : [
+            {
+             "listeners" : {
+              "click" : "function (_self, e)\n{\n    _this.secret.inputEl().dom.select();\n    document.execCommand('copy');\n}"
+             },
+             "String size" : "sm",
+             "Boolean preventDefault" : true,
+             "xtype" : "Button",
+             "$ xns" : "Roo.bootstrap",
+             "String html" : "Copy Key",
+             "String style" : "margin-bottom: 15px;"
+            }
+           ]
           }
          ]
         },
              "xtype" : "Container",
              "$ xns" : "Roo.bootstrap",
              "String well" : "sm",
-             "String html" : "<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>"
+             "String html" : "4. After adding this to Authenticator app, type in the generated number below to confirm."
             }
            ]
           }
index 86317fe..5b44ccf 100644 (file)
@@ -8,13 +8,17 @@ Pman.Dialog.BAdminStaffTwoFactorQRCode= function() {}
 Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
 
  _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>\" ",
+  'e8e9a5b1083b253b726d1fa7f31176f5' :"2. After adding this to Authenticator app, type in the generated number below to confirm.",
   '2194867d6c27ce97cd1f0a5db8d5c95e' :"Setup 2-Factor Authentication",
-  '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>",
   '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.",
+  '4141195b21d661e36e56d91f19d53273' :"2. In the App, select \"<b>Create or Setup an Account</b>\"",
   'ea4788705e6873b424c65e91c2846b19' :"Cancel",
-  'd5586cc2733f9741fdbd51f17fcd0c08' :"1. Download an Authentication App on your phone, like \"Google Authenticator\" or \"Authy\" ",
   'ee468f72ab7fe4937fb014d6fcea540b' :"Enter Two factor Authentication code",
-  '93da2892625bc6aa6c2ceccee35513bf' :"1. Open Google Authenticator in your phone, and scan this QR code.",
+  '6d9785b18748c30bb3adbf7506f40202' :"1. Open Authenticator App in your phone, and scan this QR code.",
+  '780573538d031cf7387477f9ea3204f6' :"Copy Key",
   '70d9be9b139893aa6c69b5e77e614311' :"Confirm"
  },
  _named_strings : {
@@ -86,6 +90,9 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
               _this.cancelBtn.show();
           }
           
+          _this.desktopView.hide();
+          _this.mobileView.hide();
+          
           new Pman.Request({
               url: baseURL + '/Roo/Core_person.php',
               method : 'GET',
@@ -98,6 +105,15 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
               success : function(res) {
                   _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) {
@@ -164,6 +180,12 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
     items  : [
      {
       xtype : 'Row',
+      listeners : {
+       render : function (_self)
+        {
+            _this.desktopView = this;
+        }
+      },
       xns : Roo.bootstrap,
       '|xns' : 'Roo.bootstrap',
       items  : [
@@ -174,11 +196,81 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
         '|xns' : 'Roo.bootstrap',
         items  : [
          {
-          xtype : 'Container',
-          html : _this._strings['d5586cc2733f9741fdbd51f17fcd0c08'] /* 1. Download an Authentication App on your phone, like "Google Authenticator" or "Authy"  */,
-          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['6d9785b18748c30bb3adbf7506f40202'] /* 1. Open Authenticator App in your phone, and scan this QR code. */,
+              well : 'sm',
+              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  : [
+             {
+              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'
+             }
+            ]
+           }
+          ]
          }
         ]
        }
@@ -186,6 +278,12 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
      },
      {
       xtype : 'Row',
+      listeners : {
+       render : function (_self)
+        {
+            _this.mobileView = this;
+        }
+      },
       xns : Roo.bootstrap,
       '|xns' : 'Roo.bootstrap',
       items  : [
@@ -208,7 +306,55 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
             items  : [
              {
               xtype : 'Container',
-              html : _this._strings['93da2892625bc6aa6c2ceccee35513bf'] /* 1. Open Google Authenticator in your phone, and scan this QR code. */,
+              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'
@@ -224,23 +370,71 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
           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',
+              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.qrcode_image = this;
-                    
-                    this.el.setVisibilityMode(Roo.Element.DISPLAY);
-                    
+                    _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 : 'Input',
+              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)
+                {
+                    _this.secret.inputEl().dom.select();
+                    document.execCommand('copy');
                 }
               },
               xns : Roo.bootstrap,
@@ -263,11 +457,7 @@ Roo.apply(Pman.Dialog.BAdminStaffTwoFactorQRCode.prototype, {
             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>
-              */ ,
+              html : _this._strings['68fba850c4685fab8bb9f6b3e09dd89f'] /* 4. After adding this to Authenticator app, type in the generated number below to confirm. */,
               well : 'sm',
               xns : Roo.bootstrap,
               '|xns' : 'Roo.bootstrap'