Administrator/Multi-Hoster-Upload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 204 Wiki Activity

ux(accounts): hoster-specific login field labels — VOE shows "E-Mail" only

Browse Source 
Generic "Username / E-Mail" label on every login-type account form
sent users down a confusing path on VOE: VOE only accepts an email
address (the web form is type=email, name=email), but the app's
label suggested either was fine. Logging in with a username
silently failed → upload-page fetch returned a login redirect → the
"VOE Upload: CSRF-Token nicht gefunden. Bist du eingeloggt?" error,
which doesn't point at the actual cause.

Add a tiny per-hoster override table. Currently only voe.sx is in
it: label "E-Mail", placeholder "E-Mail-Adresse", input type="email"
(so the browser's email-format hint kicks in too). All three
getCredsFieldsHtml call sites pass the hoster name — edit-mode,
add-mode initial render, and the hoster-select change handler.

Other hosters keep the existing "Username / E-Mail" wording.
137/137 tests still green.
This commit is contained in:
Administrator 2026-05-23 01:03:07 +02:00
parent c995d090a5
commit 950a322022
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
renderer/app.js
View File

@ -3218,13 +3218,24 @@ async function checkSingleAccount(accountId) {
updateAccountCard(accountId); updateAccountCard(accountId);
} }
function getCredsFieldsHtml(authType, account) { // Per-hoster overrides for the login form. VOE only accepts emails — the
// generic "Username / E-Mail" label sent users down a confusing rabbit hole
// (login fails → upload fetches login redirect → "CSRF token nicht gefunden").
// Other hosters that genuinely accept either keep the generic wording.
const LOGIN_FIELD_LABELS = {
'voe.sx': { label: 'E-Mail', placeholder: 'E-Mail-Adresse', inputType: 'email' }
};
function getCredsFieldsHtml(authType, account, hoster) {
account = account || {}; account = account || {};
if (authType === 'login') { if (authType === 'login') {
const fld = (hoster && LOGIN_FIELD_LABELS[hoster]) || {
label: 'Username / E-Mail', placeholder: 'Username oder E-Mail', inputType: 'text'
};
return ` return `
<div class="settings-row"> <div class="settings-row">
<label>Username / E-Mail</label> <label>${escapeHtml(fld.label)}</label>
<input type="text" class="key-input" id="accField_username" value="${escapeAttr(account.username || '')}" placeholder="Username oder E-Mail"> <input type="${fld.inputType}" class="key-input" id="accField_username" value="${escapeAttr(account.username || '')}" placeholder="${escapeAttr(fld.placeholder)}">
</div> </div>
<div class="settings-row"> <div class="settings-row">
<label>Passwort</label> <label>Passwort</label>
@ -3263,7 +3274,7 @@ function openAccountModal(editAccountId) {
subtitle.textContent = `Zugangsdaten für ${getAccountDisplayName(found.name, found.account)} bearbeiten.`; subtitle.textContent = `Zugangsdaten für ${getAccountDisplayName(found.name, found.account)} bearbeiten.`;
hosterRow.style.display = 'none'; hosterRow.style.display = 'none';
saveBtn.textContent = 'Speichern & prüfen'; saveBtn.textContent = 'Speichern & prüfen';
credsContainer.innerHTML = getCredsFieldsHtml(found.account.authType || 'login', found.account); credsContainer.innerHTML = getCredsFieldsHtml(found.account.authType || 'login', found.account, found.name);
} else { } else {
// Add mode — always show all options (multiple accounts per hoster allowed) // Add mode — always show all options (multiple accounts per hoster allowed)
title.textContent = 'Account hinzufügen'; title.textContent = 'Account hinzufügen';
@ -3274,7 +3285,7 @@ function openAccountModal(editAccountId) {
`<option value="${opt.value}">${escapeHtml(opt.label)}</option>` `<option value="${opt.value}">${escapeHtml(opt.label)}</option>`
).join(''); ).join('');
const firstOpt = HOSTER_ADD_OPTIONS[0]; const firstOpt = HOSTER_ADD_OPTIONS[0];
credsContainer.innerHTML = getCredsFieldsHtml(firstOpt.authType, {}); credsContainer.innerHTML = getCredsFieldsHtml(firstOpt.authType, {}, firstOpt.value);
} }
// Toggle visibility buttons // Toggle visibility buttons
@ -3890,7 +3901,7 @@ function setupListeners() {
const opt = HOSTER_ADD_OPTIONS.find(o => o.value === e.target.value); const opt = HOSTER_ADD_OPTIONS.find(o => o.value === e.target.value);
const authType = opt ? opt.authType : 'login'; const authType = opt ? opt.authType : 'login';
const credsContainer = document.getElementById('accountCredsFields'); const credsContainer = document.getElementById('accountCredsFields');
credsContainer.innerHTML = getCredsFieldsHtml(authType, {}); credsContainer.innerHTML = getCredsFieldsHtml(authType, {}, e.target.value);
credsContainer.querySelectorAll('.toggle-vis').forEach(btn => { credsContainer.querySelectorAll('.toggle-vis').forEach(btn => {
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
const input = btn.previousElementSibling; const input = btn.previousElementSibling;