NFC-102 Web eID for mobile support

example/public/css/main.css

@@ -0,0 +1,140 @@
+body {
+    font-family: "Inv Maison Neue","Maison Neue",-apple-system,BlinkMacSystemFont,"Open Sans",open-sans,sans-serif;
+}
+
+.has-advanced-upload {
+    outline: 2px dashed #92b0b3;
+    outline-offset: -10px;
+
+    -webkit-transition: outline-offset .25s ease-in-out, background-color .25s linear;
+    transition: outline-offset .25s ease-in-out, background-color .25s linear;
+}
+
+.adding-signature {
+    height: 14px;
+    color: #000000;
+    font-size: 32px;
+    font-weight: bold;
+    letter-spacing: 0;
+    line-height: 14px;
+}
+
+.welcome-line {
+    height: 40px;
+    color: #000000;
+    font-size: 14px;
+    letter-spacing: 0;
+    line-height: 20px;
+    margin-top: 1rem;
+}
+
+#webeid-logout-button {
+    height: 2.5rem;
+}
+
+#file-drop-area {
+    margin: 0 10rem;
+    padding-top: 2rem;
+    box-sizing: border-box;
+    outline: 2px dashed #92b0b3;
+    outline-offset: -10px;
+    border-radius: 3px;
+    background-color: #F5F5F5;
+}
+
+.is-dragover {
+    background-color: #b7dbde !important;
+    outline-offset: -20px !important;
+    outline-color: #ffffff !important;
+}
+
+#file-name, #file-drop-area, .welcome-line {
+    text-align: center;
+}
+
+.eu-logo-fixed {
+    display: block;
+    position: fixed;
+    background: #fff;
+    bottom: 0;
+    left: 0;
+    margin: 0;
+    padding: 5px 20px;
+    text-align: center;
+    z-index: 1000;
+}
+
+.eu-logo-fixed img {
+    height: 86px;
+}
+
+/* Remove blue focus outline from accordion buttons */
+.accordion-button:focus {
+    box-shadow: none !important;
+    border-color: rgba(0,0,0,.125);
+}
+
+/* Remove blue highlight from active/open accordion buttons */
+.accordion-button:not(.collapsed) {
+    box-shadow: none !important;
+    border-color: rgba(0,0,0,.125);
+}
+
+/* Remove any focus-visible styles */
+.accordion-button:focus-visible {
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+/* Remove outline from accordion items */
+.accordion-button {
+    outline: none !important;
+    font-weight: bold !important;
+}
+
+/* Remove background color from opened accordion sections */
+.accordion-button:not(.collapsed) {
+    background-color: transparent !important;
+    color: inherit !important;
+}
+
+/* Keep consistent background for all accordion states */
+.accordion-button,
+.accordion-button.collapsed,
+.accordion-button:hover,
+.accordion-button:active {
+    background-color: transparent !important;
+}
+
+/* Remove any highlighting from accordion body and items */
+.accordion-item {
+    background-color: transparent !important;
+    border: none !important;
+}
+
+.accordion-body {
+    background-color: transparent !important;
+}
+
+/* Mobile callback loading styles */
+.loading-page {
+    text-align: center;
+    padding-top: 3rem;
+    font-family: system-ui, sans-serif;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #ccc;
+    border-top-color: #007bff;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 1rem auto;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

example/public/js/errors.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020-2024 Estonian Information System Authority
+ * Copyright (c) 2020-2025 Estonian Information System Authority
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
@@ -32,10 +32,9 @@ export function hideErrorMessage() {
     alertUi.alert.style.display = "none";
 }
 
-export function showErrorMessage(error) {
-    const message = "Authentication failed";
+export function showErrorMessage(error, message = "Authentication failed") {
     const details =
-        `[Code]\n${error.code}` +
+        `[Code]\n${error.code ?? "UNKNOWN_ERROR"}` +
         `\n\n[Message]\n${error.message}` +
         (error.response ? `\n\n[response]\n${JSON.stringify(error.response, null, " ")}` : "");
 
@@ -56,4 +55,4 @@ export async function checkHttpError(response) {
         error.code = response.status;
         throw error;
     }
-}
+}

example/public/js/payload.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2020-2025 Estonian Information System Authority
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export function parsePayload(context) {
+    const fragment = window.location.hash.slice(1);
+
+    if (!fragment) {
+        throw new Error(`Missing ${context} response payload`);
+    }
+
+    let payload;
+    try {
+        payload = JSON.parse(atob(fragment));
+    } catch (e) {
+        console.error(e);
+        throw new Error(`Failed to parse the ${context} response`);
+    }
+
+    if (payload.error) {
+        const error = new Error(payload.message ?? `${context} failed`);
+        error.code = payload.code;
+        throw error;
+    }
+
+    return payload;
+}

example/public/js/web-eid.js

@@ -1,7 +1,7 @@
 /**
  * MIT License
  *
- * Copyright (c) 2020-2021 Estonian Information System Authority
+ * Copyright (c) 2020-2023 Estonian Information System Authority
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
@@ -48,20 +48,12 @@ var ErrorCode;
 (function (ErrorCode) {
     ErrorCode["ERR_WEBEID_ACTION_TIMEOUT"] = "ERR_WEBEID_ACTION_TIMEOUT";
     ErrorCode["ERR_WEBEID_USER_TIMEOUT"] = "ERR_WEBEID_USER_TIMEOUT";
-    ErrorCode["ERR_WEBEID_SERVER_TIMEOUT"] = "ERR_WEBEID_SERVER_TIMEOUT";
     ErrorCode["ERR_WEBEID_VERSION_MISMATCH"] = "ERR_WEBEID_VERSION_MISMATCH";
     ErrorCode["ERR_WEBEID_VERSION_INVALID"] = "ERR_WEBEID_VERSION_INVALID";
     ErrorCode["ERR_WEBEID_EXTENSION_UNAVAILABLE"] = "ERR_WEBEID_EXTENSION_UNAVAILABLE";
     ErrorCode["ERR_WEBEID_NATIVE_UNAVAILABLE"] = "ERR_WEBEID_NATIVE_UNAVAILABLE";
     ErrorCode["ERR_WEBEID_UNKNOWN_ERROR"] = "ERR_WEBEID_UNKNOWN_ERROR";
     ErrorCode["ERR_WEBEID_CONTEXT_INSECURE"] = "ERR_WEBEID_CONTEXT_INSECURE";
-    ErrorCode["ERR_WEBEID_PROTOCOL_INSECURE"] = "ERR_WEBEID_PROTOCOL_INSECURE";
-    ErrorCode["ERR_WEBEID_TLS_CONNECTION_BROKEN"] = "ERR_WEBEID_TLS_CONNECTION_BROKEN";
-    ErrorCode["ERR_WEBEID_TLS_CONNECTION_INSECURE"] = "ERR_WEBEID_TLS_CONNECTION_INSECURE";
-    ErrorCode["ERR_WEBEID_TLS_CONNECTION_WEAK"] = "ERR_WEBEID_TLS_CONNECTION_WEAK";
-    ErrorCode["ERR_WEBEID_CERTIFICATE_CHANGED"] = "ERR_WEBEID_CERTIFICATE_CHANGED";
-    ErrorCode["ERR_WEBEID_ORIGIN_MISMATCH"] = "ERR_WEBEID_ORIGIN_MISMATCH";
-    ErrorCode["ERR_WEBEID_SERVER_REJECTED"] = "ERR_WEBEID_SERVER_REJECTED";
     ErrorCode["ERR_WEBEID_USER_CANCELLED"] = "ERR_WEBEID_USER_CANCELLED";
     ErrorCode["ERR_WEBEID_NATIVE_INVALID_ARGUMENT"] = "ERR_WEBEID_NATIVE_INVALID_ARGUMENT";
     ErrorCode["ERR_WEBEID_NATIVE_FATAL"] = "ERR_WEBEID_NATIVE_FATAL";
@@ -112,7 +104,7 @@ class ExtensionUnavailableError extends Error {
 }
 
 var config = Object.freeze({
-    VERSION: "2.0.1",
+    VERSION: "2.0.2",
     EXTENSION_HANDSHAKE_TIMEOUT: 1000,
     NATIVE_APP_HANDSHAKE_TIMEOUT: 5 * 1000,
     DEFAULT_USER_INTERACTION_TIMEOUT: 2 * 60 * 1000,
@@ -251,7 +243,7 @@ class WebExtensionService {
             (_d = message.warnings) === null || _d === void 0 ? void 0 : _d.forEach((warning) => {
                 if (!this.loggedWarnings.includes(warning)) {
                     this.loggedWarnings.push(warning);
-                    console.warn(warning);
+                    console.warn(warning.replace(/\n|\r/g, ""));
                 }
             });
         }