chore: Web UI enhancement

supercaracal · Feb 11, 2024 · 0e78726 · 0e78726
1 parent 8bb990c
commit 0e78726
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/cmd/wasm/main.go b/cmd/wasm/main.go
@@ -11,6 +11,7 @@ import (
 
 func handleButton(this js.Value, inputs []js.Value) interface{} {
 	document := js.Global().Get("document")
+
 	input := document.Call("getElementById", "raw-password")
 	result := document.Call("getElementById", "encrypted-password")
 
@@ -20,13 +21,20 @@ func handleButton(this js.Value, inputs []js.Value) interface{} {
 		result.Set("value", err.Error())
 	} else {
 		result.Set("value", encrypted)
+		result.Call("select")
 	}
 
 	return nil
 }
 
 func main() {
-	button := js.Global().Get("document").Call("getElementById", "encryption-button")
-	button.Call("addEventListener", "click", js.FuncOf(handleButton))
+	document := js.Global().Get("document")
+
+	document.
+		Call("getElementById", "encryption-button").
+		Call("addEventListener", "click", js.FuncOf(handleButton))
+
+	document.Call("getElementById", "raw-password").Call("focus")
+
 	select {}
 }
diff --git a/docs/encrypt.wasm b/docs/encrypt.wasm
diff --git a/docs/index.html b/docs/index.html
@@ -10,18 +10,22 @@
   <script src="/scram-sha-256/script.js"></script>
 </head>
 <body>
-  <div class="block">
     <h1>scram-sha-256</h1>
-    <h2>a password-encryption tool for PostgreSQL</h2>
-  </div>
+    <span>
+      This is a password-encryption tool for PostgreSQL.
+      The source code is <a href="https://github.com/supercaracal/scram-sha-256">here</a>.
+    </span>
   <div class="block">
-    <input type="password" value="" id="raw-password" />
+    <div>
+      <label for="raw-password">Raw password:</label>
+    </div>
+    <input type="password" value="" id="raw-password" autocomplete="off" placeholder="Please type or copy and paste your password" />
     <input type="button" value="encrypt" id="encryption-button" />
   </div>
   <div class="block">
-    <input id="encrypted-password" value="" readonly />
-  </div>
-  <div class="block">
-    <span><a href="https://github.com/supercaracal/scram-sha-256">GitHub</a></span>
+    <div>
+      <label for="encrypted-password">Encrypted password:</label>
+    </div>
+    <input type="text" value="" id="encrypted-password" readonly />
   </div>
 </body>
diff --git a/docs/style.css b/docs/style.css
@@ -1,5 +1,5 @@
-body {
-  background-color: #555555;
+:root {
+  color-scheme: light dark;
 }
 
 div.block {