@fdm-monster/client-next 0.0.1

package/src/components/Settings/SoftwareUpgradeSettings.vue

@@ -0,0 +1,297 @@
+<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

@@ -0,0 +1,257 @@
+<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

@@ -0,0 +1,147 @@
+<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>