@fdm-monster/client-next 0.0.1 → 0.0.2

package/src/App.vue

@@ -1,60 +0,0 @@
-<template>
-  <v-app>
-    <AppInfoSnackbar />
-    <AppErrorSnackbar />
-    <AppProgressSnackbar />
-
-    <NavigationDrawer
-      v-if="
-        (authStore.hasAuthToken && !authStore.isLoginExpired) ||
-        !authStore.loginRequired
-      "
-    />
-    <TopBar
-      v-if="
-        (authStore.hasAuthToken && !authStore.isLoginExpired) ||
-        !authStore.loginRequired
-      "
-    />
-
-    <AppLoader>
-      <v-main>
-        <router-view />
-      </v-main>
-    </AppLoader>
-
-    <AddOrUpdatePrinterDialog />
-    <AddOrUpdateCameraStreamDialog />
-    <AddOrUpdateFloorDialog />
-    <PrinterMaintenanceDialog />
-    <BatchJsonCreateDialog />
-    <YamlImportExportDialog />
-    <FileExplorerSideNav />
-    <BatchReprintDialog />
-    <PrinterControlDialog />
-  </v-app>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, watch } from 'vue'
-import { useUploadsStore } from './store/uploads.store'
-import { uploadProgressTest } from './utils/test.util'
-import { useAuthStore } from './store/auth.store'
-import AppLoader from './AppLoader.vue'
-
-const uploadsStore = useUploadsStore()
-const authStore = useAuthStore()
-
-const queuedUploads = uploadsStore.queuedUploads
-
-watch(queuedUploads, async () => {
-  await uploadsStore.handleNextUpload()
-})
-
-onMounted(() => {
-  console.debug(
-    `App.vue mounted. Logged in: ${authStore.hasAuthToken}, Expired: ${authStore.isLoginExpired}`
-  )
-  uploadProgressTest(false)
-})
-</script>

package/src/AppLoader.vue

