feat(android): the list and the detail move to HTML
The FMX controls lost this one on merit. Every screen re-taught the same lessons: a template missing from the loaded style, an alignment order left to chance, a HitTest swallowing a tap, a native view painting over everything. The engine draws the same interface in forty lines of CSS and shapes Arabic on its own. The bridge needs no local server, so no port is open on the device: evaluateJavascript carries the data down, an intercepted cmd:// navigation carries the actions up. Through a throwaway iframe - FMX always tells the engine it did not handle the navigation, which on an unknown scheme replaces the page with an error screen. Secrets do not travel over that bridge. The list gets names, sites and usernames, which are already on screen; copying from a row sends an index and Delphi reads the vault itself. Only the open entry has its values in the JS heap, and PM.wipe clears them on lock. Folders become a row of chips with counts instead of a full-screen panel: one tap, and the count says what to expect. Also gone: about eight hundred lines of the screen this replaces. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
r-zakarya
@@ -0,0 +1,396 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
Interface du client Android. Liste, recherche, dossiers, detail.
|
||||
|
||||
ASCII UNIQUEMENT dans ce fichier. FMX charge la page par
|
||||
loadDataWithBaseURL en laissant l'encodage a nil : le moteur lit alors de
|
||||
l'UTF-8 comme du latin-1. Tout caractere hors ASCII doit s'ecrire en
|
||||
reference numerique (م). Les DONNEES, elles, n'ont pas ce probleme :
|
||||
elles arrivent par evaluateJavascript, qui passe par une chaine JNI.
|
||||
|
||||
CE QUI VIT ICI ET CE QUI N'Y VIT PAS. La liste recoit les noms, sites et
|
||||
identifiants - ce qui est deja a l'ecran. Elle ne recoit AUCUN mot de passe :
|
||||
copier depuis une ligne envoie un indice, et Delphi copie depuis le coffre.
|
||||
Seule l'entree ouverte a ses valeurs ici, une a la fois, effacees a la
|
||||
fermeture et au passage en arriere-plan.
|
||||
-->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
||||
<title>Vault</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-top: #3E6394;
|
||||
--bg-bot: #1B3563;
|
||||
--surface: rgba(255,255,255,.12);
|
||||
--raised: rgba(255,255,255,.18);
|
||||
--accent: rgba(255,255,255,.30);
|
||||
--text: #fff;
|
||||
--muted: rgba(232,240,250,.70);
|
||||
--radius: 20px;
|
||||
--radius-s: 14px;
|
||||
}
|
||||
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
||||
html, body {
|
||||
margin: 0; height: 100%; overflow: hidden;
|
||||
background: linear-gradient(var(--bg-top), var(--bg-bot)) fixed;
|
||||
color: var(--text);
|
||||
font: 15px/1.4 system-ui, "Roboto", sans-serif;
|
||||
/* Le texte de l'interface ne se selectionne pas - un appui maintenu sur
|
||||
une ligne doit ouvrir l'entree, pas armer une poignee de selection.
|
||||
Les valeurs du detail font exception, plus bas. */
|
||||
-webkit-user-select: none; user-select: none;
|
||||
}
|
||||
|
||||
/* --- ecran : les deux vues glissent l'une sur l'autre ------------------ */
|
||||
.screen {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; flex-direction: column;
|
||||
transition: transform .22s ease;
|
||||
/* CHAQUE ECRAN PORTE SON FOND. Sans cela ils sont transparents, celui du
|
||||
corps se voit a travers les deux, et la liste reste lisible sous le
|
||||
detail - dont les blocs sont eux-memes du blanc translucide. */
|
||||
background: linear-gradient(var(--bg-top), var(--bg-bot));
|
||||
}
|
||||
#detail { transform: translateX(100%); }
|
||||
body.on-detail #list { transform: translateX(-22%); }
|
||||
body.on-detail #detail { transform: translateX(0); }
|
||||
|
||||
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
|
||||
padding: 0 12px 16px; }
|
||||
|
||||
/* --- barre de recherche ------------------------------------------------ */
|
||||
.top { padding: 10px 12px 6px; display: flex; gap: 8px; }
|
||||
.search { flex: 1; position: relative; }
|
||||
.search input {
|
||||
width: 100%; height: 46px; padding: 0 38px 0 40px;
|
||||
border: 0; border-radius: var(--radius-s);
|
||||
background: rgba(255,255,255,.10); color: var(--text);
|
||||
font-size: 15px; outline: none;
|
||||
}
|
||||
.search input::placeholder { color: var(--muted); }
|
||||
.glass, .clear {
|
||||
position: absolute; top: 0; height: 46px; width: 38px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--muted); font-size: 17px;
|
||||
}
|
||||
.glass { left: 2px; }
|
||||
.clear { right: 2px; display: none; font-size: 20px; }
|
||||
body.searching .glass { display: none; }
|
||||
body.searching .clear { display: flex; }
|
||||
|
||||
/* --- dossiers : une rangee de pastilles, pas un panneau ---------------- */
|
||||
.folders {
|
||||
display: flex; gap: 8px; overflow-x: auto; padding: 4px 12px 8px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.folders::-webkit-scrollbar { display: none; }
|
||||
.chip {
|
||||
flex: 0 0 auto; padding: 8px 14px; border-radius: 999px;
|
||||
background: rgba(255,255,255,.10); color: var(--muted);
|
||||
font-size: 13px; white-space: nowrap;
|
||||
}
|
||||
.chip.on { background: var(--accent); color: var(--text); font-weight: 500; }
|
||||
.chip .n { opacity: .6; margin-left: 6px; }
|
||||
|
||||
/* --- lignes ------------------------------------------------------------ */
|
||||
.row {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
background: var(--surface); border-radius: var(--radius);
|
||||
padding: 10px 10px 10px 12px; margin-bottom: 8px;
|
||||
}
|
||||
.row:active { background: var(--raised); }
|
||||
.av {
|
||||
flex: 0 0 40px; height: 40px; border-radius: 20px;
|
||||
background: rgba(255,255,255,.18);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-weight: 600; font-size: 16px; overflow: hidden;
|
||||
}
|
||||
.av img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.txt { flex: 1; min-width: 0; }
|
||||
.txt b { display: block; font-weight: 500; overflow: hidden;
|
||||
text-overflow: ellipsis; white-space: nowrap; }
|
||||
.txt span { display: block; color: var(--muted); font-size: 13px;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.btn {
|
||||
flex: 0 0 auto; border: 0; border-radius: var(--radius-s);
|
||||
background: var(--raised); color: var(--text);
|
||||
padding: 11px 13px; font-size: 13px; font-family: inherit;
|
||||
}
|
||||
.btn:active { opacity: .62; }
|
||||
.btn.wide { padding: 13px 18px; font-size: 15px; }
|
||||
.btn.main { background: var(--accent); }
|
||||
|
||||
.empty { text-align: center; color: var(--muted); padding: 48px 16px; }
|
||||
|
||||
/* --- detail ------------------------------------------------------------ */
|
||||
.head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
|
||||
.head h1 { flex: 1; margin: 0; font-size: 19px; font-weight: 600;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.field {
|
||||
background: var(--surface); border-radius: var(--radius);
|
||||
padding: 10px 10px 12px 14px; margin-bottom: 8px;
|
||||
}
|
||||
.field .cap { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
|
||||
.field .line { display: flex; align-items: center; gap: 8px; }
|
||||
.field .val {
|
||||
flex: 1; min-width: 0; word-break: break-all;
|
||||
-webkit-user-select: text; user-select: text;
|
||||
}
|
||||
.field .val.mask { letter-spacing: 2px; }
|
||||
.field.totp .val { font-size: 30px; font-weight: 300; letter-spacing: 2px; }
|
||||
.bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.18);
|
||||
margin-top: 10px; overflow: hidden; }
|
||||
.bar i { display: block; height: 100%; background: var(--text);
|
||||
transition: width 1s linear; }
|
||||
|
||||
.toast {
|
||||
position: fixed; left: 12px; right: 12px; bottom: 14px;
|
||||
background: rgba(10,20,40,.92); color: var(--text);
|
||||
border-radius: var(--radius-s); padding: 12px 16px; font-size: 14px;
|
||||
text-align: center; opacity: 0; transition: opacity .2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast.on { opacity: 1; }
|
||||
</style>
|
||||
|
||||
<div class="screen" id="list">
|
||||
<div class="top">
|
||||
<div class="search">
|
||||
<div class="glass">⚲</div>
|
||||
<input id="q" placeholder="Search" autocomplete="off" autocorrect="off"
|
||||
autocapitalize="none" spellcheck="false">
|
||||
<div class="clear" id="qx">×</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="folders" id="folders"></div>
|
||||
<div class="scroll"><div id="rows"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="screen" id="detail">
|
||||
<div class="head">
|
||||
<button class="btn" id="back">←</button>
|
||||
<h1 id="dtitle"></h1>
|
||||
</div>
|
||||
<div class="scroll"><div id="fields"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
// --- pont vers Delphi ------------------------------------------------------
|
||||
// PAS location.href, UNE IFRAME JETABLE. FMX ecoute bien la navigation, mais
|
||||
// il rend toujours "je ne la prends pas en charge" au moteur, qui essaie alors
|
||||
// de charger cmd:// lui-meme, echoue sur un schema inconnu et remplace la page
|
||||
// par son ecran d'erreur. Dans une iframe, l'echec reste confine et la page
|
||||
// vit. C'est le prix a payer pour un pont sans interface Java.
|
||||
//
|
||||
// Et les commandes partent UNE PAR UNE : deux navigations dans le meme tour de
|
||||
// boucle se fondent en une seule, et la premiere disparait - sur une copie,
|
||||
// cela donnerait un presse-papiers vide sans rien signaler.
|
||||
var queue = [], sending = false;
|
||||
function send(cmd) {
|
||||
queue.push(cmd);
|
||||
if (!sending) drain();
|
||||
}
|
||||
function drain() {
|
||||
if (!queue.length) { sending = false; return; }
|
||||
sending = true;
|
||||
var f = document.createElement('iframe');
|
||||
f.style.display = 'none';
|
||||
f.src = 'cmd://' + queue.shift();
|
||||
document.body.appendChild(f);
|
||||
setTimeout(function () {
|
||||
f.parentNode.removeChild(f);
|
||||
drain();
|
||||
}, 60);
|
||||
}
|
||||
|
||||
var entries = [], folders = [], folder = '', query = '', view = 'list';
|
||||
|
||||
function esc(s) {
|
||||
return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) {
|
||||
return { '&': '&', '<': '<', '>': '>', '"': '"' }[c];
|
||||
});
|
||||
}
|
||||
|
||||
// --- liste -----------------------------------------------------------------
|
||||
function matches(e) {
|
||||
if (folder && e.folder !== folder) return false;
|
||||
if (!query) return true;
|
||||
return (e.name + ' ' + e.sub + ' ' + (e.tags || '')).toLowerCase()
|
||||
.indexOf(query) >= 0;
|
||||
}
|
||||
|
||||
function renderFolders() {
|
||||
var counts = {}, total = 0, i;
|
||||
for (i = 0; i < entries.length; i++) {
|
||||
counts[entries[i].folder] = (counts[entries[i].folder] || 0) + 1;
|
||||
total++;
|
||||
}
|
||||
var html = '<div class="chip' + (folder ? '' : ' on') + '" data-f="">All'
|
||||
+ '<span class="n">' + total + '</span></div>';
|
||||
for (i = 0; i < folders.length; i++) {
|
||||
var f = folders[i], n = counts[f] || 0;
|
||||
if (!n) continue; // un dossier vide n'a rien a offrir
|
||||
html += '<div class="chip' + (folder === f ? ' on' : '') + '" data-f="'
|
||||
+ esc(f) + '">' + esc(f) + '<span class="n">' + n + '</span></div>';
|
||||
}
|
||||
document.getElementById('folders').innerHTML = html;
|
||||
}
|
||||
|
||||
function renderRows() {
|
||||
var html = '', shown = 0;
|
||||
for (var i = 0; i < entries.length; i++) {
|
||||
var e = entries[i];
|
||||
if (!matches(e)) continue;
|
||||
shown++;
|
||||
html += '<div class="row" data-i="' + e.i + '">'
|
||||
+ '<div class="av">'
|
||||
+ (e.icon ? '<img src="' + esc(e.icon) + '">' : esc(e.initial))
|
||||
+ '</div>'
|
||||
+ '<div class="txt"><b>' + esc(e.name) + '</b>'
|
||||
+ (e.sub ? '<span>' + esc(e.sub) + '</span>' : '') + '</div>'
|
||||
+ (e.hasUser ? '<button class="btn" data-copy="user">User</button>' : '')
|
||||
+ '<button class="btn" data-copy="pwd">' + (e.isNote ? 'Text' : 'Pass')
|
||||
+ '</button></div>';
|
||||
}
|
||||
document.getElementById('rows').innerHTML = shown ? html
|
||||
: '<div class="empty">Nothing here</div>';
|
||||
}
|
||||
|
||||
// Un seul ecouteur pour toute la liste : les lignes sont refaites a chaque
|
||||
// frappe, en attacher un par bouton les recreerait autant de fois.
|
||||
document.getElementById('rows').addEventListener('click', function (ev) {
|
||||
var row = ev.target.closest('.row');
|
||||
if (!row) return;
|
||||
var copy = ev.target.getAttribute('data-copy');
|
||||
if (copy) send('copy?i=' + row.getAttribute('data-i') + '&f=' + copy);
|
||||
else send('open?i=' + row.getAttribute('data-i'));
|
||||
});
|
||||
|
||||
document.getElementById('folders').addEventListener('click', function (ev) {
|
||||
var chip = ev.target.closest('.chip');
|
||||
if (!chip) return;
|
||||
folder = chip.getAttribute('data-f');
|
||||
renderFolders();
|
||||
renderRows();
|
||||
send('touch');
|
||||
});
|
||||
|
||||
var q = document.getElementById('q');
|
||||
q.addEventListener('input', function () {
|
||||
query = q.value.trim().toLowerCase();
|
||||
document.body.classList.toggle('searching', q.value !== '');
|
||||
renderRows();
|
||||
send('touch');
|
||||
});
|
||||
document.getElementById('qx').addEventListener('click', function () {
|
||||
q.value = ''; query = '';
|
||||
document.body.classList.remove('searching');
|
||||
renderRows();
|
||||
});
|
||||
|
||||
// --- detail ----------------------------------------------------------------
|
||||
var detailRows = [];
|
||||
|
||||
function renderDetail(d) {
|
||||
detailRows = d.rows || [];
|
||||
document.getElementById('dtitle').textContent = d.title || '';
|
||||
var html = '', i;
|
||||
if (d.totp)
|
||||
html += '<div class="field totp" id="totp"><div class="cap">2FA code</div>'
|
||||
+ '<div class="line"><div class="val" id="totpv">------</div>'
|
||||
+ '<button class="btn" data-copy="totp">Copy</button></div>'
|
||||
+ '<div class="bar"><i id="totpb"></i></div></div>';
|
||||
for (i = 0; i < detailRows.length; i++) {
|
||||
var r = detailRows[i];
|
||||
html += '<div class="field"><div class="cap">' + esc(r.c) + '</div>'
|
||||
+ '<div class="line"><div class="val' + (r.s ? ' mask' : '')
|
||||
+ '" data-v="' + i + '">'
|
||||
+ (r.s ? '•'.repeat(Math.min(r.v.length, 14)) : esc(r.v))
|
||||
+ '</div>'
|
||||
+ (r.s ? '<button class="btn" data-show="' + i + '">Show</button>' : '')
|
||||
+ '<button class="btn" data-copy="row" data-k="' + i + '">Copy</button>'
|
||||
+ '</div></div>';
|
||||
}
|
||||
document.getElementById('fields').innerHTML = html;
|
||||
document.body.classList.add('on-detail');
|
||||
view = 'detail';
|
||||
send('state?view=detail');
|
||||
}
|
||||
|
||||
document.getElementById('fields').addEventListener('click', function (ev) {
|
||||
var t = ev.target, k = t.getAttribute('data-show');
|
||||
if (k !== null) {
|
||||
var cell = document.querySelector('[data-v="' + k + '"]');
|
||||
var hidden = cell.classList.contains('mask');
|
||||
cell.classList.toggle('mask', !hidden);
|
||||
cell.textContent = hidden ? detailRows[k].v
|
||||
: '\u2022'.repeat(Math.min(detailRows[k].v.length, 14));
|
||||
t.textContent = hidden ? 'Hide' : 'Show';
|
||||
send('touch');
|
||||
return;
|
||||
}
|
||||
var copy = t.getAttribute('data-copy');
|
||||
if (copy === 'totp') send('copy?f=totp');
|
||||
else if (copy === 'row') send('copy?f=row&k=' + t.getAttribute('data-k'));
|
||||
});
|
||||
|
||||
function goList() {
|
||||
document.body.classList.remove('on-detail');
|
||||
view = 'list';
|
||||
// Les valeurs en clair partent avec la vue, pas seulement de l'ecran.
|
||||
detailRows = [];
|
||||
document.getElementById('fields').innerHTML = '';
|
||||
send('state?view=list');
|
||||
}
|
||||
document.getElementById('back').addEventListener('click', goList);
|
||||
|
||||
// --- appele par Delphi -----------------------------------------------------
|
||||
var PM = {
|
||||
setVault: function (json) {
|
||||
var d = JSON.parse(json);
|
||||
entries = d.entries || [];
|
||||
folders = d.folders || [];
|
||||
folder = '';
|
||||
q.value = ''; query = '';
|
||||
document.body.classList.remove('searching', 'on-detail');
|
||||
view = 'list';
|
||||
renderFolders();
|
||||
renderRows();
|
||||
},
|
||||
setDetail: function (json) { renderDetail(JSON.parse(json)); },
|
||||
setTotp: function (code, left, period) {
|
||||
var v = document.getElementById('totpv');
|
||||
if (!v) return;
|
||||
v.textContent = code.length === 6 ? code.slice(0, 3) + ' ' + code.slice(3) : code;
|
||||
var b = document.getElementById('totpb');
|
||||
// Le retour a plein ne s'anime pas : la transition jouerait le saut a
|
||||
// l'envers et donnerait l'impression que la barre se fige.
|
||||
b.style.transition = left >= period - 1 ? 'none' : 'width 1s linear';
|
||||
b.style.width = (left / period * 100) + '%';
|
||||
},
|
||||
toast: function (text) {
|
||||
var t = document.getElementById('toast');
|
||||
t.textContent = text;
|
||||
t.classList.add('on');
|
||||
clearTimeout(t._h);
|
||||
t._h = setTimeout(function () { t.classList.remove('on'); }, 2600);
|
||||
},
|
||||
back: function () { if (view === 'detail') goList(); },
|
||||
// Efface tout ce qui est en clair. Appele au passage en arriere-plan et au
|
||||
// verrouillage : le tas JS n'est pas efface par le masquage de la vue.
|
||||
wipe: function () {
|
||||
entries = []; folders = []; detailRows = [];
|
||||
document.getElementById('rows').innerHTML = '';
|
||||
document.getElementById('fields').innerHTML = '';
|
||||
document.getElementById('folders').innerHTML = '';
|
||||
q.value = '';
|
||||
document.body.classList.remove('on-detail', 'searching');
|
||||
view = 'list';
|
||||
}
|
||||
};
|
||||
window.PM = PM;
|
||||
</script>
|
||||
Reference in New Issue
Block a user