don't use JQuery for Doomsday JS client

doomsday-project · Oct 23, 2020 · 023c430 · 023c430
1 parent 23d9377
commit 023c430
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 56 deletions.
diff --git a/web/ts/client.ts b/web/ts/client.ts
@@ -11,74 +11,80 @@ enum AuthMethod { NONE, USERPASS };
  * Contains error information returned from an HTTP API call
  */
 class APIError {
-	readonly error: string;
-	readonly code: number;
+  readonly error: string;
+  readonly code: number;
 
-	constructor(readonly errorMessage: string, readonly returnCode: number) {
-		this.error = errorMessage;
-		this.code = returnCode;
-	}
+  constructor(readonly errorMessage: string, readonly returnCode: number) {
+    this.error = errorMessage;
+    this.code = returnCode;
+  }
 }
 
 /**
  * An HTTP Client to the Doomsday API
  */
 class Doomsday {
-	private doRequest(method: string, path: string, data?: object): JQuery.Promise<any> {
-		return $.ajax({
-			method: method,
-			url: path,
-			dataType: "json",
-			data: (data ? JSON.stringify(data) : undefined)
-		}).promise();
-	}
+  private doRequest(method: string, path: string, data?: object): Promise<any> {
+    return fetch(path, {
+      method:      method,
+      credentials: "same-origin",
+      headers:     {
+        "Content-Type": "application/json"
+      },
+      body: data ? JSON.stringify(data) : undefined,
+    })
+    .catch(
+      () => { throw new APIError("Unexpected fetch error", 0) },
+    )
+    .then(
+      resp => { 
+        if (resp.ok) { return resp.json(); }
+        throw new APIError(resp.statusText, resp.status);
+      }
+    ).catch(
+      e => {
+        if (e instanceof APIError) { throw e; }
+        throw new APIError("JSON parsing failed", 0);
+      }
+    );
+  }
 
-	private handleFailure(jqXHR: JQuery.jqXHR<any>, textStatus: string): never {
-		throw new APIError(textStatus, jqXHR.status);
-	}
+  fetchAuthType(): Promise<AuthMethod> {
+    return this.doRequest("GET", "/v1/info")
+      .then(
+        data => (data.auth_type == "Userpass" ? AuthMethod.USERPASS : AuthMethod.NONE)
+      );
+  }
 
-	fetchAuthType(): Promise<AuthMethod> {
-		return this.doRequest("GET", "/v1/info")
-			.then(
-				data => (data.auth_type == "Userpass" ? AuthMethod.USERPASS : AuthMethod.NONE),
-				this.handleFailure
-			);
-	}
+  authUser(username: string, password: string): Promise<void> {
+    return this.doRequest("POST", "/v1/auth", {
+      username: username,
+      password: password
+    });
+  }
 
-	authUser(username: string, password: string): Promise<void> {
-		return this.doRequest("POST", "/v1/auth", {
-			username: username,
-			password: password
-		})
-			.then(
-				() => { },
-				this.handleFailure
-			);
-	}
-
-	fetchCerts(): Promise<Array<Certificate>> {
-		return this.doRequest("GET", "/v1/cache")
-			.then(data => {
-				let ret: Array<Certificate> = [];
-				for (let cert of data.content) {
-					ret.push(($.extend(new Certificate(), cert) as Certificate))
-				}
-				return ret;
-			},
-				this.handleFailure);
-	}
+  fetchCerts(): Promise<Array<Certificate>> {
+    return this.doRequest("GET", "/v1/cache")
+      .then(data => {
+        let ret: Array<Certificate> = [];
+        for (let cert of data.content) {
+          ret.push(($.extend(new Certificate(), cert) as Certificate))
+        }
+        return ret;
+      });
+  }
 }
 
 class Certificate {
-	common_name: string;
-	not_after: number;
-	paths: Array<CertificateStoragePath>;
+  common_name: string;
+  not_after: number;
+  paths: Array<CertificateStoragePath>;
 
-	get commonName(): string { return this.common_name; }
-	get notAfter(): number { return this.not_after; }
+  get commonName(): string { return this.common_name; }
+  get notAfter(): number { return this.not_after; }
 }
 
 class CertificateStoragePath {
-	backend: string;
-	location: string;
+  backend: string;
+  location: string;
 }
diff --git a/web/ts/main.ts b/web/ts/main.ts
@@ -44,7 +44,9 @@ $(document).ready(function () {
 				pager.display(new DashboardPage());
 			}
 		})
-		.catch(() => { console.log("Something went wrong!"); });
+		.catch((e: APIError) => {
+			console.log(`Something went wrong: ${e.errorMessage}`);
+		});
 });
 
 const FRAMERATE = 42;

diff --git a/web/ts/pages/certs.ts b/web/ts/pages/certs.ts
@@ -35,11 +35,12 @@ class DashboardPage extends PageBase {
         this.certUpdateID = setTimeout(this.updateCertList.bind(this), 60 * 1000);
       })
       .catch(e => {
-        if (e.error == "error" && e.code == 401) {
+        if (e.code == 401) {
           deleteCookie('doomsday-token');
           this.ctx.pager.display(new LoginPage("Your session has expired"));
         } else {
           this.ctx.pager.display(new LoginPage("Something went wrong!"));
+          console.log(`Something went wrong: ${e.errorMessage}`);
         }
       });
   }

diff --git a/web/ts/pages/login.ts b/web/ts/pages/login.ts
@@ -43,11 +43,12 @@ class LoginPage extends PageBase {
           self.ctx.pager.display(new DashboardPage());
         })
         .catch(e => {
-          if (e.error == "error" && e.code == 401) {
+          if (e.code == 401) {
             self.ctx.pager.display(new LoginPage("The username and password did not match"));
           }
           else {
             self.ctx.pager.display(new LoginPage("Something went wrong!"));
+            console.log(`Something went wrong: ${e.errorMessage}`);
           }
         });
       return false;