Finish implementing and testing the login flow

package.json

@@ -42,4 +42,4 @@
     "vitest": "^1.6.0",
     "vue-tsc": "^2.0.6"
   }
-}
+}

packages/renderer/cypress/support/commands.js

@@ -1,25 +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}"]`);
+});

packages/renderer/cypress/support/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+
+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>>;
+        }
+    }
+}

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);
@@ -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();

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)

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
       }

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({

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 = '[email protected]';
+
+    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');
+  })
+})

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,14 +36,18 @@ 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('/');
 };
 </script>
 
 <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>

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;