feat(webauthn): show help message regarding username and non-discoverable credentials

The username is required for non-resident keys, but it's not necessary for discoverable credentials like Passkeys.

internal/locale/translations/de_DE.json

@@ -220,6 +220,7 @@
     "page.settings.webauthn.last_seen_on": "Zuletzt genutzt",
     "page.settings.webauthn.register": "Hauptschlüssel registrieren",
     "page.settings.webauthn.register.error": "Hauptschlüssel kann nicht registriert werden",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "Entfernen Sie %d Hauptschlüssel",
         "%d Hauptschlüssel entfernen"

internal/locale/translations/el_EL.json

@@ -220,6 +220,7 @@
     "page.settings.webauthn.last_seen_on": "Last Used",
     "page.settings.webauthn.register": "Εγγραφή κωδικού πρόσβασης",
     "page.settings.webauthn.register.error": "Δεν είναι δυνατή η εγγραφή του κωδικού πρόσβασης",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "Αφαιρέστε %d κωδικό πρόσβασης",
         "Καταργήστε %d κωδικούς πρόσβασης"

internal/locale/translations/en_US.json

@@ -229,6 +229,7 @@
     "page.login.oidc_signin": "Sign in with %s",
     "page.login.webauthn_login": "Login with passkey",
     "page.login.webauthn_login.error": "Unable to login with passkey",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.integrations.title": "Integrations",
     "page.integration.miniflux_api": "Miniflux API",
     "page.integration.miniflux_api_endpoint": "API Endpoint",

internal/locale/translations/es_ES.json

@@ -220,6 +220,7 @@
     "page.settings.webauthn.last_seen_on": "Usado por última vez",
     "page.settings.webauthn.register": "Registrar clave de acceso",
     "page.settings.webauthn.register.error": "No se puede registrar la clave de acceso",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "Eliminar %d clave de acceso",
         "Eliminar %d claves de acceso"

internal/locale/translations/fi_FI.json

@@ -220,6 +220,7 @@
     "page.settings.webauthn.last_seen_on": "Last Used",
     "page.settings.webauthn.register": "Rekisteröi salasana",
     "page.settings.webauthn.register.error": "Salasanaa ei voi rekisteröidä",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "Poista %d salasana",
         "Poista %d salasanaa"

internal/locale/translations/fr_FR.json

@@ -220,6 +220,7 @@
     "page.settings.webauthn.last_seen_on": "Dernière utilisation",
     "page.settings.webauthn.register": "Enregister une nouvelle clé d’accès",
     "page.settings.webauthn.register.error": "Impossible d'enregistrer la clé d’accès",
+    "page.login.webauthn_login.help": "Veuillez saisir votre nom d'utilisateur si vous utilisez une clé de sécurité. Cela n'est pas nécessaire si vous utilisez une clé d'accès (Passkey).",
     "page.settings.webauthn.delete": [
         "Supprimer %d clé d’accès",
         "Supprimer %d clés d’accès"

internal/locale/translations/hi_IN.json

@@ -220,6 +220,7 @@
     "page.settings.webauthn.last_seen_on": "Last Used",
     "page.settings.webauthn.register": "रजिस्टर पासकी",
     "page.settings.webauthn.register.error": "पासकी पंजीकृत करने में असमर्थ",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "%d पासकुंजी निकालें",
         "%d पासकी हटाएं"

internal/locale/translations/id_ID.json

@@ -211,6 +211,7 @@
     "page.settings.webauthn.last_seen_on": "Last Used",
     "page.settings.webauthn.register": "Register passkey",
     "page.settings.webauthn.register.error": "Unable to register passkey",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "Remove %d passkey"
     ],

internal/locale/translations/it_IT.json

@@ -220,6 +220,7 @@
     "page.settings.webauthn.last_seen_on": "Last Used",
     "page.settings.webauthn.register": "Registra la chiave di accesso",
     "page.settings.webauthn.register.error": "Impossibile registrare la passkey",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "Rimuovi %d passkey",
         "Rimuovi %d passkey"

internal/locale/translations/ja_JP.json

@@ -211,6 +211,7 @@
     "page.settings.webauthn.last_seen_on": "Last Used",
     "page.settings.webauthn.register": "パスキーを登録する",
     "page.settings.webauthn.register.error": "パスキーを登録できません",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "%d 個のパスキーを削除"
     ],

internal/locale/translations/nl_NL.json

@@ -221,6 +221,7 @@
     "page.settings.webauthn.last_seen_on": "Laatst gebruikt",
     "page.settings.webauthn.register": "Passkey registreren",
     "page.settings.webauthn.register.error": "Kan passkey niet registreren",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "Verwijder %d passkey",
         "Verwijder %d passkeys"

internal/locale/translations/pl_PL.json

@@ -229,6 +229,7 @@
     "page.settings.webauthn.last_seen_on": "Ostatnio użyte",
     "page.settings.webauthn.register": "Zarejestruj klucz dostępu",
     "page.settings.webauthn.register.error": "Nie można zarejestrować klucza dostępu",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "Usuń %d klucz dostępu",
         "Usuń %d klucze dostępu",

internal/locale/translations/pt_BR.json

@@ -220,6 +220,7 @@
     "page.settings.webauthn.last_seen_on": "Last Used",
     "page.settings.webauthn.register": "Registrar senha",
     "page.settings.webauthn.register.error": "Não foi possível registrar a senha",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "Remover %d senha",
         "Remover %d senhas"

