@fdm-monster/client-next 0.0.1 → 0.0.2

package/src/shared/printer-state.constants.ts

@@ -1,194 +0,0 @@
-import {
-  PrinterStateDto,
-  SocketState
-} from '@/models/socketio-messages/socketio-message.model'
-import { PrinterDto } from '@/models/printers/printer.model'
-import { useSettingsStore } from '@/store/settings.store'
-
-const COLOR = {
-  danger: 'danger',
-  dark: 'dark',
-  secondary: 'secondary',
-  success: 'success'
-} as const
-
-const RGB = {
-  DarkBlue: '#050c2e',
-  Black: '#000000',
-  DarkGray: '#262626',
-  LightBrown: '#583c0e',
-  Brown: '#580e47',
-  Red: '#2e0905'
-} as const
-
-const LABEL = {
-  Disabled: 'Disabled',
-  Maintenance: 'Maintenance',
-  Offline: 'Offline',
-  Finding: 'Finding',
-  Disconnected: 'Disconnected',
-  Error: 'Error',
-  Paused: 'Paused',
-  Operational: 'Operational',
-  Printing: 'Printing'
-} as const
-
-export function interpretStates(
-  printer: PrinterDto,
-  socketState: SocketState,
-  printerState: PrinterStateDto
-) {
-  const settingsStore = useSettingsStore()
-  const debugPrinterInterpretState =
-    settingsStore.frontendDebugSettings.showInterpretedPrinterState
-  const state = {}
-
-  // Disabled/maintenance printers
-  if (!printer.enabled) {
-    if (printer.disabledReason?.length) {
-      return {
-        ...state,
-        color: COLOR.danger,
-        rgb: RGB.Black,
-        text: LABEL.Maintenance
-      }
-    }
-    return {
-      ...state,
-      color: COLOR.secondary,
-      rgb: RGB.DarkBlue,
-      text: LABEL.Disabled
-    }
-  }
-
-  // Basic necessity to parse API/Websocket states
-  const responding = socketState?.api === 'responding'
-  const authFail = socketState?.api === 'authFail'
-  if (!responding || !socketState) {
-    const noResponse = socketState?.api === 'noResponse'
-    return {
-      ...state,
-      color: COLOR.secondary,
-      rgb: RGB.Red,
-      text: authFail
-        ? 'API key wrong'
-        : noResponse
-          ? 'API unreachable'
-          : socketState?.api || '-'
-    }
-  }
-
-  // First level: API
-  // Backend has concluded that things are not retryable
-  if (!responding) {
-    return {
-      ...state,
-      color: COLOR.danger,
-      rgb: RGB.Red,
-      text: authFail ? 'API key wrong' : 'No API connection'
-    }
-  }
-
-  // Second level: socket state
-  const socketAuthenticated = socketState.socket === 'authenticated'
-  const socketAuthing = socketState.socket === 'authenticating'
-  const currentState = printerState?.current?.payload?.state
-
-  // History might be way outdated
-  // if (!currentState) {
-  //   currentState = printerState?.history?.payload?.state;
-  // }
-
-  const flags = currentState?.flags
-  if (!socketAuthenticated || !flags) {
-    const s = socketAuthenticated ? 1 : 0
-    const sa = socketAuthing ? 1 : 0
-    const p = printerState ? 1 : 0
-    if (debugPrinterInterpretState)
-      console.debug(
-        `Socket opened ${s}, socketAuthing ${sa} printerState ${p}, 
-      currentState: ${currentState}, FLAGS ${flags}`
-      )
-    return {
-      ...state,
-      color: COLOR.danger,
-      rgb: RGB.Red,
-      // TODO this should not result in S/SA/P label, but in a more descriptive label
-      text: !printerState ? 'No USB' : `S${s} SA${sa} | P${p}`
-    }
-  }
-
-  if (!flags) {
-    console.error('No flags', flags)
-    return
-  }
-
-  if (flags.error || flags.closedOrError) {
-    return {
-      ...state,
-      color: COLOR.danger,
-      rgb: RGB.Red,
-      text:
-        currentState.text?.replace('Offline', 'Disconnected') || LABEL.Error,
-      description: currentState.error
-    }
-  } else if (flags.paused || flags.pausing) {
-    return {
-      ...state,
-      color: COLOR.success,
-      rgb: RGB.Brown,
-      text: LABEL.Paused
-    }
-  } else if (flags.printing) {
-    return {
-      ...state,
-      color: COLOR.success,
-      rgb: RGB.LightBrown,
-      text: LABEL.Printing
-    }
-  } else {
-    return {
-      ...state,
-      color: COLOR.dark,
-      rgb: RGB.DarkGray,
-      text: LABEL.Operational,
-      description: currentState.error
-    }
-  }
-}
-
-const toCurrentState = (printerState: PrinterStateDto) =>
-  printerState?.current?.payload?.state
-
-export const isPrinterPrinting = (printerState: PrinterStateDto) =>
-  toCurrentState(printerState)?.flags.printing
-
-export const isPrinterPaused = (printerState: PrinterStateDto) =>
-  toCurrentState(printerState)?.flags?.paused ||
-  toCurrentState(printerState)?.flags?.pausing
-
-export const isPrinterDisconnected = (
-  printer: PrinterDto,
-  printerState: PrinterStateDto
-) =>
-  (!isPrinterInMaintenance(printer) &&
-    printer?.enabled &&
-    !toCurrentState(printerState)?.flags.operational) ||
-  toCurrentState(printerState)?.flags.error ||
-  toCurrentState(printerState)?.flags.closedOrError
-
-export const isPrinterDisabled = (printer: PrinterDto) =>
-  !isPrinterInMaintenance(printer) && !printer?.enabled
-
-export const isPrinterInMaintenance = (printer?: PrinterDto) =>
-  !printer?.enabled && printer?.disabledReason?.length
-
-export const isPrinterIdling = (
-  printer: PrinterDto,
-  printerState: PrinterStateDto
-) =>
-  toCurrentState(printerState)?.flags &&
-  !toCurrentState(printerState)?.flags.printing &&
-  toCurrentState(printerState)?.flags.operational &&
-  !isPrinterDisabled(printer) &&
-  !isPrinterInMaintenance(printer)

