From fce60f72a100005872f806f51e8e31a2b090daed Mon Sep 17 00:00:00 2001
From: Micah Lee <micah@micahflee.com>
Date: Thu, 6 Jun 2024 22:06:51 -0700
Subject: [PATCH 1/8] Use references instead of getElementById, and fix enable
 fields again

---
 packages/renderer/src/components/ErrorMessage.vue |  2 +-
 packages/renderer/src/views/LoginView.vue         | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/renderer/src/components/ErrorMessage.vue b/packages/renderer/src/components/ErrorMessage.vue
index 6c9391da..395886da 100644
--- a/packages/renderer/src/components/ErrorMessage.vue
+++ b/packages/renderer/src/components/ErrorMessage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, defineEmits } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import Modal from 'bootstrap/js/dist/modal';
 
 defineProps({
diff --git a/packages/renderer/src/views/LoginView.vue b/packages/renderer/src/views/LoginView.vue
index 578db073..09d3273e 100644
--- a/packages/renderer/src/views/LoginView.vue
+++ b/packages/renderer/src/views/LoginView.vue
@@ -17,14 +17,17 @@ const verificationCode = ref('');
 type LoginState = 'start' | 'registerDevice';
 const loginState = ref<LoginState>('start');
 
+const emailInputEl = ref<HTMLInputElement | null>(null);
+const startContinueButtonEl = ref<HTMLButtonElement | null>(null);
+
 function disableStartFields() {
-    document.getElementById("email")?.setAttribute("disabled", "true");
-    document.getElementById("start-continue")?.setAttribute("disabled", "true");
+    emailInputEl.value?.setAttribute("disabled", "true");
+    startContinueButtonEl.value?.setAttribute("disabled", "true");
 }
 
 function enableStartFields() {
-    document.getElementById("email")?.setAttribute("disabled", "false");
-    document.getElementById("start-continue")?.setAttribute("disabled", "false");
+    emailInputEl.value?.removeAttribute("disabled");
+    startContinueButtonEl.value?.removeAttribute("disabled");
 }
 
 async function authenticate() {
@@ -114,9 +117,9 @@ async function goBack() {
                         <template v-if="loginState == 'start'">
                             <div class="form-group d-flex flex-column align-items-center">
                                 <p>Login to Semiphemeral using your email address.</p>
-                                <input type="email" class="form-control" id="email" placeholder="Email address"
+                                <input type="email" class="form-control" ref="emailInputEl" placeholder="Email address"
                                     v-model="userEmail">
-                                <button type="submit" class="btn btn-primary mt-2" id="start-continue"
+                                <button type="submit" class="btn btn-primary mt-2" rel="startContinueButtonEl"
                                     @click="authenticate">Continue</button>
                             </div>
                         </template>

From 1bc1ab3e1e7460d97ae22a863bb8a6fce657990d Mon Sep 17 00:00:00 2001
From: Micah Lee <micah@micahflee.com>
Date: Thu, 6 Jun 2024 22:29:40 -0700
Subject: [PATCH 2/8] Writing more LoginView tests, though not done

---
 packages/renderer/cypress/support/commands.js |  6 +-
 packages/renderer/cypress/support/index.d.ts  |  7 ++
 packages/renderer/src/views/LoginView.cy.ts   | 76 +++++++++++++------
 packages/renderer/src/views/LoginView.vue     |  6 +-
 4 files changed, 69 insertions(+), 26 deletions(-)
 create mode 100644 packages/renderer/cypress/support/index.d.ts

diff --git a/packages/renderer/cypress/support/commands.js b/packages/renderer/cypress/support/commands.js
index 66ea16ef..13c20a36 100644
--- a/packages/renderer/cypress/support/commands.js
+++ b/packages/renderer/cypress/support/commands.js
@@ -22,4 +22,8 @@
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('vueRef', (refName) => {
+    cy.get(`[data-vue-ref="${refName}"]`);
+});
\ No newline at end of file
diff --git a/packages/renderer/cypress/support/index.d.ts b/packages/renderer/cypress/support/index.d.ts
new file mode 100644
index 00000000..be2cacbb
--- /dev/null
+++ b/packages/renderer/cypress/support/index.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+    interface Chainable<Subject> {
+        vueRef: (refName: string) => Chainable<JQuery<HTMLElement>>;
+    }
+}
\ No newline at end of file
diff --git a/packages/renderer/src/views/LoginView.cy.ts b/packages/renderer/src/views/LoginView.cy.ts
index aa6ff38d..f24e5625 100644
--- a/packages/renderer/src/views/LoginView.cy.ts
+++ b/packages/renderer/src/views/LoginView.cy.ts
@@ -5,19 +5,11 @@ import LoginView from './LoginView.vue'
 import ServerAPI from '../ServerAPI';
 
 describe('<LoginView />', () => {
-  // beforeEach(() => {
-  //   cy.window().then((win) => {
-  //     (win as any).electron = {
-  //       getApiUrl: () => 'https://mock/api/v1'
-  //     }
-  //   });
-  // });
-
   it('starts with the email field visible and the value blank', () => {
     mount(LoginView);
 
-    cy.get('input[type="email"]').should('be.visible');
-    cy.get('input[type="email"]').should('have.value', '');
+    cy.vueRef('emailInputEl').should('be.visible');
+    cy.vueRef('emailInputEl').should('have.value', '');
   })
 
   it('prepopulates the email field if it is saved', () => {
@@ -31,8 +23,8 @@ describe('<LoginView />', () => {
       }
     });
 
-    cy.get('input[type="email"]').should('be.visible');
-    cy.get('input[type="email"]').should('have.value', testEmail);
+    cy.vueRef('emailInputEl').should('be.visible');
+    cy.vueRef('emailInputEl').should('have.value', testEmail);
   })
 
   it('shows an error message if the email field is blank', () => {
@@ -47,9 +39,9 @@ describe('<LoginView />', () => {
       }
     });
 
-    cy.get('input[type="email"]').should('be.visible');
-    cy.get('input[type="email"]').should('have.value', '');
-    cy.get('button').click();
+    cy.vueRef('emailInputEl').should('be.visible');
+    cy.vueRef('emailInputEl').should('have.value', '');
+    cy.vueRef('startContinueButtonEl').click();
     cy.wrap(showError).should('be.calledWith', 'Please enter your email address.');
   })
 
@@ -67,15 +59,55 @@ describe('<LoginView />', () => {
       }
     });
 
-    cy.get('input[type="email"]').should('be.visible');
-    cy.get('input[type="email"]').should('have.value', testEmail);
-    cy.get('button').click();
-
-    // Make sure the email field and start-continue button are disabled
-    cy.get('input[type="email"]').should('be.disabled');
-    cy.get('button').should('be.disabled');
+    cy.vueRef('emailInputEl').should('be.visible');
+    cy.vueRef('emailInputEl').should('have.value', testEmail);
+    cy.vueRef('startContinueButtonEl').click();
 
     // An error should be shown
     cy.wrap(showError).should('be.called');
   })
