Merge pull request #176 from ryana/feat/mask-token-fields

Author: LIU9293

packages/core/test/web-ui-token-field-masking.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "bun:test";
+import { join } from "node:path";
+
+function findInputBlock(markup: string, inputId: string): string | undefined {
+  const inputBlocks = markup.match(/<Input\b[\s\S]*?\/>/g) ?? [];
+  return inputBlocks.find((block) => block.includes(`id="${inputId}"`));
+}
+
+async function readWorkspaceSettingsMarkup(relativePath: string): Promise<string> {
+  const absolutePath = join(process.cwd(), relativePath);
+  return Bun.file(absolutePath).text();
+}
+
+describe("web-ui credential fields", () => {
+  it("masks token fields in add workspace dialog", async () => {
+    const markup = await readWorkspaceSettingsMarkup("packages/web-ui/src/routes/(settings)/+layout.svelte");
+
+    for (const inputId of [
+      "new-workspace-app-token",
+      "new-workspace-bot-token",
+      "new-workspace-discord-bot-token",
+      "new-workspace-lark-app-secret",
+    ]) {
+      const block = findInputBlock(markup, inputId);
+      expect(block).toBeDefined();
+      expect(block).toContain('type="password"');
+    }
+  });
+
+  it("masks token fields in workspace detail editor", async () => {
+    const markup = await readWorkspaceSettingsMarkup("packages/web-ui/src/routes/(settings)/workspace/[workspaceName]/+page.svelte");
+
+    for (const inputId of [
+      "workspace-app-token",
+      "workspace-bot-token",
+      "workspace-discord-bot-token",
+      "workspace-lark-app-secret",
+    ]) {
+      const block = findInputBlock(markup, inputId);
+      expect(block).toBeDefined();
+      expect(block).toContain('type="password"');
+    }
+  });
+});

packages/web-ui/src/routes/(settings)/+layout.svelte

@@ -306,19 +306,21 @@
             <Label for="new-workspace-app-token">Slack App Token</Label>
             <Input
               id="new-workspace-app-token"
-              type="text"
+              type="password"
               value={pendingSlackAppToken}
               on:input={onPendingSlackAppTokenInput}
+              autocomplete="new-password"
               placeholder="xapp-..."
             />
           </div>
           <div class="grid gap-2">
             <Label for="new-workspace-bot-token">Slack Bot Token</Label>
             <Input
               id="new-workspace-bot-token"
-              type="text"
+              type="password"
               value={pendingSlackBotToken}
               on:input={onPendingSlackBotTokenInput}
+              autocomplete="new-password"
               placeholder="xoxb-..."
             />
           </div>
@@ -327,9 +329,10 @@
             <Label for="new-workspace-discord-bot-token">Discord Bot Token</Label>
             <Input
               id="new-workspace-discord-bot-token"
-              type="text"
+              type="password"
               value={pendingDiscordBotToken}
               on:input={onPendingDiscordBotTokenInput}
+              autocomplete="new-password"
               placeholder="Bot token"
             />
           </div>
@@ -349,9 +352,10 @@
             <Label for="new-workspace-lark-app-secret">Lark App Secret</Label>
             <Input
               id="new-workspace-lark-app-secret"
-              type="text"
+              type="password"
               value={pendingLarkAppSecret}
               on:input={onPendingLarkAppSecretInput}
+              autocomplete="new-password"
               placeholder="app secret"
             />
           </div>

packages/web-ui/src/routes/(settings)/workspace/[workspaceName]/+page.svelte

@@ -372,29 +372,32 @@
           <Label for="workspace-app-token">Slack App Token</Label>
           <Input
             id="workspace-app-token"
-            type="text"
+            type="password"
             value={selectedWorkspace.slackAppToken ?? ""}
             on:input={(event) => onWorkspaceTextInput(selectedWorkspace.id, "slackAppToken", event)}
+            autocomplete="new-password"
           />
         </div>
 
         <div class="grid gap-2">
           <Label for="workspace-bot-token">Slack Bot Token</Label>
           <Input
             id="workspace-bot-token"
-            type="text"
+            type="password"
             value={selectedWorkspace.slackBotToken ?? ""}
             on:input={(event) => onWorkspaceTextInput(selectedWorkspace.id, "slackBotToken", event)}
+            autocomplete="new-password"
           />
         </div>
       {:else if selectedWorkspace.type === "discord"}
         <div class="grid gap-2 md:col-span-2">
           <Label for="workspace-discord-bot-token">Discord Bot Token</Label>
           <Input
             id="workspace-discord-bot-token"
-            type="text"
+            type="password"
             value={selectedWorkspace.discordBotToken ?? ""}
             on:input={(event) => onWorkspaceTextInput(selectedWorkspace.id, "discordBotToken", event)}
+            autocomplete="new-password"
           />
         </div>
       {:else}
@@ -412,9 +415,10 @@
           <Label for="workspace-lark-app-secret">Lark App Secret</Label>
           <Input
             id="workspace-lark-app-secret"
-            type="text"
+            type="password"
             value={selectedWorkspace.larkAppSecret ?? ""}
             on:input={(event) => onWorkspaceTextInput(selectedWorkspace.id, "larkAppSecret", event)}
+            autocomplete="new-password"
           />
         </div>
       {/if}