@@ -1,383 +0,0 @@
-<template>
-  <v-overlay
-    v-model="overlay"
-    opacity="0.98"
-    style="z-index: 7"
-  >
-    <GridLoader
-      v-if="loading"
-      :size="20"
-      class="ma-auto"
-      color="#a70015"
-    />
-    <br />
-
-    <div
-      v-if="errorCaught"
-      style="margin: 50px"
-    >
-      <h1>FDM Monster Server Error</h1>
-      <p>
-        Did not expect this answer from the server. Please check your
-        configuration and logs.
-      </p>
-      <v-sheet
-        class="pa-4 rounded"
-        color="grey-darken-2"
-        width="80%"
-      >
-        Details:
-        <div class="mt-2 mb-2">
-          {{ JSON.stringify(errorCaught, null, 4) }}
-        </div>
-        <div
-          v-if="errorUrl"
-          class="mt-2 mb-2"
-        >
-          Original URL: {{ errorUrl }}
-        </div>
-        <div
-          v-if="errorResponse"
-          class="mt-2 mb-2"
-        >
-          Response body: {{ errorResponse }}
-        </div>
-        <br />
-        <v-btn
-          class="mb-2"
-          color="secondary"
-          @click="copyError()"
-        >
-          <v-icon class="mr-2">content_copy</v-icon>
-          Copy error details
-        </v-btn>
-        <br />
-        <v-btn
-          color="primary mb-2"
-          @click="reloadPage()"
-        >
-          <v-icon class="mr-2">refresh</v-icon>
-          reload the page
-        </v-btn>
-        <br />
-        <v-btn
-          color="darken-2 mb-2"
-          href="https://docs.fdm-monster.net"
-          style="color: white"
-          target="_blank"
-        >
-          <v-icon class="mr-2">menu_book</v-icon>
-          view documentation
-        </v-btn>
-        <br />
-        <v-btn
-          color="purple-darken-4"
-          href="https://discord.gg/mwA8uP8CMc"
-          style="color: white"
-          target="_blank"
-        >
-          <v-icon class="mr-2">chat</v-icon>
-          join our Discord
-        </v-btn>
-      </v-sheet>
-
-      <img
-        class="justify-center align-center align-content-center rounded-pill mt-8 ma-4"
-        src="/img/OIG.JYDC2RaWdz7g9.jpg"
-        style="opacity: 0.9"
-        width="400"
-      />
-    </div>
-
-    <!-- Fade-in -->
-    <!-- Slow scroll fade-out vtexts -->
-    <div
-      v-if="loading"
-      style="animation: fadeIn 0.75s"
-    >
-      {{ overlayMessage }}
-    </div>
-  </v-overlay>
-  <slot v-if="!overlay" />
-</template>
-
-<script lang="ts" setup>
-import { onBeforeMount, onUnmounted, ref } from 'vue'
-import { useEventBus } from '@vueuse/core'
-import { useRouter } from 'vue-router'
-import { AxiosError } from 'axios'
-import { captureException } from '@sentry/vue'
-import GridLoader from './components/Generic/Loaders/GridLoader.vue'
-import { useAuthStore } from './store/auth.store'
-import { useSnackbar } from '@/shared/snackbar.composable'
-import { useSettingsStore } from '@/store/settings.store'
-import { setSentryEnabled } from '@/utils/sentry.util'
-import { useFeatureStore } from '@/store/features.store'
-import { useProfileStore } from '@/store/profile.store'
-import { sleep } from '@/utils/time.utils'
-import { RouteNames } from '@/router/route-names'
-import { AppService } from '@/backend/app.service'
-import {
-  AUTH_ERROR_REASON,
-  PermissionDeniedEvent
-} from '@/shared/auth.constants'
-import { SocketIoService } from '@/shared/socketio.service'
-
-const authStore = useAuthStore()
-const settingsStore = useSettingsStore()
-const featureStore = useFeatureStore()
-const profileStore = useProfileStore()
-const overlay = ref(false)
-const router = useRouter()
-const overlayMessage = ref('')
-const loading = ref(true)
-const errorCaught = ref()
-const errorUrl = ref()
-const errorResponse = ref()
-const snackbar = useSnackbar()
-const socketIoClient: SocketIoService = new SocketIoService()
-
-function reloadPage() {
-  window.location.reload()
-}
-
-function copyError() {
-  navigator.clipboard.writeText(JSON.stringify(errorCaught.value))
-  snackbar.openInfoMessage({
-    title: 'Copied',
-    subtitle: 'Error copied to clipboard'
-  })
-}
-
-function setOverlay(overlayEnabled: boolean, message: string = '') {
-  if (!overlayEnabled) {
-    overlayMessage.value = ''
-  } else {
-    overlayMessage.value = message
-    errorCaught.value = null
-    errorUrl.value = null
-    errorResponse.value = null
-  }
-  overlay.value = overlayEnabled
-}
-
-async function loadAppWithAuthenticationReady() {
-  try {
-    await settingsStore.loadSettings()
-    await featureStore.loadFeatures()
-    await profileStore.getProfile()
-
-    const enabled = settingsStore.serverSettings?.sentryDiagnosticsEnabled
-    setSentryEnabled(!!enabled)
-  } catch (e) {
-    console.log('Error when loading settings.', e)
-    snackbar.openErrorMessage({
-      title: 'Error',
-      subtitle: 'Error when loading settings, features and/or profile.'
-    })
-    captureException(e)
-  }
-
-  if (!socketIoClient.socketState().setup) {
-    await socketIoClient.setupSocketConnection()
-  } else {
-    socketIoClient.reconnect()
-  }
-
-  setOverlay(false)
-}
-
-// In use (shared/http-client.ts)
-const authPermissionDeniedKey = useEventBus<PermissionDeniedEvent>(
-  'auth:permission-denied'
-)
-authPermissionDeniedKey.on(async (event) => {
-  console.log('[AppLoader] Permission denied, going to permission denied page')
-  setOverlay(true, 'Permission denied')
-  await router.push({
-    name: RouteNames.PermissionDenied,
-    query: {
-      roles: event?.roles,
-      page: String(router.currentRoute.value.name),
-      permissions: event?.permissions,
-      error: event?.error,
-      url: event?.url
-    }
-  })
-  setOverlay(false)
-})
-
-// In use (shared/http-client.ts)
-const authFailKey = useEventBus('auth:failure')
-authFailKey.on(async (event: any) => {
-  console.debug(
-    `[AppLoader] Event received: 'auth:failure', going back to login, context: ${event}`
-  )
-  setOverlay(true, 'Authentication failed, going back to login')
-
-  if (router.currentRoute.value.name !== RouteNames.Login) {
-    await router.push({ name: RouteNames.Login })
-  }
-  setOverlay(false)
-})
-
-// In use (components/Login/LoginForm.vue)
-const loginEventKey = useEventBus('auth:login')
-loginEventKey.on(async () => {
-  console.debug("[AppLoader] Event received: 'auth:login', loading app")
-  setOverlay(true, 'Loading app')
-  await loadAppWithAuthenticationReady()
-})
-
-// Emitted by auth.store.ts handleAndEmitAuthenticationError
-const accountNotVerifiedEventKey = useEventBus(
-  `auth:${AUTH_ERROR_REASON.AccountNotVerified}`
-)
-accountNotVerifiedEventKey.on(async () => {
-  console.debug(
-    `[AppLoader] Event received: 'auth:${AUTH_ERROR_REASON.AccountNotVerified}', going to login`
-  )
-  snackbar.error(
-    'Account not verified, please ask an administrator to verify your account.'
-  )
-  setOverlay(
-    true,
-    'Account not verified, please ask an administrator to verify your account.'
-  )
-  if (router.currentRoute.value.name !== RouteNames.Login) {
-    await router.push({ name: RouteNames.Login })
-  }
-  setOverlay(false)
-})
-
-// Emitted by auth.store.ts handleAndEmitAuthenticationError
-const passwordChangeRequiredEventKey = useEventBus(
-  `auth:${AUTH_ERROR_REASON.PasswordChangeRequired}`
-)
-passwordChangeRequiredEventKey.on(async () => {
-  console.debug(
-    `[AppLoader] Event received: 'auth:${AUTH_ERROR_REASON.PasswordChangeRequired}', going to login`
-  )
-  snackbar.error('Password change required, please change your password.')
-  setOverlay(true, 'Password change required, please change your password.')
-  if (router.currentRoute.value.name !== RouteNames.Login) {
-    await router.push({ name: RouteNames.Login })
-  }
-  setOverlay(false)
-})
-
-onUnmounted(() => {
-  if (socketIoClient) {
-    socketIoClient.disconnect()
-  }
-})
-
-onBeforeMount(async () => {
-  loading.value = true
-  // Pick random string out of array of strings
-  const loadingMessages = [
-    'Loading FDM Monster',
-    'Loading it all',
-    'Loading features',
-    'Loading what needs to be loaded',
-    'Farming potatoes',
-    'Wiping the floor',
-    'Cleaning cobwebs',
-    'Loading filament.dll',
-    'Loading 3D_printer.exe',
-    'Loading spools'
-  ]
-
-  const message =
-    loadingMessages[Math.floor(Math.random() * loadingMessages.length)]
-  setOverlay(true, message)
-
-  try {
-    await AppService.test()
-    // Nice test for error handling
-    // throw new Error("test");
-  } catch (e) {
-    loading.value = false
-    errorCaught.value = e
-    errorUrl.value = 'api/test'
-    // Disable capture to sentry when it overloads
-    captureException(e)
-    return
-  }
-
-  // If the route is wrong about login requirements, an error will be shown
-  const { loginRequired, wizardState } =
-    await authStore.checkAuthenticationRequirements()
-  if (!wizardState.wizardCompleted) {
-    console.debug('[AppLoader] Wizard not completed, going to wizard')
-    await authStore.logout(false)
-    if (router.currentRoute.value.name !== RouteNames.FirstTimeSetup) {
-      await router.replace({ name: RouteNames.FirstTimeSetup })
-    }
-    setOverlay(false)
-    return
-  }
-
-  // Login is not required, load app directly
-  if (!loginRequired) {
-    console.debug('[AppLoader] Login not required, loading app')
-    return await loadAppWithAuthenticationReady()
-  }
-
-  // Router will have tackled routing already
-  console.debug('[AppLoader] Checking if tokens are present')
-  if (!authStore.hasAuthToken && !authStore.hasRefreshToken) {
-    console.debug(
-      '[AppLoader] No tokens present, hiding overlay as router will have handled it'
-    )
-    return setOverlay(false)
-  }
-
-  // What if refreshToken is not present or not valid?
-  setOverlay(true, 'Refreshing login')
-  console.debug('[AppLoader] Verifying or refreshing login once')
-  try {
-    const { success, handled } =
-      await authStore.verifyOrRefreshLoginOnceOrLogout()
-    if (handled) {
-      console.debug('[AppLoader] received handled event, hiding overlay')
-      return
-    }
-
-    if (!success) {
-      console.debug('[AppLoader] No success refreshing')
-      setOverlay(true, 'Login expired, going back to login')
-
-      await sleep(500)
-      if (router.currentRoute.value.name !== RouteNames.Login) {
-        await router.push({ name: RouteNames.Login })
-      }
-      setOverlay(false)
-      // Dont load app as it will be redirected to login
-      return
-    }
-  } catch (e) {
-    console.log('[AppLoader] Error when refreshing login', e)
-    loading.value = false
-    errorCaught.value = (e as AxiosError).message
-    errorUrl.value = (e as AxiosError).config?.url
-    errorResponse.value = (e as AxiosError).response?.data
-    captureException(e)
-    return
-  }
-
-  console.debug('[AppLoader] Loading app')
-  await loadAppWithAuthenticationReady()
-})
-</script>
-
-<style>
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-</style>