internal/locale/translations/ru_RU.json

@@ -229,6 +229,7 @@
     "page.settings.webauthn.last_seen_on": "Last Used",
     "page.settings.webauthn.register": "Зарегистрировать пароль",
     "page.settings.webauthn.register.error": "Не удается зарегистрировать пароль",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "Удалить %d пароль",
         "Удалить %d пароля",

internal/locale/translations/tr_TR.json

@@ -466,6 +466,7 @@
   "page.login.title": "Oturum aç",
   "page.login.webauthn_login": "Passkey ile giriş yap",
   "page.login.webauthn_login.error": "Passkey ile giriş yapılamıyor",
+  "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
   "page.new_api_key.title": "Yeni API Anahtarı",
   "page.new_category.title": "Yeni Kategori",
   "page.new_user.title": "Yeni Kullanıcı",

internal/locale/translations/uk_UA.json

@@ -229,6 +229,7 @@
     "page.settings.webauthn.last_seen_on": "Last Used",
     "page.settings.webauthn.register": "Зареєструвати пароль",
     "page.settings.webauthn.register.error": "Не вдалося зареєструвати ключ доступу",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "Видалити %d ключ доступу",
         "Видаліть %d ключа доступу",

internal/locale/translations/zh_CN.json

@@ -211,6 +211,7 @@
     "page.settings.webauthn.last_seen_on": "最后使用时间",
     "page.settings.webauthn.register": "注册 Passkey",
     "page.settings.webauthn.register.error": "无法注册 Passkey",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "删除 %d 个 Passkey"
     ],

internal/locale/translations/zh_TW.json

@@ -211,6 +211,7 @@
     "page.settings.webauthn.last_seen_on": "最後使用時間",
     "page.settings.webauthn.register": "註冊 Passkey",
     "page.settings.webauthn.register.error": "無法註冊 Passkey",
+    "page.login.webauthn_login.help": "Please enter your username if you're using a security key. This is not required if you are using a Passkey (discoverable credentials).",
     "page.settings.webauthn.delete": [
         "刪除 %d 個 Passkey"
     ],

internal/template/templates/views/login.html

@@ -24,15 +24,27 @@
         </div>
     </form>
     {{ end }}
+    {{ if and (not disableLocalAuth) (.webAuthnEnabled) }}
+    <hr>
+    {{ end }}
     {{ if .webAuthnEnabled }}
     <div class="webauthn">
-        <div role="alert" class="alert alert-error hidden" id="webauthn-error">
+        <template id="webauthn-error">
-            {{ t "page.login.webauthn_login.error" }}
+            <div role="alert" class="alert alert-error" id="webauthn-error-alert">
+                <h4>{{ t "page.login.webauthn_login.error" }}</h4>
+                <p id="webauthn-error-message"></p>
             </div>
+        </template>
         <div class="buttons">
             <button class="button button-primary" id="webauthn-login" disabled>{{ t "page.login.webauthn_login" }}</button>
         </div>
+        <div class="form-help">
+            <p>{{ t "page.login.webauthn_login.help" }}</p>
         </div>
+    </div>
+    {{ end }}
+    {{ if and (.webAuthnEnabled) (or (hasOAuth2Provider "google") (hasOAuth2Provider "oidc")) }}
+    <hr>
     {{ end }}
     {{ if hasOAuth2Provider "google" }}
     <div class="oauth2">

internal/ui/static/css/common.css

@@ -675,6 +675,10 @@ template {
     max-width: 300px;
 }
 
+.webauthn {
+    margin-bottom: 20px;
+}
+
 /* Counters */
 .unread-counter-wrapper,
 .error-feeds-counter-wrapper {

internal/ui/static/js/webauthn_handler.js

@@ -5,10 +5,20 @@ class WebAuthnHandler {
 
     static showErrorMessage(errorMessage) {
         console.log("webauthn error: " + errorMessage);
-        const alertElement = document.getElementById("webauthn-error");
+
+        const alertElement = document.getElementById("webauthn-error-alert");
         if (alertElement) {
-            alertElement.textContent += " (" + errorMessage + ")";
+            alertElement.remove();
-            alertElement.classList.remove("hidden");
+        }
+
+        const alertTemplateElement = document.getElementById("webauthn-error");
+        if (alertTemplateElement) {
+            const clonedElement = alertTemplateElement.content.cloneNode(true);
+            const errorMessageElement = clonedElement.getElementById("webauthn-error-message");
+            if (errorMessageElement) {
+                errorMessageElement.textContent = errorMessage;
+            }
+            alertTemplateElement.parentNode.insertBefore(clonedElement, alertTemplateElement);
         }
     }
 

miniflux.1

@@ -1,5 +1,5 @@
 .\" Manpage for miniflux.
-.TH "MINIFLUX" "1" "August 18, 2024" "\ \&" "\ \&"
+.TH "MINIFLUX" "1" "October 26, 2024" "\ \&" "\ \&"
 
 .SH NAME
 miniflux \- Minimalist and opinionated feed reader
@@ -546,7 +546,7 @@ Enabled by default\&.
 .B WEBAUTHN
 Enable or disable WebAuthn/Passkey authentication\&.
 .br
-Note: After activating and setting up your Passkey, just enter your username and click the Passkey login button\&.
+You must provide a username on the login page if your are using non-residential keys. However, this is not required for discoverable credentials\&.
 .br
 Default is disabled\&.
 .TP