Refactor JS

app/javascript/controllers/add_credential_controller.js

@@ -12,20 +12,21 @@ export default class extends Controller {
       }
     });
 
-    optionsResponse.json().then((data) => {
+    try {
+      const data = await optionsResponse.json();
       console.log(data);
 
       if (optionsResponse.ok) {
-        navigator.credentials.create({ publicKey: PublicKeyCredential.parseCreationOptionsFromJSON(data) })
-          .then((credential) => {
-            console.log("Creating new public key credential...");
-            this.hiddenCredentialInputTarget.value = JSON.stringify(credential);
-            this.element.submit();
-          })
-          .catch((error) => alert(error));
+        console.log("Creating new public key credential...");
+
+        const credential = await navigator.credentials.create({ publicKey: PublicKeyCredential.parseCreationOptionsFromJSON(data) });
+        this.hiddenCredentialInputTarget.value = JSON.stringify(credential);
+        this.element.submit();
       } else {
         alert(data.errors?.[0] || "Sorry, something wrong happened.");
       }
-    });
+    } catch (error) {
+      alert(error.message || error);
+    }
   }
- }
+}

app/javascript/controllers/new_registration_controller.js

@@ -12,21 +12,21 @@ export default class extends Controller {
       }
     });
 
-    optionsResponse.json().then((data) => {
+    try {
+      const data = await optionsResponse.json();
       console.log(data);
 
       if (optionsResponse.ok && data.user) {
-        navigator.credentials.create({ publicKey: PublicKeyCredential.parseCreationOptionsFromJSON(data) })
-          .then((credential) => {
-            console.log("Creating new public key credential...");
-            this.hiddenCredentialInputTarget.value = JSON.stringify(credential);
-            this.element.submit();
-          })
-          .catch((error) => alert(error.message || error));
+        console.log("Creating new public key credential...");
 
+        const credential = await navigator.credentials.create({ publicKey: PublicKeyCredential.parseCreationOptionsFromJSON(data) });
+        this.hiddenCredentialInputTarget.value = JSON.stringify(credential);
+        this.element.submit();
       } else {
-        alert(data.errors?.[0] || "Unknown error");
+        alert(data.errors?.[0] || "Sorry, something wrong happened.");
       }
-    });
+    } catch (error) {
+      alert(error.message || error);
+    }
   }
 }

app/javascript/controllers/new_session_controller.js

@@ -9,20 +9,21 @@ export default class extends Controller {
       body: new FormData(this.element),
     });
 
-    optionsResponse.json().then((data) => {
+    try {
+      const data = await optionsResponse.json();
+      console.log(data);
+
       if (optionsResponse.ok) {
-        console.log(data);
+        console.log("Getting public key credential...");
 
-        navigator.credentials.get({ publicKey: PublicKeyCredential.parseRequestOptionsFromJSON(data) })
-          .then((credential) => {
-            console.log("Getting public key credential...");
-            this.hiddenCredentialInputTarget.value = JSON.stringify(credential);
-            this.element.submit();
-          })
-          .catch((error) => alert(error));
+        const credential = await navigator.credentials.get({ publicKey: PublicKeyCredential.parseRequestOptionsFromJSON(data) })
+        this.hiddenCredentialInputTarget.value = JSON.stringify(credential);
+        this.element.submit();
       } else {
         alert(data.errors?.[0] || "Sorry, something wrong happened.");
       }
-    });
+    } catch (error) {
+      alert(error.message || error);
+    }
   }
 }