Fix Back button on SignIn page & Add Cancel button (#6415)

* Back button on SignIn page leads to Home page
Fixes #6413

* Add regression test for the bug, and for new cancel button

* Full sign in e2e test

* Good bot

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

---------

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

e2e/playwright/fixtures/fixtureSetup.ts

@@ -18,6 +18,7 @@ import type { Settings } from '@rust/kcl-lib/bindings/Settings'
 import { CmdBarFixture } from '@e2e/playwright/fixtures/cmdBarFixture'
 import { EditorFixture } from '@e2e/playwright/fixtures/editorFixture'
 import { HomePageFixture } from '@e2e/playwright/fixtures/homePageFixture'
+import { SignInPageFixture } from '@e2e/playwright/fixtures/signInPageFixture'
 import { SceneFixture } from '@e2e/playwright/fixtures/sceneFixture'
 import { ToolbarFixture } from '@e2e/playwright/fixtures/toolbarFixture'
 
@@ -66,6 +67,7 @@ export interface Fixtures {
   toolbar: ToolbarFixture
   scene: SceneFixture
   homePage: HomePageFixture
+  signInPage: SignInPageFixture
 }
 
 export class ElectronZoo {
@@ -387,6 +389,9 @@ const fixturesBasedOnProcessEnvPlatform = {
   homePage: async ({ page }: { page: Page }, use: FnUse) => {
     await use(new HomePageFixture(page))
   },
+  signInPage: async ({ page }: { page: Page }, use: FnUse) => {
+    await use(new SignInPageFixture(page))
+  },
 }
 
 if (process.env.PLATFORM === 'web') {

e2e/playwright/fixtures/signInPageFixture.ts

@@ -0,0 +1,48 @@
+import type { Locator, Page } from '@playwright/test'
+import { secrets } from '@e2e/playwright/secrets'
+
+export class SignInPageFixture {
+  public page: Page
+
+  signInButton!: Locator
+  cancelSignInButton!: Locator
+  userCode!: Locator
+
+  apiBaseUrl!: string
+
+  constructor(page: Page) {
+    this.page = page
+
+    this.signInButton = this.page.getByTestId('sign-in-button')
+    this.cancelSignInButton = this.page.getByTestId('cancel-sign-in-button')
+    this.userCode = this.page.getByTestId('sign-in-user-code')
+
+    // TODO: set this thru env var
+    this.apiBaseUrl = 'https://api.dev.zoo.dev'
+  }
+
+  async verifyAndConfirmAuth(userCode: string) {
+    // Device flow: stolen from the tauri days
+    // https://github.com/KittyCAD/modeling-app/blob/d916c7987452e480719004e6d11fd2e595c7d0eb/e2e/tauri/specs/app.spec.ts#L19
+    const headers = {
+      Authorization: `Bearer ${secrets.token}`,
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    }
+    const verifyUrl = `${this.apiBaseUrl}/oauth2/device/verify?user_code=${userCode}`
+    console.log(`GET ${verifyUrl}`)
+    const vr = await fetch(verifyUrl, { headers })
+    console.log(vr.status)
+
+    // Device flow: confirm
+    const confirmUrl = `${this.apiBaseUrl}/oauth2/device/confirm`
+    const data = JSON.stringify({ user_code: userCode })
+    console.log(`POST ${confirmUrl} ${data}`)
+    const cr = await fetch(confirmUrl, {
+      headers,
+      method: 'POST',
+      body: data,
+    })
+    console.log(cr.status)
+  }
+}

e2e/playwright/fixtures/toolbarFixture.ts

@@ -46,6 +46,9 @@ export class ToolbarFixture {
   gizmo!: Locator
   gizmoDisabled!: Locator
   loadButton!: Locator
+  /** User button for the user sidebar menu */
+  userSidebarButton!: Locator
+  signOutButton!: Locator
 
   constructor(page: Page) {
     this.page = page
@@ -82,6 +85,9 @@ export class ToolbarFixture {
     // element or two different elements can represent these states.
     this.gizmo = page.getByTestId('gizmo')
     this.gizmoDisabled = page.getByTestId('gizmo-disabled')
+
+    this.userSidebarButton = page.getByTestId('user-sidebar-toggle')
+    this.signOutButton = page.getByTestId('user-sidebar-sign-out')
   }
 
   get logoLink() {