@fdm-monster/client-next 0.0.1 → 0.0.2

package/src/components/Login/LoginForm.vue

@@ -1,206 +0,0 @@
-<template>
-  <v-card
-    class="pa-4"
-    elevation="10"
-    style="border-radius: 10px"
-  >
-    <v-card-text>
-      <v-form>
-        <label> Username </label>
-        <v-text-field
-          v-model="username"
-          autofocus
-          name="login"
-          placeholder="Username"
-          prepend-icon="mdi-account"
-          type="text"
-          variant="underlined"
-          @keyup.enter="formIsDisabled || login()"
-        />
-        <v-text-field
-          id="password"
-          v-model="password"
-          :append-icon="showPassword ? 'visibility_off' : 'visibility'"
-          :type="showPassword ? 'text' : 'password'"
-          label="Password"
-          name="password"
-          password
-          prepend-icon="lock"
-          variant="underlined"
-          @click:append="showPassword = !showPassword"
-          @keyup.enter="formIsDisabled || login()"
-        />
-        <v-alert
-          v-if="errorMessage"
-          class="mt-6"
-          color="error"
-          density="compact"
-          variant="outlined"
-        >
-          {{ errorMessage }}
-        </v-alert>
-        <v-alert
-          v-if="authStore.lastLogoutReason"
-          class="mt-6"
-          color="error-darken-1"
-          density="compact"
-          variant="outlined"
-        >
-          Reason for automatic logout: {{ authStore.lastLogoutReason }}
-        </v-alert>
-      </v-form>
-    </v-card-text>
-    <v-card-actions>
-      <v-btn
-        :loading="loading"
-        class="pa-4"
-        color="primary"
-        size="lg"
-        variant="flat"
-        style="width: 100%"
-        @click="login()"
-      >
-        Login
-      </v-btn>
-    </v-card-actions>
-    <v-card-actions>
-      <v-btn
-        :disabled="!authStore.registration"
-        class="pa-4"
-        size="lg"
-        variant="flat"
-        style="width: 100%"
-        @click="gotoRegistration()"
-      >
-        Register new account {{ authStore.registration ? '' : '(not enabled)' }}
-        <v-icon
-          class="pl-5"
-          icon="right"
-        />
-      </v-btn>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useEventBus } from '@vueuse/core'
-import { AxiosError } from 'axios'
-import { useAuthStore } from '@/store/auth.store'
-import { useSnackbar } from '@/shared/snackbar.composable'
-import { RouteNames } from '@/router/route-names'
-import {
-  AUTH_ERROR_REASON,
-  convertAuthErrorReason
-} from '@/shared/auth.constants'
-
-const authStore = useAuthStore()
-const errorMessage = ref('')
-const username = ref('')
-const showPassword = ref(false)
-const password = ref('')
-const router = useRouter()
-const route = useRoute()
-const loading = ref(false)
-const loginEvent = useEventBus('auth:login')
-const snackbar = useSnackbar()
-
-const formIsDisabled = computed(() => {
-  return (username.value ?? '')?.length < 3 || (password.value ?? '').length < 3
-})
-
-onMounted(async () => {
-  authStore.loadTokens()
-  await authStore.checkAuthenticationRequirements()
-  if (authStore.loginRequired === false) {
-    // As AppLoader might not trigger, we trigger it ourselves
-    console.debug(
-      'LoginView, no login required, redirecting to',
-      route.query.redirect,
-      'or home'
-    )
-    loginEvent.emit(true)
-    return await routeToRedirect()
-  }
-  if (!authStore.hasRefreshToken) {
-    return
-  }
-
-  // Check if login is already valid, if so route away safely
-  const success = await authStore.verifyOrRefreshLoginOnceOrLogout()
-  if (success) {
-    await routeToRedirect()
-  }
-})
-
-async function gotoRegistration() {
-  return await router.push({ name: RouteNames.Registration })
-}
-
-async function login() {
-  try {
-    loading.value = true
-    await authStore.login(username.value, password.value)
-    authStore.lastLogoutReason = null
-    password.value = ''
-    loading.value = false
-  } catch (e) {
-    loading.value = false
-    if ((e as AxiosError)?.response?.status === 401) {
-      password.value = ''
-
-      const reasonCode: keyof typeof AUTH_ERROR_REASON = (
-        (e as AxiosError)?.response?.data as any
-      )?.reasonCode
-      const convertedReason = convertAuthErrorReason(reasonCode)
-      if (reasonCode === AUTH_ERROR_REASON.AccountNotVerified) {
-        snackbar.error(
-          convertedReason,
-          'Please ask your administrator to verify your account and try again.'
-        )
-      } else if (reasonCode === AUTH_ERROR_REASON.PasswordChangeRequired) {
-        snackbar.error(
-          convertedReason,
-          'Your password needs to be changed. This feature is sadly not finished'
-        )
-      }
-
-      errorMessage.value = convertedReason
-      return
-    }
-
-    snackbar.openErrorMessage({
-      title: 'Error logging in',
-      subtitle: 'Please test your connection and try again.'
-    })
-    errorMessage.value =
-      'Error logging in - status code ' + (e as AxiosError)?.response?.status
-    password.value = ''
-
-    return
-  }
-
-  errorMessage.value = ''
-
-  // Trigger AppLoader
-  loginEvent.emit(true)
-
-  return await routeToRedirect()
-}
-
-async function routeToRedirect() {
-  const routePath = route.query.redirect
-  if (!routePath) {
-    console.debug('[LoginForm] Redirecting to home')
-    await router.push({ name: RouteNames.Home })
-    return
-  } else {
-    console.debug('[LoginForm] Redirecting to ', routePath)
-    await router.push({
-      path: routePath as string
-    })
-    return
-  }
-}
-</script>

