fix: obscure password for ssh passphrase prompt

close #845

Author: Vinzent03

src/gitManager/simpleGit.ts

@@ -197,6 +197,7 @@ export class SimpleGit extends GitManager {
                 }
                 const response = await new GeneralModal(this.plugin, {
                     allowEmpty: true,
+                    obscure: true,
                     placeholder:
                         data.length > 60
                             ? "Enter a response to the message."

src/ui/modals/generalModal.ts

@@ -7,13 +7,15 @@ export interface OptionalGeneralModalConfig {
     allowEmpty?: boolean;
     onlySelection?: boolean;
     initialValue?: string;
+    obscure?: boolean;
 }
 interface GeneralModalConfig {
     options: string[];
     placeholder: string;
     allowEmpty: boolean;
     onlySelection: boolean;
     initialValue?: string;
+    obscure: boolean;
 }
 
 const generalModalConfigDefaults: GeneralModalConfig = {
@@ -22,6 +24,7 @@ const generalModalConfigDefaults: GeneralModalConfig = {
     allowEmpty: false,
     onlySelection: false,
     initialValue: undefined,
+    obscure: false,
 };
 
 export class GeneralModal extends SuggestModal<string> {
@@ -34,6 +37,29 @@ export class GeneralModal extends SuggestModal<string> {
         super(plugin.app);
         this.config = { ...generalModalConfigDefaults, ...config };
         this.setPlaceholder(this.config.placeholder);
+        if (this.config.obscure) {
+            this.inputEl.type = "password";
+            const promptContainer = this.containerEl.querySelector(
+                ".prompt-input-container"
+            )!;
+            promptContainer.addClass("git-obscure-prompt");
+            promptContainer.setAttr("git-is-obscured", "true");
+            const obscureSwitchButton = promptContainer?.createDiv({
+                cls: "search-input-clear-button",
+            });
+            obscureSwitchButton.style.marginRight = "32px";
+            obscureSwitchButton.id = "git-show-password";
+            obscureSwitchButton.addEventListener("click", () => {
+                const isObscured = promptContainer.getAttr("git-is-obscured");
+                if (isObscured === "true") {
+                    this.inputEl.type = "text";
+                    promptContainer.setAttr("git-is-obscured", "false");
+                } else {
+                    this.inputEl.type = "password";
+                    promptContainer.setAttr("git-is-obscured", "true");
+                }
+            });
+        }
     }
 
     openAndGetResult(): Promise<string> {
@@ -64,7 +90,11 @@ export class GeneralModal extends SuggestModal<string> {
     }
 
     renderSuggestion(value: string, el: HTMLElement): void {
-        el.setText(value);
+        if (this.config.obscure) {
+            el.hide();
+        } else {
+            el.setText(value);
+        }
     }
 
     onChooseSuggestion(value: string, _: MouseEvent | KeyboardEvent) {

styles.css

@@ -582,3 +582,11 @@
     position: relative;
     height: 100%;
 }
+
+.git-obscure-prompt[git-is-obscured="true"] #git-show-password:after {
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg>');
+}
+
+.git-obscure-prompt[git-is-obscured="false"] #git-show-password:after {
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"></path><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"></path><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"></path><path d="m2 2 20 20"></path></svg>');
+}