OKTA-722502 : Same device enrollment flow updates

assets/sass/v2/_okta-verify.scss

@@ -54,7 +54,12 @@
   }
 
   .sameDevice-setup .orOnMobileLink {
-    color: #007cc0;
+    color: $link-text-color;
+    text-decoration: none;
+  }
+
+  .sameDevice-setup .download-ov-link {
+    color: $link-text-color;
     text-decoration: none;
   }
 
@@ -161,3 +166,12 @@
     }
   }
 }
+
+.ov-same-device-enroll-text {
+  margin: 0 0 20px;
+  text-align: center;
+
+  .ov-same-device-enroll-link {
+    color: $link-text-color;
+  }
+}

packages/@okta/i18n/src/properties/login.properties

@@ -1113,7 +1113,7 @@ oie.enroll.okta_verify.channel.sms.description = Make sure you can access the te
 oie.enroll.okta_verify.channel.sms.description.updated = Make sure you can access the text on the receiving device
 oie.enroll.okta_verify.qrcode.title = Set up Okta Verify via QR code
 oie.enroll.okta_verify.qrcode.step1 = On your mobile device, download the Okta Verify app from the App Store (iPhone and iPad) or Google Play (Android devices).
-oie.enroll.okta_verify.qrcode.step1.updated = On your other device, download the Okta Verify app from the App Store® (iPhone® and iPad®) or on Google Play (Android? devices).
+oie.enroll.okta_verify.qrcode.step1.updated = On your other device, download the Okta Verify app from the App Store® (iPhone® and iPad®) or on Google Play (Android® devices).
 oie.enroll.okta_verify.qrcode.step2 = Open the app and follow the instructions to add your account
 oie.enroll.okta_verify.qrcode.step3.updated = When prompted, tap <$1>Scan a QR code</$1>, then scan the QR code below:
 oie.enroll.okta_verify.qrcode.step3 = When prompted, tap Scan a QR code, then scan the QR code below:

packages/@okta/i18n/src/properties/login_ok_PL.properties

@@ -828,7 +828,7 @@ oie.enroll.okta_verify.channel.sms.description = 》Ṁåķé šûŕé ýöû ç
 oie.enroll.okta_verify.channel.sms.description.updated = 》Ṁåķé šûŕé ýöû çåñ åççéšš ţĥé ţéẋţ öñ ţĥé ŕéçéîṽîñĝ ðéṽîçé ヸ€홝한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《
 oie.enroll.okta_verify.qrcode.title = 》Šéţ ûþ Öķţå Ṽéŕîƒý ṽîå ǪŔ çöðé 䀕ヸ€홝한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《
 oie.enroll.okta_verify.qrcode.step1 = 》Öñ ýöûŕ ɱöƀîļé ðéṽîçé، ðöŵñļöåð ţĥé Öķţå Ṽéŕîƒý åþþ ƒŕöɱ ţĥé Åþþ Šţöŕé ❨îÞĥöñé åñð îÞåð❩ öŕ Ĝööĝļé Þļåý ❨Åñðŕöîð ðéṽîçéš❩· 한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《
-oie.enroll.okta_verify.qrcode.step1.updated = 》Öñ ýöûŕ öţĥéŕ ðéṽîçé، ðöŵñļöåð ţĥé Öķţå Ṽéŕîƒý åþþ ƒŕöɱ ţĥé Åþþ Šţöŕé® ❨îÞĥöñé® åñð îÞåð®❩ öŕ öñ Ĝööĝļé Þļåý ❨Åñðŕöîð¿ ðéṽîçéš❩· €홝한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《
+oie.enroll.okta_verify.qrcode.step1.updated = 》Öñ ýöûŕ öţĥéŕ ðéṽîçé، ðöŵñļöåð ţĥé Öķţå Ṽéŕîƒý åþþ ƒŕöɱ ţĥé Åþþ Šţöŕé® ❨îÞĥöñé® åñð îÞåð®❩ öŕ öñ Ĝööĝļé Þļåý ❨Åñðŕöîð® ðéṽîçéš❩· €홝한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《
 oie.enroll.okta_verify.qrcode.step2 = 》Öþéñ ţĥé åþþ åñð ƒöļļöŵ ţĥé îñšţŕûçţîöñš ţö åðð ýöûŕ åççöûñţ 䀕ヸ€홝한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《
 oie.enroll.okta_verify.qrcode.step3.updated = 》Ŵĥéñ þŕöɱþţéð، ţåþ <$1>Šçåñ å ǪŔ çöðé</$1>، ţĥéñ šçåñ ţĥé ǪŔ çöðé ƀéļöŵ∶ 한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《
 oie.enroll.okta_verify.qrcode.step3 = 》Ŵĥéñ þŕöɱþţéð، ţåþ Šçåñ å ǪŔ çöðé، ţĥéñ šçåñ ţĥé ǪŔ çöðé ƀéļöŵ∶ ئ䀕ヸ€홝한Ӝฐโ⾼ئ䀕ヸ€홝한Ӝฐโ《

