Merge pull request coder#2922 from cdr/jsjoeio/add-logout

feat(lib/vscode): add log out to application menu

Author: jsjoeio

lib/vscode/src/vs/server/common/cookie.ts

@@ -0,0 +1,3 @@
+export enum Cookie {
+  Key = 'key',
+}

lib/vscode/src/vs/workbench/browser/parts/titlebar/menubarControl.ts

@@ -9,7 +9,7 @@ import { registerThemingParticipant, IThemeService } from 'vs/platform/theme/com
 import { MenuBarVisibility, getTitleBarStyle, IWindowOpenable, getMenuBarVisibility } from 'vs/platform/windows/common/windows';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IAction, Action, SubmenuAction, Separator } from 'vs/base/common/actions';
-import { addDisposableListener, Dimension, EventType } from 'vs/base/browser/dom';
+import { addDisposableListener, Dimension, EventType, getCookieValue } from 'vs/base/browser/dom';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { isMacintosh, isWeb, isIOS, isNative } from 'vs/base/common/platform';
 import { IConfigurationService, IConfigurationChangeEvent } from 'vs/platform/configuration/common/configuration';
@@ -38,6 +38,8 @@ import { KeyCode } from 'vs/base/common/keyCodes';
 import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry';
 import { IsWebContext } from 'vs/platform/contextkey/common/contextkeys';
 import { ICommandService } from 'vs/platform/commands/common/commands';
+import { ILogService } from 'vs/platform/log/common/log';
+import { Cookie } from 'vs/server/common/cookie';
 
 export abstract class MenubarControl extends Disposable {
 
@@ -312,7 +314,8 @@ export class CustomMenubarControl extends MenubarControl {
 		@IThemeService private readonly themeService: IThemeService,
 		@IWorkbenchLayoutService private readonly layoutService: IWorkbenchLayoutService,
 		@IHostService protected readonly hostService: IHostService,
-		@ICommandService commandService: ICommandService
+		@ICommandService commandService: ICommandService,
+		@ILogService private readonly logService: ILogService
 	) {
 		super(menuService, workspacesService, contextKeyService, keybindingService, configurationService, labelService, updateService, storageService, notificationService, preferencesService, environmentService, accessibilityService, hostService, commandService);
 
@@ -711,6 +714,28 @@ export class CustomMenubarControl extends MenubarControl {
 			webNavigationActions.pop();
 		}
 
+		webNavigationActions.push(new Action('logout', localize('logout', "Log out"), undefined, true,
+		async (event?: MouseEvent) => {
+			const COOKIE_KEY = Cookie.Key;
+			const loginCookie = getCookieValue(COOKIE_KEY);
+
+			this.logService.info('Logging out of code-server');
+
+			if(loginCookie) {
+				this.logService.info(`Removing cookie under ${COOKIE_KEY}`);
+
+				if (document && document.cookie) {
+					// We delete the cookie by setting the expiration to a date/time in the past
+					document.cookie = COOKIE_KEY +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+					window.location.href = '/login';
+				} else {
+					this.logService.warn('Could not delete cookie because document and/or document.cookie is undefined');
+				}
+			} else {
+				this.logService.warn('Could not log out because we could not find cookie');
+			}
+		}));
+
 		return webNavigationActions;
 	}
 

test/e2e/logout.test.ts

@@ -0,0 +1,55 @@
+import { chromium, Page, Browser, BrowserContext } from "playwright"
+import { CODE_SERVER_ADDRESS, PASSWORD, E2E_VIDEO_DIR } from "../utils/constants"
+
+describe("logout", () => {
+  let browser: Browser
+  let page: Page
+  let context: BrowserContext
+
+  beforeAll(async () => {
+    browser = await chromium.launch()
+    context = await browser.newContext({
+      recordVideo: { dir: E2E_VIDEO_DIR },
+    })
+  })
+
+  afterAll(async () => {
+    await browser.close()
+  })
+
+  beforeEach(async () => {
+    page = await context.newPage()
+  })
+
+  afterEach(async () => {
+    await page.close()
+    // Remove password from local storage
+    await context.clearCookies()
+  })
+
+  it("should be able login and logout", async () => {
+    await page.goto(CODE_SERVER_ADDRESS)
+    // Type in password
+    await page.fill(".password", PASSWORD)
+    // Click the submit button and login
+    await page.click(".submit")
+    // See the editor
+    const codeServerEditor = await page.isVisible(".monaco-workbench")
+    expect(codeServerEditor).toBeTruthy()
+
+    // Click the Application menu
+    await page.click("[aria-label='Application Menu']")
+
+    // See the Log out button
+    const logoutButton = "a.action-menu-item span[aria-label='Log out']"
+    expect(await page.isVisible(logoutButton))
+
+    await page.hover(logoutButton)
+
+    await page.click(logoutButton)
+    // it takes a couple seconds to navigate
+    await page.waitForTimeout(2000)
+    const currentUrl = page.url()
+    expect(currentUrl).toBe(`${CODE_SERVER_ADDRESS}/login`)
+  })
+})