NFC-102 Web eID for mobile support

.github/workflows/php.yml

@@ -19,7 +19,7 @@ jobs:
 
     - uses: shivammathur/setup-php@v2
       with:
-        php-version: '8.2'
+        php-version: '8.5'
 
     - name: Validate composer.json and composer.lock
       run: composer validate --strict

README.md

@@ -1,6 +1,6 @@
 # web-eid-authtoken-validation-php
 
-![European Regional Development Fund](https://github.com/open-eid/DigiDoc4-Client/blob/master/client/images/EL_Regionaalarengu_Fond.png)
+<img src="example/public/img/eu-fund-flags.jpg" width="300" alt="European Regional Development Fund">
 
 web-eid-authtoken-validation-php is a PHP library for issuing challenge nonces and validating Web eID authentication tokens during secure authentication with electronic ID (eID) smart cards in web applications.
 

composer.json

@@ -26,7 +26,7 @@
         }
     },
     "require": {
-        "php": "^8.1.0",
+        "php": "^8.5",
         "phpseclib/phpseclib": "^3.0.0",
         "guzzlehttp/psr7": "^2.6.0",
         "psr/log": "^3.0.0"

example/composer.json

@@ -9,7 +9,7 @@
         }
     ],
     "require": {
-        "php": ">=8.1",
+        "php": ">=8.5",
         "web-eid/web-eid-authtoken-validation-php": "1.3.*",
         "altorouter/altorouter": "^2.0.3",
         "psr/log": "^3.0"

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: 120px;
+}
+
+/* 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;
     }
-}
+}