package/src/shared/snackbar.composable.ts

@@ -1,66 +0,0 @@
-import type { EventBusKey } from '@vueuse/core'
-import { useEventBus } from '@vueuse/core'
-
-export const progressMessageKey: EventBusKey<{ name: 'progress-message' }> =
-  Symbol('Progress snackbar message event symbol')
-export const infoMessageKey: EventBusKey<{ name: 'info-message' }> = Symbol(
-  'Info snackbar message event symbol'
-)
-export const errorMessageKey: EventBusKey<{ name: 'error-message' }> = Symbol(
-  'Error snackbar message event symbol'
-)
-
-export interface InfoMessage {
-  title: string
-  subtitle?: string | null
-  warning?: boolean
-  timeout?: number
-}
-
-export interface ErrorMessage {
-  title: string
-  subtitle?: string | null
-  timeout?: number
-  // The idea is that the error can be revisited on a separate page/dialog
-  // url?: string;
-}
-
-export interface ProgressMessage {
-  key: string
-  title: string
-  value: number
-  completed: boolean
-}
-
-export function useSnackbar() {
-  const { emit: emitProgessMessage, on: onProgressMessage } =
-    useEventBus<ProgressMessage>(progressMessageKey)
-  const { emit: emitInfoMessage, on: onInfoMessage } =
-    useEventBus<InfoMessage>(infoMessageKey)
-  const { emit: emitErrorMessage, on: onErrorMessage } =
-    useEventBus<ErrorMessage>(errorMessageKey)
-
-  return {
-    openProgressMessage: (
-      key: string,
-      title: string,
-      value: number,
-      completed: boolean
-    ) =>
-      emitProgessMessage({
-        key,
-        title,
-        value,
-        completed
-      } as ProgressMessage),
-    openInfoMessage: (data: InfoMessage) => emitInfoMessage(data),
-    info: (title: string, subtitle?: string, timeout?: number) =>
-      emitInfoMessage({ title, subtitle, timeout }),
-    openErrorMessage: (errorData: ErrorMessage) => emitErrorMessage(errorData),
-    error: (title: string, subtitle?: string) =>
-      emitErrorMessage({ title, subtitle }),
-    onProgressMessage,
-    onInfoMessage,
-    onErrorMessage
-  }
-}

package/src/shared/socketio.service.ts

