@fdm-monster/client-next 0.0.1 → 0.0.3

package/src/components/Settings/SoftwareUpgradeSettings.vue

@@ -1,297 +0,0 @@
-<template>
-  <v-card>
-    <v-toolbar color="primary">
-      <v-avatar>
-        <v-icon>upgrade</v-icon>
-      </v-avatar>
-      <v-toolbar-title> Software Upgrade </v-toolbar-title>
-    </v-toolbar>
-    <v-list lines="three">
-      <v-list-item>
-        <v-list-item-title> Current versions in use: </v-list-item-title>
-        <v-list-item-subtitle>
-          Your server's version is: {{ serverVersion }}
-        </v-list-item-subtitle>
-        <v-list-item-subtitle>
-          Your client's version is: {{ version }}
-        </v-list-item-subtitle>
-        <v-list-item-subtitle>
-          <div v-if="monsterPiVersion">
-            MonsterPi:
-            <div>Your MonsterPi version is:</div>
-            {{ monsterPiVersion }}
-          </div>
-          <div v-else>
-            MonsterPi:
-            <div>No MonsterPi distro was detected.</div>
-          </div>
-        </v-list-item-subtitle>
-      </v-list-item>
-    </v-list>
-    <v-divider />
-    <v-list
-      subheader
-      lines="three"
-    >
-      <v-list-item>
-        <v-list-item-title> Server upgrade </v-list-item-title>
-        <v-list-item-subtitle>
-          Please visit
-          <a href="https://docs.fdm-monster.net/docs/installing/">
-            the installation documentation
-          </a>
-          for instructions on how to upgrade the server.
-        </v-list-item-subtitle>
-      </v-list-item>
-    </v-list>
-    <v-divider />
-    <v-list lines="three">
-      <v-list-item>
-        <v-list-item-title> Client upgrade </v-list-item-title>
-        <v-list-item-subtitle>
-          Please visit
-          <a
-            href="https://docs.fdm-monster.net/docs/configuration/updating_client_bundle"
-          >
-            the installation documentation
-          </a>
-          for instructions on how to upgrade the client bundle.
-        </v-list-item-subtitle>
-        <v-list-item-subtitle>
-          Upgrade the client webapp for quickly retrieving small fixes and
-          features
-        </v-list-item-subtitle>
-      </v-list-item>
-      <v-list-item>
-        <v-list-item-title> Select a release to upgrade to: </v-list-item-title>
-        <v-list-item-subtitle class="mt-2">
-          Minimum required version: {{ minimum?.tag_name }}
-        </v-list-item-subtitle>
-
-        <span v-if="loading">
-          <v-alert> Loading releases... </v-alert>
-        </span>
-        <v-alert v-if="!loading && !filteredReleases?.length">
-          No releases to show.
-        </v-alert>
-        <v-radio-group v-model="selectedRelease">
-          <v-radio
-            v-for="release in filteredReleases"
-            :key="release.tag_name"
-            :disabled="isDisabledRelease(release)"
-            :label="calculateLabelDisabledReason(release)"
-            :value="release.tag_name"
-          />
-        </v-radio-group>
-        <div>
-          <v-alert
-            v-if="showPrereleases"
-            color="primary"
-            max-width="500px"
-          >
-            You are viewing prereleases, please install such versions at your
-            own risk!
-          </v-alert>
-        </div>
-        <div>
-          <v-checkbox
-            v-model="allowDowngrade"
-            label="Allow downgrade"
-          />
-          <v-checkbox
-            v-model="showPrereleases"
-            :disabled="getIsCurrentUnstable"
-            :label="
-              getIsCurrentUnstable
-                ? 'Show prerelease versions (Currently already on prerelease version)'
-                : 'Show prerelease versions'
-            "
-          />
-        </div>
-        <v-btn
-          class="mt-2 mr-4"
-          color="secondary"
-          @click="loadReleases()"
-        >
-          Reload release version list
-        </v-btn>
-        <v-btn
-          :disabled="
-            !selectedRelease?.length || selectedRelease === current?.tag_name
-          "
-          class="mt-2"
-          color="primary"
-          variant="flat"
-          @click="clickUpdateClient(selectedRelease)"
-        >
-          <v-icon>upgrade</v-icon>
-          Upgrade/downgrade client
-        </v-btn>
-      </v-list-item>
-    </v-list>
-  </v-card>
-</template>
-<script lang="ts" setup>
-import { AppService } from '@/backend/app.service'
-import { computed, onMounted, ref } from 'vue'
-import { version as packageJsonVersion } from '../../../package.json'
-import { IRelease } from '@/models/server/client-releases.model'
-import { compare, minor } from 'semver'
-import { useFeatureStore } from '@/store/features.store'
-
-const errorMessage = ref('')
-const loading = ref(true)
-const rateLimitExceeded = ref(false)
-const allowDowngrade = ref(false)
-const serverVersion = ref('')
-const monsterPiVersion = ref<string>('')
-const version = ref(packageJsonVersion)
-const current = ref<IRelease>()
-const minimum = ref<IRelease>()
-const selectedRelease = ref<string>()
-const showPrereleases = ref<boolean>(false)
-const loadedClientReleases = ref<IRelease[]>([])
-const featureStore = useFeatureStore()
-
-onMounted(async () => {
-  await loadReleases()
-
-  const versionSpec = await AppService.getVersion()
-  serverVersion.value = versionSpec.version
-  monsterPiVersion.value = versionSpec.monsterPi?.trim() || ''
-})
-
-async function loadReleases() {
-  loading.value = true
-  errorMessage.value = ''
-  rateLimitExceeded.value = false
-
-  if (featureStore.hasFeature('githubRateLimitApi')) {
-    try {
-      const rateLimit = await AppService.getGithubRateLimit()
-      if (rateLimit.rate.remaining === 0) {
-        const limitResetAt = new Date(rateLimit.rate.reset)
-        const time = limitResetAt.toLocaleTimeString()
-        const diff = rateLimit.rate.reset * 1000 - Date.now()
-        const diffMinutes = Math.ceil(diff / 60000)
-        errorMessage.value = `Server has reached a rate limit of the Github API. This limit will be reset at ${time} (in ${diffMinutes} minutes)`
-        loading.value = false
-        rateLimitExceeded.value = true
-        return
-      }
-    } catch (e) {
-      loading.value = false
-      return
-    }
-  }
-
-  try {
-    const clientReleases = await AppService.getClientReleases()
-    current.value = clientReleases.current
-    minimum.value = clientReleases.minimum
-    loadedClientReleases.value = clientReleases.releases
-  } catch (e: any) {
-    errorMessage.value = 'An error occurred loading the releases: ' + e.message
-  } finally {
-    loading.value = false
-  }
-}
-
-const filteredReleases = computed(() => {
-  return loadedClientReleases.value.filter((release) => {
-    const isMinimumVersionOrHigher =
-      minor(release.tag_name) === minor(minimum.value!.tag_name)
-    const isReleaseCandidate = isVersionUnstable(release)
-    const isDraft = release.draft
-
-    return (
-      isMinimumVersionOrHigher &&
-      (isCurrentUnstable() || showPrereleases.value || !isReleaseCandidate) &&
-      !isDraft
-    )
-  })
-})
-
-const getIsCurrentUnstable = computed(() => {
-  return isCurrentUnstable()
-})
-
-function isCurrentUnstable() {
-  // Determine if current is rc/unstable, meaning we should ignore prerelease filter checkbox
-  const currentRelease = current.value
-  return isVersionUnstable(currentRelease)
-}
-
-function isDisabledRelease(release: IRelease) {
-  return (
-    isCurrentRelease(release) ||
-    !isUpgradeOrAllowedDowngrade(release, current.value) ||
-    isBelowMinimum(release)
-  )
-}
-
-function calculateLabelDisabledReason(release: IRelease) {
-  const prefix = isVersionUnstable(release)
-    ? `${release.tag_name}, unstable`
-    : release.tag_name
-
-  if (isCurrentRelease(release)) {
-    return `${prefix}, currently installed`
-  }
-  if (isBelowMinimum(release)) {
-    return `${prefix}, below minimum`
-  }
-  if (!isUpgradeOrAllowedDowngrade(release, current.value)) {
-    return `${prefix}, downgrade not allowed`
-  }
-
-  return prefix
-}
-
-function isVersionUnstable(release?: IRelease) {
-  if (release?.tag_name?.length) {
-    return (
-      release.prerelease ||
-      release.tag_name.includes('rc') ||
-      release.tag_name.includes('unstable')
-    )
-  }
-  return false
-}
-
-function isBelowMinimum(release: IRelease) {
-  return compare(release.tag_name, minimum.value!.tag_name) === -1
-}
-
-function isUpgradeOrAllowedDowngrade(release: IRelease, current?: IRelease) {
-  // If no current release is known, we need to throw
-  if (!current) {
-    throw new Error('No current release is known, cannot compare.')
-  }
-  if (allowDowngrade.value) {
-    return true
-  }
-
-  return (
-    compare(release.tag_name, current.tag_name) !== -1 &&
-    compare(release.tag_name, minimum.value!.tag_name) !== -1
-  )
-}
-
-function isCurrentRelease(release: IRelease) {
-  return release.tag_name === current.value?.tag_name
-}
-
-async function clickUpdateClient(version?: string) {
-  if (
-    !confirm(
-      'Are you sure? This might cause breaking changes, if the server is outdated'
-    )
-  ) {
-    return
-  }
-
-  await AppService.updateClientDistGithub(version, allowDowngrade.value)
-  location.reload()
-}
-</script>

