as per @johnhawkinson's suggestion from #9, use a placeholder for the label input box,

making it easier to figure out how to use this after multiple keys were added

the placeholder will also show no keys at all were added, but an empty
list is still a list after all ;-)

also replace the XXXXXX with grayed-out 000000 for the non-yet
generated TOTP code (text and color configurable via css / userContent.css)

Author: turistu

form.html

@@ -9,6 +9,8 @@
 #CODE { font: 250% monospace; letter-spacing: .15em; user-select: all }
 #CODE::after { all: initial; content: ' ' attr(title); color: red; pointer-events: none }
 #CODE[title^="copied!"]::after { color: green }
+#CODE:empty::before { content: '000000'; color: lightgray }
+::placeholder { color: #aaaaaa }
 
 input, button { font: inherit }
 #USER, #KEY { box-sizing: border-box; width: 100%; max-width: 25em }
@@ -24,14 +26,14 @@
 
 <form id=FORM>
   <label for=USER>User</label><br>
-  <input id=USER size=27 autocomplete=username>
+  <input id=USER size=27 autocomplete=username placeholder="click for the list of saved keys">
   <p>
     <label for=KEY>Shared Key</label>
     <label><input type=checkbox id=SHOW>show</label><br>
     <input id=KEY size=27 autocomplete=current-password type=password pattern="[a-zA-Z2-7\s]+">
     <output for=KEY id=ERROR></output>
   </p>
-  <output for=KEY id=CODE>XXXXXX</output>
+  <output for=KEY id=CODE></output>
   <a id=ADD href target=_blank>add key</a>
   <p><button type=button id=GENERATE>Generate TOTP (and copy it to clipboard)</button>
   <p><button>Save the key (with the browser's password manager)</button>

form.js

@@ -10,6 +10,7 @@ function select_is_broken(){
 	return /\(X11;.* Gecko\//.exec(navigator.userAgent);
 }
 async function copy(emsg, select){
+	if(CODE.value === '') return
 	try {
 		await navigator.clipboard.writeText(CODE.value);
 		CODE.title = 'copied!';