@@ -1,104 +0,0 @@
-import {
-  PrinterStateDto,
-  SocketIoUpdateMessage
-} from '@/models/socketio-messages/socketio-message.model'
-import { usePrinterStore } from '@/store/printer.store'
-import { useFloorStore } from '@/store/floor.store'
-import { usePrinterStateStore } from '@/store/printer-state.store'
-import { useTestPrinterStore } from '@/store/test-printer.store'
-import { useSnackbar } from './snackbar.composable'
-import { getBaseUri } from '@/shared/http-client'
-import { useAuthStore } from '@/store/auth.store'
-import { IdType } from '@/utils/id.type'
-import {
-  appSocketIO,
-  constructSocket,
-  deconstructSocket,
-  getSocketState,
-  resetSocketConnection
-} from '@/store/connection.store'
-
-enum IO_MESSAGES {
-  LegacyUpdate = 'legacy-update',
-  TestPrinterState = 'test-printer-state',
-  // CompletionEvent = "completion-event",
-  HostState = 'host-state',
-  ApiAccessibility = 'api-accessibility'
-}
-
-export class SocketIoService {
-  private printerStore = usePrinterStore()
-  private floorStore = useFloorStore()
-  private printerStateStore = usePrinterStateStore()
-  private testPrinterStore = useTestPrinterStore()
-  private snackbar = useSnackbar()
-
-  socketState() {
-    return getSocketState()
-  }
-
-  async setupSocketConnection() {
-    console.debug('Setting up socket.io client')
-    const apiBase = await getBaseUri()
-    const authStore = useAuthStore()
-    authStore.loadTokens()
-    constructSocket(
-      apiBase,
-      authStore.loginRequired ? authStore.token : undefined
-    )
-
-    appSocketIO?.on(IO_MESSAGES.LegacyUpdate, (data) =>
-      this.onMessage(JSON.parse(data))
-    )
-    appSocketIO?.on(IO_MESSAGES.TestPrinterState, (data) => {
-      this.testPrinterStore.saveEvent(data)
-      console.log(data)
-    })
-  }
-
-  disconnect() {
-    deconstructSocket()
-  }
-
-  reconnect() {
-    if (appSocketIO) {
-      console.debug('Resetting socket.io client connection')
-      resetSocketConnection()
-    }
-  }
-
-  onMessage(message: SocketIoUpdateMessage) {
-    if (
-      message.trackedUploads.current?.length ||
-      message.trackedUploads.failed?.length
-    ) {
-      console.debug('[SocketIO] trackedUploads message received')
-      message.trackedUploads.current.forEach((u) => {
-        this.snackbar.openProgressMessage(
-          u.correlationToken,
-          u.multerFile.originalname,
-          (u.progress?.percent || 0) * 100,
-          false
-        )
-      })
-    }
-
-    if (message.floors?.length) {
-      this.floorStore.saveFloors(message.floors)
-    }
-
-    if (message.printers?.length) {
-      this.printerStore.setPrinters(message.printers)
-    }
-
-    if (message.socketStates) {
-      this.printerStateStore.setSocketStates(message.socketStates)
-    }
-
-    if (message.printerEvents) {
-      this.printerStateStore.setPrinterEvents(
-        message.printerEvents as Record<IdType, PrinterStateDto>
-      )
-    }
-  }
-}

package/src/store/auth.store.ts