package/src/components/Settings/UserManagementSettings.vue

@@ -1,257 +0,0 @@
-<template>
-  <v-card>
-    <v-toolbar color="primary">
-      <v-avatar>
-        <v-icon>settings</v-icon>
-      </v-avatar>
-      <v-toolbar-title> Users </v-toolbar-title>
-    </v-toolbar>
-    <GridLoader
-      v-if="loading"
-      :size="20"
-      color="#a70015"
-      style="margin: 250px; position: absolute"
-    />
-    <v-list lines="three">
-      <v-list-subheader> Showing all users </v-list-subheader>
-
-      <v-list-item
-        v-for="(user, index) in users"
-        :key="index"
-        class="pl-6"
-        style="
-          max-width: 800px;
-          border-top: 1px solid grey;
-          border-bottom: 1px solid grey;
-        "
-      >
-        <v-list-item-content
-          :class="
-            isCurrentAccount(user) ? 'pl-6 grey darken-3' : 'pl-6 grey darken-4'
-          "
-        >
-          <v-list-item-title>
-            User '{{ user.username }}'
-            <strong
-              v-if="isCurrentAccount(user)"
-              class="text--primary float-end mr-5 mt-2"
-            >
-              Your account
-            </strong>
-          </v-list-item-title>
-          <v-list-item-subtitle />
-          <span class="text-grey-darken-4">
-            <ul>
-              <li>
-                <span
-                  v-if="user.isVerified"
-                  class="text-success"
-                >
-                  Account verified
-                </span>
-                <span
-                  v-else
-                  class="text-error"
-                >
-                  Account not verified
-                </span>
-              </li>
-              <li>Created at {{ formatIntlDate(user.createdAt) }}</li>
-              <li v-if="user.isDemoUser">Demo user account</li>
-
-              <li>
-                Role(s)
-                <ul>
-                  <li v-if="user.isRootUser">
-                    <v-chip
-                      class="mb-2 mt-2"
-                      size="small"
-                    >
-                      OWNER
-                    </v-chip>
-                  </li>
-                  <li
-                    v-for="role of convertRoles(user.roles)"
-                    :key="role"
-                  >
-                    <v-chip
-                      class="mb-2 mt-2"
-                      size="small"
-                    >
-                      {{ role }}
-                    </v-chip>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </span>
-        </v-list-item-content>
-        <v-list-item-action>
-          <v-btn
-            :disabled="isCurrentAccount(user) || user.isRootUser"
-            :color="user.isVerified ? 'error darken-4' : 'success'"
-            @click="verifyUser(user, !user.isVerified)"
-          >
-            <v-icon class="mr-2">shield</v-icon>
-            <span v-if="!user.isVerified"> Verify account </span>
-            <span v-if="user.isVerified"> Unverify account </span>
-          </v-btn>
-          <v-btn
-            :color="user.isRootUser ? 'error darken-4' : 'success'"
-            :disabled="isCurrentAccount(user) || !profile?.isRootUser"
-            class="mt-2"
-            @click="setRootUser(user, !user.isRootUser)"
-          >
-            <v-icon class="mr-2">key</v-icon>
-            <span v-if="user.isRootUser"> Remove owner </span>
-            <span v-if="!user.isRootUser"> Set owner </span>
-          </v-btn>
-          <v-btn
-            :disabled="isCurrentAccount(user) || user.isRootUser"
-            class="mt-2"
-            color="error-darken-2"
-            @click="deleteUser(user)"
-          >
-            <v-icon class="mr-2">delete</v-icon>
-            Delete
-          </v-btn>
-        </v-list-item-action>
-      </v-list-item>
-    </v-list>
-  </v-card>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { UserService } from '@/backend/user.service'
-import { Role, User } from '@/models/user.model'
-import { formatIntlDate } from '@/utils/date.utils'
-import GridLoader from '@/components/Generic/Loaders/GridLoader.vue'
-import { useQuery } from '@tanstack/vue-query'
-import { useSnackbar } from '@/shared/snackbar.composable'
-
-const snackbar = useSnackbar()
-const loading = ref<boolean>(false)
-const profile = ref<User>()
-const users = ref<User[]>([])
-const roles = ref<Role[]>([])
-
-async function loadData() {
-  loading.value = true
-  try {
-    profile.value = await UserService.getProfile()
-    roles.value = await UserService.listRoles()
-    users.value = await UserService.listUsers()
-  } catch (e) {
-    loading.value = false
-    console.error(e)
-    throw e
-  }
-
-  loading.value = false
-
-  return {
-    users,
-    roles,
-    profile
-  }
-}
-
-const userQuery = useQuery({
-  queryKey: ['userRolesProfile'],
-  queryFn: loadData
-})
-
-function convertRoles(roleIds: (string | number)[]): (string | undefined)[] {
-  return roleIds.map((roleId) => roles.value.find((r) => r.id == roleId)?.name)
-}
-
-function isCurrentAccount(user: User): boolean {
-  return user.id == profile.value?.id
-}
-
-async function deleteUser(user: User) {
-  if (!confirm(`Are you sure you want to delete ${user.username}?`)) {
-    return
-  }
-
-  try {
-    loading.value = true
-    await UserService.deleteUser(user.id)
-    await userQuery.refetch()
-  } catch (e) {
-    loading.value = false
-    console.error(e)
-    throw e
-  }
-  loading.value = false
-
-  snackbar.info(`User ${user.username} deleted`)
-}
-
-async function verifyUser(user: User, isVerified: boolean = true) {
-  if (user.isRootUser) {
-    snackbar.error('You are not allowed to do perform this action on an owner')
-    return
-  }
-  if (
-    !confirm(
-      `Are you sure you want to ${isVerified ? 'verify' : 'unverify'} ${user.username}?`
-    )
-  ) {
-    return
-  }
-
-  try {
-    loading.value = true
-    await UserService.setUserVerified(user.id, isVerified)
-    await userQuery.refetch()
-  } catch (e) {
-    loading.value = false
-    console.error(e)
-    throw e
-  }
-  loading.value = false
-
-  snackbar.info(
-    isVerified
-      ? `User ${user.username} verified`
-      : `User ${user.username} unverified`
-  )
-}
-
-async function setRootUser(user: User, isRootUser: boolean = true) {
-  if (!profile.value?.isRootUser) {
-    snackbar.error(
-      "You are not allowed to do perform this action as you're not an owner"
-    )
-  }
-
-  if (
-    !confirm(
-      `You are about to ${isRootUser ? 'set' : 'remove'} owner rights on ${
-        user.username
-      }. Are you sure?`
-    )
-  ) {
-    return
-  }
-
-  try {
-    loading.value = true
-    await UserService.setRootUser(user.id, isRootUser)
-    await userQuery.refetch()
-  } catch (e) {
-    loading.value = false
-    console.error(e)
-    throw e
-  }
-  loading.value = false
-
-  snackbar.info(
-    isRootUser
-      ? `User ${user.username} set to owner`
-      : `User ${user.username} is no longer owner`
-  )
-}
-</script>