playground/mocks/data/idp/idx/authenticator-enroll-ov-qr-with-same-device.json

@@ -0,0 +1,300 @@
+{
+  "stateHandle": "02vWoN3BXxJ9oeJA05wdCO2sp1q-RimAkwgnN-6xaW",
+  "version": "1.0.0",
+  "expiresAt": "2020-04-09T16:15:46.000Z",
+  "step": "ENROLL",
+  "intent": "LOGIN",
+  "remediation": {
+    "type": "array",
+    "value": [
+      {
+        "rel": [
+          "create-form"
+        ],
+        "name": "enroll-poll",
+        "href": "http://localhost:3000/idp/idx/challenge/poll",
+        "method": "POST",
+        "accepts": "application/vnd.okta.v1+json",
+        "refresh": 4000,
+        "value": [
+          {
+            "name": "stateHandle",
+            "required": true,
+            "value": "022afk9OLqrN2DipVIuIxC0wqzuxMaFIbpOf6pcBh8",
+            "visible": false,
+            "mutable": false
+          }
+        ]
+      },
+      {
+        "rel": [
+          "create-form"
+        ],
+        "name": "select-enrollment-channel",
+        "href": "http://localhost:3000/idp/idx/credential/enroll",
+        "method": "POST",
+        "accepts": "application/vnd.okta.v1+json",
+        "value": [
+          {
+            "name": "authenticator",
+            "type": "object",
+            "label": "Okta Verify",
+            "value": {
+              "form": {
+                "value": [
+                  {
+                    "name": "id",
+                    "value": "aidtheidkwh282hv8g3",
+                    "required": true,
+                    "mutable": false,
+                    "visible": false
+                  },
+                  {
+                    "name": "channel",
+                    "required": true,
+                    "visible": true,
+                    "options": [
+                      {
+                        "value": "qrcode",
+                        "label": "QRCODE"
+                      },
+                      {
+                        "value": "sms",
+                        "label": "SMS"
+                      },
+                      {
+                        "value": "email",
+                        "label": "Email"
+                      },
+                      {
+                        "value": "samedevice",
+                        "label": "SAMEDEVICE"
+                      }
+                    ]
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "name": "stateHandle",
+            "required": true,
+            "value": "022afk9OLqrN2DipVIuIxC0wqzuxMaFIbpOf6pcBh8",
+            "visible": false,
+            "mutable": false
+          }
+        ]
+      },
+      {
+        "rel": [
+          "create-form"
+        ],
+        "name": "select-authenticator-enroll",
+        "href": "http://localhost:3000/idp/idx/credential/enroll",
+        "method": "POST",
+        "accepts": "application/vnd.okta.v1+json",
+        "value": [
+          {
+            "name": "authenticator",
+            "required": true,
+            "type": "object",
+            "options": [
+              {
+                "label": "Okta Password",
+                "value": {
+                  "form": {
+                    "value": [
+                      {
+                        "name": "id",
+                        "required": true,
+                        "value": "autwa6eD9o02iBbtv0g3",
+                        "mutable": false
+                      },
+                      {
+                        "name": "methodType",
+                        "required": false,
+                        "value": "password",
+                        "mutable": false
+                      }
+                    ]
+                  }
+                },
+                "relatesTo": "$.authenticators.value[0]"
+              },
+              {
+                "label": "Security Key or Biometric Authenticator (FIDO2)",
+                "value": {
+                  "form": {
+                    "value": [
+                      {
+                        "name": "id",
+                        "value": "aidtheidkwh282hv8g3",
+                        "required": true,
+                        "mutable": false,
+                        "visible": false
+                      },
+                      {
+                        "name": "methodType",
+                        "value": "webauthn",
+                        "required": false,
+                        "mutable": false,
+                        "visible": false
+                      }
+                    ]
+                  }
+                },
+                "relatesTo": "$.authenticators.value[1]"
+              },
+              {
+                "label": "Okta Verify",
+                "value": {
+                    "form": {
+                        "value": [
+                            {
+                                "name": "id",
+                                "required": true,
+                                "value": "aut2h3fft4y9pDPCS1d7",
+                                "mutable": false
+                            },
+                            {
+                                "name": "channel",
+                                "type": "string",
+                                "required": false,
+                                "options": [
+                                    {
+                                        "label": "QRCODE",
+                                        "value": "qrcode"
+                                    },
+                                    {
+                                        "label": "EMAIL",
+                                        "value": "email"
+                                    },
+                                    {
+                                        "label": "SMS",
+                                        "value": "sms"
+                                    },
+                                    {
+                                      "value": "samedevice",
+                                      "label": "SAMEDEVICE"
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                },
+                "relatesTo": "$.authenticators.value[2]"
+              }
+            ]
+          },
+          {
+            "name": "stateHandle",
+            "required": true,
+            "value": "02CqFbzJ_zMGCqXut-1CNXfafiTkh9wGlbFqi9Xupt",
+            "visible": false,
+            "mutable": false
+          }
+        ]
+      }
+    ]
+  },
+  "currentAuthenticator": {
+    "type": "object",
+    "value": {
+      "type": "app",
+      "key": "okta_verify",
+      "authenticatorInstanceId": "aidL86XHm5Xtg3SD0I1g",
+      "contextualData": {
+        "qrcode": {
+          "href": "data:image/png;base64,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",
+          "method": "embedded",
+          "Type": "image/png"
+        },
+        "selectedChannel": "qrcode"
+      }
+    }
+  },
+  "authenticators": {
+    "type": "array",
+    "value": [
+      {
+        "catalogKey": "okta_password",
+        "authenticatorId": "aidtmbseAWnMPtLe20g3",
+        "authenticatorName": "Okta Password",
+        "methods": [
+          {
+            "methodType": "password"
+          }
+        ]
+      },
+      {
+        "catalogKey": "webauthn",
+        "authenticatorId": "aidtheidkwh282hv8g3",
+        "authenticatorName": "Security Key or Biometric Authenticator (FIDO2)",
+        "methods": [
+          {
+            "methodType": "webauthn"
+          }
+        ]
+      },
+      {
+        "catalogKey": "okta_verify",
+        "authenticatorId": "aut1erh5wK1M8wA3g0g4",
+        "authenticatorName": "Okta Verify",
+        "methods": [
+          {
+            "methodType": "signed_nonce"
+          },
+          {
+            "methodType": "push"
+          },
+          {
+            "methodType": "totp"
+          }
+        ]
+      }
+    ]
+  },
+  "cancel": {
+    "rel": [
+      "create-form"
+    ],
+    "name": "cancel",
+    "href": "http://idx.okta1.com:1802/idp/idx/cancel",
+    "method": "POST",
+    "accepts": "application/vnd.okta.v1+json",
+    "value": [
+      {
+        "name": "stateHandle",
+        "required": true,
+        "value": "022afk9OLqrN2DipVIuIxC0wqzuxMaFIbpOf6pcBh8",
+        "visible": false,
+        "mutable": false
+      }
+    ]
+  },
+  "context": {
+    "rel": [
+      "create-form"
+    ],
+    "name": "context",
+    "href": "http://idx.okta1.com:1802/idp/idx/context",
+    "method": "POST",
+    "accepts": "application/vnd.okta.v1+json",
+    "value": [
+      {
+        "name": "stateHandle",
+        "required": true,
+        "value": "022afk9OLqrN2DipVIuIxC0wqzuxMaFIbpOf6pcBh8",
+        "visible": false,
+        "mutable": false
+      }
+    ]
+  },
+  "user": {
+    "type": "object",
+    "value": {
+      "id": "00ux9wonp6bLZVk3P0g3",
+      "identifier": "testUser@okta.com"
+    }
+  }
+}

playground/mocks/data/idp/idx/authenticator-enroll-ov-same-device-ios-any-security.json

@@ -54,6 +54,14 @@
                     "required": true,
                     "visible": true,
                     "options": [
+                      {
+                        "label": "EMAIL",
+                        "value": "email"
+                      },
+                      {
+                          "label": "SMS",
+                          "value": "sms"
+                      },
                       {
                         "value": "samedevice",
                         "label": "SAMEDEVICE"
@@ -124,7 +132,18 @@
                         "name": "methodType",
                         "required": false,
                         "options": [
-                            { "label": "SAMEDEVICE", "value": "samedevice" }
+                          {
+                              "label": "EMAIL",
+                              "value": "email"
+                          },
+                          {
+                              "label": "SMS",
+                              "value": "sms"
+                          },
+                          {
+                              "label": "SAMEDEVICE",
+                              "value": "samedevice"
+                          }
                         ]
                     },
                     {