package/src/components/Login/LoginView.spec.ts

@@ -1,64 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, it, expect, beforeEach } from 'vitest'
-import LoginView from '@/components/Login/LoginView.vue' // Adjust the path as necessary
-import LoginForm from '@/components/Login/LoginForm.vue'
-import Logo from '@/components/Login/Logo.vue'
-import { createPinia } from 'pinia'
-import { createVuetify } from 'vuetify'
-import { createRouter, createWebHistory } from 'vue-router'
-
-const pinia = createPinia()
-const vuetify = createVuetify()
-// Create a router for testing
-const routes = [{ path: '/', component: LoginView }]
-const router = createRouter({
-  history: createWebHistory(),
-  routes
-})
-
-describe('LoginView.vue', () => {
-  let wrapper: ReturnType<typeof mount>
-
-  beforeEach(() => {
-    wrapper = mount(LoginView, {
-      global: {
-        plugins: [vuetify, pinia, router]
-      }
-    })
-  })
-
-  it('renders the logo component', () => {
-    const logo = wrapper.findComponent(Logo)
-    expect(logo.exists()).toBe(true)
-  })
-
-  it('renders the LoginForm component', () => {
-    const loginForm = wrapper.findComponent(LoginForm)
-    expect(loginForm.exists()).toBe(true)
-  })
-
-  it('displays the correct title', () => {
-    console.log(wrapper.html()) // Log the rendered output for debugging
-
-    const title = wrapper.find('.text-uppercase.text-red') // Using the class selector
-    expect(title.exists()).toBe(true) // Check if the title exists
-    expect(title.text()).toContain('FDM')
-    expect(title.text()).toContain('Monster')
-  })
-
-  it('displays the correct subtitle', () => {
-    const subtitle = wrapper.find('.v-card-subtitle').text()
-    expect(subtitle).toBe('Welcome back! Please enter your details')
-  })
-
-  it('renders with the correct structure', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-
-  it('has the correct CSS class for the login card', () => {
-    const loginCard = wrapper.find('.login-card')
-    expect(loginCard.exists()).toBe(true)
-    expect(loginCard.classes()).toContain('login-card')
-    expect(loginCard.attributes('style')).toContain('border-radius: 10px')
-  })
-})

package/src/components/Login/LoginView.vue

@@ -1,65 +0,0 @@
-<template>
-  <v-row
-    class="position-relative"
-    no-gutters
-  >
-    <v-col
-      cols="12"
-      lg="12"
-    >
-      <v-container>
-        <div
-          class="d-flex align-center"
-          style="min-height: calc(100vh - 148px)"
-        >
-          <v-row
-            justify="center"
-            class="align-content-center"
-          >
-            <div class="pt-6 pl-6 d-flex flex-column align-center">
-              <Logo />
-
-              <v-toolbar-title class="text-uppercase text-red">
-                <strong> FDM&nbsp; </strong>
-                <strong> Monster </strong>
-              </v-toolbar-title>
-
-              <v-toolbar-title class="mt-lg-6 mt-sm-5 mb-md-5">
-                Login to your account
-              </v-toolbar-title>
-
-              <v-card-subtitle class="text-grey mb-md-5">
-                Welcome back! Please enter your details
-              </v-card-subtitle>
-            </div>
-
-            <v-col
-              cols="12"
-              md="12"
-            >
-              <LoginForm class="login-card" />
-            </v-col>
-          </v-row>
-        </div>
-      </v-container>
-    </v-col>
-  </v-row>
-</template>
-
-<script lang="ts" setup>
-import LoginForm from './LoginForm.vue'
-</script>
-
-<style lang="scss">
-.login-card {
-  max-width: 475px;
-  margin: 0 auto;
-}
-
-.blur-logo {
-  position: absolute;
-  filter: blur(18px);
-  bottom: 0;
-  transform: inherit;
-}
-</style>

package/src/components/Login/Logo.vue

@@ -1,13 +0,0 @@
-<template>
-  <v-img
-    :src="imgUrl"
-    class="shrink mr-1 pt-3 ml-1"
-    contain
-    style="opacity: 0.85"
-    width="150"
-  />
-</template>
-
-<script lang="ts" setup>
-import imgUrl from '@/assets/logo.png'
-</script>

package/src/components/Login/PermissionDenied.vue

@@ -1,109 +0,0 @@
-<template>
-  <v-container
-    fill-height
-    fluid
-  >
-    <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-app-bar>
-
-    <img
-      alt="FDM Monster Background"
-      class="grid-bg-img align-content-center"
-      src="/img/logo.svg"
-      style="opacity: 0.06"
-    />
-
-    <v-layout
-      align-center
-      column
-      justify-center
-    >
-      <v-card
-        class="flex align-center justify-center pa-lg-16 pa-sm-10"
-        style="width: 80%"
-      >
-        <v-card-title>
-          <v-icon
-            class="mr-4"
-            size="50"
-          >
-            lock
-          </v-icon>
-          <h3>Permission Denied</h3>
-        </v-card-title>
-        <v-card-subtitle class="mt-1">
-          You do not have permission to access a specific resource on this page.
-        </v-card-subtitle>
-
-        <v-card-text v-if="permissionProblems">
-          <div v-if="permissionProblems.page">
-            Page:
-            <strong>
-              {{ permissionProblems?.page }}
-            </strong>
-          </div>
-          <div v-if="permissionProblems.permissions">
-            Required permission(s):
-            <strong
-              v-for="perm of permissionProblems.permissions"
-              :key="perm"
-            >
-              {{ perm }}
-            </strong>
-          </div>
-          <div v-if="permissionProblems.roles">
-            Usable roles:
-            <strong>
-              {{ permissionProblems.roles?.join(', ') }}
-            </strong>
-          </div>
-          <div v-if="permissionProblems.url">
-            Problematic API path:
-            <strong>
-              {{ permissionProblems.url }}
-            </strong>
-          </div>
-          <div v-if="permissionProblems.error">
-            Error:
-            <strong>
-              {{ permissionProblems.error }}
-            </strong>
-          </div>
-        </v-card-text>
-        <v-card-actions class="mt-6">
-          <v-btn
-            class="align-center"
-            color="primary"
-            to="/"
-            variant="elevated"
-          >
-            <v-icon class="mr-2">home</v-icon>
-            Go home
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-layout>
-  </v-container>
-</template>
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-
-const route = useRoute()
-
-interface PermissionDeniedQuery {
-  roles: string[]
-  permissions?: string[]
-  url?: string
-  page?: string
-  error?: string
-}
-
-const permissionProblems = computed(() => {
-  return route.query as any as PermissionDeniedQuery
-})
-</script>

package/src/components/Login/RegistrationForm.vue

@@ -1,207 +0,0 @@
-<template>
-  <v-container
-    fill-height
-    fluid
-  >
-    <v-layout
-      align-content-center
-      justify-center
-    >
-      <v-flex
-        class="d-flex flex-column align-content-center"
-        md4
-        sm8
-        style="max-width: 450px; margin-top: 10%"
-        xs12
-      >
-        <div class="d-flex flex-column align-center">
-          <v-img
-            :src="require('@/assets/logo.png')"
-            class="shrink mr-1 pt-3 ml-1"
-            contain
-            style="opacity: 0.85"
-            width="150"
-          />
-
-          <v-toolbar-title class="text-uppercase text-red">
-            <strong> FDM&nbsp; </strong>
-            <strong> Monster </strong>
-          </v-toolbar-title>
-
-          <v-toolbar-title class="mt-lg-6 mt-sm-5">
-            Register new account
-          </v-toolbar-title>
-          <v-card-subtitle class="text-grey">
-            Welcome! Please register your guest account
-          </v-card-subtitle>
-        </div>
-
-        <v-card
-          class="elevation-4 pa-4"
-          style="border-radius: 10px"
-        >
-          <v-card-text>
-            <v-form>
-              <label> Username </label>
-              <v-text-field
-                v-model="username"
-                :rules="[
-                  (v) => !!v || 'Username is required',
-                  (v) =>
-                    (v?.length ?? 0) >= 3 ||
-                    'Username must be of length 3 or greater',
-                  (v) =>
-                    !v.toLowerCase().includes('admin') ||
-                    'Username may not contain the word admin',
-                  (v) =>
-                    !v.toLowerCase().includes('root') ||
-                    'Username may not contain the word root',
-                  (v) =>
-                    !(v.toLowerCase() === 'demo') ||
-                    'Username may not equal the word demo'
-                ]"
-                autofocus
-                name="login"
-                label="Username"
-                prepend-icon="person"
-                type="text"
-              />
-              <v-text-field
-                id="password"
-                v-model="password"
-                :append-icon="showPassword ? 'visibility' : 'visibility_off'"
-                :type="showPassword ? 'text' : 'password'"
-                label="Password"
-                name="password"
-                :rules="[
-                  (v) => !!v || 'Password is required',
-                  (v) =>
-                    (!!v && v?.length >= 8) ||
-                    'Password must be of length 8 or greater'
-                ]"
-                password
-                prepend-icon="lock"
-                @click:append="showPassword = !showPassword"
-              />
-              <v-text-field
-                id="password"
-                v-model="password2"
-                :append-icon="showPassword2 ? 'visibility' : 'visibility_off'"
-                :type="showPassword2 ? 'text' : 'password'"
-                :rules="[
-                  (v) => !!v || 'Repeated password is required',
-                  (v) => v === password || 'Passwords are not equal'
-                ]"
-                label="Repeated Password"
-                name="password"
-                password
-                prepend-icon="lock"
-                @click:append="showPassword2 = !showPassword2"
-                @keyup.enter="formIsDisabled || registerAccount()"
-              />
-              <v-alert
-                v-if="errorMessage"
-                class="mt-6"
-                color="error"
-                density="compact"
-                variant="outlined"
-              >
-                {{ errorMessage }}
-              </v-alert>
-            </v-form>
-          </v-card-text>
-          <v-card-actions>
-            <v-btn
-              :loading="loading"
-              class="pa-4"
-              color="primary"
-              size="large"
-              style="width: 100%"
-              @click="registerAccount()"
-            >
-              Register account
-            </v-btn>
-          </v-card-actions>
-          <v-card-actions>
-            <v-btn
-              style="width: 100%"
-              class="pa-4"
-              size="large"
-              @click="gotoLogin()"
-            >
-              <v-icon class="mr-2">arrow_left</v-icon>Back to Login
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-flex>
-    </v-layout>
-  </v-container>
-</template>
-<script lang="ts" setup>
-import { AxiosError } from 'axios'
-import { computed, onMounted, ref } from 'vue'
-import { useAuthStore } from '@/store/auth.store'
-import { useRouter } from 'vue-router'
-import { useSnackbar } from '@/shared/snackbar.composable'
-import { AuthService } from '@/backend/auth.service'
-import { RouteNames } from '@/router/route-names'
-
-const authStore = useAuthStore()
-const router = useRouter()
-const errorMessage = ref('')
-const username = ref('')
-const showPassword = ref(false)
-const showPassword2 = ref(false)
-const password = ref('')
-const password2 = ref('')
-const loading = ref(false)
-const snackbar = useSnackbar()
-
-async function gotoLogin() {
-  return await router.push({ name: RouteNames.Login })
-}
-
-const formIsDisabled = computed(() => {
-  return (
-    (username.value ?? '')?.length < 3 ||
-    (password.value ?? '').length < 3 ||
-    password.value != password2.value
-  )
-})
-
-onMounted(async () => {
-  await authStore.logout()
-  await authStore.checkAuthenticationRequirements()
-  if (!authStore.registration) {
-    snackbar.info('Registration is disabled, please contact your administrator')
-    await router.push({
-      name: RouteNames.Login
-    })
-  }
-})
-
-async function registerAccount() {
-  try {
-    loading.value = true
-    await AuthService.registerAccount(username.value, password.value)
-    loading.value = false
-  } catch (e) {
-    loading.value = false
-    if ((e as AxiosError)?.response?.status === 401) {
-      errorMessage.value = 'Invalid credentials'
-      return
-    }
-
-    snackbar.openErrorMessage({
-      title: 'Error logging in',
-      subtitle: 'Please test your connection and try again.'
-    })
-
-    return
-  }
-  errorMessage.value = ''
-
-  snackbar.info('Account created, please login')
-  await gotoLogin()
-}
-</script>

package/src/components/Login/RegistrationView.vue

@@ -1,17 +0,0 @@
-<template>
-  <v-container
-    fill-height
-    fluid
-  >
-    <v-layout
-      align-center
-      justify-center
-    >
-      <RegistrationForm />
-    </v-layout>
-  </v-container>
-</template>
-
-<script lang="ts" setup>
-import RegistrationForm from '@/components/Login/RegistrationForm.vue'
-</script>