Improve Session / Auth, APICall

client/src/App.vue

@@ -36,24 +36,37 @@ async function tryLogin() {
 }
 
 async function tryLogout() {
-  logout();
+  console.info("Logging out...");
   authState = AuthState.Unauthenticated;
+  logout();
 }
 
-function deAuthenticatedCallback() {
+function UnauthorizedCallback() {
   console.info("Unauthenticated");
   authState = AuthState.Unauthenticated;
 }
 
-onMounted(async() => {
-  setup(deAuthenticatedCallback);
+async function checkAuth() {
+  console.info("Checking Auth State...");
   let res = await checkAuthentication();
   authState = res.auth;
   loginDisabled = false;
   if (authState === AuthState.Authenticated) {
     console.info("Already Authenticated ", authState);
+  } else if (res.error == null) {
+    console.info("Unauthorized");
   }
   else console.info("Check Authentication error",res.error);
+}
+
+onMounted(async() => {
+  setup(UnauthorizedCallback);
+  await checkAuth();
+  setInterval(function () {
+    if (authState === AuthState.Authenticated) {
+      checkAuth();
+    }
+  }.bind(this), 120000);
 });
 
 </script>
@@ -97,11 +110,11 @@ onMounted(async() => {
       <FocusTrap>
         <form @submit="$event => $event.preventDefault()" :disabled="loginDisabled">
           <h1>nfSense Login</h1>
-          <label for="username" v-text="'Username'"/>
-          <input name="username" v-model="username"/>
-          <label for="password" v-text="'Password'" type="password"/>
-          <input name="password" v-model="password"/>
-
+          <h2 :hidden="!loginDisabled">Logging in...</h2>
+          <label for="username" v-text="'Username'" :hidden="loginDisabled" />
+          <input name="username" v-model="username" :hidden="loginDisabled" :disabled="loginDisabled"/>
+          <label for="password" v-text="'Password'" type="password" :hidden="loginDisabled"/>
+          <input name="password" v-model="password" :hidden="loginDisabled" :disabled="loginDisabled"/>
           <button @click="tryLogin">Login</button>
         </form>
       </FocusTrap>

client/src/api.ts

@@ -5,19 +5,24 @@ const httpTransport = new HTTPTransport("http://"+ window.location.host +"/api")
 const manager = new RequestManager([httpTransport], () => crypto.randomUUID());
 const client = new Client(manager);
 
-let deAuthenticatedCallback;
+let UnauthorizedCallback: Function;
 
-export function setup(_deAuthenticatedCallback: () => void) {
-  deAuthenticatedCallback = _deAuthenticatedCallback;
+export function setup(_UnauthorizedCallback: () => void) {
+  UnauthorizedCallback = _UnauthorizedCallback;
 }
 
 export async function apiCall(method: string, params: Record<string, any>): Promise<any>{
+  console.debug("Starting API Call...");
   try {
     const result = await client.request({method, params});
     console.debug("api call result", result);
     return { Data: result, Error: null};
   } catch (ex){
-    console.debug("api call epic fail", ex);
+    if (ex == "Error: Unauthorized") {
+      UnauthorizedCallback();
+    } else {
+      console.debug("api call epic fail", ex);
+    }
     return { Data: null, Error: ex};
   }
 }
@@ -57,7 +62,10 @@ export async function checkAuthentication() {
       }
     } else window.localStorage.setItem("commit_hash", response.data.commit_hash);
     return {auth: 2, error: null};
-  } catch (error) {
+  } catch (error: any) {
+    if (error.response.status == 401) {
+      return {auth: 0, error: null};
+    }
     return {auth: 0, error: error};
   }
 }