fix(authentication-link): display link in webview instead of output (#23)

Author: salome-voltz

src/extension.ts

@@ -25,6 +25,7 @@ import {
   workspace,
   StatusBarItem,
   StatusBarAlignment,
+  WebviewView,
 } from "vscode";
 import { GGShieldResolver } from "./lib/ggshield-resolver";
 import { getCurrentFile, isGitInstalled } from "./utils";
@@ -240,10 +241,10 @@ export function activate(context: ExtensionContext) {
           }
         ),
         commands.registerCommand("gitguardian.authenticate", async () => {
-          outputChannel.show();
           const isAuthenticated = await loginGGShield(
             ggshieldResolver.configuration,
-            outputChannel
+            outputChannel,
+            ggshieldViewProvider.getView() as WebviewView
           );
           if (isAuthenticated) {
             authStatus = true;
@@ -259,7 +260,6 @@ export function activate(context: ExtensionContext) {
           }
         }),
         commands.registerCommand("gitguardian.logout", async () => {
-          outputChannel.show();
           logoutGGShield(ggshieldResolver.configuration);
           updateStatusBarItem(StatusBarStatus.unauthenticated, statusBar);
           commands.executeCommand('setContext', 'isAuthenticated', false);

src/ggshield-webview/gitguardian-webview-view.ts

@@ -45,6 +45,11 @@ export class GitGuardianWebviewProvider implements vscode.WebviewViewProvider {
     });
   }
 
+  public getView(): vscode.WebviewView | undefined {
+    return this._view;
+  }
+
+
   private async checkAuthenticationStatus() {
     this.isAuthenticated = ggshieldAuthStatus(this.ggshieldConfiguration);
   }
@@ -103,15 +108,35 @@ export class GitGuardianWebviewProvider implements vscode.WebviewViewProvider {
             <h1 style="margin-bottom:0px;">Welcome to GitGuardian</h1>
             <p>Protect your code from secrets leakage</p>
             <button class="button large" id="authenticate">Link your IDE to your account</button>
+            
+            <p id="authMessage" style="display:none;">
+              If your browser doesn't open automatically, <a id="authLink" href="#" target="_blank">click here</a>.
+            </p>
           </div>
+
           <script>
             const vscode = acquireVsCodeApi();
+            
+            // Button click event to trigger authentication
             document.getElementById('authenticate').addEventListener('click', () => {
               vscode.postMessage({ type: 'authenticate' });
             });
+            
+            // Listener for authentication link
+            window.addEventListener('message', event => {
+              const message = event.data;
+              
+              if (message.type === 'authLink') {
+                const authMessage = document.getElementById('authMessage');
+                const authLink = document.getElementById('authLink');
+                authLink.href = message.link;  // Set the authentication link
+                authMessage.style.display = 'block';  // Show the message
+              }
+            });
           </script>
         </body>
-        </html>`;
+        </html>
+    `;
     }
   }
 

src/lib/ggshield-api.ts

@@ -6,7 +6,7 @@ import {
   spawn,
   spawnSync,
 } from "child_process";
-import { workspace, window } from "vscode";
+import { workspace, window, WebviewView } from "vscode";
 import axios from 'axios';
 import { GGShieldConfiguration } from "./ggshield-configuration";
 import { GGShieldScanResults } from "./api-types";
@@ -28,7 +28,7 @@ export function runGGShieldCommand(
     GITGUARDIAN_API_URL: string;
     GG_USER_AGENT: string;
     GITGUARDIAN_DONT_LOAD_ENV: string;
-    GITGUARDIAN_API_KEY?: string; // Note the ? to indicate this property is optional
+    GITGUARDIAN_API_KEY?: string;
     } = {
     GITGUARDIAN_API_URL: apiUrl,
     GG_USER_AGENT: "gitguardian-vscode",
@@ -208,7 +208,8 @@ export function ggshieldScanFile(
 
 export async function loginGGShield(
   configuration: GGShieldConfiguration,
-  outputChannel: any
+  outputChannel: any,
+  webviewView: WebviewView,
 ): Promise<boolean> {
   const { ggshieldPath, apiUrl, apiKey } = configuration;
 
@@ -230,8 +231,19 @@ export async function loginGGShield(
     const proc = spawn(ggshieldPath, args, options);
 
     proc.stdout.on("data", (data) => {
-      outputChannel.appendLine(`ggshield stdout: ${data.toString()}`);
+      const output = data.toString();
+      outputChannel.appendLine(`ggshield stdout: ${output}`);
+
+      const urlLine = output.match(/https:\/\/[^\s]+/);
+      if (urlLine) {
+        const authUrl = urlLine[0];
+        webviewView.webview.postMessage({
+          type: 'authLink',
+          link: authUrl,
+        });
+      }
     });
+;
 
     proc.stderr.on("data", (data) => {
       outputChannel.appendLine(`ggshield stderr: ${data.toString()}`);
@@ -257,7 +269,7 @@ export async function loginGGShield(
 export function logoutGGShield(
   configuration: GGShieldConfiguration
 ): void {
-  const proc = runGGShieldCommand(configuration, ["auth", "logout"]);
+  runGGShieldCommand(configuration, ["auth", "logout"]);
 }
 
 export function ggshieldAuthStatus(