NFC-47 Add mobile authentication docs and separate "Authenticate on mobile device" button

Author: SanderKondratjevNortal

example/src/main/resources/templates/index.html

@@ -39,15 +39,22 @@ <h2>Web eID: electronic ID smart cards on the Web</h2>
             <h4>Table of contents</h4>
             <ul>
                 <li><a href="#usage">Usage</a></li>
+                <ul>
+                    <li><a href="#usage-pc">Web eID</a></li>
+                    <li><a href="#usage-mobile">Web eID for Mobile</a></li>
+                </ul>
                 <li><a href="#documentation">Documentation</a>
                 <li><a href="#for-developers">For developers</a>
             </ul>
 
             <hr/>
             <h3><a id="usage"></a>Usage</h3>
+            <h4 id="usage-pc">Web eID</h4>
             <p>The recommended way of installing Web eID is by installing
-                <a href="https://www.id.ee/en/article/install-id-software/">the latest Open-EID ID-software package</a>.
-                In case you do not need or want to install the Open-EID package, install the latest Web eID packages in
+                <a href="https://www.id.ee/en/article/install-id-software/">the latest Open-EID ID-software
+                    package</a>.
+                In case you do not need or want to install the Open-EID package, install the latest Web eID
+                packages in
                 Firefox, Chrome, Edge or Safari according to the following instructions:
             </p>
             <ol>
@@ -87,14 +94,36 @@ <h3><a id="usage"></a>Usage</h3>
                 </li>
                 <li>Click <i>Authenticate</i> below.</li>
             </ol>
+            <p class="text-center p-3">
+                <button id="webeid-auth-button" class="btn btn-info">Authenticate</button>
+            </p>
+
+            <h4 id="usage-mobile">Web eID for Mobile</h4>
+            <p>The recommended way of installing Web eID for mobile devices is by installing the
+                <a href="https://www.id.ee/en/article/install-id-software/">official Web eID mobile application</a>.
+            </p>
+            <ol>
+                <li>Install the <a href="https://www.id.ee/en/article/install-id-software/">Web eID mobile app</a></li>
+                <li>
+                    Ensure NFC is enabled on your device
+                    <br><small>On Android: Settings → Connections → NFC → enable.<br>
+                    On iOS: NFC is automatically enabled on supported devices.</small>
+                </li>
+            </ol>
+
+            <p>Testing:</p>
+            <ol>
+                <li>Click <i>Authenticate on mobile device</i> below and follow the instructions in the app.</li>
+            </ol>
+
+            <p class="text-center p-3">
+                <button id="webeid-auth-mobile-button" class="btn btn-info">Authenticate on mobile device</button>
+            </p>
 
             <div id="error-message" class="alert alert-danger" style="display: none;" role="alert">
                 <div class="message"></div>
                 <pre class="details"></pre>
             </div>
-            <p class="text-center p-4">
-                <button id="webeid-auth-button" class="btn btn-info">Authenticate</button>
-            </p>
 
             <p>The privacy policy of the test service is available <a href="/files/Web eID privacy policy.pdf">here</a>.
             </p>
@@ -121,6 +150,15 @@ <h5>macOS</h5>
             <h5>Windows</h5>
             <p>Uninstall the Web eID software using <i>Add or remove programs</i>.</p>
 
+            <h5>Mobile</h5>
+            <p>To uninstall the Web eID mobile app, remove it the same way you would uninstall any other app:</p>
+            <ul>
+                <li><b>Android:</b> Tap and hold the Web eID app icon, then choose <i>Uninstall</i>, or go to
+                    <i>Settings → Apps → Web eID → Uninstall</i>.</li>
+                <li><b>iOS:</b> Tap and hold the Web eID app icon until the menu appears, then select <i>Remove App</i>,
+                    and confirm <i>Delete App</i>.</li>
+            </ul>
+
             <h4><a id="debugging-and-logs"></a>Debugging and logs</h4>
             <ul>
                 <li>
@@ -186,6 +224,16 @@ <h3><a id="documentation"></a>Documentation</h3>
                 <a href="https://web-eid.github.io/web-eid-cybernetica-analysis/webextensions-main.pdf">in this
                     document</a>.
             </p>
+
+            <h4>Mobile</h4>
+            <p>
+                Technical overview for mobile of the solution is available in the project
+                <a href="https://github.com/web-eid/web-eid-for-mobile-architecture-doc">Web eID for Mobile architecture document</a>.
+            </p>
+            <p>
+                The reference Android client implementation can be found here:
+                <a href="https://github.com/open-eid/RIA-DigiDoc-Android">RIA-DigiDoc-Android</a>.
+            </p>
             <hr/>
             <h3><a id="for-developers"></a>For developers</h3>
             <p>
@@ -253,6 +301,7 @@ <h3><a id="for-developers"></a>For developers</h3>
     hideErrorMessage();
 
     const authButton = document.querySelector("#webeid-auth-button");
+    const authMobileButton = document.querySelector("#webeid-auth-mobile-button");
 
     const csrfToken = document.querySelector('#csrftoken').content;
     const csrfHeaderName = document.querySelector('#csrfheadername').content;
@@ -264,23 +313,7 @@ <h3><a id="for-developers"></a>For developers</h3>
         authButton.disabled = true;
 
         try {
-            if (isMobileDevice()) {
-                const resp = await fetch("/auth/mobile/init", {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json",
-                        [csrfHeaderName]: csrfToken,
-                    },
-                    credentials: "include"
-                });
-
-                await checkHttpError(resp);
-                const { auth_uri } = await resp.json();
-                window.location.href = auth_uri;
-                return;
-            }
-
-          const challengeResponse = await fetch("/auth/challenge", {
+            const challengeResponse = await fetch("/auth/challenge", {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",
@@ -316,9 +349,31 @@ <h3><a id="for-developers"></a>For developers</h3>
         }
     });
 
-    function isMobileDevice() {
-        return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
-    }
+    authMobileButton.addEventListener("click", async () => {
+        hideErrorMessage();
+        authMobileButton.disabled = true;
+
+        try {
+            const resp = await fetch("/auth/mobile/init", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    [csrfHeaderName]: csrfToken,
+                },
+                credentials: "include"
+            });
+
+            await checkHttpError(resp);
+            const { auth_uri } = await resp.json();
+            window.location.href = auth_uri;
+
+        } catch (error) {
+            showErrorMessage(error);
+            throw error;
+        } finally {
+            authMobileButton.disabled = false;
+        }
+    });
 
     document.addEventListener('DOMContentLoaded', function () {
         setTimeout(function () {