Fix stuff in converted views

frontend/src/App.vue

@@ -8,15 +8,12 @@
 import { onMounted } from "vue";
 
 onMounted(() => {
-  const loading = document.getElementById("loading");
-  if (loading !== null) {
-    loading.classList.add("done");
+  // we can safely assume non-nullity here
+  const loading = document.getElementById("loading")!;
+  loading.classList.add("done");
 
-    setTimeout(function () {
-      if (loading.parentNode !== null) {
-        loading.parentNode.removeChild(loading);
-      }
-    }, 200);
-  }
+  setTimeout(function () {
+    loading.parentNode!.removeChild(loading);
+  }, 200);
 });
 </script>

frontend/src/api/settings.ts

@@ -1,7 +1,7 @@
 import { fetchURL, fetchJSON } from "./utils";
 
 export function get() {
-  return fetchJSON(`/api/settings`, {});
+  return fetchJSON<ISettings>(`/api/settings`, {});
 }
 
 export async function update(settings: ISettings) {

frontend/src/api/share.ts

@@ -1,12 +1,12 @@
 import { fetchURL, fetchJSON, removePrefix, createURL } from "./utils";
 
 export async function list() {
-  return fetchJSON("/api/shares");
+  return fetchJSON<Share[]>("/api/shares");
 }
 
 export async function get(url: string) {
   url = removePrefix(url);
-  return fetchJSON(`/api/share${url}`);
+  return fetchJSON<Share>(`/api/share${url}`);
 }
 
 export async function remove(hash: string) {

frontend/src/api/users.ts

@@ -1,11 +1,11 @@
-import { fetchURL, fetchJSON } from "./utils";
+import { fetchURL, fetchJSON, StatusError } from "./utils";
 
 export async function getAll() {
-  return fetchJSON(`/api/users`, {});
+  return fetchJSON<IUser[]>(`/api/users`, {});
 }
 
 export async function get(id: number) {
-  return fetchJSON(`/api/users/${id}`, {});
+  return fetchJSON<IUser>(`/api/users/${id}`, {});
 }
 
 export async function create(user: IUser) {
@@ -21,6 +21,8 @@ export async function create(user: IUser) {
   if (res.status === 201) {
     return res.headers.get("Location");
   }
+
+  throw new StatusError(await res.text(), res.status);
 }
 
 export async function update(user: IUser, which = ["all"]) {

frontend/src/api/utils.ts

@@ -13,7 +13,11 @@ export class StatusError extends Error {
   }
 }
 
-export async function fetchURL(url: string, opts: ApiOpts, auth = true) {
+export async function fetchURL(
+  url: string,
+  opts: ApiOpts,
+  auth = true
+): Promise<Response> {
   const authStore = useAuthStore();
 
   opts = opts || {};
@@ -50,17 +54,17 @@ export async function fetchURL(url: string, opts: ApiOpts, auth = true) {
   return res;
 }
 
-export async function fetchJSON(url: string, opts?: any) {
+export async function fetchJSON<T>(url: string, opts?: any): Promise<T> {
   const res = await fetchURL(url, opts);
 
   if (res.status === 200) {
-    return res.json();
-  } else {
-    throw new Error(res.status.toString());
+    return res.json() as Promise<T>;
   }
+
+  throw new StatusError(`${res.status} ${res.statusText}`, res.status);
 }
 
-export function removePrefix(url: string) {
+export function removePrefix(url: string): string {
   url = url.split("/").splice(2).join("/");
 
   if (url === "") url = "/";
@@ -68,7 +72,7 @@ export function removePrefix(url: string) {
   return url;
 }
 
-export function createURL(endpoint: string, params = {}, auth = true) {
+export function createURL(endpoint: string, params = {}, auth = true): string {
   const authStore = useAuthStore();
 
   let prefix = baseURL;

frontend/src/types/api.d.ts

@@ -27,10 +27,7 @@ interface Share {
   expire?: any;
   userID?: number;
   token?: string;
-}
-
-interface settings {
-  any;
+  username?: string;
 }
 
 interface SearchParams {

frontend/src/views/Errors.vue

@@ -17,7 +17,7 @@ import { useI18n } from "vue-i18n";
 const { t } = useI18n({});
 
 const errors: {
-  [key: string]: {
+  [key: number]: {
     icon: string;
     message: string;
   };
@@ -40,7 +40,10 @@ const errors: {
   },
 };
 
-const props = defineProps(["errorCode", "showHeader"]);
+const props = defineProps<{
+  errorCode: number;
+  showHeader?: boolean;
+}>();
 
 const info = computed(() => {
   return errors[props.errorCode] ? errors[props.errorCode] : errors[500];

frontend/src/views/Share.vue

@@ -297,7 +297,7 @@ const keyEvent = (event: KeyboardEvent) => {
 };
 
 const toggleMultipleSelection = () => {
-  // toggle
+  fileStore.toggleMultiple();
 };
 
 const isSingleFile = () =>

frontend/src/views/settings/Global.vue

@@ -309,7 +309,7 @@ const save = async () => {
     keyof SettingsCommand
   >;
   for (const key of keys) {
-    // not sure if we can safely assert non-null
+    // not sure if we can safely assume non-null
     const newValue = commandObject.value[key];
     if (!newValue) continue;
 
@@ -374,10 +374,8 @@ onMounted(async () => {
 
     const keys = Object.keys(original.commands) as Array<keyof SettingsCommand>;
     for (const key of keys) {
-      //@ts-ignore
       newSettings.commands[key] = original.commands[key];
-      //@ts-ignore
-      commandObject.value[key] = original.commands[key].join("\n");
+      commandObject.value[key] = original.commands[key]!.join("\n");
     }
 
     originalSettings.value = original;

frontend/src/views/settings/Profile.vue

@@ -80,9 +80,9 @@ import { useAuthStore } from "@/stores/auth";
 import { useLayoutStore } from "@/stores/layout";
 import { users as api } from "@/api";
 import Languages from "@/components/settings/Languages.vue";
-// import i18n, { rtlLanguages } from "@/i18n";
 import { inject, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
+import i18n, { rtlLanguages } from "@/i18n";
 
 const layoutStore = useLayoutStore();
 const authStore = useAuthStore();
@@ -98,10 +98,6 @@ const singleClick = ref<boolean>(false);
 const dateFormat = ref<boolean>(false);
 const locale = ref<string>("");
 
-// ...mapState(useAuthStore, ["user"]),
-// ...mapWritableState(useLayoutStore, ["loading"]),
-//...mapActions(useAuthStore, ["updateUser"]),
-
 const passwordClass = () => {
   const baseClass = "input input--block";
 
@@ -164,10 +160,9 @@ const updateSettings = async (event: Event) => {
       singleClick: singleClick.value,
       dateFormat: dateFormat.value,
     };
-    // TODO don't know what this is doing
-    const shouldReload = false;
-    // rtlLanguages.includes(data.locale) !==
-    // rtlLanguages.includes(i18n.locale);
+    const shouldReload =
+      rtlLanguages.includes(data.locale) !==
+      rtlLanguages.includes(i18n.global.locale);
     await api.update(data, [
       "locale",
       "hideDotfiles",
@@ -179,8 +174,10 @@ const updateSettings = async (event: Event) => {
       location.reload();
     }
     $showSuccess(t("settings.settingsUpdated"));
-  } catch (e: any) {
-    $showError(e);
+  } catch (err) {
+    if (err instanceof Error) {
+      $showError(err);
+    }
   }
 };
 </script>

frontend/src/views/settings/Shares.vue

@@ -1,5 +1,5 @@
 <template>
-  <errors v-if="error" :errorCode="error.status" />
+  <errors v-if="error" :errorCode="error.status ?? 400" />
   <div class="row" v-else-if="!layoutStore.loading">
     <div class="column">
       <div class="card">
@@ -71,6 +71,7 @@ import Clipboard from "clipboard";
 import Errors from "@/views/Errors.vue";
 import { inject, onBeforeUnmount, ref, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
+import { StatusError } from "@/api/utils";
 
 const $showError = inject("$showError") as IToastSuccess;
 const $showSuccess = inject("$showSuccess") as IToastError;
@@ -79,10 +80,8 @@ const { t } = useI18n();
 const layoutStore = useLayoutStore();
 const authStore = useAuthStore();
 
-// ...mapState(useAuthStore, ["user"]),
-// ...mapWritableState(useLayoutStore, ["loading"]),
-const error = ref<any>(null);
-const links = ref<any[]>([]);
+const error = ref<StatusError | null>(null);
+const links = ref<Share[]>([]);
 const clip = ref<Clipboard | null>(null);
 
 onMounted(async () => {
@@ -100,8 +99,10 @@ onMounted(async () => {
           : "";
     }
     links.value = newLinks;
-  } catch (e: any) {
-    error.value = e;
+  } catch (err) {
+    if (err instanceof StatusError || err instanceof Error) {
+      error.value = err;
+    }
   } finally {
     layoutStore.loading = false;
   }

frontend/src/views/settings/User.vue

@@ -75,11 +75,10 @@ import { useLayoutStore } from "@/stores/layout";
 import { users as api, settings } from "@/api";
 import UserForm from "@/components/settings/UserForm.vue";
 import Errors from "@/views/Errors.vue";
-// @ts-ignore
-import { cloneDeep } from "lodash-es";
 import { computed, inject, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
+import { StatusError } from "@/api/utils";
 
 const error = ref<any | null>(null);
 const originalUser = ref<IUser | null>(null);
@@ -112,12 +111,12 @@ const fetchData = async () => {
 
   try {
     if (isNew.value) {
-      let { defaults, _createUserDir } = await settings.get();
+      let { defaults, createUserDir: _createUserDir } = await settings.get();
       createUserDir.value = _createUserDir;
       user.value = {
         ...defaults,
         username: "",
-        passsword: "",
+        password: "",
         rules: [],
         lockPassword: false,
         id: 0,
@@ -146,8 +145,12 @@ const deleteUser = async (e: Event) => {
     await api.remove(user.value.id);
     router.push({ path: "/settings/users" });
     $showSuccess(t("settings.userDeleted"));
-  } catch (e: any) {
-    e.message === "403" ? $showError(t("errors.forbidden")) : $showError(e);
+  } catch (err) {
+    if (err instanceof StatusError) {
+      err.status === 403 ? $showError(t("errors.forbidden")) : $showError(err);
+    } else if (err instanceof Error) {
+      $showError(err);
+    }
   }
 };
 const save = async (event: Event) => {
@@ -163,7 +166,7 @@ const save = async (event: Event) => {
         ...user.value,
       };
 
-      const loc = (await api.create(newUser)) as string;
+      const loc = (await api.create(newUser)) || "/settings/users";
       router.push({ path: loc });
       $showSuccess(t("settings.userCreated"));
     } else {

frontend/src/views/settings/Users.vue

@@ -1,5 +1,5 @@
 <template>
-  <errors v-if="error" :errorCode="error.status" />
+  <errors v-if="error" :errorCode="error.status ?? 400" />
   <div class="row" v-else-if="!layoutStore.loading">
     <div class="column">
       <div class="card">
@@ -47,8 +47,9 @@ import { users as api } from "@/api";
 import Errors from "@/views/Errors.vue";
 import { onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { StatusError } from "@/api/utils";
 
-const error = ref<any>(null);
+const error = ref<StatusError | null>(null);
 const users = ref<IUser[]>([]);
 
 const layoutStore = useLayoutStore();
@@ -59,8 +60,10 @@ onMounted(async () => {
 
   try {
     users.value = await api.getAll();
-  } catch (e: any) {
-    error.value = e;
+  } catch (err) {
+    if (err instanceof StatusError || err instanceof Error) {
+      error.value = err;
+    }
   } finally {
     layoutStore.loading = false;
   }