@@ -1,255 +0,0 @@
-import { defineStore } from 'pinia'
-import { useJwt } from '@vueuse/integrations/useJwt'
-import type { JwtPayload } from 'jwt-decode'
-import { AuthService, type Tokens } from '@/backend/auth.service'
-import { AxiosError, HttpStatusCode } from 'axios'
-import { WizardSettingsDto } from '@/models/settings/settings.model'
-import {
-  AUTH_ERROR_REASON,
-  convertAuthErrorReason
-} from '@/shared/auth.constants'
-import { useEventBus } from '@vueuse/core/index'
-
-export interface IClaims extends JwtPayload {
-  name: string
-}
-
-export interface AuthState {
-  isDemoMode: boolean | null
-  loginRequired: boolean | null
-  refreshToken: string | null
-  registration: boolean | null
-  token: string | null
-  wizardState: WizardSettingsDto | null
-  lastLogoutReason: string | null
-}
-
-export const useAuthStore = defineStore('auth', {
-  state: (): AuthState => ({
-    isDemoMode: null,
-    token: null,
-    refreshToken: null,
-    loginRequired: null,
-    registration: null,
-    wizardState: null,
-    lastLogoutReason: null
-  }),
-  actions: {
-    async checkAuthenticationRequirements() {
-      return await AuthService.getLoginRequired()
-        .then((response) => {
-          this.loginRequired = response.data.loginRequired
-          this.wizardState = response.data.wizardState
-          this.registration = response.data.registration
-          this.isDemoMode = response.data.isDemoMode
-          return {
-            loginRequired: this.loginRequired,
-            wizardState: this.wizardState,
-            registration: this.registration
-          }
-        })
-        .catch((e: AxiosError) => {
-          console.error(
-            'authRequired: failed to check login required',
-            e.response?.status
-          )
-          throw e
-        })
-    },
-    async login(username: string, password: string): Promise<Tokens | null> {
-      this.lastLogoutReason = null
-      return await AuthService.postLogin(username, password)
-        .then((response) => {
-          this.setTokens(response.data.token, response.data.refreshToken)
-          return response.data
-        })
-        .catch((e: AxiosError) => {
-          console.error('login: failed to login', e.response?.status)
-          throw e
-        })
-    },
-    async logout(callServerLogout = false, reason?: string) {
-      console.debug(`Logging out (calling server ${callServerLogout})`)
-      if (reason) {
-        this.lastLogoutReason = reason
-      }
-      if (callServerLogout && !!this.tokenClaims && !this.isLoginExpired) {
-        try {
-          await AuthService.logout()
-        } catch (e) {
-          console.error(
-            'Server could not process logout, but local logout was successful',
-            e
-          )
-        }
-      }
-      this.setIdToken(undefined)
-      this.setRefreshToken(undefined)
-    },
-    async verifyOrRefreshLoginOnceOrLogout() {
-      try {
-        await AuthService.verifyLogin()
-        return { success: true }
-      } catch (e1) {
-        console.error(
-          '[AuthStore.verifyOrRefreshLoginOnce]: failed to verify login',
-          e1
-        )
-
-        const error = e1 as AxiosError
-        if (
-          !error.response ||
-          error.response?.status !== HttpStatusCode.Unauthorized
-        ) {
-          // Ensure no request-retry is done, nor other error processing
-          console.error(
-            '[AuthStore.verifyOrRefreshLoginOnce]: unknown error',
-            error.status
-          )
-          // This is meant to be caught by AppLoader, which know how to break the flow and extract the error data (body, url)
-          throw e1
-        }
-
-        // Detect reasons for which we should not refresh, and handle the emitted event to change the UI page
-        const { reasonCode, url } = this.extractSpecialReasonCode(
-          e1 as AxiosError
-        )
-        if (reasonCode) {
-          await this.logout(false, convertAuthErrorReason(reasonCode))
-          console.error(
-            `[AuthStore] 401 Unauthorized - emitting 'auth:${reasonCode}' with reason ${reasonCode}`
-          )
-          useEventBus(`auth:${reasonCode}`).emit({
-            url,
-            error: error.message,
-            reasonCode
-          })
-          // The caller must abort their action, but avoid rerouting to login - special case
-          return { success: false, handled: true }
-        }
-        if (!this.hasRefreshToken) {
-          // The caller must abort their action, but may reroute to login
-          return { success: false, handled: false }
-        }
-
-        // Try to refresh the token
-        try {
-          await this.refreshLoginToken()
-          await AuthService.verifyLogin()
-        } catch (e2: any | AxiosError) {
-          // Failure at this point is handled ruthlessly
-          const error = e2 as AxiosError
-          if (error.response?.status === HttpStatusCode.Unauthorized) {
-            await this.logout(false)
-            console.error(
-              '[AuthStore.verifyOrRefreshLoginOnce]: failed to refresh token',
-              error.status
-            )
-            // Refresh was successful
-            return { success: false, handled: false }
-          } else {
-            // Ensure no request-retry is done, nor other error processing
-            throw e2
-          }
-        }
-
-        // Refresh was successful
-        return { success: true, handled: false }
-      }
-    },
-    extractSpecialReasonCode(error: AxiosError) {
-      // Detect reasons for which we should not retry
-      // - AccountNotVerified the admin has not verified the account yet and this needs to be shown to the user
-      // - PasswordChangeRequired the user needs to change their password
-      const reasonCode: keyof typeof AUTH_ERROR_REASON = (
-        error?.response?.data as any
-      )?.reasonCode
-      if (reasonCode) {
-        console.error(
-          '[AuthStore] 401 Unauthorized - Checking received reason code',
-          reasonCode
-        )
-      }
-      if (
-        reasonCode &&
-        (reasonCode === AUTH_ERROR_REASON.AccountNotVerified ||
-          reasonCode === AUTH_ERROR_REASON.PasswordChangeRequired)
-      ) {
-        return { reasonCode, url: error?.config?.url }
-      }
-
-      return { reasonCode: null, url: null }
-    },
-    loadTokens() {
-      this.token = localStorage.getItem('token')
-      this.refreshToken = localStorage.getItem('refreshToken')
-    },
-    async refreshLoginToken() {
-      if (!this.refreshToken) {
-        throw new Error('refreshLoginToken: no refresh token')
-      }
-      return await AuthService.refreshLogin(this.refreshToken)
-        .then((response) => {
-          if (response?.data?.token) {
-            this.setIdToken(response.data.token)
-          }
-
-          return true
-        })
-        .catch((e: AxiosError) => {
-          if (e.response?.status == HttpStatusCode.Unauthorized) {
-            this.setTokens(undefined, undefined)
-            console.error(
-              'refreshLoginToken: authentication error, failed to refresh tokens',
-              e.response?.status
-            )
-          } else {
-            console.error(
-              'refreshLoginToken: unknown error, failed to refresh tokens',
-              e.response?.status
-            )
-          }
-          throw e
-        })
-    },
-    setTokens(token?: string, refreshToken?: string) {
-      this.setIdToken(token)
-      this.setRefreshToken(refreshToken)
-    },
-    setIdToken(token?: string) {
-      if (!token?.length) {
-        localStorage.removeItem('token')
-      } else {
-        localStorage.setItem('token', token as string)
-        this.token = token
-      }
-    },
-    setRefreshToken(refreshToken?: string) {
-      if (!refreshToken?.length) {
-        localStorage.removeItem('refreshToken')
-      } else {
-        localStorage.setItem('refreshToken', refreshToken as string)
-        this.refreshToken = refreshToken
-      }
-    }
-  },
-  getters: {
-    hasRefreshToken(): boolean {
-      return !!this.refreshToken
-    },
-    isLoginExpired(): boolean {
-      const claims = this.tokenClaims
-      if (!claims?.exp) return false
-      return claims.exp < Date.now() / 1000
-    },
-    hasAuthToken() {
-      return !!this.tokenClaims
-    },
-    tokenClaims(): IClaims | null {
-      if (!this.token) return null
-      const data = useJwt<IClaims>(this.token, { fallbackValue: null })
-      if (!data) return null
-      return data.payload.value
-    }
-  }
-})