+
+  it('moves to verification code page after entering an email', () => {
+    const testEmail = 'test@lockdown.systems';
+    const showError = cy.stub();
+
+    mount(LoginView, {
+      global: {
+        plugins: [(app) => {
+          app.provide('serverApi', ref(new ServerAPI()));
+          app.provide('userEmail', ref(testEmail));
+          app.provide('showError', showError);
+        }]
+      }
+    });
+
+    cy.window().then((win) => {
+      (win as any).electron = {
+        getApiUrl: () => 'https://mock/api/v1'
+      }
+    });
+
+    cy.intercept('POST', 'https://mock/api/v1/authenticate', {
+      statusCode: 200,
+      body: {
+        message: 'Verification code sent to email'
+      }
+    });
+
+    cy.vueRef('emailInputEl').should('be.visible');
+    cy.vueRef('emailInputEl').should('have.value', testEmail);
+    cy.vueRef('startContinueButtonEl').click();
+
+    cy.wrap(showError).should('not.be.called');
+  })
+
+  // it('should only allow 6 digits in the verification code field', () => {
+
+  // it('should show an error on wrong verification code guess but let you keep guessing', () => {
+
+  // it('verification code back button should go back to start', () => {
+
+  // it('should redirect to dashboard on successful verification code', () => {
+
+  // it('should automatically redirect to dashboard when a device is saved', () => {
 });
