work on making endpoint user-settable

cesmii · Nov 27, 2024 · f452b52 · f452b52
1 parent c241023
commit f452b52
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/frontend/lib/auth.ts b/frontend/lib/auth.ts
@@ -1,3 +1,4 @@
+import { ApolloClient, InMemoryCache } from "@apollo/client/core/index.js";
 import { jwtDecode } from "jwt-decode";
 import { z } from "zod";
 
@@ -13,6 +14,7 @@ export type OnLoginFn = (token: string | undefined) => Promise<void>;
 
 
 export interface AuthenticatorLoginInput {
+  endpoint: string;
   authenticator: string;
   role: string;
   username: string;
@@ -27,7 +29,12 @@ export interface AuthenticatorLoginInput {
 export async function loginWithAuthenticator(
   data: AuthenticatorLoginInput,
 ): Promise<void> {
-  const { client } = useApolloClient("noauth");
+  const client = new ApolloClient({
+    uri: data.endpoint,
+    cache: new InMemoryCache(),
+  });
+
+  // define onLogin as a reference to the useApollo composable https://apollo.nuxtjs.org/getting-started/composables
   const { onLogin } = useApollo();
 
   const authenticationRes = await client.mutate({
@@ -73,12 +80,11 @@ export async function loginWithAuthenticator(
   if(!jwt) {
     throw new AuthenticationError("Received empty JWT claim from authentication verification mutation");
   }
-
+  // This applies the jwt to the Apollo client, but the client has a hardcoded endpoint :-(
   return onLogin(jwt);
 }
 
 
-
 const GraphQLUserSchema = z.object({
   authenticator: z.string(),
   role: z.string(),

diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
@@ -7,6 +7,7 @@ definePageMeta({
   title: "Login",
 });
 
+const endpoint = ref<string>();
 const authenticator = ref<string>();
 const role = ref<string>();
 const username = ref<string>();
@@ -31,6 +32,7 @@ async function onSubmit() {
   loading.value = true;
   try {
     await loginWithAuthenticator({
+      endpoint: endpoint.value!,
       authenticator: authenticator.value!,
       role: role.value!,
       username: username.value!,
@@ -54,6 +56,15 @@ async function onSubmit() {
         <v-form v-model="formValid" @submit.prevent="onSubmit">
           <v-card :loading="loading">
             <v-card-text>
+              <v-text-field
+                id="endpoint"
+                v-model="endpoint"
+                label="Endpoint"
+                name="endpoint"
+                placeholder="https://"
+                hint="The URL to the GraphQL endpoint on your SMIP instance"
+                :rules="[required]"
+              />
               <v-text-field
                 id="authenticator"
                 v-model="authenticator"
@@ -86,6 +97,7 @@ async function onSubmit() {
                 label="Password"
                 name="Password"
                 type="password"
+                hint="The authenticator's password"
                 :rules="[required]"
               />
               <v-alert