openai api key is now hidden as a password

README.md

@@ -83,3 +83,4 @@ Are you using this addon in your Thunderbird?
 - Addon icon thanks for the help to ChatGPT-4 ;-)
 - <a href="https://loading.io">loading.io</a> for the dynamic menu loading SVG
 - [Fluent Design System](https://www.iconfinder.com/fluent-designsystem) for the Custom Prompts table sorting icons
+- [JessiGue](https://www.flaticon.com/authors/jessigue) for the show/hide api key field

options/mzta-options.css

@@ -109,6 +109,33 @@ tr.conntype_openai_comp_api, tr.conntype_openai_comp_api2{
     font-style: italic;
 }
 
+.chatgpt_api_key-container {
+    position: relative;
+    width: 100%;
+}
+
+.chatgpt_api_key-container input {
+    width: -moz-available;
+    margin-right: 25px;
+}
+
+input[type="text"], input[type="password"]{
+    border-radius: 4px;
+    padding: 2px;
+}
+
+input.option-input[type="text"]{
+    width: -moz-available;
+}
+
+.chatgpt_api_key-container .toggle-icon {
+    position: absolute;
+    right: 0px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+}
+
 #ollama_model_fetch_loading{
     display: none;
     font-style: italic;

options/mzta-options.html

@@ -104,10 +104,12 @@
           <span>__MSG_prefs_ChatGPT_API_Key__</span>
         </label></td>
         <td>
+          <div class="chatgpt_api_key-container">
             <label>
-            <input type="text" id="chatgpt_api_key" name="chatgpt_api_key" class="option-input" style="width:20em" />
+              <input type="password" id="chatgpt_api_key" name="chatgpt_api_key" class="option-input"/>
-            &nbsp;<span></span>
             </label>
+            <span class="toggle-icon" id="togglePassword"><img src="../images/pwd-show.png" id="pwd-icon"></span>
+          </div>
         </td>
       </tr>
       <tr class="conntype_chatgpt_api">
@@ -131,8 +133,7 @@
         </label></td>
         <td>
           <label>
-            <input type="text" id="ollama_host" name="ollama_host" class="option-input" style="width:14em" />
+            <input type="text" id="ollama_host" name="ollama_host" class="option-input"/>
-            &nbsp;<span></span>
           </label>
         </td>
       </tr>
@@ -157,8 +158,7 @@
         </label></td>
         <td>
           <label>
-            <input type="text" id="openai_comp_host" name="openai_comp_host" class="option-input" style="width:14em" />
+            <input type="text" id="openai_comp_host" name="openai_comp_host" class="option-input" />
-            &nbsp;<span></span>
           </label>
         </td>
       </tr>
@@ -182,9 +182,8 @@
         </label></td>
         <td>
           <label>
-            <input type="text" id="openai_comp_chat_name" name="openai_comp_chat_name" class="option-input" style="width:14em" />
+            <input type="text" id="openai_comp_chat_name" name="openai_comp_chat_name" class="option-input" />
             <br>__MSG_prefs_OpenAIComp_ChatName_Info__
-            &nbsp;<span></span>
           </label>
         </td>
       </tr>

options/mzta-options.js

@@ -38,6 +38,7 @@ function saveOptions(e) {
         options[element.id] = element.valueAsNumber;
         break;
         case 'text':
+        case 'password':
         options[element.id] = element.value.trim();
         break;
       default:
@@ -54,7 +55,7 @@ function saveOptions(e) {
 async function restoreOptions() {
   function setCurrentChoice(result) {
     document.querySelectorAll(".option-input").forEach(element => {
-      taLog.log("Options restoring " + element.id + " = " + result[element.id]);
+      taLog.log("Options restoring " + element.id + " = " + (element.id=="chatgpt_api_key" ? "****************" : result[element.id]));
       switch (element.type) {
         case 'checkbox':
           element.checked = result[element.id] || false;
@@ -66,6 +67,7 @@ async function restoreOptions() {
           element.value = result[element.id] ?? default_number_value;
           break;
         case 'text':
+        case 'password':
           let default_text_value = '';
           if(element.id == 'default_chatgpt_lang') default_text_value = prefs_default.default_chatgpt_lang;
           element.value = result[element.id] || default_text_value;
@@ -144,15 +146,15 @@ function warn_ChatGPT_APIKeyEmpty() {
     btnFetchChatGPTModels.disabled = true;
     modelChatGPT.disabled = true;
     modelChatGPT.selectedIndex = -1;
-    modelChatGPT.style.border = 'none';
+    modelChatGPT.style.border = '';
   }else{
-    apiKeyInput.style.border = 'none';
+    apiKeyInput.style.border = '';
     btnFetchChatGPTModels.disabled = false;
     modelChatGPT.disabled = false;
     if((modelChatGPT.selectedIndex === -1)||(modelChatGPT.value === '')){
       modelChatGPT.style.border = '2px solid red';
     }else{
-      modelChatGPT.style.border = 'none';
+      modelChatGPT.style.border = '';
     }
   }
 }
@@ -166,9 +168,9 @@ function warn_Ollama_HostEmpty() {
     btnFetchOllamaModels.disabled = true;
     modelOllama.disabled = true;
     modelOllama.selectedIndex = -1;
-    modelOllama.style.border = 'none';
+    modelOllama.style.border = '';
   }else{
-    hostInput.style.border = 'none';
+    hostInput.style.border = '';
     btnFetchOllamaModels.disabled = false;
     modelOllama.disabled = false;
     if((modelOllama.selectedIndex === -1)||(modelOllama.value === '')){
@@ -188,15 +190,15 @@ function warn_OpenAIComp_HostEmpty() {
     btnUpdateOpenAICompModels.disabled = true;
     modelOpenAIComp.disabled = true;
     modelOpenAIComp.selectedIndex = -1;
-    modelOpenAIComp.style.border = 'none';
+    modelOpenAIComp.style.border = '';
   }else{
-    hostInput.style.border = 'none';
+    hostInput.style.border = '';
     btnUpdateOpenAICompModels.disabled = false;
     modelOpenAIComp.disabled = false;
     if((modelOpenAIComp.selectedIndex === -1)||(modelOpenAIComp.value === '')){
       modelOpenAIComp.style.border = '2px solid red';
     }else{
-      modelOpenAIComp.style.border = 'none';
+      modelOpenAIComp.style.border = '';
     }
   }
 }
@@ -357,4 +359,15 @@ select_openai_comp_model.addEventListener("change", warn_OpenAIComp_HostEmpty);
   warn_Ollama_HostEmpty();
   warn_OpenAIComp_HostEmpty();
 
+  const passwordField = document.getElementById('chatgpt_api_key');
+  const toggleIcon = document.getElementById('togglePassword');
+  const icon_img = document.getElementById('pwd-icon');
+
+  toggleIcon.addEventListener('click', () => {
+      const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
+      passwordField.setAttribute('type', type);
+
+      icon_img.src = type === 'password' ? "../images/pwd-show.png" : "../images/pwd-hide.png";
+  });
+
 }, { once: true });