diff --git a/README.md b/README.md
index 6188d948..2bb1d111 100644
--- a/README.md
+++ b/README.md
@@ -83,3 +83,4 @@ Are you using this addon in your Thunderbird?
- Addon icon thanks for the help to ChatGPT-4 ;-)
- loading.io 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
diff --git a/images/pwd-hide.png b/images/pwd-hide.png
new file mode 100644
index 00000000..b6c8eef9
Binary files /dev/null and b/images/pwd-hide.png differ
diff --git a/images/pwd-show.png b/images/pwd-show.png
new file mode 100644
index 00000000..ac2a5259
Binary files /dev/null and b/images/pwd-show.png differ
diff --git a/options/mzta-options.css b/options/mzta-options.css
index cd8596b5..6f6b3553 100644
--- a/options/mzta-options.css
+++ b/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;
diff --git a/options/mzta-options.html b/options/mzta-options.html
index 6aa4822a..15cfba74 100644
--- a/options/mzta-options.html
+++ b/options/mzta-options.html
@@ -104,10 +104,12 @@
__MSG_prefs_ChatGPT_API_Key__
-
+
+
+ 
+ |
@@ -131,8 +133,7 @@
|
|
@@ -157,8 +158,7 @@
|
@@ -182,9 +182,8 @@
|
diff --git a/options/mzta-options.js b/options/mzta-options.js
index 9a2bbbb3..9cd03d25 100644
--- a/options/mzta-options.js
+++ b/options/mzta-options.js
@@ -37,7 +37,8 @@ function saveOptions(e) {
case 'number':
options[element.id] = element.valueAsNumber;
break;
- case 'text':
+ 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 });