package/src/components/TopBar.vue

@@ -1,147 +0,0 @@
-<template>
-  <v-app-bar color="primary">
-    <v-toolbar-title class="text-uppercase text-white">
-      <span class="font-weight-light"> FDM </span>
-      <strong> Monster </strong>
-    </v-toolbar-title>
-
-    <v-spacer v-if="isDemoMode" />
-    <h2
-      v-if="isDemoMode"
-      class="text-uppercase text--white"
-    >
-      DEMO MODE
-    </h2>
-    <v-spacer />
-
-    <PrintJobsMenu />
-
-    <v-menu
-      v-if="authStore.hasAuthToken && !authStore.isLoginExpired"
-      :close-on-content-click="false"
-      location="bottom right"
-      open-on-hover
-      transition="slide-y-transition"
-    >
-      <template #activator="{ props }">
-        <!--Theme?-->
-        <v-btn
-          class="ml-2"
-          color="secondary"
-          theme="dark"
-          v-bind="props"
-        >
-          <v-icon class="mr-2">person</v-icon>
-          {{ username }}
-        </v-btn>
-      </template>
-
-      <v-list>
-        <v-list-item
-          v-for="(item, index) in items"
-          :key="index"
-          :to="item.path"
-          :title="item.title"
-          :prepend-avatar="item.icon"
-          link
-        />
-      </v-list>
-    </v-menu>
-
-    <span
-      v-if="isDevEnv && expiry"
-      class="ml-2"
-    >
-      AuthExp {{ expiry }}
-    </span>
-
-    <span
-      v-if="isDevEnv"
-      class="ml-2"
-    >
-      <small>
-        S{{ socketState.setup ? 1 : 0 }} C{{ socketState.connected ? 1 : 0 }}
-        {{ socketState.id }}
-      </small>
-    </span>
-
-    <TooltipButton
-      v-if="authStore.loginRequired === true"
-      tooltip="Go back to login"
-      text="Logout"
-      color="secondary"
-      icon="logout"
-      @click="logout()"
-    />
-
-    <v-btn
-      v-if="authStore.loginRequired === true"
-      class="ml-2"
-    >
-      <v-icon class="mr-2">logout</v-icon>
-      Logout
-    </v-btn>
-
-    <HelpOverlay />
-  </v-app-bar>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useIntervalFn } from '@vueuse/core'
-import PrintJobsMenu from '@/components/Generic/PrintJobsMenu.vue'
-import { useAuthStore } from '@/store/auth.store'
-import { useProfileStore } from '@/store/profile.store'
-import { routeToLogin } from '@/router/utils'
-import { isDevEnv, isProdEnv } from '@/shared/app.constants'
-import { socketState } from '@/store/connection.store'
-
-const profileStore = useProfileStore()
-const authStore = useAuthStore()
-const router = useRouter()
-const items = [
-  { title: 'Open Profile', icon: 'person', path: '/settings/account' }
-]
-
-const now = ref(Date.now())
-if (isDevEnv) {
-  useIntervalFn(() => {
-    now.value = Date.now()
-  }, 1000)
-}
-
-const expiry = computed(() => {
-  if (isProdEnv) {
-    return ''
-  }
-  if (!authStore.tokenClaims?.exp) {
-    return ''
-  }
-  const diffValue = authStore.tokenClaims.exp - now.value / 1000
-  return `${Math.round(diffValue)}s`
-})
-
-const username = computed(() => {
-  return profileStore.username
-})
-
-const isDemoMode = computed(() => {
-  return authStore.isDemoMode
-})
-
-async function logout() {
-  await authStore.logout(true)
-  await routeToLogin(router)
-}
-</script>
-
-<style lang="scss">
-.border-time {
-  border: 1px solid white;
-
-  * {
-    border: none;
-  }
-}
-</style>