Show action button for safari browsers when using FIDO2 (#3322)

fixes #3197

BTCPayServer/Views/UIAccount/LoginWithFido2.cshtml

@@ -11,10 +11,11 @@
     <div class="col-lg-12 section-heading">
         <h2>FIDO2 Authentication</h2>
         <hr class="primary">
-        <div>
+        <div id="info-message">
             <span id="spinner" class="fa fa-spinner fa-spin float-end ms-3 me-5 mt-1 fido-running" style="font-size:2.5em"></span>
             <p>Insert your security key into your computer's USB port. If it has a button, tap on it.</p>
         </div>
+        <button id="btn-start" class="btn btn-outline-primary w-100 btn-lg d-none" type="button">Start</button>
         <p id="error-message" class="d-none alert alert-danger"></p>
         <button id="btn-retry" class="btn btn-secondary d-none" type="button">Retry</button>
     </div>

BTCPayServer/Views/UIFido2/Create.cshtml

@@ -4,8 +4,8 @@
 }
 
 <form asp-action="CreateResponse" id="registerForm">
-    <input type="hidden" name="data" id="data" />
-    <input type="hidden" name="name" id="name" value="@(ViewData.ContainsKey("CredentialName")? ViewData["CredentialName"] : string.Empty)" />
+    <input type="hidden" name="data" id="data"/>
+    <input type="hidden" name="name" id="name" value="@(ViewData.ContainsKey("CredentialName") ? ViewData["CredentialName"] : string.Empty)"/>
 </form>
 <div class="row">
     <div class="col-lg-8">
@@ -13,6 +13,7 @@
             <span id="spinner" class="fa fa-spinner fa-spin float-end me-3 fido-running" style="font-size:2.5em"></span>
             <span>Insert your security device into your computer's USB port. If it has a button, tap on it.</span>
         </div>
+        <button id="btn-start" class="btn btn-primary btn-lg w-100 d-none" type="button">Start</button>
         <p id="error-message" class="d-none alert alert-danger"></p>
         <a id="btn-retry" class="btn btn-secondary d-none">Retry</a>
     </div>
@@ -23,5 +24,5 @@
     // send to server for registering
     window.makeCredentialOptions = @Json.Serialize(Model);
 </script>
-<script src="~/js/webauthn/helpers.js" ></script>
-<script src="~/js/webauthn/register.js" ></script>
+<script src="~/js/webauthn/helpers.js"></script>
+<script src="~/js/webauthn/register.js"></script>

BTCPayServer/wwwroot/js/webauthn/helpers.js

@@ -110,3 +110,7 @@ function value(selector) {
     }
     return el.value;
 }
+function isSafari(){
+    //https://stackoverflow.com/a/23522755/275504
+    return  /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}

BTCPayServer/wwwroot/js/webauthn/login.js

@@ -1,8 +1,3 @@
-
-if (detectFIDOSupport() && makeAssertionOptions){
-    login(makeAssertionOptions);
-}
-
 async function login(makeAssertionOptions) {
     const challenge = makeAssertionOptions.challenge.replace(/-/g, "+").replace(/_/g, "/");
     makeAssertionOptions.challenge = Uint8Array.from(atob(challenge), c => c.charCodeAt(0));
@@ -56,3 +51,22 @@ async function verifyAssertionWithServer(assertedCredential) {
 }
 
 
+
+document.addEventListener('DOMContentLoaded', () => {
+    if (detectFIDOSupport() && makeAssertionOptions) {
+        if (isSafari()) {
+            const infoMessage= document.getElementById("info-message");
+            infoMessage.classList.add("d-none");
+            const startButton = document.getElementById("btn-start");
+            startButton.addEventListener("click", ev => {
+                login(makeAssertionOptions);
+                infoMessage.classList.remove("d-none");
+                startButton.classList.add("d-none");
+            });
+            startButton.classList.remove("d-none");
+        } else {
+            login(makeAssertionOptions);
+        }
+    }
+})
+

BTCPayServer/wwwroot/js/webauthn/register.js

@@ -1,8 +1,3 @@
-
-if (detectFIDOSupport() && makeCredentialOptions){
-   register(makeCredentialOptions);
-}
-
 async function register(makeCredentialOptions) {
     console.log("Credential Options Object", makeCredentialOptions);
     // Turn the challenge back into the accepted format of padded base64
@@ -65,3 +60,21 @@ async function registerNewCredential(newCredential) {
     document.getElementById("data").value = JSON.stringify(data);
     document.getElementById("registerForm").submit();
 }
+
+document.addEventListener('DOMContentLoaded', () => {
+    if (detectFIDOSupport() && makeCredentialOptions) {
+        if (isSafari()) {
+            const infoMessage= document.getElementById("info-message");
+            infoMessage.classList.add("d-none");
+            const startButton = document.getElementById("btn-start");
+            startButton.addEventListener("click", ev => {
+                register(makeCredentialOptions);
+                infoMessage.classList.remove("d-none");
+                startButton.classList.add("d-none");
+            });
+            startButton.classList.remove("d-none");
+        } else {
+            register(makeCredentialOptions);
+        }
+    }
+})