\ No newline at end of file
diff --git a/packages/renderer/src/views/LoginView.vue b/packages/renderer/src/views/LoginView.vue
index 09d3273e..02692372 100644
--- a/packages/renderer/src/views/LoginView.vue
+++ b/packages/renderer/src/views/LoginView.vue
@@ -117,10 +117,10 @@ async function goBack() {
                         <template v-if="loginState == 'start'">
                             <div class="form-group d-flex flex-column align-items-center">
                                 <p>Login to Semiphemeral using your email address.</p>
-                                <input type="email" class="form-control" ref="emailInputEl" placeholder="Email address"
-                                    v-model="userEmail">
+                                <input type="email" class="form-control" ref="emailInputEl" data-vue-ref="emailInputEl"
+                                    placeholder="Email address" v-model="userEmail">
                                 <button type="submit" class="btn btn-primary mt-2" rel="startContinueButtonEl"
-                                    @click="authenticate">Continue</button>
+                                    data-vue-ref="startContinueButtonEl" @click="authenticate">Continue</button>
                             </div>
                         </template>
                         <template v-else-if="loginState == 'registerDevice'">

From eb406fca4bddf8a37e854ad38c3c442c63643fa8 Mon Sep 17 00:00:00 2001
From: Micah Lee <micah@micahflee.com>
Date: Fri, 7 Jun 2024 09:38:42 -0700
Subject: [PATCH 3/8] Finish implementing 'moves to verification code page
 after entering an email' test

---
 packages/renderer/src/views/LoginView.cy.ts | 51 ++++++++++++---------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/packages/renderer/src/views/LoginView.cy.ts b/packages/renderer/src/views/LoginView.cy.ts
index f24e5625..0ccb5d4a 100644
--- a/packages/renderer/src/views/LoginView.cy.ts
+++ b/packages/renderer/src/views/LoginView.cy.ts
@@ -71,34 +71,41 @@ describe('<LoginView />', () => {
     const testEmail = 'test@lockdown.systems';
     const showError = cy.stub();
 
-    mount(LoginView, {
-      global: {
-        plugins: [(app) => {
-          app.provide('serverApi', ref(new ServerAPI()));
-          app.provide('userEmail', ref(testEmail));
-          app.provide('showError', showError);
-        }]
-      }
-    });
-
     cy.window().then((win) => {
       (win as any).electron = {
-        getApiUrl: () => 'https://mock/api/v1'
+        getApiUrl: async (): Promise<string> => { return 'https://mock/api/v1' }
       }
     });
 
-    cy.intercept('POST', 'https://mock/api/v1/authenticate', {
-      statusCode: 200,
-      body: {
-        message: 'Verification code sent to email'
-      }
+    const serverApi = new ServerAPI();
+    serverApi.initialize().then(() => {
+
+      mount(LoginView, {
+        global: {
+          plugins: [(app) => {
+            app.provide('serverApi', ref(serverApi));
+            app.provide('userEmail', ref(testEmail));
+            app.provide('showError', showError);
+          }]
+        }
+      });
+
+      cy.intercept('POST', 'https://mock/api/v1/authenticate', {
+        statusCode: 200,
+        body: {
+          message: 'Verification code sent to email'
+        }
+      });
+
+      cy.vueRef('emailInputEl').should('be.visible');
+      cy.vueRef('emailInputEl').should('have.value', testEmail);
+      cy.vueRef('startContinueButtonEl').click();
+
+      cy.wrap(showError).should('not.be.called');
+
+      cy.vueRef('emailInputEl').should('not.be.visible');
+      cy.vueRef('verificationCodeInputEl').should('be.visible');
     });
-
-    cy.vueRef('emailInputEl').should('be.visible');
-    cy.vueRef('emailInputEl').should('have.value', testEmail);
-    cy.vueRef('startContinueButtonEl').click();
-
-    cy.wrap(showError).should('not.be.called');
   })
 
   // it('should only allow 6 digits in the verification code field', () => {

From 465bbf891cb58ce1f353458fb3f72826d2b5e58c Mon Sep 17 00:00:00 2001
From: Micah Lee <micah@micahflee.com>
Date: Fri, 7 Jun 2024 09:53:07 -0700
Subject: [PATCH 4/8] Actually finish implementing the test

---
 packages/renderer/src/views/LoginView.cy.ts | 66 +++++++++++++++++++--
 packages/renderer/src/views/LoginView.vue   | 12 +++-
 2 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/packages/renderer/src/views/LoginView.cy.ts b/packages/renderer/src/views/LoginView.cy.ts
index 0ccb5d4a..c727500e 100644
--- a/packages/renderer/src/views/LoginView.cy.ts
+++ b/packages/renderer/src/views/LoginView.cy.ts
@@ -71,14 +71,14 @@ describe('<LoginView />', () => {
     const testEmail = 'test@lockdown.systems';
     const showError = cy.stub();
 
-    cy.window().then((win) => {
+    cy.window().then(async (win) => {
       (win as any).electron = {
-        getApiUrl: async (): Promise<string> => { return 'https://mock/api/v1' }
+        getApiUrl: async (): Promise<string> => { return 'https://mock/api/v1' },
+        setConfig: async (_key: string, _value: string): Promise<void> => { return },
       }
-    });
 
-    const serverApi = new ServerAPI();
-    serverApi.initialize().then(() => {
+      const serverApi = new ServerAPI();
+      await serverApi.initialize();
 
       mount(LoginView, {
         global: {
@@ -99,16 +99,70 @@ describe('<LoginView />', () => {
 
       cy.vueRef('emailInputEl').should('be.visible');
       cy.vueRef('emailInputEl').should('have.value', testEmail);
+
       cy.vueRef('startContinueButtonEl').click();
+      cy.wait(500);
 
       cy.wrap(showError).should('not.be.called');
 
-      cy.vueRef('emailInputEl').should('not.be.visible');
       cy.vueRef('verificationCodeInputEl').should('be.visible');
     });
   })
 
   // it('should only allow 6 digits in the verification code field', () => {
+  //   const testEmail = 'test@lockdown.systems';
+  //   const showError = cy.stub();
+
+  //   cy.window().then((win) => {
+  //     (win as any).electron = {
+  //       getApiUrl: async (): Promise<string> => { return 'https://mock/api/v1' }
+  //     }
+  //   });
+
+  //   const serverApi = new ServerAPI();
+  //   serverApi.initialize().then(() => {
+  //     mount(LoginView, {
+  //       global: {
+  //         plugins: [(app) => {
+  //           app.provide('serverApi', ref(serverApi));
+  //           app.provide('userEmail', ref(testEmail));
+  //           app.provide('showError', showError);
+  //         }]
+  //       }
+  //     });
+
+  //     // Click through to the verification code page
+  //     cy.intercept('POST', 'https://mock/api/v1/authenticate', {
+  //       statusCode: 200,
+  //       body: {
+  //         message: 'Verification code sent to email'
+  //       }
+  //     });
+
+  //     cy.vueRef('startContinueButtonEl').click();
+  //     cy.wrap(showError).should('not.be.called');
+
+  //     cy.vueRef('verificationCodeInputEl').should('be.visible');
+
+  //     // Try typing more than 6 digits
+  //     cy.vueRef('verificationCodeInputEl').type('1234567');
+  //     cy.vueRef('verificationCodeInputEl').should('have.value', '123456');
+  //     cy.vueRef('verificationContinueButtonEl').should('be.enabled');
+
+  //     // Clear the field
+  //     cy.vueRef('verificationCodeInputEl').clear();
+  //     cy.vueRef('verificationCodeInputEl').should('have.value', '');
+  //     cy.vueRef('verificationContinueButtonEl').should('be.disabled');
+
+  //     // Type 3 digits
+  //     cy.vueRef('verificationCodeInputEl').type('123');
+  //     cy.vueRef('verificationContinueButtonEl').should('be.disabled');
+
+  //     // Try typing letters
+  //     cy.vueRef('verificationCodeInputEl').type('abc');
+  //     cy.vueRef('verificationCodeInputEl').should('have.value', '123');
+  //   });
+  // })
 
   // it('should show an error on wrong verification code guess but let you keep guessing', () => {
 
diff --git a/packages/renderer/src/views/LoginView.vue b/packages/renderer/src/views/LoginView.vue
index 02692372..73a29f19 100644
--- a/packages/renderer/src/views/LoginView.vue
+++ b/packages/renderer/src/views/LoginView.vue
@@ -19,6 +19,9 @@ const loginState = ref<LoginState>('start');
 
 const emailInputEl = ref<HTMLInputElement | null>(null);
 const startContinueButtonEl = ref<HTMLButtonElement | null>(null);
+const verificationCodeInputEl = ref<HTMLInputElement | null>(null);
+const verificationContinueButtonEl = ref<HTMLButtonElement | null>(null);
+const backButtonEl = ref<HTMLButtonElement | null>(null);
 
 function disableStartFields() {
     emailInputEl.value?.setAttribute("disabled", "true");
@@ -127,12 +130,15 @@ async function goBack() {
                             <div>
                                 <p>We've emailed you a verification code. Enter it below.</p>
                                 <div class="verification-code-container">
-                                    <input type="text" class="form-control verification-code" id="verificationCode"
+                                    <input type="text" class="form-control verification-code"
+                                        rel="verificationCodeInputEl" data-vue-ref="verificationCodeInputEl"
                                         v-model="verificationCode" maxlength="6">
                                 </div>
                                 <div class="button-container mt-2">
-                                    <button type="submit" class="btn btn-secondary" @click="goBack">Back</button>
-                                    <button type="submit" class="btn btn-primary"
+                                    <button type="submit" class="btn btn-secondary" rel="backButtonEl"
+                                        data-vue-ref="backButtonEl" @click="goBack">Back</button>
+                                    <button type="submit" class="btn btn-primary" rel="verificationContinueButtonEl"
+                                        data-vue-ref="verificationContinueButtonEl"
                                         @click="registerDevice">Continue</button>
                                 </div>
                             </div>

From f1babfa84bfe77d56ef0e774903b8a2475e0c089 Mon Sep 17 00:00:00 2001
From: Micah Lee <micah@micahflee.com>
Date: Fri, 7 Jun 2024 12:03:25 -0700
Subject: [PATCH 5/8] Stop using router.push and instead provide/inject for
 navigating, so that it is testable

---
 package-lock.json                             |  20 +-
 package.json                                  |   2 +-
 packages/renderer/cypress/support/commands.js |  26 ---
 packages/renderer/cypress/support/index.d.ts  |  16 +-
 packages/renderer/src/App.vue                 |   6 +
 .../src/components/ErrorMessage.cy.ts         |   3 +-
 packages/renderer/src/views/LoginView.cy.ts   | 175 ++++++++++++------
 packages/renderer/src/views/LoginView.vue     |  30 +--
 8 files changed, 162 insertions(+), 116 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 692d8893..20ac5e97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1484,16 +1484,6 @@
         }
       }
     },
-    "node_modules/@vue/language-core/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
     "node_modules/@vue/language-core/node_modules/minimatch": {
       "version": "9.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
@@ -1846,6 +1836,16 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "node_modules/braces": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
diff --git a/package.json b/package.json
index 9f6f0b1a..e4fdbea0 100644
--- a/package.json
+++ b/package.json
@@ -42,4 +42,4 @@
     "vitest": "^1.6.0",
     "vue-tsc": "^2.0.6"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/renderer/cypress/support/commands.js b/packages/renderer/cypress/support/commands.js
index 13c20a36..b7ec4993 100644
--- a/packages/renderer/cypress/support/commands.js
+++ b/packages/renderer/cypress/support/commands.js
@@ -1,29 +1,3 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-
 Cypress.Commands.add('vueRef', (refName) => {
     cy.get(`[data-vue-ref="${refName}"]`);
 });
\ No newline at end of file
diff --git a/packages/renderer/cypress/support/index.d.ts b/packages/renderer/cypress/support/index.d.ts
index be2cacbb..c2ef66df 100644
--- a/packages/renderer/cypress/support/index.d.ts
+++ b/packages/renderer/cypress/support/index.d.ts
@@ -1,7 +1,15 @@
 /// <reference types="cypress" />
 
-declare namespace Cypress {
-    interface Chainable<Subject> {
-        vueRef: (refName: string) => Chainable<JQuery<HTMLElement>>;
+import { mount } from 'cypress/vue'
+
+type MountParams = Parameters<typeof mount>
+type OptionsParam = MountParams[1]
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            mount: typeof mount;
+            vueRef: (refName: string) => Chainable<JQuery<HTMLElement>>;
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/packages/renderer/src/App.vue b/packages/renderer/src/App.vue
index 573ba17d..382e4e29 100644
--- a/packages/renderer/src/App.vue
+++ b/packages/renderer/src/App.vue
@@ -46,6 +46,12 @@ const showError = (message: string) => {
 };
 provide('showError', showError);
 
+// Navigation
+const navigate = (path: string) => {
+  router.push(path);
+};
+provide('navigate', navigate);
+
 onMounted(async () => {
   await serverApi.value.initialize();
   await refreshDeviceInfo();
diff --git a/packages/renderer/src/components/ErrorMessage.cy.ts b/packages/renderer/src/components/ErrorMessage.cy.ts
index fe0b61f6..f1dec3b2 100644
--- a/packages/renderer/src/components/ErrorMessage.cy.ts
+++ b/packages/renderer/src/components/ErrorMessage.cy.ts
@@ -1,11 +1,10 @@
-import { mount } from '@cypress/vue';
 import ErrorMessage from './ErrorMessage.vue'
 
 describe('<ErrorMessage />', () => {
   const message = 'Test error message';
 
   beforeEach(() => {
-    mount(ErrorMessage, {
+    cy.mount(ErrorMessage, {
       propsData: {
         message: message
       }
diff --git a/packages/renderer/src/views/LoginView.cy.ts b/packages/renderer/src/views/LoginView.cy.ts
index c727500e..9da4a30e 100644
--- a/packages/renderer/src/views/LoginView.cy.ts
+++ b/packages/renderer/src/views/LoginView.cy.ts
@@ -1,12 +1,11 @@
 import { ref } from 'vue';
-import { mount } from '@cypress/vue';
 
 import LoginView from './LoginView.vue'
 import ServerAPI from '../ServerAPI';
 
 describe('<LoginView />', () => {
   it('starts with the email field visible and the value blank', () => {
-    mount(LoginView);
+    cy.mount(LoginView);
 
     cy.vueRef('emailInputEl').should('be.visible');
     cy.vueRef('emailInputEl').should('have.value', '');
@@ -15,7 +14,7 @@ describe('<LoginView />', () => {
   it('prepopulates the email field if it is saved', () => {
     const testEmail = 'test@lockdown.systems';
 
-    mount(LoginView, {
+    cy.mount(LoginView, {
       global: {
         plugins: [(app) => {
           app.provide('userEmail', ref(testEmail));
@@ -30,7 +29,7 @@ describe('<LoginView />', () => {
   it('shows an error message if the email field is blank', () => {
     const showError = cy.stub();
 
-    mount(LoginView, {
+    cy.mount(LoginView, {
       global: {
         plugins: [(app) => {
           app.provide('userEmail', '');
@@ -49,7 +48,7 @@ describe('<LoginView />', () => {
     const testEmail = 'test@lockdown.systems';
     const showError = cy.stub();
 
-    mount(LoginView, {
+    cy.mount(LoginView, {
       global: {
         plugins: [(app) => {
           app.provide('serverApi', ref(new ServerAPI()));
@@ -80,7 +79,7 @@ describe('<LoginView />', () => {
       const serverApi = new ServerAPI();
       await serverApi.initialize();
 
-      mount(LoginView, {
+      cy.mount(LoginView, {
         global: {
           plugins: [(app) => {
             app.provide('serverApi', ref(serverApi));
@@ -109,60 +108,116 @@ describe('<LoginView />', () => {
     });
   })
 
-  // it('should only allow 6 digits in the verification code field', () => {
-  //   const testEmail = 'test@lockdown.systems';
-  //   const showError = cy.stub();
-
-  //   cy.window().then((win) => {
-  //     (win as any).electron = {
-  //       getApiUrl: async (): Promise<string> => { return 'https://mock/api/v1' }
-  //     }
-  //   });
-
-  //   const serverApi = new ServerAPI();
-  //   serverApi.initialize().then(() => {
-  //     mount(LoginView, {
-  //       global: {
-  //         plugins: [(app) => {
-  //           app.provide('serverApi', ref(serverApi));
-  //           app.provide('userEmail', ref(testEmail));
-  //           app.provide('showError', showError);
-  //         }]
-  //       }
-  //     });
-
-  //     // Click through to the verification code page
-  //     cy.intercept('POST', 'https://mock/api/v1/authenticate', {
-  //       statusCode: 200,
-  //       body: {
-  //         message: 'Verification code sent to email'
-  //       }
-  //     });
-
-  //     cy.vueRef('startContinueButtonEl').click();
-  //     cy.wrap(showError).should('not.be.called');
-
-  //     cy.vueRef('verificationCodeInputEl').should('be.visible');
-
-  //     // Try typing more than 6 digits
-  //     cy.vueRef('verificationCodeInputEl').type('1234567');
-  //     cy.vueRef('verificationCodeInputEl').should('have.value', '123456');
-  //     cy.vueRef('verificationContinueButtonEl').should('be.enabled');
-
-  //     // Clear the field
-  //     cy.vueRef('verificationCodeInputEl').clear();
-  //     cy.vueRef('verificationCodeInputEl').should('have.value', '');
-  //     cy.vueRef('verificationContinueButtonEl').should('be.disabled');
-
-  //     // Type 3 digits
-  //     cy.vueRef('verificationCodeInputEl').type('123');
-  //     cy.vueRef('verificationContinueButtonEl').should('be.disabled');
-
-  //     // Try typing letters
-  //     cy.vueRef('verificationCodeInputEl').type('abc');
-  //     cy.vueRef('verificationCodeInputEl').should('have.value', '123');
-  //   });
-  // })
+  it('should only allow digits in the verification code field', () => {
+    const testEmail = 'test@lockdown.systems';
+    const showError = cy.stub();
+
+    cy.window().then(async (win) => {
+      (win as any).electron = {
+        getApiUrl: async (): Promise<string> => { return 'https://mock/api/v1' },
+        setConfig: async (_key: string, _value: string): Promise<void> => { return },
+      }
+
+      const serverApi = new ServerAPI();
+      await serverApi.initialize();
+
+      cy.mount(LoginView, {
+        global: {
+          plugins: [(app) => {
+            app.provide('serverApi', ref(serverApi));
+            app.provide('userEmail', ref(testEmail));
+            app.provide('showError', showError);
+          }]
+        }
+      });
+
+      // Click through to the verification code page
+      cy.intercept('POST', 'https://mock/api/v1/authenticate', {
+        statusCode: 200,
+        body: {
+          message: 'Verification code sent to email'
+        }
+      });
+
+      cy.vueRef('startContinueButtonEl').click();
+      cy.wrap(showError).should('not.be.called');
+
+      cy.vueRef('verificationCodeInputEl').should('be.visible');
+
+      // Clear the field
+      cy.vueRef('verificationCodeInputEl').clear();
+      cy.vueRef('verificationCodeInputEl').should('have.value', '');
+
+      // Type 3 digits
+      cy.vueRef('verificationCodeInputEl').type('123');
+
+      // Try typing letters
+      cy.vueRef('verificationCodeInputEl').type('abc');
+      cy.vueRef('verificationCodeInputEl').should('have.value', '123');
+    });
+  })
+
+  it('should auto-submit verification code after 6 digits', () => {
+    const testEmail = 'test@lockdown.systems';
+    const showError = cy.stub();
+    const navigate = cy.spy();
+
+    cy.window().then(async (win) => {
+      (win as any).electron = {
+        getApiUrl: async (): Promise<string> => { return 'https://mock/api/v1' },
+        setConfig: async (_key: string, _value: string): Promise<void> => { return },
+      }
+
+      const serverApi = new ServerAPI();
+      await serverApi.initialize();
+
+      cy.mount(LoginView, {
+        global: {
+          plugins: [(app) => {
+            app.provide('serverApi', ref(serverApi));
+            app.provide('userEmail', ref(testEmail));
+            app.provide('showError', showError);
+            app.provide('navigate', navigate);
+            app.provide('deviceInfo', ref({
+              userEmail: testEmail,
+              deviceDescription: "test device",
+              deviceToken: "",
+              apiToken: "",
+              valid: false
+            }));
+            app.provide('refreshDeviceInfo', async () => { return });
+          }]
+        }
+      });
+
+      // Click through to the verification code page
+      cy.intercept('POST', 'https://mock/api/v1/authenticate', {
+        statusCode: 200,
+        body: {
+          message: 'Verification code sent to email'
+        }
+      });
+
+      cy.vueRef('startContinueButtonEl').click();
+      cy.wrap(showError).should('not.be.called');
+
+      cy.vueRef('verificationCodeInputEl').should('be.visible');
+
+      cy.intercept('POST', 'https://mock/api/v1/device', {
+        statusCode: 200,
+        body: {
+          deviceToken: 'this-is-a-device-token'
+        }
+      });
+      cy.intercept('GET', 'https://mock/api/v1/ping', {
+        statusCode: 200
+      });
+
+      // Type 6 digits, should auto-submit
+      cy.vueRef('verificationCodeInputEl').type('123456');
+      cy.wrap(navigate).should('be.calledWith', '/dashboard');
+    });
+  })
 
   // it('should show an error on wrong verification code guess but let you keep guessing', () => {
 
diff --git a/packages/renderer/src/views/LoginView.vue b/packages/renderer/src/views/LoginView.vue
index 73a29f19..1361d8e3 100644
--- a/packages/renderer/src/views/LoginView.vue
+++ b/packages/renderer/src/views/LoginView.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import { ref, inject, Ref } from 'vue';
-import { useRouter } from 'vue-router'
-
+import { ref, inject, Ref, watch } from 'vue';
 import ServerAPI from '../ServerAPI';
 
-const router = useRouter();
-
 const showError = inject('showError') as (message: string) => void;
+const navigate = inject('navigate') as (path: string) => void;
 const userEmail = inject('userEmail') as Ref<string>;
 const serverApi = inject('serverApi') as Ref<ServerAPI>;
 const deviceInfo = inject('deviceInfo') as Ref<DeviceInfo | null>;
@@ -20,8 +17,17 @@ const loginState = ref<LoginState>('start');
 const emailInputEl = ref<HTMLInputElement | null>(null);
 const startContinueButtonEl = ref<HTMLButtonElement | null>(null);
 const verificationCodeInputEl = ref<HTMLInputElement | null>(null);
-const verificationContinueButtonEl = ref<HTMLButtonElement | null>(null);
-const backButtonEl = ref<HTMLButtonElement | null>(null);
+
+watch(verificationCode, async (newValue, _oldValue) => {
+    if (newValue.length < 6) {
+        // Strip non-numeric characters
+        verificationCode.value = newValue.replace(/[^0-9]/g, '');
+    }
+    // Auto-submit on 6 digits
+    if (newValue.length === 6) {
+        await registerDevice();
+    }
+});
 
 function disableStartFields() {
     emailInputEl.value?.setAttribute("disabled", "true");
@@ -72,8 +78,9 @@ async function registerDevice() {
         description: deviceInfo.value?.deviceDescription,
     });
     if ("error" in registerDeviceResp) {
-        showError('Failed to register device. Please try again later.');
-        await goBack();
+        verificationCode.value = '';
+        verificationCodeInputEl.value?.focus();
+        showError('Invalid verification code.');
         return;
     }
     if (!registerDeviceResp.deviceToken) {
@@ -95,7 +102,7 @@ async function registerDevice() {
     await refreshDeviceInfo();
 
     // Redirect to the dashboard
-    router.push('/dashboard');
+    navigate('/dashboard');
 }
 
 async function goBack() {
@@ -137,9 +144,6 @@ async function goBack() {
                                 <div class="button-container mt-2">
                                     <button type="submit" class="btn btn-secondary" rel="backButtonEl"
                                         data-vue-ref="backButtonEl" @click="goBack">Back</button>
-                                    <button type="submit" class="btn btn-primary" rel="verificationContinueButtonEl"
-                                        data-vue-ref="verificationContinueButtonEl"
-                                        @click="registerDevice">Continue</button>
                                 </div>
                             </div>
                         </template>

From 1ba4368e6250124c3eae442ae9c313e852eacfc2 Mon Sep 17 00:00:00 2001
From: Micah Lee <micah@micahflee.com>
Date: Sun, 9 Jun 2024 13:58:10 -0700
Subject: [PATCH 6/8] Finish LoginView tests

---
 packages/renderer/src/App.vue               |   2 +-
 packages/renderer/src/ServerAPI.ts          |   2 +-
 packages/renderer/src/helpers.ts            |   3 +
 packages/renderer/src/views/LoginView.cy.ts | 107 +++++++++++++++++++-
 4 files changed, 108 insertions(+), 6 deletions(-)

diff --git a/packages/renderer/src/App.vue b/packages/renderer/src/App.vue
index 382e4e29..0b610833 100644
--- a/packages/renderer/src/App.vue
+++ b/packages/renderer/src/App.vue
@@ -27,7 +27,7 @@ const refreshDeviceInfo = async () => {
       serverApi.value.setDeviceToken(deviceInfo.value.deviceToken);
     }
   } catch {
-    showError("Failed to get device info. Please try again later.");
+    showError("Failed to get saved device info.");
   }
 };
 provide('refreshDeviceInfo', refreshDeviceInfo);
diff --git a/packages/renderer/src/ServerAPI.ts b/packages/renderer/src/ServerAPI.ts
index 2a9f1f68..0efad446 100644
--- a/packages/renderer/src/ServerAPI.ts
+++ b/packages/renderer/src/ServerAPI.ts
@@ -95,7 +95,7 @@ export default class ServerAPI {
         if (typeof this.apiToken === 'string') {
             return true;
         }
-        return this.getNewApiToken();
+        return await this.getNewApiToken();
     }
 
     // Auth API (not authenticated)
diff --git a/packages/renderer/src/helpers.ts b/packages/renderer/src/helpers.ts
index 1dce999c..919c5e03 100644
--- a/packages/renderer/src/helpers.ts
+++ b/packages/renderer/src/helpers.ts
@@ -29,6 +29,9 @@ export async function getDeviceInfo(): Promise<DeviceInfo> {
         const deviceToken = await (window as any).electron.getConfig("deviceToken");
         if (deviceToken && deviceToken.length > 0) {
             deviceInfo["deviceToken"] = deviceToken;
+
+            serverApi.setUserEmail(userEmail);
+            serverApi.setDeviceToken(deviceToken);
             const pingResp = await serverApi.ping();
             if (pingResp) {
                 deviceInfo["valid"] = true;
diff --git a/packages/renderer/src/views/LoginView.cy.ts b/packages/renderer/src/views/LoginView.cy.ts
index 9da4a30e..a7d80028 100644
--- a/packages/renderer/src/views/LoginView.cy.ts
+++ b/packages/renderer/src/views/LoginView.cy.ts
@@ -219,11 +219,110 @@ describe('<LoginView />', () => {
     });
   })
 
-  // it('should show an error on wrong verification code guess but let you keep guessing', () => {
+  it('should show an error on wrong verification code guess but let you keep guessing', () => {
+    const testEmail = 'test@lockdown.systems';
+    const showError = cy.stub();
 
-  // it('verification code back button should go back to start', () => {
+    cy.window().then(async (win) => {
+      (win as any).electron = {
+        getApiUrl: async (): Promise<string> => { return 'https://mock/api/v1' },
+        setConfig: async (_key: string, _value: string): Promise<void> => { return },
+      }
 
-  // it('should redirect to dashboard on successful verification code', () => {
+      const serverApi = new ServerAPI();
+      await serverApi.initialize();
 
-  // it('should automatically redirect to dashboard when a device is saved', () => {
+      cy.mount(LoginView, {
+        global: {
+          plugins: [(app) => {
+            app.provide('serverApi', ref(serverApi));
+            app.provide('userEmail', ref(testEmail));
+            app.provide('showError', showError);
+            app.provide('deviceInfo', ref({
+              userEmail: testEmail,
+              deviceDescription: "test device",
+              deviceToken: "",
+              apiToken: "",
+              valid: false
+            }));
+            app.provide('refreshDeviceInfo', async () => { return });
+          }]
+        }
+      });
+
+      // Click through to the verification code page
+      cy.intercept('POST', 'https://mock/api/v1/authenticate', {
+        statusCode: 200,
+        body: {
+          message: 'Verification code sent to email'
+        }
+      });
+
+      cy.vueRef('startContinueButtonEl').click();
+      cy.wrap(showError).should('not.be.called');
+
+      cy.vueRef('verificationCodeInputEl').should('be.visible');
+
+      cy.intercept('POST', 'https://mock/api/v1/device', {
+        statusCode: 401,
+        body: {
+          message: 'Authentication failed'
+        }
+      });
+
+      // Type 6 digits, should auto-submit
+      cy.vueRef('verificationCodeInputEl').type('123456');
+
+      // Error should be shown
+      cy.wrap(showError).should('be.calledWith', 'Invalid verification code.');
+
+      // Expect the field to be cleared
+      cy.vueRef('verificationCodeInputEl').should('have.value', '');
+    });
+  })
+
+  it('verification code back button should go back to start', () => {
+    const testEmail = 'test@lockdown.systems';
+    const showError = cy.stub();
+
+    cy.window().then(async (win) => {
+      (win as any).electron = {
+        getApiUrl: async (): Promise<string> => { return 'https://mock/api/v1' },
+        setConfig: async (_key: string, _value: string): Promise<void> => { return },
+      }
+
+      const serverApi = new ServerAPI();
+      await serverApi.initialize();
+
+      cy.mount(LoginView, {
+        global: {
+          plugins: [(app) => {
+            app.provide('serverApi', ref(serverApi));
+            app.provide('userEmail', ref(testEmail));
+            app.provide('showError', showError);
+          }]
+        }
+      });
+
+      // Click through to the verification code page
+      cy.intercept('POST', 'https://mock/api/v1/authenticate', {
+        statusCode: 200,
+        body: {
+          message: 'Verification code sent to email'
+        }
+      });
+
+      cy.vueRef('startContinueButtonEl').click();
+      cy.wrap(showError).should('not.be.called');
+
+      cy.vueRef('verificationCodeInputEl').should('be.visible');
+
+      // Click back
+      cy.vueRef('backButtonEl').click();
+
+      // Should be back to start
+      cy.vueRef('emailInputEl').should('be.visible');
+      cy.wrap(showError).should('not.be.called');
+    });
+  })
 });
\ No newline at end of file

From 8b0d6c4ae9d5ce12638d2f218edfbc1e888f3254 Mon Sep 17 00:00:00 2001
From: Micah Lee <micah@micahflee.com>
Date: Sun, 9 Jun 2024 14:05:27 -0700
Subject: [PATCH 7/8] Fix logging in and logging out without errors

---
 packages/renderer/src/components/Header.vue | 4 ++++
 packages/renderer/src/views/LoginView.vue   | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/renderer/src/components/Header.vue b/packages/renderer/src/components/Header.vue
index 11476c72..27a7bd8e 100644
--- a/packages/renderer/src/components/Header.vue
+++ b/packages/renderer/src/components/Header.vue
@@ -10,6 +10,7 @@ const showError = inject('showError') as (message: string) => void;
 const userEmail = inject('userEmail') as Ref<string>;
 const serverApi = inject('serverApi') as Ref<ServerAPI>;
 const deviceInfo = inject('deviceInfo') as Ref<DeviceInfo | null>;
+const refreshDeviceInfo = inject('refreshDeviceInfo') as () => Promise<void>;
 
 const signOut = async () => {
     if (deviceInfo.value === null) {
@@ -35,6 +36,9 @@ const signOut = async () => {
     await (window as any).electron.setConfig("apiToken", "");
     await (window as any).electron.setConfig("deviceToken", "");
 
+    // Refresh the device info
+    await refreshDeviceInfo();
+
     // Redirect to the login page
     router.push('/');
 };
diff --git a/packages/renderer/src/views/LoginView.vue b/packages/renderer/src/views/LoginView.vue
index 1361d8e3..90e247c1 100644
--- a/packages/renderer/src/views/LoginView.vue
+++ b/packages/renderer/src/views/LoginView.vue
@@ -91,8 +91,9 @@ async function registerDevice() {
 
     // Save the device token
     await (window as any).electron.setConfig("deviceToken", registerDeviceResp.deviceToken);
+    serverApi.value.setDeviceToken(registerDeviceResp.deviceToken);
 
-    // Get a new API
+    // Get a new API token
     const pingResp = await serverApi.value.ping();
     if (!pingResp) {
         showError('Failed to register new device. Please try again later.');

From d82e59b97b9b5baeb62e451c47351f5d8b8772ea Mon Sep 17 00:00:00 2001
From: Micah Lee <micah@micahflee.com>
Date: Sun, 9 Jun 2024 14:14:33 -0700
Subject: [PATCH 8/8] Add some simple Header.vue tests

---
 packages/renderer/src/components/Header.cy.ts | 31 +++++++++++++++++++
 packages/renderer/src/components/Header.vue   |  3 +-
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 packages/renderer/src/components/Header.cy.ts

diff --git a/packages/renderer/src/components/Header.cy.ts b/packages/renderer/src/components/Header.cy.ts
new file mode 100644
index 00000000..e93f82f5
--- /dev/null
+++ b/packages/renderer/src/components/Header.cy.ts
@@ -0,0 +1,31 @@
+import { ref } from 'vue';
+
+import Header from './Header.vue'
+
+describe('<Header />', () => {
+  it('should be hidden without userEmail and valid deviceInfo', () => {
+    cy.mount(Header);
+    cy.vueRef('header').should('not.exist');
+  })
+
+  it('should be shown with userEmail and valid deviceInfo', () => {
+    const testEmail = 'test@lockdown.systems';
+
+    cy.mount(Header, {
+      global: {
+        plugins: [(app) => {
+          app.provide('userEmail', ref(testEmail));
+          app.provide('deviceInfo', {
+            userEmail: testEmail,
+            deviceDescription: "test device",
+            deviceToken: "blah blah blah",
+            apiToken: "bleh bleh bleh",
+            valid: true
+          });
+        }]
+      }
+    });
+
+    cy.vueRef('header').should('be.visible');
+  })
+})
\ No newline at end of file
diff --git a/packages/renderer/src/components/Header.vue b/packages/renderer/src/components/Header.vue
index 27a7bd8e..7c5e3e18 100644
--- a/packages/renderer/src/components/Header.vue
+++ b/packages/renderer/src/components/Header.vue
@@ -46,7 +46,8 @@ const signOut = async () => {
 
 <template>
     <template v-if="userEmail != '' && deviceInfo?.valid">
-        <header class="d-flex flex-column flex-md-row justify-content-between align-items-center p-2 bg-light">
+        <header class="d-flex flex-column flex-md-row justify-content-between align-items-center p-2 bg-light"
+            data-vue-ref="header">
             <div class="d-flex align-items-center mb-2 mb-md-0">
                 <img class="logo mr-2" src="/logo.png" alt="Semiphemeral Logo">
                 <h1 class="h4 mb-0">Semiphemeral</h1>