Update MFA totp factor enroll flow (#48)

* style update

* remove qr from factor details

* enroll factor ui update

* totp endpoint created

* diplay qr code modal

* sms and totp endpoint updated

* cleanup

Author: edignot

java-mfa-example/src/main/java/com/workos/java/examples/MfaApp.java

@@ -16,6 +16,7 @@
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
+import com.fasterxml.jackson.databind.JsonNode;
 
 
 public class MfaApp {
@@ -35,7 +36,8 @@ public MfaApp() {
     app.get("/", this::home);
     app.get("/clear_session", this::clear_session);
     app.get("/factor_detail", this::factor_detail);
-    app.post("/enroll_factor", this::enroll_factor);
+    app.post("/enroll_sms_factor", this::enroll_sms_factor);
+    app.post("/enroll_totp_factor", this::enroll_totp_factor);
     app.get("/enroll_factor_details", this::enroll_factor_details);
     app.post("/challenge_factor", this::challenge_factor);
     app.post("/verify_factor", this::verify_factor);
@@ -168,31 +170,59 @@ public void enroll_factor_details(Context ctx ) {
     ctx.render("enroll_factor.jte");
   }
 
-  public void enroll_factor(Context ctx) {
-    String phoneNumber = ctx.formParam("phone_number");
-    String factorType = ctx.formParam("type");
-    String issuer = ctx.formParam("totp_issuer");
-    String user = ctx.formParam("totp_user");
+  public void enroll_totp_factor(Context ctx ) {
+    JsonNode jsonNode = ctx.bodyAsClass(JsonNode.class);
+    String issuer = jsonNode.get("issuer").asText();
+    String user = jsonNode.get("user").asText();
     EnrollFactorOptions options;
 
-    switch(factorType) {
-      case "sms":
-        options = EnrollFactorOptions.builder()
-          .type("sms")
-          .phoneNumber(phoneNumber)
-          .build();
-          break;
-      case "totp":
-        options = EnrollFactorOptions.builder()
-          .type("totp")
-          .issuer(issuer)
-          .user(user)
-          .build();
-          break;
-      default:
-        options = EnrollFactorOptions.builder()
-          .build();
+    options = EnrollFactorOptions.builder()
+      .type("totp")
+      .issuer(issuer)
+      .user(user)
+      .build();
+
+    try {
+      Factor factor = workos.mfa.enrollFactor(options);
+      String factorId = factor.id;
+
+      if(ctx.sessionAttribute("factorList") != null) {
+        ArrayList<String> factorIdList = ctx.sessionAttribute("factorIdList");
+        factorIdList.add(factorId);
+        ctx.sessionAttribute("factorIdList", factorIdList);
+        HashMap<String, Factor> factorList = ctx.sessionAttribute("factorList");
+        factorList.put(factorId, factor);
+        ctx.sessionAttribute("factorList", factorList);
+      } else {
+        ArrayList<String> factorIdList = new ArrayList<>();
+        factorIdList.add(factorId);
+        ctx.sessionAttribute("factorIdList", factorIdList);
+        HashMap<String, Factor> factorList = new HashMap<>();
+        factorList.put(factorId, factor);
+        ctx.sessionAttribute("factorList", factorList);
+      }
+      HashMap<String, Factor> factorList = ctx.sessionAttribute("factorList");
+      ArrayList<Object> list = new ArrayList<Object>(factorList.values());
+      ctx.sessionAttribute("arrayFactorList", list);
+      ctx.status(200).json(factor);
+    } catch (Exception e) {
+      if(e.equals(null)) {
+        ctx.render("error.jte");
+      }
+      Map<String, Object> jteParams = new HashMap<>();
+      jteParams.put("error", e.getMessage());
+      ctx.render("error.jte", jteParams);
     }
+  }
+
+  public void enroll_sms_factor(Context ctx) {
+    String phoneNumber = ctx.formParam("phone_number");
+    EnrollFactorOptions options;
+
+    options = EnrollFactorOptions.builder()
+      .type("sms")
+      .phoneNumber(phoneNumber)
+      .build();
 
     try {
       Factor factor = workos.mfa.enrollFactor(options);

java-mfa-example/src/main/jte/enroll_factor.jte

@@ -42,47 +42,111 @@
             <div class="flex space_between ">
                 <div class="factor_card">
                     <h2>Enroll SMS Factor</h2>
-                    <form action="/enroll_factor" method="post">
+                    <form action="/enroll_sms_factor" method="post">
                         <div class="flex flex_column">
                             <div class="flex">
                                 <input class="text_input" type="text" id="phone_number" name="phone_number"
-                                       placeholder="Phone Number" required>
+                                       placeholder="Phone Number">
                             </div>
-
                             <div>
                                 <button type="submit" name="type" value="sms"
-                                        class="button button-outline button-sm">Enroll New
-                                    Factor</button>
+                                        class="button button-outline button-sm" id="sms-factor-submit-btn"
+                                        disabled>Enroll New Factor
+                                </button>
                             </div>
                         </div>
                     </form>
                 </div>
 
                 <div class="factor_card">
                     <h2>Enroll TOTP Factor</h2>
-                    <form method="POST" action="/enroll_factor">
+                    <div>
                         <div class="flex_column">
                             <div class="flex">
                                 <input class="text_input" type="text" id="totp_issuer" name="totp_issuer"
-                                       placeholder="TOTP Issuer" required>
+                                       placeholder="TOTP Issuer">
                             </div>
                             <div class="flex">
                                 <input class="text_input" type="text" id="totp_user" name="totp_user"
-                                       placeholder="User Email" required>
+                                       placeholder="User Email">
                             </div>
 
                             <div>
                                 <button type="submit" name="type" value="totp"
-                                        class="button button-outline button-sm">Enroll New Factor</button>
+                                        class="button button-outline button-sm" id="totp-factor-submit-btn"
+                                        disabled>Enroll New Factor
+                                </button>
                             </div>
                         </div>
-                    </form>
+                    </div>
                 </div>
             </div>
         </div>
-
     </div>
 </div>
-
+<div class="overlay" id="overlay" style="display: none;">
+    <div class="modal" id="modal">
+        <button id="close-modal-btn">I've scanned a QR code</button>
+    </div>
+</div>
 </body>
 
+<script>
+    const phoneNumber = document.getElementById("phone_number")
+    const totpIssuer = document.getElementById("totp_issuer")
+    const totpUser = document.getElementById("totp_user")
+    const smsSubmitButton = document.getElementById("sms-factor-submit-btn")
+    const totpSubmitButton = document.getElementById("totp-factor-submit-btn")
+    const closeModalBtn = document.getElementById("close-modal-btn")
+    const overlay = document.getElementById("overlay")
+    const modal = document.getElementById("modal")
+
+    phoneNumber.addEventListener("input", validateSmsForm)
+    totpIssuer.addEventListener("input", validateTotpForm)
+    totpUser.addEventListener("input", validateTotpForm)
+
+    function validateSmsForm() {
+        if (phoneNumber.value.trim() !== "") {
+            smsSubmitButton.disabled = false
+        } else {
+            smsSubmitButton.disabled = true
+        }
+    }
+
+    function validateTotpForm() {
+        if (totpIssuer.value.trim() !== "" && totpUser.value.trim() !== "") {
+            totpSubmitButton.disabled = false
+        } else {
+            totpSubmitButton.disabled = true
+        }
+    }
+
+    totpSubmitButton.addEventListener("click", function() {
+        fetch('/enroll_totp_factor', {
+            method: 'POST',
+            headers: {
+               'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                issuer: totpIssuer.value,
+                user: totpUser.value,
+            })
+        })
+            .then(response => response.json())
+            .then(response => {
+                overlay.style.display = "block"
+                modal.innerHTML = `
+                    <h2>Scan the QR code</h2>
+                    <p class="qr_code_instructions">Use the authenticator app to scan the QR code. After you scan the code, click 'Continue'.</p>
+                    <img class="qr_code" id="qr_code" src="" alt="qr_code">
+                    <a href="/" class="button button-outline">Continue</a>
+                `
+                const qrCode = document.getElementById("qr_code");
+                qrCode.src = response.totp.qr_code
+            })
+        })
+
+    closeModalBtn.addEventListener("click", function() {
+        overlay.style.display = "none"
+    })
+</script>

java-mfa-example/src/main/jte/factor_detail.jte

@@ -56,12 +56,6 @@
                             @endif
                             <p>Created At: <code>${createdAt}</code></p>
                         </div>
-
-                        @if(type.equals("totp"))
-                            <div class="qr_div">
-                                <img class="qr_code" src="${qrCode}" alt="qr_code">
-                            </div>
-                        @endif
                     </div>
                 </div>
 

java-mfa-example/src/resources/main.css

@@ -1,7 +1,6 @@
 body {
     font-family: Inter, sans-serif;
     background-color: #f9f9fb;
-
 }
 
 .container_login {
@@ -130,7 +129,6 @@ h1 {
     align-items: center;
     position: relative;
     bottom: 10%;
-    /* background-color: #f9f9fb; */
 }
 
 .logged_in_div_left {
@@ -212,8 +210,7 @@ div.text_box {
     background-color: #f9f9fb;
     height: 60px;
     padding: 15px 30px 15px 30px;
-
-    z-index: 1000;
+    z-index: 999;
 }
 
 .logged_in_nav p {
@@ -277,20 +274,50 @@ pre.prettyprint {
     margin-bottom: 20px;
 }
 
-.qr_div {
-    align-self: center;
-    padding-top: 15px;
-}
-
-.qr_code {
-    width: 7vw;
-    max-width: 100px;
-}
-
 .code-input {
     width: 75px;
     height: 100px;
     margin: 0px 5px 30px 5px;
     font-size: 60px;
     color: darkslategray;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,0.5);
+  z-index: 999;
+}
+
+.modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 25px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.5);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.qr_code_instructions {
+  width: 300px;
+}
+
+.qr_code {
+  width: 300px;
+  margin: 25px;
+}
+
+button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
 }