Merge pull request #30 from JOHLC/copilot/obscure-webhook-id-input

feat: mask webhook ID input field with proper styling

Author: JOHLC

package/options.html

@@ -23,7 +23,7 @@ <h2>Send to Home Assistant</h2>
   <label for="sslToggle"><input type="checkbox" id="sslToggle" checked> Use SSL (https)</label>
   <div class="webhook-row">
   <label for="webhookId"><a href="https://www.home-assistant.io/docs/automation/trigger/#webhook-trigger" target="_blank" rel="noopener noreferrer" class="link-blue">Webhook ID</a></label> 
-    <input type="text" id="webhookId" placeholder="xxxxxx-xxxxxxxxxxxx">
+    <input type="password" id="webhookId" placeholder="xxxxxx-xxxxxxxxxxxx">
   </div>
   <label for="userName">User <span class="label-note">(optional)</span></label>
   <input type="text" id="userName" placeholder="Your name (optional)" maxlength="32">

package/style.css

@@ -161,7 +161,7 @@ label {
   width: auto;
   align-self: center;
 }
-input[type="text"] {
+input[type="text"], input[type="password"] {
   width: 100%;
   padding: 0.7em 1em;
   font-size: 1.08em;
@@ -191,7 +191,7 @@ input[type="text"] {
   transition: border 0.2s, box-shadow 0.2s;
   box-shadow: 0 1.5px 8px #00b4fc22;
 }
-input[type="text"]:focus {
+input[type="text"]:focus, input[type="password"]:focus {
   border: 2.5px solid #00b4fc;
   outline: none;
   box-shadow: 0 2px 12px #00b4fc44;