Display 2FA secret in Gladys Plus configure 2FA screen (#1521)

* Display 2FA secret in Gladys Plus configure 2FA screen * Remove op_mini all
GladysAssistant · May 16, 2022 · d45a7aa · d45a7aa
1 parent 5bc2f0a
commit d45a7aa
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 7 deletions.
diff --git a/front/package.json b/front/package.json
@@ -76,6 +76,7 @@
     "not ie 11",
     "not ie_mob 11",
     "not ios_saf 12.2-12.5",
+    "not op_mini all",
     "not dead"
   ]
 }
diff --git a/front/src/config/i18n/en.json b/front/src/config/i18n/en.json
@@ -2005,9 +2005,11 @@
     "neverUsed": "Never"
   },
   "gatewayTwoFactorAuth": {
-    "title": "Gladys Gateway",
+    "title": "Gladys Plus",
     "configureTitle": "Configure Two-Factor Authentication",
     "configureButton": "Configure 2FA",
+    "secretLabel": "Secret",
+    "copy": "Copy",
     "securityIsImportant": "The security of your Gladys Gateway account is really important to us.",
     "securityApps": "To ensure that your account remains secure, please enable two-factor authentication using a two-factor app like Authy on <a href=\"https://itunes.apple.com/us/app/authy/id494168017?mt=8\">iOS</a> or <a href=\"https://play.google.com/store/apps/details?id=com.authy.authy\">Android</a>.",
     "invalidCode": "The 2FA code you provided is not valid.",
@@ -2017,7 +2019,7 @@
     "app": {
       "open": "Open your 2FA app",
       "addAccount": "Click on \"Add Account\"",
-      "scanQRCode": "Scan the QR Code below"
+      "scanQRCode": "Scan the QR Code below or copy the secret to your 2FA application."
     }
   },
   "gatewaySignUp": {

diff --git a/front/src/config/i18n/fr.json b/front/src/config/i18n/fr.json
@@ -2005,9 +2005,11 @@
     "neverUsed": "Jamais"
   },
   "gatewayTwoFactorAuth": {
-    "title": "Gladys Gateway",
-    "configureTitle": "Configurer l'authentification Two-Factor (\"2FA\")",
+    "title": "Gladys Plus",
+    "configureTitle": "Configurer l'authentification à deux facteurs (\"2FA\")",
     "configureButton": "Configurer la 2FA",
+    "secretLabel": "Secret",
+    "copy": "Copier",
     "securityIsImportant": "La sécurité de votre compte Gladys Gateway est vraiment importante pour nous.",
     "securityApps": "Pour garantir la sécurité de votre compte, veuillez activer l'authentification à deux facteurs (\"2FA\") à l'aide d'une application à deux facteurs comme Authy sur <a href=\"https://itunes.apple.com/fr/app/authy/id494168017?mt=8\">iOS</a> ou <a href=\"https://play.google.com/store/apps/details?id=com.authy.authy\">Android</a>.",
     "invalidCode": "Le code 2FA que vous avez fourni n'est pas valide.",
@@ -2017,7 +2019,7 @@
     "app": {
       "open": "Ouvrez votre application 2FA",
       "addAccount": "Cliquez sur \"Ajouter un compte\"",
-      "scanQRCode": "Scannez le QR Code ci-dessous"
+      "scanQRCode": "Scannez le QR Code ci-dessous, ou copiez manuellement le secret pour l'ajouter manuellement à votre application."
     }
   },
   "gatewaySignUp": {

diff --git a/front/src/routes/gateway-configure-two-factor/ConfigureTwoFactorForm.js b/front/src/routes/gateway-configure-two-factor/ConfigureTwoFactorForm.js
@@ -68,6 +68,20 @@ const ConfigureTwoFactorForm = ({ children, ...props }) => (
                       )}
                     </div>
 
+                    <div class="form-group">
+                      <label class="form-label">
+                        <Text id="gatewayTwoFactorAuth.secretLabel" />
+                      </label>
+                      <div class="input-group">
+                        <input type="text" class="form-control" disabled value={props.secret} />
+                        <div class="input-group-append">
+                          <button class="btn btn-outline-secondary" type="button" onClick={props.copySecret}>
+                            <Text id="gatewayTwoFactorAuth.copy" />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+
                     <div class="form-group">
                       <label class="form-label">
                         <Text id="gatewayTwoFactorAuth.confirmCode" />

diff --git a/front/src/routes/gateway-configure-two-factor/index.js b/front/src/routes/gateway-configure-two-factor/index.js
@@ -15,15 +15,26 @@ class ConfigureTwoFactorPage extends Component {
   getOtpAuthUrl = async () => {
     const accessToken = this.props.session.getTwoFactorAccessToken();
     const data = await this.props.session.gatewayClient.configureTwoFactor(accessToken);
+    const url = new URL(data.otpauth_url);
+    const secret = url.searchParams.get('secret');
     QRCode.toDataURL(data.otpauth_url, (err, dataUrl) => {
-      this.setState({ dataUrl });
+      this.setState({ dataUrl, secret });
     });
   };
 
   nextStep = () => {
     this.setState({ step: this.state.step + 1 });
   };
 
+  copySecret = () => {
+    try {
+      const { secret } = this.state;
+      navigator.clipboard.writeText(secret);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
   updateTwoFactorCode = event => {
     let newValue = event.target.value;
 
@@ -63,15 +74,17 @@ class ConfigureTwoFactorPage extends Component {
     this.getOtpAuthUrl();
   };
 
-  render({}, { dataUrl, step, twoFactorCode, errored }) {
+  render({}, { dataUrl, step, twoFactorCode, errored, secret }) {
     return (
       <ConfigureTwoFactorForm
         dataUrl={dataUrl}
+        secret={secret}
         errored={errored}
         nextStep={this.nextStep}
         twoFactorCode={twoFactorCode}
         updateTwoFactorCode={this.updateTwoFactorCode}
         enableTwoFactor={this.enableTwoFactor}
+        copySecret={this.copySecret}
         step={step}
       />
     );