package/src/store/connection.store.ts

@@ -1,66 +0,0 @@
-import { io, Socket } from 'socket.io-client'
-import { reactive } from 'vue'
-
-export let appSocketIO: Socket | null = null
-
-export const socketState = reactive({
-  connected: false,
-  setup: false,
-  id: ''
-})
-
-export function constructSocket(apiBase: string, token?: string | null) {
-  if (socketState.setup) {
-    throw new Error('Socket already set up')
-  }
-  socketState.setup = false
-  appSocketIO = io(apiBase, {
-    auth: token?.length ? { token } : undefined
-  })
-  socketState.setup = true
-
-  appSocketIO.on('connect', () => {
-    socketState.id = appSocketIO!.id || ''
-    socketState.connected = true
-  })
-
-  appSocketIO.on('disconnect', () => {
-    socketState.id = ''
-    socketState.connected = false
-  })
-}
-
-export function resetSocketConnection() {
-  socketState.connected = false
-  appSocketIO?.close()
-  appSocketIO?.open()
-}
-
-export function deconstructSocket() {
-  if (appSocketIO) {
-    appSocketIO.close()
-  }
-  appSocketIO = null
-  socketState.setup = false
-  socketState.connected = false
-  socketState.id = ''
-}
-
-export function getSocketState() {
-  if (!appSocketIO) {
-    console.warn('Socket not set-up')
-    return {
-      setup: false
-    }
-  }
-
-  const state = {
-    setup: true,
-    active: appSocketIO.active,
-    connected: appSocketIO.connected,
-    id: appSocketIO.id,
-    recovered: appSocketIO.recovered
-  }
-  console.warn(state)
-  return state
-}