Run some sanity checks/validations on the private key input. Cannot save it unless the field is valid.

Shared (Extension)/Resources/options.css

@@ -16,7 +16,7 @@
     @apply bg-fuchsia-200 text-fuchsia-800 disabled:bg-gray-200 disabled:text-black focus:border-fuchsia-800;
 
     /* Sizing and padding */
-    @apply rounded-lg p-1.5 lg:p-1.5  w-full md:w-64;
+    @apply rounded-lg p-1.5 lg:p-1.5 w-full md:w-64;
   }
 
   .checkbox {

Shared (Extension)/Resources/options.html

@@ -42,7 +42,8 @@
       <div class="mt-3">
         <label for="priv-key">Private Key</label>
         <br>
-        <input x-model="privKey" type="text" class="input" autocapitalize="off" autocomplete="off" spellcheck="off">
+        <input x-model="privKey" type="text" class="input" :class="validKeyClass" autocapitalize="off"
+          autocomplete="off" spellcheck="off">
       </div>
 
       <div class="mt-3">
@@ -52,7 +53,7 @@
       </div>
 
       <div class="mt-3">
-        <button class="button" :disabled="!needsSave" @click.prevent="saveProfile">Save</button>
+        <button class="button" :disabled="!needsSave || !validKey" @click.prevent="saveProfile">Save</button>
       </div>
     </form>
 

Shared (Extension)/Resources/options.js

@@ -15,6 +15,7 @@ import {
     setPermission,
     KINDS,
     humanPermission,
+    validateKey,
 } from './utils';
 
 const log = console.log;
@@ -258,6 +259,16 @@ Alpine.data('options', () => ({
             this.profileName !== this.pristineProfileName
         );
     },
+
+    get validKey() {
+        return validateKey(this.privKey);
+    },
+
+    get validKeyClass() {
+        return this.validKey
+            ? ''
+            : 'ring-2 ring-rose-500 focus:ring-2 focus:ring-rose-500 border-transparent focus:border-transparent';
+    },
 }));
 
 Alpine.start();

Shared (Extension)/Resources/utils.js

@@ -206,3 +206,10 @@ export function humanPermission(p) {
             return 'Unknown';
     }
 }
+
+export function validateKey(key) {
+    const hexMatch = /^[\da-f]{64}$/i.test(key);
+    const b32Match = /^nsec1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58}$/.test(key);
+
+    return hexMatch || b32Match;
+}