More work on Auth and Frontend.

.github/workflows/goreleaser.yml

@@ -0,0 +1,41 @@
+name: goreleaser
+
+on:
+  push:
+    # run only against tags
+    tags:
+      - '*'
+
+permissions:
+  contents: write
+  # packages: write
+  # issues: write
+
+jobs:
+  goreleaser:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Fetch all tags
+        run: git fetch --force --tags
+      - name: Set up Go
+        uses: actions/setup-go@v2
+        with:
+          go-version: 1.18
+      -   name: Install NPM
+          if: success()
+          uses: actions/setup-node@v3
+          with:
+            node-version: 16
+      - name: Run GoReleaser
+        uses: goreleaser/goreleaser-action@v2
+        with:
+          # either 'goreleaser' (default) or 'goreleaser-pro'
+          distribution: goreleaser
+          version: latest
+          args: release --rm-dist
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -19,4 +19,6 @@ config.yaml
 mouthpiece
 test.db
 frontend/node_modules/
-frontend/dist/
+frontend/dist/
+dist/
+test.db-journal

.goreleaser.yaml

@@ -0,0 +1,40 @@
+# This is an example .goreleaser.yml file with some sensible defaults.
+# Make sure to check the documentation at https://goreleaser.com
+before:
+  hooks:
+    # You may remove this if you don't use go modules.
+    - go mod tidy
+    # Build html frontend
+    - go generate ./...
+builds:
+  - env:
+      - CGO_ENABLED=0
+    goos:
+      - linux
+      - windows
+      - darwin
+    flags:
+      - -trimpath
+    ldflags:
+      - -s -w -X github.com/Fishwaldo/mouthpiece/internal.gitVersion={{.Version}} -X github.com/Fishwaldo/mouthpiece/internal.gitCommit={{.ShortCommit}} -X github.com/Fishwaldo/mouthpiece/internal.buildDate={{.Date}} 
+    asmflags:
+      #- all=-trimpath
+    gcflags:
+      #- all=-trimpath
+archives:
+  - replacements:
+      darwin: Darwin
+      linux: Linux
+      windows: Windows
+      386: i386
+      amd64: x86_64
+checksum:
+  name_template: 'checksums.txt'
+snapshot:
+  name_template: "{{ incpatch .Version }}-next"
+changelog:
+  sort: asc
+  filters:
+    exclude:
+      - '^docs:'
+      - '^test:'

frontend/frontend.go

@@ -0,0 +1,11 @@
+package frontend
+
+import (
+	"embed"
+	_ "embed"
+)
+
+//go:generate npm run build
+
+//go:embed dist/*
+var FrontEndFiles embed.FS

frontend/package-lock.json

@@ -16,9 +16,10 @@
         "@coreui/utils": "^1.3.1",
         "@coreui/vue": "^4.1.0",
         "@coreui/vue-chartjs": "2.0.0",
+        "@vuelidate/core": "^2.0.0-alpha.44",
+        "@vuelidate/validators": "^2.0.0-alpha.31",
         "axios": "^0.27.2",
         "core-js": "^3.19.0",
-        "vee-validate": "^4.6.4",
         "vue": "^3.2.37",
         "vue-class-component": "^8.0.0-0",
         "vue-router": "^4.0.12",
@@ -4124,6 +4125,72 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vuelidate/core": {
+      "version": "2.0.0-alpha.44",
+      "resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.0-alpha.44.tgz",
+      "integrity": "sha512-3DlCe3E0RRXbB+OfPacUetKhLmXzmnjeHkzjnbkc03p06mKm6h9pXR5pd6Mv4s4tus4sieuKDb2YWNmKK6rQeA==",
+      "dependencies": {
+        "vue-demi": "^0.13.4"
+      }
+    },
+    "node_modules/@vuelidate/core/node_modules/vue-demi": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.7.tgz",
+      "integrity": "sha512-hbhlvpx1gFW3TB5HxJ0mNxyA9Jh5iQt409taOs6zkhpvfJ7YzLs1rsLufJmDsjH5PI1cOyfikY1fE/meyHfU5A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vuelidate/validators": {
+      "version": "2.0.0-alpha.31",
+      "resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.0-alpha.31.tgz",
+      "integrity": "sha512-+MFA9nZ7Y9zCpq383/voPDk/hiAmu6KqiJJhLOYB/FmrUPVoyKnuKnI9Bwiq8ok9GZlVkI8BnIrKPKGj9QpwiQ==",
+      "dependencies": {
+        "vue-demi": "^0.13.4"
+      }
+    },
+    "node_modules/@vuelidate/validators/node_modules/vue-demi": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.7.tgz",
+      "integrity": "sha512-hbhlvpx1gFW3TB5HxJ0mNxyA9Jh5iQt409taOs6zkhpvfJ7YzLs1rsLufJmDsjH5PI1cOyfikY1fE/meyHfU5A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "dev": true,
@@ -15740,16 +15807,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/vee-validate": {
-      "version": "4.6.4",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/devtools-api": "^6.1.4"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
     "node_modules/verror": {
       "version": "1.10.0",
       "dev": true,
@@ -19472,6 +19529,38 @@
       "version": "1.3.0",
       "dev": true
     },
+    "@vuelidate/core": {
+      "version": "2.0.0-alpha.44",
+      "resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.0-alpha.44.tgz",
+      "integrity": "sha512-3DlCe3E0RRXbB+OfPacUetKhLmXzmnjeHkzjnbkc03p06mKm6h9pXR5pd6Mv4s4tus4sieuKDb2YWNmKK6rQeA==",
+      "requires": {
+        "vue-demi": "^0.13.4"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.7.tgz",
+          "integrity": "sha512-hbhlvpx1gFW3TB5HxJ0mNxyA9Jh5iQt409taOs6zkhpvfJ7YzLs1rsLufJmDsjH5PI1cOyfikY1fE/meyHfU5A==",
+          "requires": {}
+        }
+      }
+    },
+    "@vuelidate/validators": {
+      "version": "2.0.0-alpha.31",
+      "resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.0-alpha.31.tgz",
+      "integrity": "sha512-+MFA9nZ7Y9zCpq383/voPDk/hiAmu6KqiJJhLOYB/FmrUPVoyKnuKnI9Bwiq8ok9GZlVkI8BnIrKPKGj9QpwiQ==",
+      "requires": {
+        "vue-demi": "^0.13.4"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.7.tgz",
+          "integrity": "sha512-hbhlvpx1gFW3TB5HxJ0mNxyA9Jh5iQt409taOs6zkhpvfJ7YzLs1rsLufJmDsjH5PI1cOyfikY1fE/meyHfU5A==",
+          "requires": {}
+        }
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "dev": true,
@@ -26790,12 +26879,6 @@
       "version": "1.1.2",
       "dev": true
     },
-    "vee-validate": {
-      "version": "4.6.4",
-      "requires": {
-        "@vue/devtools-api": "^6.1.4"
-      }
-    },
     "verror": {
       "version": "1.10.0",
       "dev": true,

frontend/package.json

@@ -19,9 +19,10 @@
     "@coreui/utils": "^1.3.1",
     "@coreui/vue": "^4.1.0",
     "@coreui/vue-chartjs": "2.0.0",
+    "@vuelidate/core": "^2.0.0-alpha.44",
+    "@vuelidate/validators": "^2.0.0-alpha.31",
     "axios": "^0.27.2",
     "core-js": "^3.19.0",
-    "vee-validate": "^4.6.4",
     "vue": "^3.2.37",
     "vue-class-component": "^8.0.0-0",
     "vue-router": "^4.0.12",

frontend/src/_nav.js

@@ -4,10 +4,6 @@ export default [
     name: 'Dashboard',
     to: '/dashboard',
     icon: 'cil-speedometer',
-    badge: {
-      color: 'primary',
-      text: 'NEW',
-    },
   },
   {
     component: 'CNavTitle',
@@ -15,8 +11,8 @@ export default [
   },
   {
     component: 'CNavItem',
-    name: 'Colors',
-    to: '/apps/',
+    name: 'Applications',
+    to: '/apps',
     icon: 'cil-puzzle',
   },
   {
@@ -29,6 +25,10 @@ export default [
     to: '/users',
     icon: 'cil-puzzle',
   },
+  {
+    component: 'CNavTitle',
+    name: 'Transports',
+  },
   {
     component: 'CNavItem',
     name: 'Transports',
@@ -36,34 +36,21 @@ export default [
     icon: 'cil-cursor',
   },
   {
-    component: 'CNavGroup',
+    component: 'CNavTitle',
+    name: 'Notifications',
+  },
+  {
+    component: 'CNavItem',
     name: 'Notifications',
     to: '/notifications',
     icon: 'cil-bell',
-    items: [
-      {
-        component: 'CNavItem',
-        name: 'Alerts',
-        to: '/notifications/alerts',
-      },
-      {
-        component: 'CNavItem',
-        name: 'Badges',
-        to: '/notifications/badges',
-      },
-      {
-        component: 'CNavItem',
-        name: 'Modals',
-        to: '/notifications/modals',
-      },
-    ],
   },
   {
     component: 'CNavTitle',
     name: 'Settings',
   },
   {
-    component: 'CNavGroup',
+    component: 'CNavItem',
     name: 'Settings',
     to: '/settings',
     icon: 'cil-star',

frontend/src/components/AppFooter.vue

@@ -1,9 +1,9 @@
 <template>
   <CFooter>
     <div>
-      <a href="https://coreui.io" target="_blank">CoreUI</a>
+      <a href="https://github.com/Fishwaldo/mouthpiece" target="_blank">MouthPiece</a>
       <span class="ms-1"
-        >&copy; {{ new Date().getFullYear() }} creativeLabs.</span
+        >&copy; {{ new Date().getFullYear() }} Justin Hammond.</span
       >
     </div>
     <div class="ms-auto">

frontend/src/components/AppHeaderDropdownAccnt.vue

@@ -40,7 +40,7 @@
       <CDropdownItem>
         <CIcon icon="cil-shield-alt" /> Lock Account
       </CDropdownItem>
-      <CDropdownItem> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
+      <CDropdownItem @click="logout"> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
     </CDropdownMenu>
   </CDropdown>
 </template>
@@ -55,5 +55,10 @@ export default {
       itemsCount: 42,
     }
   },
+  methods: {
+    logout() {
+      this.$store.dispatch('auth/logout')
+    },
+  },
 }
 </script>

frontend/src/components/DocsCallout.vue

@@ -1,54 +0,0 @@
-<template>
-  <CCallout color="info" class="bg-white">
-    {{
-      content
-        ? content
-        : `A Vue ${name} component ${
-            plural ? 'have' : 'has'
-          } been created as a native Vue.js version
-      of Bootstrap ${name}. ${name} ${
-            plural ? 'are' : 'is'
-          } delivered with some new features,
-      variants, and unique design that matches CoreUI Design System requirements.`
-    }}
-    <br />
-    <br />
-    For more information please visit our official
-    <CLink :href="url" target="_blank">
-      documentation of CoreUI Components Library for Vue.js
-    </CLink>
-    .
-  </CCallout>
-</template>
-
-<script>
-import packageJson from '../../package.json'
-export default {
-  name: 'DocsCallout',
-  props: {
-    content: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
-    href: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
-    name: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
-    plural: Boolean,
-  },
-  setup(props) {
-    const url = `https://coreui.io/vue/docs/${packageJson.config.coreui_library_short_version}/${props.url}`
-
-    return {
-      url,
-    }
-  },
-}
-</script>

frontend/src/components/DocsExample.vue

@@ -1,43 +0,0 @@
-<template>
-  <div class="example">
-    <CNav variant="tabs">
-      <CNavItem>
-        <CNavLink href="#" active>
-          <CIcon icon="cil-media-play" class="me-2" />
-        </CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink :href="url" target="_blank">
-          <CIcon icon="cil-code" class="me-2" />
-          Code
-        </CNavLink>
-      </CNavItem>
-    </CNav>
-    <CTabContent class="rounded-bottom">
-      <CTabPane class="p-3 preview" visible>
-        <slot></slot>
-      </CTabPane>
-    </CTabContent>
-  </div>
-</template>
-
-<script>
-import pkg from '../../package.json'
-export default {
-  name: 'DocsExample',
-  props: {
-    href: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
-  },
-  setup(props) {
-    const url = `https://coreui.io/vue/docs/${pkg.config.coreui_library_short_version}/${props.href}`
-
-    return {
-      url,
-    }
-  },
-}
-</script>

frontend/src/components/HelloWorld.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-
-@Options({
-  props: {
-    msg: String
-  }
-})
-export default class HelloWorld extends Vue {
-  msg!: string
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

frontend/src/generated/index.ts

@@ -29,7 +29,6 @@ export { $ErrorModel } from './schemas/$ErrorModel';
 export { $FEConfig } from './schemas/$FEConfig';
 export { $MessageResult } from './schemas/$MessageResult';
 export { $post_message_request } from './schemas/$post_message_request';
-export { $string } from './schemas/$string';
 export { $stringList } from './schemas/$stringList';
 export { $TransportConfig } from './schemas/$TransportConfig';
 export { $User } from './schemas/$User';

frontend/src/generated/schemas/$string.ts

@@ -1,6 +0,0 @@
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export const $string = {
-    type: 'string',
-} as const;

frontend/src/layouts/DefaultLayout.vue

@@ -26,5 +26,9 @@ export default {
     AppSidebar,
     CContainer,
   },
+  mounted() {
+    if (!this.$store.state.auth.status.loggedIn)
+      this.$router.push('/pages/login')
+  }
 }
 </script>

frontend/src/main.ts

@@ -10,8 +10,7 @@ import { OpenAPI, DefaultService } from './generated'
 
 OpenAPI.BASE = ''
 
-DefaultService.getHealth().then(console.log)
-DefaultService.getConfig().then(console.log)
+
 
 const app = createApp(App)
 app.use(store)

frontend/src/router/index.js

@@ -13,252 +13,34 @@ const routes = [
       {
         path: '/dashboard',
         name: 'Dashboard',
-        // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
         component: () =>
           import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue'),
       },
       {
-        path: '/theme',
-        name: 'Theme',
-        redirect: '/theme/typography',
+        path: '/apps',
+        name: 'Applications',
+        component: () => import('@/views/apps/Applications.vue'),
       },
       {
-        path: '/theme/colors',
-        name: 'Colors',
-        component: () => import('@/views/theme/Colors.vue'),
+        path: '/users',
+        name: 'Users',
+        component: () => import('@/views/users/Users.vue'),
       },
       {
-        path: '/theme/typography',
-        name: 'Typography',
-        component: () => import('@/views/theme/Typography.vue'),
-      },
-      {
-        path: '/base',
-        name: 'Base',
-        component: {
-          render() {
-            return h(resolveComponent('router-view'))
-          },
-        },
-        redirect: '/base/breadcrumbs',
-        children: [
-          {
-            path: '/base/accordion',
-            name: 'Accordion',
-            component: () => import('@/views/base/Accordion.vue'),
-          },
-          {
-            path: '/base/breadcrumbs',
-            name: 'Breadcrumbs',
-            component: () => import('@/views/base/Breadcrumbs.vue'),
-          },
-          {
-            path: '/base/cards',
-            name: 'Cards',
-            component: () => import('@/views/base/Cards.vue'),
-          },
-          {
-            path: '/base/carousels',
-            name: 'Carousels',
-            component: () => import('@/views/base/Carousels.vue'),
-          },
-          {
-            path: '/base/collapses',
-            name: 'Collapses',
-            component: () => import('@/views/base/Collapses.vue'),
-          },
-          {
-            path: '/base/list-groups',
-            name: 'List Groups',
-            component: () => import('@/views/base/ListGroups.vue'),
-          },
-          {
-            path: '/base/navs',
-            name: 'Navs',
-            component: () => import('@/views/base/Navs.vue'),
-          },
-          {
-            path: '/base/paginations',
-            name: 'Paginations',
-            component: () => import('@/views/base/Paginations.vue'),
-          },
-          {
-            path: '/base/placeholders',
-            name: 'Placeholders',
-            component: () => import('@/views/base/Placeholders.vue'),
-          },
-          {
-            path: '/base/popovers',
-            name: 'Popovers',
-            component: () => import('@/views/base/Popovers.vue'),
-          },
-          {
-            path: '/base/progress',
-            name: 'Progress',
-            component: () => import('@/views/base/Progress.vue'),
-          },
-          {
-            path: '/base/spinners',
-            name: 'Spinners',
-            component: () => import('@/views/base/Spinners.vue'),
-          },
-          {
-            path: '/base/tables',
-            name: 'Tables',
-            component: () => import('@/views/base/Tables.vue'),
-          },
-          {
-            path: '/base/tooltips',
-            name: 'Tooltips',
-            component: () => import('@/views/base/Tooltips.vue'),
-          },
-        ],
-      },
-      {
-        path: '/buttons',
-        name: 'Buttons',
-        component: {
-          render() {
-            return h(resolveComponent('router-view'))
-          },
-        },
-        redirect: '/buttons/standard-buttons',
-        children: [
-          {
-            path: '/buttons/standard-buttons',
-            name: 'Buttons',
-            component: () => import('@/views/buttons/Buttons.vue'),
-          },
-          {
-            path: '/buttons/dropdowns',
-            name: 'Dropdowns',
-            component: () => import('@/views/buttons/Dropdowns.vue'),
-          },
-          {
-            path: '/buttons/button-groups',
-            name: 'Button Groups',
-            component: () => import('@/views/buttons/ButtonGroups.vue'),
-          },
-        ],
-      },
-      {
-        path: '/forms',
-        name: 'Forms',
-        component: {
-          render() {
-            return h(resolveComponent('router-view'))
-          },
-        },
-        redirect: '/forms/form-control',
-        children: [
-          {
-            path: '/forms/form-control',
-            name: 'Form Control',
-            component: () => import('@/views/forms/FormControl.vue'),
-          },
-          {
-            path: '/forms/select',
-            name: 'Select',
-            component: () => import('@/views/forms/Select.vue'),
-          },
-          {
-            path: '/forms/checks-radios',
-            name: 'Checks & Radios',
-            component: () => import('@/views/forms/ChecksRadios.vue'),
-          },
-          {
-            path: '/forms/range',
-            name: 'Range',
-            component: () => import('@/views/forms/Range.vue'),
-          },
-          {
-            path: '/forms/input-group',
-            name: 'Input Group',
-            component: () => import('@/views/forms/InputGroup.vue'),
-          },
-          {
-            path: '/forms/floating-labels',
-            name: 'Floating Labels',
-            component: () => import('@/views/forms/FloatingLabels.vue'),
-          },
-          {
-            path: '/forms/layout',
-            name: 'Layout',
-            component: () => import('@/views/forms/Layout.vue'),
-          },
-          {
-            path: '/forms/validation',
-            name: 'Validation',
-            component: () => import('@/views/forms/Validation.vue'),
-          },
-        ],
-      },
-      {
-        path: '/charts',
-        name: 'Charts',
-        component: () => import('@/views/charts/Charts.vue'),
-      },
-      {
-        path: '/icons',
-        name: 'Icons',
-        component: {
-          render() {
-            return h(resolveComponent('router-view'))
-          },
-        },
-        redirect: '/icons/coreui-icons',
-        children: [
-          {
-            path: '/icons/coreui-icons',
-            name: 'CoreUI Icons',
-            component: () => import('@/views/icons/CoreUIIcons.vue'),
-          },
-          {
-            path: '/icons/brands',
-            name: 'Brands',
-            component: () => import('@/views/icons/Brands.vue'),
-          },
-          {
-            path: '/icons/flags',
-            name: 'Flags',
-            component: () => import('@/views/icons/Flags.vue'),
-          },
-        ],
+        path: '/transports',
+        name: 'Transports',
+        component: () => import('@/views/transports/Transports.vue'),
       },
       {
         path: '/notifications',
         name: 'Notifications',
-        component: {
-          render() {
-            return h(resolveComponent('router-view'))
-          },
-        },
-        redirect: '/notifications/alerts',
-        children: [
-          {
-            path: '/notifications/alerts',
-            name: 'Alerts',
-            component: () => import('@/views/notifications/Alerts.vue'),
-          },
-          {
-            path: '/notifications/badges',
-            name: 'Badges',
-            component: () => import('@/views/notifications/Badges.vue'),
-          },
-          {
-            path: '/notifications/modals',
-            name: 'Modals',
-            component: () => import('@/views/notifications/Modals.vue'),
-          },
-        ],
+        component: () => import('@/views/notifications/Notifications.vue'),
       },
       {
-        path: '/widgets',
-        name: 'Widgets',
-        component: () => import('@/views/widgets/Widgets.vue'),
-      },
+        path: '/settings',
+        name: 'Settings',
+        component: () => import('@/views/settings/Settings.vue'),
+      },        
     ],
   },
   {

frontend/src/services/auth.service.js

@@ -1,10 +1,11 @@
 import axios from 'axios'
 //import User from '../models/user'
 import SSOProviders from '@/models/ssoproviders'
+import { DefaultService } from '@/generated/'
+import router from '@/router'
 //const API_URL = 'http://10.11.5.10:8080/auth/'
 class AuthService {
   login(user) {
-    console.log(user)
     return axios
       .get('/auth/direct/login', {
         params: {
@@ -16,18 +17,26 @@ class AuthService {
         if (response.status == 403) {
           return Promise.reject(response.data)
         }
-        console.log(response.data)
         if (response.status == 200) {
           localStorage.setItem('user', JSON.stringify(response.data))
+          router.push({ path: '/dashboard'})
         }
         return response.data
       })
   }
   logout() {
-    return axios.get('/auth/logout').then((response) => {
+    return axios.get('/auth/logout')
+    .then((response) => {
       localStorage.removeItem('user')
+      router.push({ path: '/pages/login'})
       return response.data
     })
+    .catch(function (error) {
+      console.log(JSON.stringify(error))
+      localStorage.removeItem('user')
+      console.log(this)
+      router.push({ path: '/pages/login'})
+    })
   }
   providers() {
     return axios.get('/auth/list')
@@ -37,9 +46,16 @@ class AuthService {
     })
   }
   feconfig() {
-    return axios.get('/config/frontend')
+    return DefaultService.getConfig()
     .then((response) => {
-      return response.data
+      return response
+    })
+  }
+  status() {
+    return axios.get('/auth/status')
+    .then((response) => {
+      console.log("status" + response.data)
+      return response
     })
   }
 }

frontend/src/views/HomeView.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
-  </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
-
-@Options({
-  components: {
-    HelloWorld,
-  },
-})
-export default class HomeView extends Vue {}
-</script>

frontend/src/views/apps/Applications.vue

@@ -0,0 +1,49 @@
+<template>
+  <CRow>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Application List</strong>
+        </CCardHeader>
+        <CCardBody>
+            <CTable>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">Name</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Description</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Status</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow v-for="apps in applications" v-bind:key="apps.AppName">
+                  <CTableDataCell>{{apps.AppName}}</CTableDataCell>
+                  <CTableDataCell>{{apps.description}}</CTableDataCell>
+                  <CTableDataCell>{{apps.Status}}</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+import { DefaultService } from '@/generated/'
+
+export default {
+  name: 'Applications',
+  data () {
+    return {
+      applications: []
+    }
+  },
+  mounted() {
+    console.log("Heloo world")
+    DefaultService.getApps().then(response => {
+      this.applications = response
+      console.log(response)
+    })
+  },
+}
+</script>

frontend/src/views/base/Accordion.vue

@@ -1,197 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Accordion" href="components/accordion" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Accordion</strong>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Click the accordions below to expand/collapse the accordion content.
-          </p>
-          <DocsExample href="components/accordion">
-            <CAccordion>
-              <CAccordionItem :item-key="1">
-                <CAccordionHeader> Accordion Item #1 </CAccordionHeader>
-                <CAccordionBody>
-                  <strong>This is the first item's accordion body.</strong> It
-                  is hidden by default, until the collapse plugin adds the
-                  appropriate classes that we use to style each element. These
-                  classes control the overall appearance, as well as the showing
-                  and hiding via CSS transitions. You can modify any of this
-                  with custom CSS or overriding our default variables. It's also
-                  worth noting that just about any HTML can go within the
-                  <code>.accordion-body</code>, though the transition does limit
-                  overflow.
-                </CAccordionBody>
-              </CAccordionItem>
-              <CAccordionItem :item-key="2">
-                <CAccordionHeader> Accordion Item #2 </CAccordionHeader>
-                <CAccordionBody>
-                  <strong>This is the second item's accordion body.</strong> It
-                  is hidden by default, until the collapse plugin adds the
-                  appropriate classes that we use to style each element. These
-                  classes control the overall appearance, as well as the showing
-                  and hiding via CSS transitions. You can modify any of this
-                  with custom CSS or overriding our default variables. It's also
-                  worth noting that just about any HTML can go within the
-                  <code>.accordion-body</code>, though the transition does limit
-                  overflow.
-                </CAccordionBody>
-              </CAccordionItem>
-              <CAccordionItem :item-key="3">
-                <CAccordionHeader> Accordion Item #3 </CAccordionHeader>
-                <CAccordionBody>
-                  <strong>This is the third item's accordion body.</strong> It
-                  is hidden by default, until the collapse plugin adds the
-                  appropriate classes that we use to style each element. These
-                  classes control the overall appearance, as well as the showing
-                  and hiding via CSS transitions. You can modify any of this
-                  with custom CSS or overriding our default variables. It's also
-                  worth noting that just about any HTML can go within the
-                  <code>.accordion-body</code>, though the transition does limit
-                  overflow.
-                </CAccordionBody>
-              </CAccordionItem>
-            </CAccordion>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Accordion</strong> <small>Flush</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add <code>flush</code> to remove the default
-            <code>background-color</code>, some borders, and some rounded
-            corners to render accordions edge-to-edge with their parent
-            container.
-          </p>
-          <DocsExample href="components/accordion#flush">
-            <CAccordion flush>
-              <CAccordionItem>
-                <CAccordionHeader> Accordion Item #1 </CAccordionHeader>
-                <CAccordionBody>
-                  <strong>This is the first item's accordion body.</strong> It
-                  is hidden by default, until the collapse plugin adds the
-                  appropriate classes that we use to style each element. These
-                  classes control the overall appearance, as well as the showing
-                  and hiding via CSS transitions. You can modify any of this
-                  with custom CSS or overriding our default variables. It's also
-                  worth noting that just about any HTML can go within the
-                  <code>.accordion-body</code>, though the transition does limit
-                  overflow.
-                </CAccordionBody>
-              </CAccordionItem>
-              <CAccordionItem>
-                <CAccordionHeader> Accordion Item #2 </CAccordionHeader>
-                <CAccordionBody>
-                  <strong>This is the second item's accordion body.</strong> It
-                  is hidden by default, until the collapse plugin adds the
-                  appropriate classes that we use to style each element. These
-                  classes control the overall appearance, as well as the showing
-                  and hiding via CSS transitions. You can modify any of this
-                  with custom CSS or overriding our default variables. It's also
-                  worth noting that just about any HTML can go within the
-                  <code>.accordion-body</code>, though the transition does limit
-                  overflow.
-                </CAccordionBody>
-              </CAccordionItem>
-              <CAccordionItem>
-                <CAccordionHeader> Accordion Item #3 </CAccordionHeader>
-                <CAccordionBody>
-                  <strong>This is the third item's accordion body.</strong> It
-                  is hidden by default, until the collapse plugin adds the
-                  appropriate classes that we use to style each element. These
-                  classes control the overall appearance, as well as the showing
-                  and hiding via CSS transitions. You can modify any of this
-                  with custom CSS or overriding our default variables. It's also
-                  worth noting that just about any HTML can go within the
-                  <code>.accordion-body</code>, though the transition does limit
-                  overflow.
-                </CAccordionBody>
-              </CAccordionItem>
-            </CAccordion>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Accordion</strong> <small>Always open</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add <code>always-open</code> property to make accordion items stay
-            open when another item is opened.
-          </p>
-          <DocsExample href="components/accordion#always-open">
-            <CAccordion :active-item-key="2" always-open>
-              <CAccordionItem :item-key="1">
-                <CAccordionHeader> Accordion Item #1 </CAccordionHeader>
-                <CAccordionBody>
-                  <strong>This is the first item's accordion body.</strong> It
-                  is hidden by default, until the collapse plugin adds the
-                  appropriate classes that we use to style each element. These
-                  classes control the overall appearance, as well as the showing
-                  and hiding via CSS transitions. You can modify any of this
-                  with custom CSS or overriding our default variables. It's also
-                  worth noting that just about any HTML can go within the
-                  <code>.accordion-body</code>, though the transition does limit
-                  overflow.
-                </CAccordionBody>
-              </CAccordionItem>
-              <CAccordionItem :item-key="2">
-                <CAccordionHeader> Accordion Item #2 </CAccordionHeader>
-                <CAccordionBody>
-                  <strong>This is the second item's accordion body.</strong> It
-                  is hidden by default, until the collapse plugin adds the
-                  appropriate classes that we use to style each element. These
-                  classes control the overall appearance, as well as the showing
-                  and hiding via CSS transitions. You can modify any of this
-                  with custom CSS or overriding our default variables. It's also
-                  worth noting that just about any HTML can go within the
-                  <code>.accordion-body</code>, though the transition does limit
-                  overflow.
-                </CAccordionBody>
-              </CAccordionItem>
-              <CAccordionItem :item-key="3">
-                <CAccordionHeader> Accordion Item #3 </CAccordionHeader>
-                <CAccordionBody>
-                  <strong>This is the third item's accordion body.</strong> It
-                  is hidden by default, until the collapse plugin adds the
-                  appropriate classes that we use to style each element. These
-                  classes control the overall appearance, as well as the showing
-                  and hiding via CSS transitions. You can modify any of this
-                  with custom CSS or overriding our default variables. It's also
-                  worth noting that just about any HTML can go within the
-                  <code>.accordion-body</code>, though the transition does limit
-                  overflow.
-                </CAccordionBody>
-              </CAccordionItem>
-            </CAccordion>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-import { ref } from 'vue'
-export default {
-  name: 'Accordion',
-  setup() {
-    const activeKey = ref(1)
-    const flushActiveKey = ref(1)
-
-    return {
-      activeKey,
-      flushActiveKey,
-    }
-  },
-}
-</script>

frontend/src/views/base/Breadcrumbs.vue

@@ -1,65 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Breadcrumb" href="components/breadcrumb" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Breadcrumb</strong>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            The breadcrumb navigation provides links back to each previous page
-            the user navigated through and shows the current location in a
-            website or an application. You don’t have to add separators, because
-            they automatically added in CSS through
-            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">
-              <code>::before</code>
-            </a>
-            and
-            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content">
-              <code>content</code>
-            </a>
-            .
-          </p>
-          <DocsExample href="components/breadcrumb">
-            <CBreadcrumb>
-              <CBreadcrumbItem>
-                <CLink href="#">Home</CLink>
-              </CBreadcrumbItem>
-              <CBreadcrumbItem active>Library</CBreadcrumbItem>
-            </CBreadcrumb>
-            <CBreadcrumb>
-              <CBreadcrumbItem>
-                <CLink href="#">Home</CLink>
-              </CBreadcrumbItem>
-              <CBreadcrumbItem>
-                <CLink href="#">Library</CLink>
-              </CBreadcrumbItem>
-              <CBreadcrumbItem active>Data</CBreadcrumbItem>
-            </CBreadcrumb>
-            <CBreadcrumb>
-              <CBreadcrumbItem>
-                <CLink href="#">Home</CLink>
-              </CBreadcrumbItem>
-              <CBreadcrumbItem>
-                <CLink href="#">Library</CLink>
-              </CBreadcrumbItem>
-              <CBreadcrumbItem>
-                <CLink href="#">Data</CLink>
-              </CBreadcrumbItem>
-              <CBreadcrumbItem active>Bootstrap</CBreadcrumbItem>
-            </CBreadcrumb>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Breadcrumbs',
-}
-</script>

frontend/src/views/base/Cards.vue

@@ -1,985 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Card" href="components/card" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Card</strong> <small>Example</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Cards are built with as little markup and styles as possible but
-            still manage to deliver a bunch of control and customization. Built
-            with flexbox, they offer easy alignment and mix well with other
-            CoreUI components. Cards have no top, left, and right margins by
-            default, so use
-            <a href="https://coreui.io/docs/utilities/spacing"
-              >spacing utilities</a
-            >
-            as needed. They have no fixed width to start, so they&#39;ll fill
-            the full width of its parent.
-          </p>
-          <p class="text-medium-emphasis small">
-            Below is an example of a basic card with mixed content and a fixed
-            width. Cards have no fixed width to start, so they&#39;ll naturally
-            fill the full width of its parent element.
-          </p>
-          <DocsExample href="components/card">
-            <CCard style="width: 18rem">
-              <CCardImage orientation="top" :src="VueImg" />
-              <CCardBody>
-                <CCardTitle>Card title</CCardTitle>
-                <CCardText>
-                  Some quick example text to build on the card title and make up
-                  the bulk of the card&#39;s content.
-                </CCardText>
-                <CButton href="#">Go somewhere</CButton>
-              </CCardBody>
-            </CCard>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader> <strong>Card</strong> <small>Body</small> </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use
-            it whenever you need a padded section within a card.
-          </p>
-          <DocsExample href="components/card/#body">
-            <CCard>
-              <CCardBody>This is some text within a card body.</CCardBody>
-            </CCard>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Card</strong> <small>Titles, text, and links</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Card titles are managed by
-            <code>&lt;CCardTitle&gt;</code> component. Identically, links are
-            attached and collected next to each other by
-            <code>&lt;CCardLink&gt;</code>
-            component.
-          </p>
-          <p class="text-medium-emphasis small">
-            Subtitles are managed by
-            <code>&lt;CCardSubtitle&gt;</code> component. If the
-            <code>&lt;CCardTitle&gt;</code> also, the
-            <code>&lt;CCardSubtitle&gt;</code> items are stored in a
-            <code>&lt;CCardBody&gt;</code> item, the card title, and subtitle
-            are arranged rightly.
-          </p>
-          <DocsExample href="components/card/#titles-text-and-links">
-            <CCard style="width: 18rem">
-              <CCardBody>
-                <CCardTitle>Card title</CCardTitle>
-                <CCardSubtitle class="mb-2 text-medium-emphasis"
-                  >Card subtitle</CCardSubtitle
-                >
-                <CCardText>
-                  Some quick example text to build on the card title and make up
-                  the bulk of the card&#39;s content.
-                </CCardText>
-                <CCardLink href="#">Card link</CCardLink>
-                <CCardLink href="#">Another link</CCardLink>
-              </CCardBody>
-            </CCard>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader> <strong>Card</strong> <small>Images</small> </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            <code>.card-img-top</code> places a picture to the top of the card.
-            With <code>.card-text</code>, text can be added to the card. Text
-            within <code>.card-text</code> can additionally be styled with the
-            regular HTML tags.
-          </p>
-          <DocsExample href="components/card/#images">
-            <CCard style="width: 18rem">
-              <CCardImage orientation="top" :src="VueImg" />
-              <CCardBody>
-                <CCardText>
-                  Some quick example text to build on the card title and make up
-                  the bulk of the card&#39;s content.
-                </CCardText>
-              </CCardBody>
-            </CCard>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Card</strong> <small>List groups</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Create lists of content in a card with a flush list group.
-          </p>
-          <DocsExample href="components/card/#list-groups">
-            <CRow>
-              <CCol :lg="4">
-                <CCard>
-                  <CListGroup flush>
-                    <CListGroupItem>Cras justo odio</CListGroupItem>
-                    <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                    <CListGroupItem>Vestibulum at eros</CListGroupItem>
-                  </CListGroup>
-                </CCard>
-              </CCol>
-              <CCol :lg="4">
-                <CCard>
-                  <CCardHeader>Header</CCardHeader>
-                  <CListGroup flush>
-                    <CListGroupItem>Cras justo odio</CListGroupItem>
-                    <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                    <CListGroupItem>Vestibulum at eros</CListGroupItem>
-                  </CListGroup>
-                </CCard>
-              </CCol>
-              <CCol :lg="4">
-                <CCard>
-                  <CListGroup flush>
-                    <CListGroupItem>Cras justo odio</CListGroupItem>
-                    <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                    <CListGroupItem>Vestibulum at eros</CListGroupItem>
-                  </CListGroup>
-                  <CCardFooter>Footer</CCardFooter>
-                </CCard>
-              </CCol>
-            </CRow>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Card</strong> <small>Kitchen sink</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Combine and match many content types to build the card you need, or
-            throw everything in there. Shown below are image styles, blocks,
-            text styles, and a list group—all wrapped in a fixed-width card.
-          </p>
-          <DocsExample href="components/card/#kitchen-sink">
-            <CCard style="width: 18rem">
-              <CCardImage orientation="top" :src="VueImg" />
-              <CCardBody>
-                <CCardTitle>Card title</CCardTitle>
-                <CCardText>
-                  Some quick example text to build on the card title and make up
-                  the bulk of the card&#39;s content.
-                </CCardText>
-              </CCardBody>
-              <CListGroup flush>
-                <CListGroupItem>Cras justo odio</CListGroupItem>
-                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                <CListGroupItem>Vestibulum at eros</CListGroupItem>
-              </CListGroup>
-              <CCardBody>
-                <CCardLink href="#">Card link</CCardLink>
-                <CCardLink href="#">Another link</CCardLink>
-              </CCardBody>
-            </CCard>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Card</strong> <small>Header and footer</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add an optional header and/or footer within a card.
-          </p>
-          <DocsExample href="components/card/#header-and-footer">
-            <CCard>
-              <CCardHeader>Header</CCardHeader>
-              <CCardBody>
-                <CCardTitle>Special title treatment</CCardTitle>
-                <CCardText>
-                  With supporting text below as a natural lead-in to additional
-                  content.
-                </CCardText>
-                <CButton href="#">Go somewhere</CButton>
-              </CCardBody>
-            </CCard>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            Card headers can be styled by adding ex.
-            <code>component=&#34;h5&#34;</code>.
-          </p>
-          <DocsExample href="components/card/#header-and-footer">
-            <CCard>
-              <CCardHeader component="h5">Header</CCardHeader>
-              <CCardBody>
-                <CCardTitle>Special title treatment</CCardTitle>
-                <CCardText>
-                  With supporting text below as a natural lead-in to additional
-                  content.
-                </CCardText>
-                <CButton href="#">Go somewhere</CButton>
-              </CCardBody>
-            </CCard>
-          </DocsExample>
-          <DocsExample href="components/card/#header-and-footer">
-            <CCard>
-              <CCardHeader>Quote</CCardHeader>
-              <CCardBody>
-                <blockquote class="blockquote mb-0">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Integer posuere erat a ante.
-                  </p>
-                  <footer class="blockquote-footer">
-                    Someone famous in
-                    <cite title="Source Title">Source Title</cite>
-                  </footer>
-                </blockquote>
-              </CCardBody>
-            </CCard>
-          </DocsExample>
-          <DocsExample href="components/card/#header-and-footer">
-            <CCard class="text-center">
-              <CCardHeader>Header</CCardHeader>
-              <CCardBody>
-                <CCardTitle>Special title treatment</CCardTitle>
-                <CCardText>
-                  With supporting text below as a natural lead-in to additional
-                  content.
-                </CCardText>
-                <CButton href="#">Go somewhere</CButton>
-              </CCardBody>
-              <CCardFooter class="text-medium-emphasis">2 days ago</CCardFooter>
-            </CCard>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader> <strong>Card</strong> <small>Body</small> </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Cards assume no specific <code>width</code> to start, so they&#39;ll
-            be 100% wide unless otherwise stated. You can adjust this as
-            required with custom CSS, grid classes, grid Sass mixins, or
-            services.
-          </p>
-          <h3>Using grid markup</h3>
-          <p class="text-medium-emphasis small">
-            Using the grid, wrap cards in columns and rows as needed.
-          </p>
-          <DocsExample href="components/card/#sizing">
-            <CRow>
-              <CCol :sm="6">
-                <CCard>
-                  <CCardBody>
-                    <CCardTitle>Special title treatment</CCardTitle>
-                    <CCardText>
-                      With supporting text below as a natural lead-in to
-                      additional content.
-                    </CCardText>
-                    <CButton href="#">Go somewhere</CButton>
-                  </CCardBody>
-                </CCard>
-              </CCol>
-              <CCol :sm="6">
-                <CCard>
-                  <CCardBody>
-                    <CCardTitle>Special title treatment</CCardTitle>
-                    <CCardText>
-                      With supporting text below as a natural lead-in to
-                      additional content.
-                    </CCardText>
-                    <CButton href="#">Go somewhere</CButton>
-                  </CCardBody>
-                </CCard>
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <h3>Using utilities</h3>
-          <p class="text-medium-emphasis small">
-            Use some of
-            <a href="https://coreui.io/docs/utilities/sizing/"
-              >available sizing utilities</a
-            >
-            to rapidly set a card&#39;s width.
-          </p>
-          <DocsExample href="components/card/#sizing">
-            <CCard class="w-75">
-              <CCardBody>
-                <CCardTitle>Card title</CCardTitle>
-                <CCardText>
-                  With supporting text below as a natural lead-in to additional
-                  content.
-                </CCardText>
-                <CButton href="#">Go somewhere</CButton>
-              </CCardBody>
-            </CCard>
-            <CCard class="w-50">
-              <CCardBody>
-                <CCardTitle>Card title</CCardTitle>
-                <CCardText>
-                  With supporting text below as a natural lead-in to additional
-                  content.
-                </CCardText>
-                <CButton href="#">Go somewhere</CButton>
-              </CCardBody>
-            </CCard>
-          </DocsExample>
-          <strong>Using custom CSS</strong>
-          <p class="text-medium-emphasis small">
-            Use custom CSS in your stylesheets or as inline styles to set a
-            width.
-          </p>
-          <DocsExample href="components/card/#sizing">
-            <CCard style="width: 18rem">
-              <CCardBody>
-                <CCardTitle>Special title treatment</CCardTitle>
-                <CCardText>
-                  With supporting text below as a natural lead-in to additional
-                  content.
-                </CCardText>
-                <CButton href="#">Go somewhere</CButton>
-              </CCardBody>
-            </CCard>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Card</strong> <small>Text alignment</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            You can instantly change the text arrangement of any card—in its
-            whole or specific parts—with
-            <a href="https://coreui.io/docs/utilities/text/#text-alignment"
-              >text align classes</a
-            >
-            .
-          </p>
-          <DocsExample href="components/card/#text-alignment">
-            <CCard style="width: 18rem">
-              <CCardBody>
-                <CCardTitle>Special title treatment</CCardTitle>
-                <CCardText>
-                  With supporting text below as a natural lead-in to additional
-                  content.
-                </CCardText>
-                <CButton href="#">Go somewhere</CButton>
-              </CCardBody>
-            </CCard>
-            <CCard class="text-center" style="width: 18rem">
-              <CCardBody>
-                <CCardTitle>Special title treatment</CCardTitle>
-                <CCardText>
-                  With supporting text below as a natural lead-in to additional
-                  content.
-                </CCardText>
-                <CButton href="#">Go somewhere</CButton>
-              </CCardBody>
-            </CCard>
-            <CCard class="text-end" style="width: 18rem">
-              <CCardBody>
-                <CCardTitle>Special title treatment</CCardTitle>
-                <CCardText>
-                  With supporting text below as a natural lead-in to additional
-                  content.
-                </CCardText>
-                <CButton href="#">Go somewhere</CButton>
-              </CCardBody>
-            </CCard>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Card</strong> <small>Navigation</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our
-            <code>&lt;CNav&gt;</code> component.
-          </p>
-          <DocsExample href="components/card/##navigation">
-            <CCard class="text-center">
-              <CCardHeader>
-                <CNav variant="tabs" class="card-header-tabs">
-                  <CNavItem>
-                    <CNavLink href="#" active> Active </CNavLink>
-                  </CNavItem>
-                  <CNavItem>
-                    <CNavLink href="#">Link</CNavLink>
-                  </CNavItem>
-                  <CNavItem>
-                    <CNavLink href="#" disabled> Disabled </CNavLink>
-                  </CNavItem>
-                </CNav>
-              </CCardHeader>
-              <CCardBody>
-                <CCardTitle>Special title treatment</CCardTitle>
-                <CCardText>
-                  With supporting text below as a natural lead-in to additional
-                  content.
-                </CCardText>
-                <CButton href="#">Go somewhere</CButton>
-              </CCardBody>
-            </CCard>
-          </DocsExample>
-          <DocsExample href="components/card/##navigation">
-            <CCard class="text-center">
-              <CCardHeader>
-                <CNav variant="pills" class="card-header-pills">
-                  <CNavItem>
-                    <CNavLink href="#" active> Active </CNavLink>
-                  </CNavItem>
-                  <CNavItem>
-                    <CNavLink href="#">Link</CNavLink>
-                  </CNavItem>
-                  <CNavItem>
-                    <CNavLink href="#" disabled> Disabled </CNavLink>
-                  </CNavItem>
-                </CNav>
-              </CCardHeader>
-              <CCardBody>
-                <CCardTitle>Special title treatment</CCardTitle>
-                <CCardText>
-                  With supporting text below as a natural lead-in to additional
-                  content.
-                </CCardText>
-                <CButton href="#">Go somewhere</CButton>
-              </CCardBody>
-            </CCard>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Card</strong> <small>Image caps</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Similar to headers and footers, cards can include top and bottom
-            &#34;image caps&#34;—images at the top or bottom of a card.
-          </p>
-          <DocsExample href="components/card/#image-caps">
-            <CRow>
-              <CCol :lg="6">
-                <CCard class="mb-3">
-                  <CCardImage orientation="top" :src="VueImg" />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This is a wider card with supporting text below as a
-                      natural lead-in to additional content. This content is a
-                      little bit longer.
-                    </CCardText>
-                    <CCardText>
-                      <small class="text-medium-emphasis"
-                        >Last updated 3 mins ago</small
-                      >
-                    </CCardText>
-                  </CCardBody>
-                </CCard>
-              </CCol>
-              <CCol :lg="6">
-                <CCard class="mb-3">
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This is a wider card with supporting text below as a
-                      natural lead-in to additional content. This content is a
-                      little bit longer.
-                    </CCardText>
-                    <CCardText>
-                      <small class="text-medium-emphasis"
-                        >Last updated 3 mins ago</small
-                      >
-                    </CCardText>
-                  </CCardBody>
-                  <CCardImage orientation="bottom" :src="VueImg" />
-                </CCard>
-              </CCol>
-            </CRow>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Card</strong> <small>Card styles</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Cards include various options for customizing their backgrounds,
-            borders, and color.
-          </p>
-          <h3>Background and color</h3>
-          <p class="text-medium-emphasis small">
-            Use <code>color</code> property to change the appearance of a card.
-          </p>
-          <DocsExample href="components/card/#background-and-color">
-            <CRow>
-              <template
-                v-for="item in [
-                  { color: 'primary', textColor: 'white' },
-                  { color: 'secondary', textColor: 'white' },
-                  { color: 'success', textColor: 'white' },
-                  {
-                    color: 'danger',
-                    textColor: 'white',
-                  },
-                  { color: 'warning' },
-                  {
-                    color: 'info',
-                    textColor: 'white',
-                  },
-                  { color: 'light' },
-                  { color: 'dark', textColor: 'white' },
-                ]"
-                :key="item"
-              >
-                <CCol :lg="4">
-                  <CCard
-                    class="mb-3"
-                    :color="item.color"
-                    :text-color="item.textColor"
-                  >
-                    <CCardHeader>Header</CCardHeader>
-                    <CCardBody>
-                      <CCardTitle>{{ item.color }} card title</CCardTitle>
-                      <CCardText>
-                        Some quick example text to build on the card title and
-                        make up the bulk of the card&#39;s content.
-                      </CCardText>
-                    </CCardBody>
-                  </CCard>
-                </CCol>
-              </template>
-            </CRow>
-          </DocsExample>
-          <h3>Border</h3>
-          <p class="text-medium-emphasis small">
-            Use
-            <a href="https://coreui.io/docs/utilities/borders/"
-              >border utilities</a
-            >
-            to change just the <code>border-color</code> of a card. Note that
-            you can set <code>text-color</code> property on the
-            <code>&lt;CCard&gt;</code> or a subset of the card&#39;s contents as
-            shown below.
-          </p>
-          <DocsExample href="components/card/#border">
-            <template
-              v-for="item in [
-                { color: 'primary', textColor: 'primary' },
-                { color: 'secondary', textColor: 'secondary' },
-                { color: 'success', textColor: 'success' },
-                { color: 'danger', textColor: 'danger' },
-                { color: 'warning', textColor: 'warning' },
-                { color: 'info', textColor: 'info' },
-                { color: 'light' },
-                { color: 'dark' },
-              ]"
-              :key="item"
-            >
-              <CCard
-                :text-color="item.textColor"
-                class="mb-3"
-                :class="'border-' + item.color"
-                style="max-width: 18rem"
-              >
-                <CCardHeader>Header</CCardHeader>
-                <CCardBody>
-                  <CCardTitle>{{ item.color }} card title</CCardTitle>
-                  <CCardText
-                    >Some quick example text to build on the card title and make
-                    up the bulk of the card's content.</CCardText
-                  >
-                </CCardBody>
-              </CCard>
-            </template>
-          </DocsExample>
-          <h3>Top border</h3>
-          <p class="text-medium-emphasis small">
-            Use
-            <a href="https://coreui.io/docs/utilities/borders/"
-              >border utilities</a
-            >
-            to change just the <code>border-color</code> of a card. Note that
-            you can set <code>text-color</code> property on the
-            <code>&lt;CCard&gt;</code> or a subset of the card&#39;s contents as
-            shown below.
-          </p>
-          <DocsExample href="components/card/#top-border">
-            <template
-              v-for="item in [
-                { color: 'primary', textColor: 'primary' },
-                { color: 'secondary', textColor: 'secondary' },
-                { color: 'success', textColor: 'success' },
-                { color: 'danger', textColor: 'danger' },
-                { color: 'warning', textColor: 'warning' },
-                { color: 'info', textColor: 'info' },
-                { color: 'light' },
-                { color: 'dark' },
-              ]"
-              :key="item.color"
-            >
-              <CCard
-                :text-color="item.textColor"
-                class="mb-3 border-top-3"
-                :class="'border-top-' + item.color"
-                style="max-width: 18rem"
-              >
-                <CCardHeader>Header</CCardHeader>
-                <CCardBody>
-                  <CCardTitle>{{ item.color }} card title</CCardTitle>
-                  <CCardText
-                    >Some quick example text to build on the card title and make
-                    up the bulk of the card's content.</CCardText
-                  >
-                </CCardBody>
-              </CCard>
-            </template>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Card</strong> <small>Card groups</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Use card groups to render cards as a single, attached element with
-            equal width and height columns. Card groups start off stacked and
-            use <code>display: flex;</code> to become attached with uniform
-            dimensions starting at the <code>sm</code> breakpoint.
-          </p>
-          <DocsExample href="components/card/#card-groups">
-            <CCardGroup>
-              <CCard>
-                <CCardImage orientation="top" :src="VueImg" />
-                <CCardBody>
-                  <CCardTitle>Card title</CCardTitle>
-                  <CCardText>
-                    This is a wider card with supporting text below as a natural
-                    lead-in to additional content. This content is a little bit
-                    longer.
-                  </CCardText>
-                  <CCardText>
-                    <small class="text-medium-emphasis"
-                      >Last updated 3 mins ago</small
-                    >
-                  </CCardText>
-                </CCardBody>
-              </CCard>
-              <CCard>
-                <CCardImage orientation="top" :src="VueImg" />
-                <CCardBody>
-                  <CCardTitle>Card title</CCardTitle>
-                  <CCardText>
-                    This card has supporting text below as a natural lead-in to
-                    additional content.
-                  </CCardText>
-                  <CCardText>
-                    <small class="text-medium-emphasis"
-                      >Last updated 3 mins ago</small
-                    >
-                  </CCardText>
-                </CCardBody>
-              </CCard>
-              <CCard>
-                <CCardImage orientation="top" :src="VueImg" />
-                <CCardBody>
-                  <CCardTitle>Card title</CCardTitle>
-                  <CCardText>
-                    This is a wider card with supporting text below as a natural
-                    lead-in to additional content. This card has even longer
-                    content than the first to show that equal height action.
-                  </CCardText>
-                  <CCardText>
-                    <small class="text-medium-emphasis"
-                      >Last updated 3 mins ago</small
-                    >
-                  </CCardText>
-                </CCardBody>
-              </CCard>
-            </CCardGroup>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            When using card groups with footers, their content will
-            automatically line up.
-          </p>
-          <DocsExample href="components/card/#card-groups">
-            <CCardGroup>
-              <CCard>
-                <CCardImage orientation="top" :src="VueImg" />
-                <CCardBody>
-                  <CCardTitle>Card title</CCardTitle>
-                  <CCardText>
-                    This is a wider card with supporting text below as a natural
-                    lead-in to additional content. This content is a little bit
-                    longer.
-                  </CCardText>
-                </CCardBody>
-                <CCardFooter>
-                  <small class="text-medium-emphasis"
-                    >Last updated 3 mins ago</small
-                  >
-                </CCardFooter>
-              </CCard>
-              <CCard>
-                <CCardImage orientation="top" :src="VueImg" />
-                <CCardBody>
-                  <CCardTitle>Card title</CCardTitle>
-                  <CCardText>
-                    This card has supporting text below as a natural lead-in to
-                    additional content.
-                  </CCardText>
-                </CCardBody>
-                <CCardFooter>
-                  <small class="text-medium-emphasis"
-                    >Last updated 3 mins ago</small
-                  >
-                </CCardFooter>
-              </CCard>
-              <CCard>
-                <CCardImage orientation="top" :src="VueImg" />
-                <CCardBody>
-                  <CCardTitle>Card title</CCardTitle>
-                  <CCardText>
-                    This is a wider card with supporting text below as a natural
-                    lead-in to additional content. This card has even longer
-                    content than the first to show that equal height action.
-                  </CCardText>
-                </CCardBody>
-                <CCardFooter>
-                  <small class="text-medium-emphasis"
-                    >Last updated 3 mins ago</small
-                  >
-                </CCardFooter>
-              </CCard>
-            </CCardGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Card</strong> <small>Grid cards</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Use the <code>CRow</code> component and set
-            <code>&#123;xs|sm|md|lg|xl|xxl&#125;="&#123; cols: * &#125;"</code>
-            property to control how many grid columns (wrapped around your
-            cards) you show per row. For example, here&#39;s
-            <code>xs="&#123;cols: 1&#125;"</code> laying out the cards on one
-            column, and <code>md="&#123;cols: 1&#125;"</code> splitting four
-            cards to equal width across multiple rows, from the medium
-            breakpoint up.
-          </p>
-          <DocsExample href="components/card/#grid-cards">
-            <CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 2 }">
-              <CCol xs>
-                <CCard>
-                  <CCardImage orientation="top" :src="VueImg" />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This is a wider card with supporting text below as a
-                      natural lead-in to additional content. This content is a
-                      little bit longer.
-                    </CCardText>
-                  </CCardBody>
-                  <CCardFooter>
-                    <small class="text-medium-emphasis"
-                      >Last updated 3 mins ago</small
-                    >
-                  </CCardFooter>
-                </CCard>
-              </CCol>
-              <CCol xs>
-                <CCard>
-                  <CCardImage orientation="top" :src="VueImg" />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This is a wider card with supporting text below as a
-                      natural lead-in to additional content. This content is a
-                      little bit longer.
-                    </CCardText>
-                  </CCardBody>
-                  <CCardFooter>
-                    <small class="text-medium-emphasis"
-                      >Last updated 3 mins ago</small
-                    >
-                  </CCardFooter>
-                </CCard>
-              </CCol>
-              <CCol xs>
-                <CCard>
-                  <CCardImage orientation="top" :src="VueImg" />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This is a wider card with supporting text below as a
-                      natural lead-in to additional content. This content is a
-                      little bit longer.
-                    </CCardText>
-                  </CCardBody>
-                  <CCardFooter>
-                    <small class="text-medium-emphasis"
-                      >Last updated 3 mins ago</small
-                    >
-                  </CCardFooter>
-                </CCard>
-              </CCol>
-              <CCol xs>
-                <CCard>
-                  <CCardImage orientation="top" :src="VueImg" />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This is a wider card with supporting text below as a
-                      natural lead-in to additional content. This content is a
-                      little bit longer.
-                    </CCardText>
-                  </CCardBody>
-                  <CCardFooter>
-                    <small class="text-medium-emphasis"
-                      >Last updated 3 mins ago</small
-                    >
-                  </CCardFooter>
-                </CCard>
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            Change it to <code>md="&#123; cols: 3&#125;"</code> and you&#39;ll
-            see the fourth card wrap.
-          </p>
-          <DocsExample href="components/card/#grid-cards">
-            <CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 3 }">
-              <CCol xs>
-                <CCard>
-                  <CCardImage orientation="top" :src="VueImg" />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This is a wider card with supporting text below as a
-                      natural lead-in to additional content. This content is a
-                      little bit longer.
-                    </CCardText>
-                  </CCardBody>
-                  <CCardFooter>
-                    <small class="text-medium-emphasis"
-                      >Last updated 3 mins ago</small
-                    >
-                  </CCardFooter>
-                </CCard>
-              </CCol>
-              <CCol xs>
-                <CCard>
-                  <CCardImage orientation="top" :src="VueImg" />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This is a wider card with supporting text below as a
-                      natural lead-in to additional content. This content is a
-                      little bit longer.
-                    </CCardText>
-                  </CCardBody>
-                  <CCardFooter>
-                    <small class="text-medium-emphasis"
-                      >Last updated 3 mins ago</small
-                    >
-                  </CCardFooter>
-                </CCard>
-              </CCol>
-              <CCol xs>
-                <CCard>
-                  <CCardImage orientation="top" :src="VueImg" />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This is a wider card with supporting text below as a
-                      natural lead-in to additional content. This content is a
-                      little bit longer.
-                    </CCardText>
-                  </CCardBody>
-                  <CCardFooter>
-                    <small class="text-medium-emphasis"
-                      >Last updated 3 mins ago</small
-                    >
-                  </CCardFooter>
-                </CCard>
-              </CCol>
-              <CCol xs>
-                <CCard>
-                  <CCardImage orientation="top" :src="VueImg" />
-                  <CCardBody>
-                    <CCardTitle>Card title</CCardTitle>
-                    <CCardText>
-                      This is a wider card with supporting text below as a
-                      natural lead-in to additional content. This content is a
-                      little bit longer.
-                    </CCardText>
-                  </CCardBody>
-                  <CCardFooter>
-                    <small class="text-medium-emphasis"
-                      >Last updated 3 mins ago</small
-                    >
-                  </CCardFooter>
-                </CCard>
-              </CCol>
-            </CRow>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-import VueImg from '@/assets/images/vue.jpg'
-export default {
-  name: 'Cards',
-  setup() {
-    return {
-      VueImg,
-    }
-  },
-}
-</script>

frontend/src/views/base/Carousels.vue

@@ -1,196 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Carousel" href="components/carousel.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Carousels</strong> <small>Slide only</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Here’s a carousel with slides
-          </p>
-          <DocsExample href="components/carousel.html#slides-only">
-            <CCarousel>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="VueImg" alt="slide 1" />
-              </CCarouselItem>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="ReactImg" alt="slide 2" />
-              </CCarouselItem>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="AngularImg" alt="slide 3" />
-              </CCarouselItem>
-            </CCarousel>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Carousels</strong> <small>With controls</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Adding in the previous and next controls by
-            <code>controls</code> property.
-          </p>
-          <DocsExample href="components/carousel.html#with-controls">
-            <CCarousel controls>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="VueImg" alt="slide 1" />
-              </CCarouselItem>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="ReactImg" alt="slide 2" />
-              </CCarouselItem>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="AngularImg" alt="slide 3" />
-              </CCarouselItem>
-            </CCarousel>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Carousels</strong> <small>With indicators</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            You can attach the indicators to the carousel, lengthwise the
-            controls, too.
-          </p>
-          <DocsExample href="components/carousel.html#with-indicators">
-            <CCarousel controls indicators>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="VueImg" alt="slide 1" />
-              </CCarouselItem>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="ReactImg" alt="slide 2" />
-              </CCarouselItem>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="AngularImg" alt="slide 3" />
-              </CCarouselItem>
-            </CCarousel>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Carousels</strong> <small>With captions</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            You can add captions to slides with the
-            <code>&lt;CCarouselCaption&gt;</code> element within any
-            <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden
-            on smaller viewports, as shown below, with optional
-            <a href="https://coreui.io/4.0/utilities/display"
-              >display utilities</a
-            >. We hide them with <code>.d-none</code> and draw them back on
-            medium-sized devices with <code>.d-md-block</code>.
-          </p>
-          <DocsExample href="components/carousel.html#with-captions">
-            <CCarousel controls indicators>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="VueImg" alt="slide 1" />
-                <CCarouselCaption class="d-none d-md-block">
-                  <h5>First slide label</h5>
-                  <p>
-                    Some representative placeholder content for the first slide.
-                  </p>
-                </CCarouselCaption>
-              </CCarouselItem>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="ReactImg" alt="slide 2" />
-                <CCarouselCaption class="d-none d-md-block">
-                  <h5>First slide label</h5>
-                  <p>
-                    Some representative placeholder content for the first slide.
-                  </p>
-                </CCarouselCaption>
-              </CCarouselItem>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="AngularImg" alt="slide 3" />
-                <CCarouselCaption class="d-none d-md-block">
-                  <h5>First slide label</h5>
-                  <p>
-                    Some representative placeholder content for the first slide.
-                  </p>
-                </CCarouselCaption>
-              </CCarouselItem>
-            </CCarousel>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Carousels</strong> <small>Crossfade</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add <code>transition=&#34;crossfade&#34;</code> to your carousel to
-            animate slides with a fade transition instead of a slide.
-          </p>
-          <DocsExample href="components/carousel.html#crossfade">
-            <CCarousel controls indicators transition="crossfade">
-              <CCarouselItem>
-                <img class="d-block w-100" :src="VueImg" alt="slide 1" />
-              </CCarouselItem>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="ReactImg" alt="slide 2" />
-              </CCarouselItem>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="AngularImg" alt="slide 3" />
-              </CCarouselItem>
-            </CCarousel>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Carousels</strong> <small>Dark variant</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add <code>dark</code> property to the <code>CCarousel</code> for
-            darker controls, indicators, and captions. Controls have been
-            inverted from their default white fill with the
-            <code>filter</code> CSS property. Captions and controls have
-            additional Sass variables that customize the <code>color</code> and
-            <code>background-color</code>.
-          </p>
-          <DocsExample href="components/carousel.html#dark-variant">
-            <CCarousel controls indicators dark>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="VueImg" alt="slide 1" />
-              </CCarouselItem>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="ReactImg" alt="slide 2" />
-              </CCarouselItem>
-              <CCarouselItem>
-                <img class="d-block w-100" :src="AngularImg" alt="slide 3" />
-              </CCarouselItem>
-            </CCarousel>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-import AngularImg from '@/assets/images/angular.jpg'
-import ReactImg from '@/assets/images/react.jpg'
-import VueImg from '@/assets/images/vue.jpg'
-export default {
-  name: 'Carousels',
-  setup() {
-    return {
-      AngularImg,
-      ReactImg,
-      VueImg,
-    }
-  },
-}
-</script>

frontend/src/views/base/Collapses.vue

@@ -1,145 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Collapse" href="components/collapse.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Collapse</strong>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            You can use a link or a button component.
-          </p>
-          <DocsExample href="components/collapse.html#example">
-            <CButton color="primary" href="#" @click="visible = !visible"
-              >Link</CButton
-            >
-            <CButton color="primary" @click="visible = !visible"
-              >Button</CButton
-            >
-            <CCollapse :visible="visible">
-              <CCard class="mt-3">
-                <CCardBody>
-                  Anim pariatur cliche reprehenderit, enim eiusmod high life
-                  accusamus terry richardson ad squid. Nihil anim keffiyeh
-                  helvetica, craft beer labore wes anderson cred nesciunt
-                  sapiente ea proident.
-                </CCardBody>
-              </CCard>
-            </CCollapse>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Collapse</strong> <small> Horizontal</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            The collapse plugin also supports horizontal collapsing. Add the
-            <code>horizontal</code> property to transition the
-            <code>width</code> instead of <code>height</code> and set a
-            <code>width</code> on the immediate child element.
-          </p>
-          <DocsExample href="components/collapse.html#horizontal">
-            <CButton
-              class="mb-3"
-              color="primary"
-              aria-expanded="{visible}"
-              aria-controls="collapseWidthExample"
-              @click="visibleHorizontal = !visibleHorizontal"
-              >Button</CButton
-            >
-            <div style="min-height: 120px">
-              <CCollapse horizontal :visible="visibleHorizontal">
-                <CCard style="width: 300px">
-                  <CCardBody>
-                    This is some placeholder content for a horizontal collapse.
-                    It's hidden by default and shown when triggered.
-                  </CCardBody>
-                </CCard>
-              </CCollapse>
-            </div>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Collapse</strong> <small> multi target</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
-          </p>
-          <h4 class="mt-4">Toggle multiple targets</h4>
-          <DocsExample href="components/collapse.html#multiple-targets">
-            <CButton color="primary" @click="visibleA = !visibleA"
-              >Toggle first element</CButton
-            >
-            <CButton color="primary" @click="visibleB = !visibleB"
-              >Toggle second element</CButton
-            >
-            <CButton
-              color="primary"
-              @click="
-                () => {
-                  visibleA = !visibleA
-                  visibleB = !visibleB
-                }
-              "
-            >
-              Toggle both elements
-            </CButton>
-            <CRow>
-              <CCol :xs="6">
-                <CCollapse :visible="visibleA">
-                  <CCard class="mt-3">
-                    <CCardBody>
-                      Anim pariatur cliche reprehenderit, enim eiusmod high life
-                      accusamus terry richardson ad squid. Nihil anim keffiyeh
-                      helvetica, craft beer labore wes anderson cred nesciunt
-                      sapiente ea proident.
-                    </CCardBody>
-                  </CCard>
-                </CCollapse>
-              </CCol>
-              <CCol :xs="6">
-                <CCollapse :visible="visibleB">
-                  <CCard class="mt-3">
-                    <CCardBody>
-                      Anim pariatur cliche reprehenderit, enim eiusmod high life
-                      accusamus terry richardson ad squid. Nihil anim keffiyeh
-                      helvetica, craft beer labore wes anderson cred nesciunt
-                      sapiente ea proident.
-                    </CCardBody>
-                  </CCard>
-                </CCollapse>
-              </CCol>
-            </CRow>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-import { ref } from 'vue'
-export default {
-  name: 'Collapse',
-  setup() {
-    const visible = ref(false)
-    const visibleA = ref(false)
-    const visibleB = ref(false)
-    const visibleHorizontal = ref(false)
-    return {
-      visible,
-      visibleA,
-      visibleB,
-      visibleHorizontal,
-    }
-  },
-}
-</script>

frontend/src/views/base/ListGroups.vue

@@ -1,366 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="List Group" href="components/list-group.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue List Group</strong> <small>Basic example</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            The default list group is an unordered list with items and the
-            proper CSS classes. Build upon it with the options that follow, or
-            with your CSS as required.
-          </p>
-          <DocsExample href="components/list-group.html">
-            <CListGroup>
-              <CListGroupItem>Cras justo odio</CListGroupItem>
-              <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-              <CListGroupItem>Morbi leo risus</CListGroupItem>
-              <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-              <CListGroupItem>Vestibulum at eros</CListGroupItem>
-            </CListGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue List Group</strong> <small>Active items</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add <code>active</code> boolean property to a
-            <code>&lt;CListGroupItem&gt;</code> to show the current active
-            selection.
-          </p>
-          <DocsExample href="components/list-group.html#active-items">
-            <CListGroup>
-              <CListGroupItem active>Cras justo odio</CListGroupItem>
-              <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-              <CListGroupItem>Morbi leo risus</CListGroupItem>
-              <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-              <CListGroupItem>Vestibulum at eros</CListGroupItem>
-            </CListGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue List Group</strong> <small>Disabled items</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add <code>disabled</code> boolean property to a
-            <code>&lt;CListGroupItem&gt;</code> to make it appear disabled.
-          </p>
-          <DocsExample href="components/list-group.html#disabled-items">
-            <CListGroup>
-              <CListGroupItem disabled>Cras justo odio</CListGroupItem>
-              <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-              <CListGroupItem>Morbi leo risus</CListGroupItem>
-              <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-              <CListGroupItem>Vestibulum at eros</CListGroupItem>
-            </CListGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue List Group</strong> <small>Links and buttons</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to
-            create <em>actionable</em> list group items with hover, disabled,
-            and active states by adding
-            <code>component=&#34;a|button&#34;</code>. We separate these
-            pseudo-classes to ensure list groups made of non-interactive
-            elements (like <code>&lt;li&gt;</code>s or
-            <code>&lt;div&gt;</code>
-            s) don&#39;tprovide a click or tap affordance.
-          </p>
-          <DocsExample href="components/list-group.html#links-and-buttons">
-            <CListGroup>
-              <CListGroupItem component="a" href="#" active>
-                Cras justo odio
-              </CListGroupItem>
-              <CListGroupItem component="a" href="#">
-                Dapibus ac facilisis in
-              </CListGroupItem>
-              <CListGroupItem component="a" href="#">
-                Morbi leo risus
-              </CListGroupItem>
-              <CListGroupItem component="a" href="#">
-                Porta ac consectetur ac
-              </CListGroupItem>
-              <CListGroupItem component="a" href="#" disabled>
-                Vestibulum at eros
-              </CListGroupItem>
-            </CListGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue List Group</strong> <small>Flush</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add <code>flush</code> boolean property to remove some borders and
-            rounded corners to render list group items edge-to-edge in a parent
-            container (e.g., cards).
-          </p>
-          <DocsExample href="components/list-group.html#flush">
-            <CListGroup flush>
-              <CListGroupItem>Cras justo odio</CListGroupItem>
-              <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-              <CListGroupItem>Morbi leo risus</CListGroupItem>
-              <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
-              <CListGroupItem>Vestibulum at eros</CListGroupItem>
-            </CListGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue List Group</strong> <small>Horizontal</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add <code>layout=&#34;horizontal&#34;</code> to change the layout of
-            list group items from vertical to horizontal across all breakpoints.
-            Alternatively, choose a responsive variant
-            <code
-              >.layout=&#34;horizontal-&#123;sm | md | lg | xl |
-              xxl&#125;&#34;</code
-            >
-            to make a list group horizontal starting at that breakpoint&#39;s
-            <code>min-width</code>. Currently
-            <strong
-              >horizontal list groups cannot be combined with flush list
-              groups.</strong
-            >
-          </p>
-          <DocsExample href="components/list-group.html#flush">
-            <template
-              v-for="item in ['', '-sm', '-md', '-lg', '-xl', '-xxl']"
-              :key="item"
-            >
-              <CListGroup class="mb-2" :layout="'horizontal' + item">
-                <CListGroupItem>Cras justo odio</CListGroupItem>
-                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-                <CListGroupItem>Morbi leo risus</CListGroupItem>
-              </CListGroup>
-            </template>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue List Group</strong> <small>Contextual classes</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Use contextual classes to style list items with a stateful
-            background and color.
-          </p>
-          <DocsExample href="components/list-group.html#contextual-classes">
-            <CListGroup>
-              <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
-              <CListGroupItem
-                v-for="item in [
-                  'primary',
-                  'secondary',
-                  'success',
-                  'danger',
-                  'warning',
-                  'info',
-                  'light',
-                  'dark',
-                ]"
-                :key="item"
-                :color="item"
-                >A simple {{ item }} list group item</CListGroupItem
-              >
-            </CListGroup>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            Contextual classes also work with <code>&lt;a&gt;</code>s or
-            <code>&lt;button&gt;</code>s. Note the addition of the hover styles
-            here not present in the previous example. Also supported is the
-            <code>active</code> state; apply it to indicate an active selection
-            on a contextual list group item.
-          </p>
-          <DocsExample href="components/list-group.html#contextual-classes">
-            <CListGroup>
-              <CListGroupItem component="a" href="#"
-                >Dapibus ac facilisis in</CListGroupItem
-              >
-              <CListGroupItem
-                v-for="item in [
-                  'primary',
-                  'secondary',
-                  'success',
-                  'danger',
-                  'warning',
-                  'info',
-                  'light',
-                  'dark',
-                ]"
-                :key="item"
-                component="a"
-                href="#"
-                :color="item"
-                >A simple {{ item }} list group item</CListGroupItem
-              >
-            </CListGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue List Group</strong> <small>With badges</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add badges to any list group item to show unread counts, activity,
-            and more.
-          </p>
-          <DocsExample href="components/list-group.html#with-badges">
-            <CListGroup>
-              <CListGroupItem
-                class="d-flex justify-content-between align-items-center"
-              >
-                Cras justo odio
-                <CBadge color="primary" shape="rounded-pill"> 14 </CBadge>
-              </CListGroupItem>
-              <CListGroupItem
-                class="d-flex justify-content-between align-items-center"
-              >
-                Dapibus ac facilisis in
-                <CBadge color="primary" shape="rounded-pill"> 2 </CBadge>
-              </CListGroupItem>
-              <CListGroupItem
-                class="d-flex justify-content-between align-items-center"
-              >
-                Morbi leo risus
-                <CBadge color="primary" shape="rounded-pill"> 1 </CBadge>
-              </CListGroupItem>
-            </CListGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue List Group</strong> <small>Custom content</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add nearly any HTML within, even for linked list groups like the one
-            below, with the help of
-            <a href="https://coreui.io/docs/utilities/flex/"
-              >flexbox utilities</a
-            >.
-          </p>
-          <DocsExample href="components/list-group.html#custom-content">
-            <CListGroup>
-              <CListGroupItem component="a" href="#" active>
-                <div class="d-flex w-100 justify-content-between">
-                  <h5 class="mb-1">List group item heading</h5>
-                  <small>3 days ago</small>
-                </div>
-                <p class="mb-1">
-                  Donec id elit non mi porta gravida at eget metus. Maecenas sed
-                  diam eget risus varius blandit.
-                </p>
-                <small>Donec id elit non mi porta.</small>
-              </CListGroupItem>
-              <CListGroupItem component="a" href="#">
-                <div class="d-flex w-100 justify-content-between">
-                  <h5 class="mb-1">List group item heading</h5>
-                  <small class="text-medium-emphasis">3 days ago</small>
-                </div>
-                <p class="mb-1">
-                  Donec id elit non mi porta gravida at eget metus. Maecenas sed
-                  diam eget risus varius blandit.
-                </p>
-                <small class="text-medium-emphasis"
-                  >Donec id elit non mi porta.</small
-                >
-              </CListGroupItem>
-              <CListGroupItem component="a" href="#">
-                <div class="d-flex w-100 justify-content-between">
-                  <h5 class="mb-1">List group item heading</h5>
-                  <small class="text-medium-emphasis">3 days ago</small>
-                </div>
-                <p class="mb-1">
-                  Donec id elit non mi porta gravida at eget metus. Maecenas sed
-                  diam eget risus varius blandit.
-                </p>
-                <small class="text-medium-emphasis"
-                  >Donec id elit non mi porta.</small
-                >
-              </CListGroupItem>
-            </CListGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue List Group</strong> <small>Checkboxes and radios</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Place CoreUI&#39;s checkboxes and radios within list group items and
-            customize as needed.
-          </p>
-          <DocsExample href="components/list-group.html#checkboxes-and-radios">
-            <CListGroup>
-              <CListGroupItem>
-                <CFormCheck label="Cras justo odio" />
-              </CListGroupItem>
-              <CListGroupItem>
-                <CFormCheck label="Dapibus ac facilisis in" checked />
-              </CListGroupItem>
-              <CListGroupItem>
-                <CFormCheck label="Morbi leo risus" checked />
-              </CListGroupItem>
-              <CListGroupItem>
-                <CFormCheck label="orta ac consectetur ac" />
-              </CListGroupItem>
-              <CListGroupItem>
-                <CFormCheck label="Vestibulum at eros" />
-              </CListGroupItem>
-            </CListGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'ListGroups',
-}
-</script>

frontend/src/views/base/Navs.vue

@@ -1,355 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Nav" href="components/nav.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Navs</strong> <small>Base navs</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            The base <code>.nav</code> component is built with flexbox and
-            provide a strong foundation for building all types of navigation
-            components. It includes some style overrides (for working with
-            lists), some link padding for larger hit areas, and basic disabled
-            styling.
-          </p>
-          <DocsExample href="components/nav.html#base-nav">
-            <CNav>
-              <CNavItem>
-                <CNavLink href="#" active> Active </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" disabled> Disabled </CNavLink>
-              </CNavItem>
-            </CNav>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            Classes are used throughout, so your markup can be super flexible.
-            Use <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if
-            the order of your items is important, or roll your own with a
-            <code>&lt;nav&gt;</code> element. Because the .nav uses display:
-            flex, the nav links behave the same as nav items would, but without
-            the extra markup.
-          </p>
-          <DocsExample href="components/nav.html#base-nav">
-            <CNav component="nav">
-              <CNavLink href="#" active> Active </CNavLink>
-              <CNavLink href="#">Link</CNavLink>
-              <CNavLink href="#">Link</CNavLink>
-              <CNavLink href="#" disabled> Disabled </CNavLink>
-            </CNav>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Navs</strong> <small>Horizontal alignment</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Change the horizontal alignment of your nav with
-            <a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
-              flexbox utilities
-            </a>
-            . By default, navs are left-aligned, but you can easily change them
-            to center or right aligned.
-          </p>
-          <p class="text-medium-emphasis small">
-            Centered with <code>.justify-content-center</code>:
-          </p>
-          <DocsExample href="components/nav.html#horizontal-alignment">
-            <CNav class="justify-content-center">
-              <CNavItem>
-                <CNavLink href="#" active> Active </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" disabled> Disabled </CNavLink>
-              </CNavItem>
-            </CNav>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            Right-aligned with <code>.justify-content-end</code>:
-          </p>
-          <DocsExample href="components/nav.html#base-nav">
-            <CNav class="justify-content-end">
-              <CNavItem>
-                <CNavLink href="#" active> Active </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" disabled> Disabled </CNavLink>
-              </CNavItem>
-            </CNav>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Navs</strong> <small>Vertical</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Stack your navigation by changing the flex item direction with the{'
-            '}
-            <code>.flex-column</code> utility. Need to stack them on some
-            viewports but not others? Use the responsive versions (e.g.,
-            <code>.flex-sm-column</code>).
-          </p>
-          <DocsExample href="components/nav.html#vertical">
-            <CNav class="flex-column">
-              <CNavItem>
-                <CNavLink href="#" active> Active </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" disabled> Disabled </CNavLink>
-              </CNavItem>
-            </CNav>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Navs</strong> <small>Tabs</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Takes the basic nav from above and adds the
-            <code>variant=&#34;tabs&#34;</code> class to generate a tabbed
-            interface
-          </p>
-          <DocsExample href="components/nav.html#tabs">
-            <CNav variant="tabs">
-              <CNavItem>
-                <CNavLink href="#" active> Active </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" disabled> Disabled </CNavLink>
-              </CNavItem>
-            </CNav>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Navs</strong> <small>Pills</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Take that same HTML, but use
-            <code>variant=&#34;pills&#34;</code> instead:
-          </p>
-          <DocsExample href="components/nav.html#pills">
-            <CNav variant="pills">
-              <CNavItem>
-                <CNavLink href="#" active> Active </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" disabled> Disabled </CNavLink>
-              </CNavItem>
-            </CNav>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Navs</strong> <small>Fill and justify</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Force your <code>.nav</code>&#39;s contents to extend the full
-            available width one of two modifier classes. To proportionately fill
-            all available space with your <code>.nav-item</code>s, use
-            <code>layout=&#34;fill&#34;</code>. Notice that all horizontal space
-            is occupied, but not every nav item has the same width.
-          </p>
-          <DocsExample href="components/nav.html#fill-and-justify">
-            <CNav variant="pills" layout="fill">
-              <CNavItem>
-                <CNavLink href="#" active> Active </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" disabled> Disabled </CNavLink>
-              </CNavItem>
-            </CNav>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            For equal-width elements, use
-            <code>layout=&#34;justified&#34;</code>. All horizontal space will
-            be occupied by nav links, but unlike the .nav-fill above, every nav
-            item will be the same width.
-          </p>
-          <DocsExample href="components/nav.html#fill-and-justify">
-            <CNav variant="pills" layout="justified">
-              <CNavItem>
-                <CNavLink href="#" active> Active </CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" disabled> Disabled </CNavLink>
-              </CNavItem>
-            </CNav>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Navs</strong> <small>Working with flex utilities</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            If you need responsive nav variations, consider using a series of{'
-            '}
-            <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a
-            >. While more verbose, these utilities offer greater customization
-            across responsive breakpoints. In the example below, our nav will be
-            stacked on the lowest breakpoint, then adapt to a horizontal layout
-            that fills the available width starting from the small breakpoint.
-          </p>
-          <DocsExample href="components/nav.html#working-with-flex-utilities">
-            <CNav
-              component="nav"
-              variant="pills"
-              class="flex-column flex-sm-row"
-            >
-              <CNavLink href="#" active> Active </CNavLink>
-              <CNavLink href="#">Link</CNavLink>
-              <CNavLink href="#">Link</CNavLink>
-              <CNavLink href="#" disabled> Disabled </CNavLink>
-            </CNav>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Navs</strong> <small>Tabs with dropdowns</small>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="components/nav.html#tabs-with-dropdowns">
-            <CNav>
-              <CNavItem>
-                <CNavLink href="#" active> Active </CNavLink>
-              </CNavItem>
-              <CDropdown variant="nav-item">
-                <CDropdownToggle color="secondary"
-                  >Dropdown button</CDropdownToggle
-                >
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" disabled> Disabled </CNavLink>
-              </CNavItem>
-            </CNav>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Navs</strong> <small>Pills with dropdowns</small>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="components/nav.html#pills-with-dropdowns">
-            <CNav variant="pills">
-              <CNavItem>
-                <CNavLink href="#" active> Active </CNavLink>
-              </CNavItem>
-              <CDropdown variant="nav-item">
-                <CDropdownToggle color="secondary"
-                  >Dropdown button</CDropdownToggle
-                >
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CNavItem>
-                <CNavLink href="#">Link</CNavLink>
-              </CNavItem>
-              <CNavItem>
-                <CNavLink href="#" disabled> Disabled </CNavLink>
-              </CNavItem>
-            </CNav>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Navs',
-}
-</script>

frontend/src/views/base/Paginations.vue

@@ -1,184 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Pagination" href="components/pagination.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Pagination</strong>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            We use a large block of connected links for our pagination, making
-            links hard to miss and easily scalable—all while providing large hit
-            areas. Pagination is built with list HTML elements so screen readers
-            can announce the number of available links. Use a wrapping
-            <code>&lt;nav&gt;</code> element to identify it as a navigation
-            section to screen readers and other assistive technologies.
-          </p>
-          <p class="text-medium-emphasis small">
-            In addition, as pages likely have more than one such navigation
-            section, it&#39;s advisable to provide a descriptive
-            <code>aria-label</code> for the <code>&lt;nav&gt;</code> to reflect
-            its purpose. For example, if the pagination component is used to
-            navigate between a set of search results, an appropriate label could
-            be <code>aria-label=&#34;Search results pages&#34;</code>.
-          </p>
-          <DocsExample href="components/pagination.html">
-            <CPagination aria-label="Page navigation example">
-              <CPaginationItem>Previous</CPaginationItem>
-              <CPaginationItem>1</CPaginationItem>
-              <CPaginationItem>2</CPaginationItem>
-              <CPaginationItem>3</CPaginationItem>
-              <CPaginationItem>Next</CPaginationItem>
-            </CPagination>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Pagination</strong> <small>Working with icons</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Looking to use an icon or symbol in place of text for some
-            pagination links? Be sure to provide proper screen reader support
-            with <code>aria</code> attributes.
-          </p>
-          <DocsExample href="components/pagination.html#working-with-icons">
-            <CPagination aria-label="Page navigation example">
-              <CPaginationItem aria-label="Previous">
-                <span aria-hidden="true">&laquo;</span>
-              </CPaginationItem>
-              <CPaginationItem>1</CPaginationItem>
-              <CPaginationItem>2</CPaginationItem>
-              <CPaginationItem>3</CPaginationItem>
-              <CPaginationItem aria-label="Next">
-                <span aria-hidden="true">&raquo;</span>
-              </CPaginationItem>
-            </CPagination>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Pagination</strong>
-          <small>Disabled and active states</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Pagination links are customizable for different circumstances. Use
-            <code>disabled</code> for links that appear un-clickable and
-            <code>.active</code> to indicate the current page.
-          </p>
-          <p class="text-medium-emphasis small">
-            While the <code>disabled</code> prop uses
-            <code>pointer-events: none</code> to <em>try</em> to disable the
-            link functionality of <code>&lt;a&gt;</code>s, that CSS property is
-            not yet standardized and doesn&#39;taccount for keyboard navigation.
-            As such, we always add <code>tabindex=&#34;-1&#34;</code> on
-            disabled links and use custom JavaScript to fully disable their
-            functionality.
-          </p>
-          <DocsExample
-            href="components/pagination.html#disabled-and-active-states"
-          >
-            <CPagination aria-label="Page navigation example">
-              <CPaginationItem aria-label="Previous" disabled>
-                <span aria-hidden="true">&laquo;</span>
-              </CPaginationItem>
-              <CPaginationItem active>1</CPaginationItem>
-              <CPaginationItem>2</CPaginationItem>
-              <CPaginationItem>3</CPaginationItem>
-              <CPaginationItem aria-label="Next">
-                <span aria-hidden="true">&raquo;</span>
-              </CPaginationItem>
-            </CPagination>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Pagination</strong> <small>Sizing</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Fancy larger or smaller pagination? Add
-            <code>size=&#34;lg&#34;</code> or <code>size=&#34;sm&#34;</code> for
-            additional sizes.
-          </p>
-          <DocsExample href="components/pagination.html#sizing">
-            <CPagination size="lg" aria-label="Page navigation example">
-              <CPaginationItem>Previous</CPaginationItem>
-              <CPaginationItem>1</CPaginationItem>
-              <CPaginationItem>2</CPaginationItem>
-              <CPaginationItem>3</CPaginationItem>
-              <CPaginationItem>Next</CPaginationItem>
-            </CPagination>
-          </DocsExample>
-          <DocsExample href="components/pagination.html#sizing">
-            <CPagination size="sm" aria-label="Page navigation example">
-              <CPaginationItem>Previous</CPaginationItem>
-              <CPaginationItem>1</CPaginationItem>
-              <CPaginationItem>2</CPaginationItem>
-              <CPaginationItem>3</CPaginationItem>
-              <CPaginationItem>Next</CPaginationItem>
-            </CPagination>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Pagination</strong> <small>Alignment</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Change the alignment of pagination components with
-            <a href="https://coreui.io/docs/utilities/flex/"
-              >flexbox utilities</a
-            >.
-          </p>
-          <DocsExample href="components/pagination.html#aligment">
-            <CPagination
-              class="justify-content-center"
-              aria-label="Page navigation example"
-            >
-              <CPaginationItem disabled>Previous</CPaginationItem>
-              <CPaginationItem>1</CPaginationItem>
-              <CPaginationItem>2</CPaginationItem>
-              <CPaginationItem>3</CPaginationItem>
-              <CPaginationItem>Next</CPaginationItem>
-            </CPagination>
-          </DocsExample>
-          <DocsExample href="components/pagination.html#aligment">
-            <CPagination
-              class="justify-content-end"
-              aria-label="Page navigation example"
-            >
-              <CPaginationItem disabled>Previous</CPaginationItem>
-              <CPaginationItem>1</CPaginationItem>
-              <CPaginationItem>2</CPaginationItem>
-              <CPaginationItem>3</CPaginationItem>
-              <CPaginationItem>Next</CPaginationItem>
-            </CPagination>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Paginations',
-}
-</script>

frontend/src/views/base/Placeholders.vue

@@ -1,190 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Placeholder" href="components/placeholder" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Placeholder</strong>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            In the example below, we take a typical card component and recreate
-            it with placeholders applied to create a "loading card". Size and
-            proportions are the same between the two.
-          </p>
-          <DocsExample href="components/placeholder">
-            <div class="d-flex justify-content-around">
-              <CCard style="width: 18rem">
-                <CCardImage orientation="top" :src="VueImg" />
-                <CCardBody>
-                  <CCardTitle>Card title</CCardTitle>
-                  <CCardText>
-                    Some quick example text to build on the card title and make
-                    up the bulk of the card's content.
-                  </CCardText>
-                  <CButton color="primary" href="#">Go somewhere</CButton>
-                </CCardBody>
-              </CCard>
-              <CCard style="width: 18rem">
-                <CCardImage
-                  component="svg"
-                  orientation="top"
-                  width="100%"
-                  height="162"
-                  role="img"
-                  aria-label="Placeholder"
-                  preserveAspectRatio="xMidYMid slice"
-                  focusable="false"
-                >
-                  <title>Placeholder</title
-                  ><rect width="100%" height="100%" fill="#868e96"></rect>
-                </CCardImage>
-                <CCardBody>
-                  <CCardTitle v-c-placeholder="{ animation: 'glow', xs: 7 }">
-                    <CPlaceholder :xs="6" />
-                  </CCardTitle>
-                  <CCardText v-c-placeholder="{ animation: 'glow' }">
-                    <CPlaceholder :xs="7" />
-                    <CPlaceholder :xs="4" />
-                    <CPlaceholder :xs="4" />
-                    <CPlaceholder :xs="6" />
-                    <CPlaceholder :xs="8" />
-                  </CCardText>
-                  <CButton
-                    v-c-placeholder="{ xs: 6 }"
-                    color="primary"
-                    aria-hidden="true"
-                    disabled
-                    href="#"
-                    tabindex="-1"
-                  ></CButton>
-                </CCardBody>
-              </CCard>
-            </div>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Placeholder</strong>
-        </CCardHeader>
-        <CCardBody>
-          <p>
-            Create placeholders with the
-            <code>&lt;CPlaceholder&gt;</code> component and a grid column propx
-            (e.g., <code>:xs="6"</code>) to set the <code>width</code>. They can
-            replace the text inside an element or be added as a modifier class
-            to an existing component.
-          </p>
-          <DocsExample href="components/placeholder">
-            <p aria-hidden="true">
-              <CPlaceholder :xs="6" />
-            </p>
-            <CButton
-              v-c-placeholder="{ xs: 4 }"
-              color="primary"
-              aria-hidden="true"
-              disabled
-              href="#"
-              tabindex="-1"
-            ></CButton>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Placeholder</strong> <small> Width</small>
-        </CCardHeader>
-        <CCardBody>
-          <p>
-            You can change the <code>width</code> through grid column classes,
-            width utilities, or inline styles.
-          </p>
-          <DocsExample href="components/placeholder#width">
-            <CPlaceholder :xs="6" />
-            <CPlaceholder class="w-75" />
-            <CPlaceholder style="width: 30%" />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Placeholder</strong> <small> Color</small>
-        </CCardHeader>
-        <CCardBody>
-          <p>
-            By default, the <code>&lt;CPlaceholder&gt;</code> uses
-            <code>currentColor</code>. This can be overridden with a custom
-            color or utility class.
-          </p>
-          <DocsExample href="components/placeholder#color">
-            <CPlaceholder :xs="12" />
-
-            <CPlaceholder color="primary" :xs="12" />
-            <CPlaceholder color="secondary" :xs="12" />
-            <CPlaceholder color="success" :xs="12" />
-            <CPlaceholder color="danger" :xs="12" />
-            <CPlaceholder color="warning" :xs="12" />
-            <CPlaceholder color="info" :xs="12" />
-            <CPlaceholder color="light" :xs="12" />
-            <CPlaceholder color="dark" :xs="12" />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Placeholder</strong> <small> Sizing</small>
-        </CCardHeader>
-        <CCardBody>
-          <p>
-            The size of <code>&lt;CPlaceholder&gt;</code>s are based on the
-            typographic style of the parent element. Customize them with
-            <code>size</code> prop: <code>lg</code>, <code>sm</code>, or
-            <code>xs</code>.
-          </p>
-          <DocsExample href="components/placeholder#color">
-            <CPlaceholder :xs="12" size="lg" />
-            <CPlaceholder :xs="12" />
-            <CPlaceholder :xs="12" size="sm" />
-            <CPlaceholder :xs="12" size="xs" />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Placeholder</strong> <small> Animation</small>
-        </CCardHeader>
-        <CCardBody>
-          <p>
-            Animate placeholders with <code>animation="glow"</code> or
-            <code>animation="wave"</code> to better convey the perception of
-            something being <em>actively</em> loaded.
-          </p>
-          <DocsExample href="components/placeholder#animation">
-            <CPlaceholder component="p" animation="glow">
-              <CPlaceholder :xs="12" />
-            </CPlaceholder>
-
-            <CPlaceholder component="p" animation="wave">
-              <CPlaceholder :xs="12" />
-            </CPlaceholder>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-import VueImg from '@/assets/images/vue.jpg'
-export default {
-  name: 'Placeholders',
-  setup() {
-    return {
-      VueImg,
-    }
-  },
-}
-</script>

frontend/src/views/base/Popovers.vue

@@ -1,87 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Popover" href="components/popover.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Popovers</strong> <small>Basic example</small>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="components/popover.html#example">
-            <CButton
-              v-c-popover="{
-                header: 'Popover title',
-                content:
-                  'And here\’s some amazing content. It’s very engaging. Right?',
-                placement: 'right',
-              }"
-              color="danger"
-              size="lg"
-            >
-              Click to toggle popover
-            </CButton>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Popover</strong> <small>Four directions</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Four options are available: top, right, bottom, and left aligned.
-            Directions are mirrored when using CoreUI for Vue in RTL.
-          </p>
-          <DocsExample href="components/popover.html#four-directions">
-            <CButton
-              v-c-popover="{
-                content:
-                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
-                placement: 'top',
-              }"
-              color="secondary"
-              >Popover on top</CButton
-            >
-            <CButton
-              v-c-popover="{
-                content:
-                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
-                placement: 'right',
-              }"
-              color="secondary"
-              >Popover on right</CButton
-            >
-            <CButton
-              v-c-popover="{
-                content:
-                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
-                placement: 'bottom',
-              }"
-              color="secondary"
-              >Popover on bottom</CButton
-            >
-            <CButton
-              v-c-popover="{
-                content:
-                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
-                placement: 'left',
-              }"
-              color="secondary"
-              >Popover on left</CButton
-            >
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Popovers',
-}
-</script>

frontend/src/views/base/Progress.vue

@@ -1,214 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Progress" href="components/progress.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Progress</strong> <small>Basic example</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Progress components are built with two HTML elements, some CSS to
-            set the width, and a few attributes. We don&#39;tuse
-            <a
-              href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress"
-            >
-              the HTML5 <code>&lt;progress&gt;</code> element
-            </a>
-            , ensuring you can stack progress bars, animate them, and place text
-            labels over them.
-          </p>
-          <DocsExample href="components/progress.html">
-            <CProgress class="mb-3">
-              <CProgressBar :value="0" />
-            </CProgress>
-            <CProgress class="mb-3">
-              <CProgressBar :value="25" />
-            </CProgress>
-            <CProgress class="mb-3">
-              <CProgressBar :value="50" />
-            </CProgress>
-            <CProgress class="mb-3">
-              <CProgressBar :value="75" />
-            </CProgress>
-            <CProgress class="mb-3">
-              <CProgressBar :value="100" />
-            </CProgress>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Progress</strong> <small>Labels</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add labels to your progress bars by placing text within the
-            <code>&lt;CProgressBar&gt;</code>.
-          </p>
-          <DocsExample href="components/progress.html#labels">
-            <CProgress class="mb-3">
-              <CProgressBar :value="25">25%</CProgressBar>
-            </CProgress>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Progress</strong> <small>Height</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            We only set a <code>height</code> value on the
-            <code>&lt;CProgress&gt;</code>, so if you change that value the
-            inner <code>&lt;CProgressBar&gt;</code> will automatically resize
-            accordingly.
-          </p>
-          <DocsExample href="components/progress.html#height">
-            <CProgress :height="1" class="mb-3">
-              <CProgressBar :value="25"></CProgressBar>
-            </CProgress>
-            <CProgress :height="20" class="mb-3">
-              <CProgressBar :value="25"></CProgressBar>
-            </CProgress>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Progress</strong> <small>Backgrounds</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Use <code>color</code> prop to change the appearance of individual
-            progress bars.
-          </p>
-          <DocsExample href="components/progress.html#backgrounds">
-            <CProgress class="mb-3">
-              <CProgressBar color="success" :value="25" />
-            </CProgress>
-            <CProgress class="mb-3">
-              <CProgressBar color="info" :value="50" />
-            </CProgress>
-            <CProgress class="mb-3">
-              <CProgressBar color="warning" :value="75" />
-            </CProgress>
-            <CProgress class="mb-3">
-              <CProgressBar color="danger" :value="100" />
-            </CProgress>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Progress</strong> <small>Multiple bars</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Include multiple progress bars in a progress component if you need.
-          </p>
-          <DocsExample href="components/progress.html#multiple-bars">
-            <CProgress class="mb-3">
-              <CProgressBar :value="15" />
-              <CProgressBar color="success" :value="30" />
-              <CProgressBar color="info" :value="20" />
-            </CProgress>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Progress</strong> <small>Striped</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add <code>variant=&#34;striped&#34;</code> to any
-            <code>&lt;CProgressBar&gt;</code> to apply a stripe via CSS gradient
-            over the progress bar&#39;s background color.
-          </p>
-          <DocsExample href="components/progress.html#striped">
-            <CProgress class="mb-3">
-              <CProgressBar color="success" variant="striped" :value="25" />
-            </CProgress>
-            <CProgress class="mb-3">
-              <CProgressBar color="info" variant="striped" :value="50" />
-            </CProgress>
-            <CProgress class="mb-3">
-              <CProgressBar color="warning" variant="striped" :value="75" />
-            </CProgress>
-            <CProgress class="mb-3">
-              <CProgressBar color="danger" variant="striped" :value="100" />
-            </CProgress>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Progress</strong> <small>Animated stripes</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            The striped gradient can also be animated. Add
-            <code>animated</code> property to
-            <code>&lt;CProgressBar&gt;</code> to animate the stripes right to
-            left via CSS3 animations.
-          </p>
-          <DocsExample href="components/progress.html#animated-stripes">
-            <CProgress class="mb-3">
-              <CProgressBar
-                color="success"
-                variant="striped"
-                animated
-                :value="25"
-              />
-            </CProgress>
-            <CProgress class="mb-3">
-              <CProgressBar
-                color="info"
-                variant="striped"
-                animated
-                :value="50"
-              />
-            </CProgress>
-            <CProgress class="mb-3">
-              <CProgressBar
-                color="warning"
-                variant="striped"
-                animated
-                :value="75"
-              />
-            </CProgress>
-            <CProgress class="mb-3">
-              <CProgressBar
-                color="danger"
-                variant="striped"
-                animated
-                :value="100"
-              />
-            </CProgress>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Progress',
-}
-</script>

frontend/src/views/base/Spinners.vue

@@ -1,133 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Spinner" href="components/spinner.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Spinner</strong> <small>Border</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Use the border spinners for a lightweight loading indicator.
-          </p>
-          <DocsExample href="components/spinner.html">
-            <CSpinner />
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            The border spinner uses <code>currentColor</code> for its
-            <code>border-color</code>. You can use any of our text color
-            utilities on the standard spinner.
-          </p>
-          <DocsExample href="components/spinner.html#colors">
-            <CSpinner color="primary" />
-            <CSpinner color="secondary" />
-            <CSpinner color="success" />
-            <CSpinner color="danger" />
-            <CSpinner color="warning" />
-            <CSpinner color="info" />
-            <CSpinner color="light" />
-            <CSpinner color="dark" />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Spinner</strong> <small>Growing</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            If you don&#39;tfancy a border spinner, switch to the grow spinner.
-            While it doesn&#39;t technically spin, it does repeatedly grow!
-          </p>
-          <DocsExample href="components/spinner.html#growing-spinner">
-            <CSpinner variant="grow" />
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            Once again, this spinner is built with <code>currentColor</code>, so
-            you can easily change its appearance. Here it is in blue, along with
-            the supported variants.
-          </p>
-          <DocsExample href="components/spinner.html#growing-spinner">
-            <CSpinner color="primary" variant="grow" />
-            <CSpinner color="secondary" variant="grow" />
-            <CSpinner color="success" variant="grow" />
-            <CSpinner color="danger" variant="grow" />
-            <CSpinner color="warning" variant="grow" />
-            <CSpinner color="info" variant="grow" />
-            <CSpinner color="light" variant="grow" />
-            <CSpinner color="dark" variant="grow" />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Spinner</strong> <small>Size</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add <code>size=&#34;sm&#34;</code> property to make a smaller
-            spinner that can quickly be used within other components.
-          </p>
-          <DocsExample href="components/spinner.html#size">
-            <CSpinner size="sm" />
-            <CSpinner size="sm" variant="grow" />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Spinner</strong> <small>Buttons</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Use spinners within buttons to indicate an action is currently
-            processing or taking place. You may also swap the text out of the
-            spinner element and utilize button text as needed.
-          </p>
-          <DocsExample href="components/spinner.html#buttons">
-            <CButton disabled>
-              <CSpinner component="span" size="sm" aria-hidden="true" />
-            </CButton>
-            <CButton disabled>
-              <CSpinner component="span" size="sm" aria-hidden="true" />
-              Loading...
-            </CButton>
-          </DocsExample>
-          <DocsExample href="components/spinner.html#buttons">
-            <CButton disabled>
-              <CSpinner
-                component="span"
-                size="sm"
-                variant="grow"
-                aria-hidden="true"
-              />
-            </CButton>
-            <CButton disabled>
-              <CSpinner
-                component="span"
-                size="sm"
-                variant="grow"
-                aria-hidden="true"
-              />
-              Loading...
-            </CButton>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Spinners',
-}
-</script>

frontend/src/views/base/Tooltips.vue

@@ -1,83 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Tooltip" href="components/tooltip.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard>
-        <CCardHeader>
-          <strong>Vue Tooltips</strong> <small>Basic example</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Hover over the links below to see tooltips:
-          </p>
-          <DocsExample href="components/tooltip.html">
-            <p class="text-medium-emphasis">
-              Tight pants next level keffiyeh
-              <CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
-              haven't heard of them. Photo booth beard raw denim letterpress
-              vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's
-              fixie sustainable quinoa 8-bit american apparel
-              <CLink v-c-tooltip="'Tooltip text'"> have a </CLink>
-              terry richardson vinyl chambray. Beard stumptown, cardigans banh
-              mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko
-              mcsweeney''s cleanse vegan chambray. A really ironic artisan
-              <CLink v-c-tooltip="'Tooltip text'"> whatever keytar </CLink>
-              scenester farm-to-table banksy Austin
-              <CLink v-c-tooltip="'Tooltip text'"> twitter handle </CLink>
-              freegan cred raw denim single-origin coffee viral.
-            </p>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            Hover over the links below to see tooltips:
-          </p>
-          <DocsExample href="components/tooltip.html">
-            <CButton
-              v-c-tooltip="{
-                content:
-                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
-                placement: 'top',
-              }"
-              color="secondary"
-              >Tooltip on top</CButton
-            >
-            <CButton
-              v-c-tooltip="{
-                content:
-                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
-                placement: 'right',
-              }"
-              color="secondary"
-              >Tooltip on right</CButton
-            >
-            <CButton
-              v-c-tooltip="{
-                content:
-                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
-                placement: 'bottom',
-              }"
-              color="secondary"
-              >Tooltip on bottom</CButton
-            >
-            <CButton
-              v-c-tooltip="{
-                content:
-                  'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
-                placement: 'left',
-              }"
-              color="secondary"
-              >Tooltip on left</CButton
-            >
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Tooltips',
-}
-</script>

frontend/src/views/buttons/ButtonGroups.vue

@@ -1,426 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Button Group" href="components/button-group.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button Group</strong> <span>Basic example</span>
-        </CCardHeader>
-        <CCardBody>
-          <p>
-            Wrap a series of <code>&lt;CButton&gt;</code> components in
-            <code>&lt;CButtonGroup&gt;</code>.
-          </p>
-          <DocsExample href="components/button-group.html">
-            <CButtonGroup role="group" aria-label="Basic example">
-              <CButton color="primary">Left</CButton>
-              <CButton color="primary">Middle</CButton>
-              <CButton color="primary">Right</CButton>
-            </CButtonGroup>
-          </DocsExample>
-          <p>
-            These classes can also be added to groups of links, as an
-            alternative to the
-            <code>&lt;CNav&gt;</code> components.
-          </p>
-          <DocsExample href="components/button-group.html">
-            <CButtonGroup>
-              <CButton href="#" color="primary" active> Active link </CButton>
-              <CButton href="#" color="primary"> Link </CButton>
-              <CButton href="#" color="primary"> Link </CButton>
-            </CButtonGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button Group</strong> <span>Mixed styles</span>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="components/button-group.html#mixed-styles">
-            <CButtonGroup role="group" aria-label="Basic mixed styles example">
-              <CButton color="danger">Left</CButton>
-              <CButton color="warning">Middle</CButton>
-              <CButton color="success">Right</CButton>
-            </CButtonGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button Group</strong> <span>Outlined styles</span>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="components/button-group.html#outlined-styles">
-            <CButtonGroup role="group" aria-label="Basic outlined example">
-              <CButton color="primary" variant="outline"> Left </CButton>
-              <CButton color="primary" variant="outline"> Middle </CButton>
-              <CButton color="primary" variant="outline"> Right </CButton>
-            </CButtonGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button Group</strong>
-          <span>Checkbox and radio button groups</span>
-        </CCardHeader>
-        <CCardBody>
-          <p>
-            Combine button-like checkbox and radio toggle buttons into a
-            seamless looking button group.
-          </p>
-          <DocsExample
-            href="components/button-group.html#checkbox-and-radio-button-groups"
-          >
-            <CButtonGroup
-              role="group"
-              aria-label="Basic checkbox toggle button group"
-            >
-              <CFormCheck
-                id="btncheck1"
-                :button="{ color: 'primary', variant: 'outline' }"
-                autocomplete="off"
-                label="Checkbox 1"
-              />
-              <CFormCheck
-                id="btncheck2"
-                :button="{ color: 'primary', variant: 'outline' }"
-                autocomplete="off"
-                label="Checkbox 2"
-              />
-              <CFormCheck
-                id="btncheck3"
-                :button="{ color: 'primary', variant: 'outline' }"
-                autocomplete="off"
-                label="Checkbox 3"
-              />
-            </CButtonGroup>
-          </DocsExample>
-          <DocsExample
-            href="components/button-group.html#checkbox-and-radio-button-groups"
-          >
-            <CButtonGroup
-              role="group"
-              aria-label="Basic checkbox toggle button group"
-            >
-              <CFormCheck
-                id="btnradio1"
-                type="radio"
-                :button="{ color: 'primary', variant: 'outline' }"
-                name="btnradio"
-                autocomplete="off"
-                label="Radio 1"
-              />
-              <CFormCheck
-                id="btnradio2"
-                type="radio"
-                :button="{ color: 'primary', variant: 'outline' }"
-                name="btnradio"
-                autocomplete="off"
-                label="Radio 2"
-              />
-              <CFormCheck
-                id="btnradio3"
-                type="radio"
-                :button="{ color: 'primary', variant: 'outline' }"
-                name="btnradio"
-                autocomplete="off"
-                label="Radio 3"
-              />
-            </CButtonGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button Group</strong> <span>Button toolbar</span>
-        </CCardHeader>
-        <CCardBody>
-          <p>
-            Join sets of button groups into button toolbars for more complicated
-            components. Use utility classes as needed to space out groups,
-            buttons, and more.
-          </p>
-          <DocsExample href="components/button-group.html#button-toolbar">
-            <CButtonToolbar
-              role="group"
-              aria-label="Toolbar with button groups"
-            >
-              <CButtonGroup class="me-2" role="group" aria-label="First group">
-                <CButton color="primary">1</CButton>
-                <CButton color="primary">2</CButton>
-                <CButton color="primary">3</CButton>
-                <CButton color="primary">4</CButton>
-              </CButtonGroup>
-              <CButtonGroup class="me-2" role="group" aria-label="Second group">
-                <CButton color="secondary">5</CButton>
-                <CButton color="secondary">6</CButton>
-                <CButton color="secondary">7</CButton>
-              </CButtonGroup>
-              <CButtonGroup class="me-2" role="group" aria-label="Third group">
-                <CButton color="info">8</CButton>
-              </CButtonGroup>
-            </CButtonToolbar>
-          </DocsExample>
-          <p>
-            Feel free to combine input groups with button groups in your
-            toolbars. Similar to the example above, you’ll likely need some
-            utilities through to space items correctly.
-          </p>
-          <DocsExample href="components/button-group.html#button-toolbar">
-            <CButtonToolbar
-              class="mb-3"
-              role="group"
-              aria-label="Toolbar with button groups"
-            >
-              <CButtonGroup class="me-2" role="group" aria-label="First group">
-                <CButton color="secondary" variant="outline"> 1 </CButton>
-                <CButton color="secondary" variant="outline"> 2 </CButton>
-                <CButton color="secondary" variant="outline"> 3 </CButton>
-                <CButton color="secondary" variant="outline"> 4 </CButton>
-              </CButtonGroup>
-              <CInputGroup>
-                <CInputGroupText>@</CInputGroupText>
-                <CFormInput
-                  placeholder="Input group example"
-                  aria-label="Input group example"
-                  aria-describedby="btnGroupAddon"
-                />
-              </CInputGroup>
-            </CButtonToolbar>
-            <CButtonToolbar
-              class="justify-content-between"
-              role="group"
-              aria-label="Toolbar with button groups"
-            >
-              <CButtonGroup class="me-2" role="group" aria-label="First group">
-                <CButton color="secondary" variant="outline"> 1 </CButton>
-                <CButton color="secondary" variant="outline"> 2 </CButton>
-                <CButton color="secondary" variant="outline"> 3 </CButton>
-                <CButton color="secondary" variant="outline"> 4 </CButton>
-              </CButtonGroup>
-              <CInputGroup>
-                <CInputGroupText>@</CInputGroupText>
-                <CFormInput
-                  placeholder="Input group example"
-                  aria-label="Input group example"
-                  aria-describedby="btnGroupAddon"
-                />
-              </CInputGroup>
-            </CButtonToolbar>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button Group</strong> <span>Sizing</span>
-        </CCardHeader>
-        <CCardBody>
-          <p>
-            Alternatively, of implementing button sizing classes to each button
-            in a group, set
-            <code>size</code> property to all
-            <code>&lt;CButtonGroup&gt;</code>&#39;s, including each one when
-            nesting multiple groups.
-          </p>
-          <DocsExample href="components/button-group.html#sizing">
-            <CButtonGroup
-              size="lg"
-              role="group"
-              aria-label="Large button group"
-            >
-              <CButton color="dark" variant="outline"> Left </CButton>
-              <CButton color="dark" variant="outline"> Middle </CButton>
-              <CButton color="dark" variant="outline"> Right </CButton>
-            </CButtonGroup>
-            <br />
-            <CButtonGroup role="group" aria-label="Default button group">
-              <CButton color="dark" variant="outline"> Left </CButton>
-              <CButton color="dark" variant="outline"> Middle </CButton>
-              <CButton color="dark" variant="outline"> Right </CButton>
-            </CButtonGroup>
-            <br />
-            <CButtonGroup
-              size="sm"
-              role="group"
-              aria-label="Small button group"
-            >
-              <CButton color="dark" variant="outline"> Left </CButton>
-              <CButton color="dark" variant="outline"> Middle </CButton>
-              <CButton color="dark" variant="outline"> Right </CButton>
-            </CButtonGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button Group</strong> <span>Nesting</span>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Put a <code>&lt;CButtonGroup&gt;</code> inside another
-            <code>&lt;CButtonGroup&gt;</code> when you need dropdown menus
-            combined with a series of buttons.
-          </p>
-          <DocsExample href="components/button-group.html#nesting">
-            <CButtonGroup
-              role="group"
-              aria-label="Button group with nested dropdown"
-            >
-              <CButton color="primary">1</CButton>
-              <CButton color="primary">2</CButton>
-              <CDropdown variant="btn-group">
-                <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </CButtonGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button Group</strong> <span>Vertical variation</span>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Create a set of buttons that appear vertically stacked rather than
-            horizontally.
-            <strong>Split button dropdowns are not supported here.</strong>
-          </p>
-          <DocsExample href="components/button-group.html/#vertical-variation">
-            <CButtonGroup
-              vertical
-              role="group"
-              aria-label="Vertical button group"
-            >
-              <CButton color="dark">Button</CButton>
-              <CButton color="dark">Button</CButton>
-              <CButton color="dark">Button</CButton>
-              <CButton color="dark">Button</CButton>
-              <CButton color="dark">Button</CButton>
-              <CButton color="dark">Button</CButton>
-              <CButton color="dark">Button</CButton>
-            </CButtonGroup>
-          </DocsExample>
-          <DocsExample href="components/button-group.html/#vertical-variation">
-            <CButtonGroup
-              vertical
-              role="group"
-              aria-label="Vertical button group"
-            >
-              <CButton color="primary">Button</CButton>
-              <CButton color="primary">Button</CButton>
-              <CDropdown variant="btn-group">
-                <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CButton color="primary">Button</CButton>
-              <CButton color="primary">Button</CButton>
-              <CDropdown variant="btn-group">
-                <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CDropdown variant="btn-group">
-                <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CDropdown variant="btn-group">
-                <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </CButtonGroup>
-          </DocsExample>
-          <DocsExample href="components/button-group.html/#vertical-variation">
-            <CButtonGroup
-              vertical
-              role="group"
-              aria-label="Vertical button group"
-            >
-              <CFormCheck
-                id="vbtnradio1"
-                type="radio"
-                :button="{ color: 'danger', variant: 'outline' }"
-                name="vbtnradio"
-                autocomplete="off"
-                label="Radio
-              1"
-                checked
-              />
-              <CFormCheck
-                id="vbtnradio2"
-                type="radio"
-                :button="{ color: 'danger', variant: 'outline' }"
-                name="vbtnradio"
-                autocomplete="off"
-                label="Radio
-              2"
-              />
-              <CFormCheck
-                id="vbtnradio3"
-                type="radio"
-                :button="{ color: 'danger', variant: 'outline' }"
-                name="vbtnradio"
-                autocomplete="off"
-                label="Radio
-              3"
-              />
-            </CButtonGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'ButtonGroups',
-}
-</script>

frontend/src/views/buttons/Buttons.vue

@@ -1,445 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Button" href="components/button.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button</strong>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            CoreUI includes a bunch of predefined buttons components, each
-            serving its own semantic purpose. Buttons show what action will
-            happen when the user clicks or touches it. CoreUI buttons are used
-            to initialize operations, both in the background or foreground of an
-            experience.
-          </p>
-          <DocsExample href="components/button.html">
-            <template
-              v-for="state in ['normal', 'active', 'disabled']"
-              :key="state"
-            >
-              <CRow class="align-items-center mb-3">
-                <CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
-                  state.charAt(0).toUpperCase() + state.slice(1)
-                }}</CCol>
-                <CCol xs>
-                  <template
-                    v-for="color in [
-                      'primary',
-                      'secondary',
-                      'success',
-                      'danger',
-                      'warning',
-                      'info',
-                      'light',
-                      'dark',
-                    ]"
-                    :key="color"
-                  >
-                    <CButton
-                      :color="color"
-                      :active="state === 'active' ? true : false"
-                      :disabled="state === 'disabled' ? true : false"
-                    >
-                      {{ color.charAt(0).toUpperCase() + color.slice(1) }}
-                    </CButton>
-                  </template>
-                </CCol>
-              </CRow>
-            </template>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button</strong> <small>with icons</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            You can combine button with our
-            <a href="https://icons.coreui.io/">CoreUI Icons</a>.
-          </p>
-          <DocsExample href="components/button.html">
-            <template
-              v-for="state in ['normal', 'active', 'disabled']"
-              :key="state"
-            >
-              <CRow class="align-items-center mb-3">
-                <CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
-                  state.charAt(0).toUpperCase() + state.slice(1)
-                }}</CCol>
-
-                <CCol xs>
-                  <template
-                    v-for="color in [
-                      'primary',
-                      'secondary',
-                      'success',
-                      'danger',
-                      'warning',
-                      'info',
-                      'light',
-                      'dark',
-                    ]"
-                    :key="color"
-                  >
-                    <CButton
-                      :color="color"
-                      :active="state === 'active' ? true : false"
-                      :disabled="state === 'disabled' ? true : false"
-                    >
-                      <CIcon icon="cil-bell" class="me-2" />
-                      {{ color.charAt(0).toUpperCase() + color.slice(1) }}
-                    </CButton>
-                  </template>
-                </CCol>
-              </CRow>
-            </template>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button</strong> <small>Button components</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            The <code>&lt;CButton&gt;</code> component are designed for
-            <code>&lt;button&gt;</code> , <code>&lt;a&gt;</code> or
-            <code>&lt;input&gt;</code>
-            elements (though some browsers may apply a slightly different
-            rendering).
-          </p>
-          <p class="text-medium-emphasis small">
-            If you&#39;re using <code>&lt;CButton&gt;</code> component as
-            <code>&lt;a&gt;</code> elements that are used to trigger
-            functionality ex. collapsing content, these links should be given a
-            <code>role=&#34;button&#34;</code> to adequately communicate their
-            meaning to assistive technologies such as screen readers.
-          </p>
-          <DocsExample href="components/button.html#button-components">
-            <CButton component="a" color="primary" href="#" role="button">
-              Link
-            </CButton>
-            <CButton type="submit" color="primary"> Button </CButton>
-            <CButton
-              component="input"
-              type="button"
-              color="primary"
-              value="Input"
-            />
-            <CButton
-              component="input"
-              type="submit"
-              color="primary"
-              value="Submit"
-            />
-            <CButton
-              component="input"
-              type="reset"
-              color="primary"
-              value="Reset"
-            />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button</strong> <small>outline</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            If you need a button, but without the strong background colors. Set
-            <code>variant=&#34;outline&#34;</code> prop to remove all background
-            colors.
-          </p>
-          <DocsExample href="components/button.html#outline-buttons">
-            <template
-              v-for="state in ['normal', 'active', 'disabled']"
-              :key="state"
-            >
-              <CRow class="align-items-center mb-3">
-                <CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
-                  state.charAt(0).toUpperCase() + state.slice(1)
-                }}</CCol>
-
-                <CCol xs>
-                  <template
-                    v-for="color in [
-                      'primary',
-                      'secondary',
-                      'success',
-                      'danger',
-                      'warning',
-                      'info',
-                      'light',
-                      'dark',
-                    ]"
-                    :key="color"
-                  >
-                    <CButton
-                      :color="color"
-                      :active="state === 'active' ? true : false"
-                      :disabled="state === 'disabled' ? true : false"
-                      variant="outline"
-                    >
-                      {{ color.charAt(0).toUpperCase() + color.slice(1) }}
-                    </CButton>
-                  </template>
-                </CCol>
-              </CRow>
-            </template>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button</strong> <small>ghost</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            If you need a ghost variant of button, set
-            <code>variant=&#34;ghost&#34;</code> prop to remove all background
-            colors.
-          </p>
-          <DocsExample href="components/button.html#ghost-buttons">
-            <template
-              v-for="state in ['normal', 'active', 'disabled']"
-              :key="state"
-            >
-              <CRow class="align-items-center mb-3">
-                <CCol :xs="12" :xl="2" class="mb-3 mb-xl-0">{{
-                  state.charAt(0).toUpperCase() + state.slice(1)
-                }}</CCol>
-                <CCol xs>
-                  <template
-                    v-for="color in [
-                      'primary',
-                      'secondary',
-                      'success',
-                      'danger',
-                      'warning',
-                      'info',
-                      'light',
-                      'dark',
-                    ]"
-                    :key="color"
-                  >
-                    <CButton
-                      :color="color"
-                      :active="state === 'active' ? true : false"
-                      :disabled="state === 'disabled' ? true : false"
-                      variant="ghost"
-                    >
-                      <CIcon icon="cil-bell" class="me-2" />
-                      {{ color.charAt(0).toUpperCase() + color.slice(1) }}
-                    </CButton>
-                  </template>
-                </CCol>
-              </CRow>
-            </template>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button</strong> <small>Sizes</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or
-            <code>size=&#34;sm&#34;</code> for additional sizes.
-          </p>
-          <DocsExample href="components/button.html#sizes">
-            <CButton color="primary" size="lg"> Large button </CButton>
-            <CButton color="secondary" size="lg"> Large button </CButton>
-          </DocsExample>
-          <DocsExample href="components/button.html#sizes">
-            <CButton color="primary" size="sm"> Small button </CButton>
-            <CButton color="secondary" size="sm"> Small button </CButton>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button</strong> <small>Pill</small>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="components/button.html#pill-buttons">
-            <template
-              v-for="color in [
-                'primary',
-                'secondary',
-                'success',
-                'danger',
-                'warning',
-                'info',
-                'light',
-                'dark',
-              ]"
-              :key="color"
-            >
-              <CButton :color="color" shape="rounded-pill">
-                {{ color.charAt(0).toUpperCase() + color.slice(1) }}
-              </CButton>
-            </template>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button</strong> <small>Square</small>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="components/button.html#square">
-            <template
-              v-for="color in [
-                'primary',
-                'secondary',
-                'success',
-                'danger',
-                'warning',
-                'info',
-                'light',
-                'dark',
-              ]"
-              :key="color"
-            >
-              <CButton :color="color" shape="rounded-0">
-                {{ color.charAt(0).toUpperCase() + color.slice(1) }}
-              </CButton>
-            </template>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button</strong> <small>Disabled state</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add the <code>disabled</code> boolean prop to any
-            <code>&lt;CButton&gt;</code>
-            component to make buttons look inactive. Disabled button has
-            <code>pointer-events: none</code> applied to, disabling hover and
-            active states from triggering.
-          </p>
-          <DocsExample href="components/button.html#disabled-state">
-            <CButton color="primary" size="lg" disabled>
-              Primary button
-            </CButton>
-            <CButton color="secondary" size="lg" disabled> Button </CButton>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            Disabled buttons using the <code>&lt;a&gt;</code> component act a
-            little different:
-          </p>
-          <p class="text-medium-emphasis small">
-            <code>&lt;a&gt;</code>s don&#39;tsupport the
-            <code>disabled</code> attribute, so CoreUI has to add
-            <code>.disabled</code> class to make buttons look inactive. CoreUI
-            also has to add to the disabled button component
-            <code>aria-disabled=&#34;true&#34;</code> attribute to show the
-            state of the component to assistive technologies.
-          </p>
-          <DocsExample href="components/button.html#disabled-state">
-            <CButton component="a" href="#" color="primary" size="lg" disabled>
-              Primary link
-            </CButton>
-            <CButton
-              component="a"
-              href="#"
-              color="secondary"
-              size="lg"
-              disabled
-            >
-              Link
-            </CButton>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Button</strong> <small>Block buttons</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Create buttons that span the full width of a parent—by using
-            utilities.
-          </p>
-          <DocsExample href="components/button.html#block-buttons">
-            <div class="d-grid gap-2">
-              <CButton color="primary">Button</CButton>
-              <CButton color="primary">Button</CButton>
-            </div>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            Here we create a responsive variation, starting with vertically
-            stacked buttons until the <code>md</code> breakpoint, where
-            <code>.d-md-block</code> replaces the <code>.d-grid</code> class,
-            thus nullifying the <code>gap-2</code> utility. Resize your browser
-            to see them change.
-          </p>
-          <DocsExample href="components/button.html#block-buttons">
-            <div class="d-grid gap-2 d-md-block">
-              <CButton color="primary">Button</CButton>
-              <CButton color="primary">Button</CButton>
-            </div>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            You can adjust the width of your block buttons with grid column
-            width classes. For example, for a half-width &#34;block button&#34;,
-            use <code>.col-6</code>. Center it horizontally with
-            <code>.mx-auto</code>, too.
-          </p>
-          <DocsExample href="components/button.html#block-buttons">
-            <div class="d-grid gap-2 col-6 mx-auto">
-              <CButton color="primary">Button</CButton>
-              <CButton color="primary">Button</CButton>
-            </div>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            Additional utilities can be used to adjust the alignment of buttons
-            when horizontal. Here we&#39;ve taken our previous responsive
-            example and added some flex utilities and a margin utility on the
-            button to right align the buttons when they&#39;re no longer
-            stacked.
-          </p>
-          <DocsExample href="components/button.html#block-buttons">
-            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-              <CButton color="primary" class="me-md-2"> Button </CButton>
-              <CButton color="primary">Button</CButton>
-            </div>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Buttons',
-}
-</script>

frontend/src/views/buttons/Dropdowns.vue

@@ -1,364 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Dropdown" href="components/dropdown.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Dropdown</strong> <small>Single button</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Here&#39;s how you can put them to work with either
-            <code>&lt;button&gt;</code>
-            elements:
-          </p>
-          <DocsExample href="components/dropdown.html#single-button">
-            <CDropdown>
-              <CDropdownToggle color="secondary"
-                >Dropdown button</CDropdownToggle
-              >
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            The best part is you can do this with any button variant, too:
-          </p>
-          <DocsExample href="components/dropdown.html#single-button">
-            <template
-              v-for="color in [
-                'primary',
-                'secondary',
-                'success',
-                'danger',
-                'warning',
-                'info',
-                'light',
-                'dark',
-              ]"
-              :key="color"
-            >
-              <CDropdown variant="btn-group">
-                <CDropdownToggle :color="color">{{ color }}</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </template>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Dropdown</strong> <small>Split button</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Similarly, create split button dropdowns with virtually the same
-            markup as single button dropdowns, but with the addition of boolean
-            prop <code>split</code> for proper spacing around the dropdown
-            caret.
-          </p>
-          <p class="text-medium-emphasis small">
-            We use this extra class to reduce the horizontal
-            <code>padding</code> on either side of the caret by 25% and remove
-            the <code>margin-left</code> that&#39;s attached for normal button
-            dropdowns. Those additional changes hold the caret centered in the
-            split button and implement a more properly sized hit area next to
-            the main button.
-          </p>
-          <DocsExample href="components/dropdown.html#split-button">
-            <template
-              v-for="color in [
-                'primary',
-                'secondary',
-                'success',
-                'danger',
-                'warning',
-                'info',
-                'light',
-                'dark',
-              ]"
-              :key="color"
-            >
-              <CDropdown variant="btn-group">
-                <CButton :color="color">{{ color }}</CButton>
-                <CDropdownToggle :color="color" split>{{
-                  color
-                }}</CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </template>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Dropdown</strong> <small>Sizing</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Button dropdowns work with buttons of all sizes, including default
-            and split dropdown buttons.
-          </p>
-          <DocsExample href="components/dropdown.html#sizing">
-            <CDropdown variant="btn-group">
-              <CDropdownToggle color="secondary" size="lg">
-                Large button
-              </CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Separated link</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-            <CDropdown variant="btn-group">
-              <CButton color="secondary" size="lg">
-                Large split button
-              </CButton>
-              <CDropdownToggle color="secondary" size="lg" split />
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Separated link</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-          </DocsExample>
-          <DocsExample href="components/dropdown.html#sizing">
-            <CDropdown variant="btn-group">
-              <CDropdownToggle color="secondary" size="sm">
-                Small button
-              </CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Separated link</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-            <CDropdown variant="btn-group">
-              <CButton color="secondary" size="sm">
-                Small split button
-              </CButton>
-              <CDropdownToggle color="secondary" size="sm" split />
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Separated link</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Dropdown</strong> <small>Single button</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Opt into darker dropdowns to match a dark navbar or custom style by
-            set
-            <code>dark</code> property. No changes are required to the dropdown
-            items.
-          </p>
-          <DocsExample href="components/dropdown.html#dark-dropdowns">
-            <CDropdown dark>
-              <CDropdownToggle color="secondary"
-                >Dropdown button</CDropdownToggle
-              >
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Separated link</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            And putting it to use in a navbar:
-          </p>
-          <DocsExample href="components/dropdown.html#dark-dropdowns">
-            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-              <div class="container-fluid">
-                <a class="navbar-brand" href="https://coreui.io/vue/">
-                  Navbar
-                </a>
-                <button
-                  class="navbar-toggler"
-                  type="button"
-                  data-coreui-toggle="collapse"
-                  data-coreui-target="#navbarNavDarkDropdown"
-                  aria-controls="navbarNavDarkDropdown"
-                  aria-expanded="false"
-                  aria-label="Toggle navigation"
-                >
-                  <span class="navbar-toggler-icon"></span>
-                </button>
-                <div
-                  id="navbarNavDarkDropdown"
-                  class="collapse navbar-collapse"
-                >
-                  <ul class="navbar-nav">
-                    <CDropdown dark component="li" variant="nav-item">
-                      <CDropdownToggle>Dropdown</CDropdownToggle>
-                      <CDropdownMenu>
-                        <CDropdownItem href="#">Action</CDropdownItem>
-                        <CDropdownItem href="#">Another action</CDropdownItem>
-                        <CDropdownItem href="#"
-                          >Something else here</CDropdownItem
-                        >
-                        <CDropdownDivider />
-                        <CDropdownItem href="#">Separated link</CDropdownItem>
-                      </CDropdownMenu>
-                    </CDropdown>
-                  </ul>
-                </div>
-              </div>
-            </nav>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Dropdown</strong> <small>Dropup</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Trigger dropdown menus above elements by adding
-            <code>direction=&#34;dropup&#34;</code> to the
-            <code>&lt;CDropdown&gt;</code>
-            component.
-          </p>
-          <DocsExample href="components/dropdown.html#dropup">
-            <CDropdown variant="btn-group" direction="dropup">
-              <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Separated link</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-            <CDropdown variant="btn-group" direction="dropup">
-              <CButton color="secondary">Small split button</CButton>
-              <CDropdownToggle color="secondary" split />
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Separated link</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Dropdown</strong> <small>Dropright</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Trigger dropdown menus at the right of the elements by adding
-            <code>direction=&#34;dropend&#34;</code> to the
-            <code>&lt;CDropdown&gt;</code>
-            component.
-          </p>
-          <DocsExample href="components/dropdown.html#dropright">
-            <CDropdown variant="btn-group" direction="dropend">
-              <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Separated link</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-            <CDropdown variant="btn-group" direction="dropend">
-              <CButton color="secondary">Small split button</CButton>
-              <CDropdownToggle color="secondary" split />
-              <CDropdownMenu>
-                <CDropdownItem href="#">Action</CDropdownItem>
-                <CDropdownItem href="#">Another action</CDropdownItem>
-                <CDropdownItem href="#">Something else here</CDropdownItem>
-                <CDropdownDivider />
-                <CDropdownItem href="#">Separated link</CDropdownItem>
-              </CDropdownMenu>
-            </CDropdown>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Dropdown</strong> <small>Dropleft</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Trigger dropdown menus at the left of the elements by adding
-            <code>direction=&#34;dropstart&#34;</code> to the
-            <code>&lt;CDropdown&gt;</code>
-            component.
-          </p>
-          <DocsExample href="components/dropdown.html#dropleft">
-            <CButtonGroup>
-              <CDropdown variant="btn-group" direction="dropstart">
-                <CDropdownToggle color="secondary" split />
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CButton color="secondary">Small split button</CButton>
-            </CButtonGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Dropdowns',
-}
-</script>

frontend/src/views/charts/Charts.vue

@@ -1,12 +1,5 @@
 <template>
   <CRow>
-    <CCol :xs="12">
-      <DocsCallout
-        name="Chart"
-        href="components/chart"
-        content="React wrapper component for Chart.js 3.0, the most popular charting library."
-      />
-    </CCol>
     <CCol :md="6" class="mb-4">
       <CCard>
         <CCardHeader> Line Chart </CCardHeader>

frontend/src/views/forms/ChecksRadios.vue

@@ -1,407 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Check and Radios" href="forms/checks-radios.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Checkbox</strong>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="forms/checks-radios.html">
-            <CFormCheck id="flexCheckDefault" label="Default checkbox" />
-            <CFormCheck
-              id="flexCheckChecked"
-              label="Checked checkbox"
-              checked
-            />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Checkbox</strong> <small>Disabled</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add the <code>disabled</code> attribute and the associated
-            <code>&lt;label&gt;</code>s are automatically styled to match with a
-            lighter color to help indicate the input&#39;s state.
-          </p>
-          <DocsExample href="forms/checks-radios.html#disabled">
-            <CFormCheck label="Disabled checkbox" disabled />
-            <CFormCheck label="Disabled checked checkbox" checked disabled />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Radio</strong>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add the <code>disabled</code> attribute and the associated
-            <code>&lt;label&gt;</code>s are automatically styled to match with a
-            lighter color to help indicate the input&#39;s state.
-          </p>
-          <DocsExample href="forms/checks-radios.html#radios">
-            <CFormCheck
-              id="flexRadioDefault1"
-              type="radio"
-              name="flexRadioDefault"
-              label="Default radio"
-            />
-            <CFormCheck
-              id="flexRadioDefault2"
-              type="radio"
-              name="flexRadioDefault"
-              label="Checked radio"
-              checked
-            />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Radio</strong> <small>Disabled</small>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="forms/checks-radios.html#disabled-1">
-            <CFormCheck
-              id="flexRadioDisabled"
-              type="radio"
-              name="flexRadioDisabled"
-              label="Disabled radio"
-              disabled
-            />
-            <CFormCheck
-              id="flexRadioCheckedDisabled"
-              type="radio"
-              name="flexRadioDisabled"
-              label="Disabled checked radio"
-              checked
-              disabled
-            />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Switches</strong>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            A switch has the markup of a custom checkbox but uses the
-            <code>switch</code> boolean properly to render a toggle switch.
-            Switches also support the <code>disabled</code> attribute.
-          </p>
-          <DocsExample href="forms/checks-radios.html#switches">
-            <CFormSwitch
-              id="formSwitchCheckDefault"
-              label="Default switch checkbox input"
-            />
-            <CFormSwitch
-              id="formSwitchCheckChecked"
-              label="Checked switch checkbox input"
-              checked
-            />
-            <CFormSwitch
-              id="formSwitchCheckDisabled"
-              label="Disabled switch checkbox input"
-              disabled
-            />
-            <CFormSwitch
-              id="formSwitchCheckCheckedDisabled"
-              label="Disabled checked switch checkbox input"
-              checked
-              disabled
-            />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Switches</strong> <small>Sizes</small>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="forms/checks-radios.html#sizes">
-            <CFormSwitch
-              id="formSwitchCheckDefault"
-              label="Default switch checkbox input"
-            />
-            <CFormSwitch
-              id="formSwitchCheckDefaultLg"
-              size="lg"
-              label="Large switch checkbox input"
-            />
-            <CFormSwitch
-              id="formSwitchCheckDefaultXL"
-              size="xl"
-              label="Extra large switch checkbox input"
-            />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Checks and Radios</strong>
-          <small>Default layout (stacked)</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            By default, any number of checkboxes and radios that are immediate
-            sibling will be vertically stacked and appropriately spaced.
-          </p>
-          <DocsExample href="forms/checks-radios.html#default-stacked">
-            <CFormCheck id="defaultCheck1" label="Default checkbox" />
-            <CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
-          </DocsExample>
-          <DocsExample href="forms/checks-radios.html#default-stacked">
-            <CFormCheck
-              id="exampleRadios1"
-              type="radio"
-              name="exampleRadios"
-              value="option1"
-              label="Default radio"
-              checked
-            />
-            <CFormCheck
-              id="exampleRadios2"
-              type="radio"
-              name="exampleRadios"
-              value="option2"
-              label="Second default radio"
-            />
-            <CFormCheck
-              id="exampleRadios3"
-              type="radio"
-              name="exampleRadios"
-              value="option3"
-              label="Disabled radio"
-              disabled
-            />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Checks and Radios</strong> <small>Inline</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Group checkboxes or radios on the same horizontal row by adding
-            <code>inline</code> boolean property to any
-            <code>&lt;CFormCheck&gt;</code>.
-          </p>
-          <DocsExample href="forms/checks-radios.html#inline">
-            <CFormCheck id="inlineCheckbox1" inline value="option1" label="1" />
-            <CFormCheck id="inlineCheckbox2" inline value="option2" label="2" />
-            <CFormCheck
-              id="inlineCheckbox3"
-              inline
-              value="option3"
-              label="3 (disabled)"
-              disabled
-            />
-          </DocsExample>
-          <DocsExample href="forms/checks-radios.html#inline">
-            <CFormCheck
-              id="inlineCheckbox1"
-              inline
-              type="radio"
-              name="inlineRadioOptions"
-              value="option1"
-              label="1"
-            />
-            <CFormCheck
-              id="inlineCheckbox2"
-              inline
-              type="radio"
-              name="inlineRadioOptions"
-              value="option2"
-              label="2"
-            />
-            <CFormCheck
-              id="inlineCheckbox3"
-              inline
-              type="radio"
-              name="inlineRadioOptions"
-              value="option3"
-              label="3 (disabled)"
-              disabled
-            />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Checks and Radios</strong> <small>Without labels</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Remember to still provide some form of accessible name for assistive
-            technologies (for instance, using <code>aria-label</code>).
-          </p>
-          <DocsExample href="forms/checks-radios.html#without-labels">
-            <div>
-              <CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
-            </div>
-            <div>
-              <CFormCheck
-                id="radioNoLabel"
-                type="radio"
-                name="radioNoLabel"
-                value=""
-                aria-label="..."
-              />
-            </div>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Toggle buttons</strong>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Create button-like checkboxes and radio buttons by using
-            <code>button</code> boolean property on the
-            <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
-            further be grouped in a button group if needed.
-          </p>
-          <DocsExample href="forms/checks-radios.html#toggle-buttons">
-            <CFormCheck
-              id="btn-check"
-              :button="{ color: 'primary' }"
-              autocomplete="off"
-              label="Single toggle"
-            />
-          </DocsExample>
-          <DocsExample href="forms/checks-radios.html#toggle-buttons">
-            <CFormCheck
-              id="btn-check-2"
-              :button="{ color: 'primary' }"
-              autocomplete="off"
-              label="Checked"
-              checked
-            />
-          </DocsExample>
-          <DocsExample href="forms/checks-radios.html#toggle-buttons">
-            <CFormCheck
-              id="btn-check-3"
-              :button="{ color: 'primary' }"
-              autocomplete="off"
-              label="Disabled"
-              disabled
-            />
-          </DocsExample>
-          <h3>Radio toggle buttons</h3>
-          <DocsExample href="forms/checks-radios.html#toggle-buttons">
-            <CFormCheck
-              id="option1"
-              :button="{ color: 'secondary' }"
-              type="radio"
-              name="options"
-              autocomplete="off"
-              label="Checked"
-              checked
-            />
-            <CFormCheck
-              id="option2"
-              :button="{ color: 'secondary' }"
-              type="radio"
-              name="options"
-              autocomplete="off"
-              label="Radio"
-            />
-            <CFormCheck
-              id="option3"
-              :button="{ color: 'secondary' }"
-              type="radio"
-              name="options"
-              autocomplete="off"
-              label="Radio"
-              disabled
-            />
-            <CFormCheck
-              id="option4"
-              :button="{ color: 'secondary' }"
-              type="radio"
-              name="options"
-              autocomplete="off"
-              label="Radio"
-            />
-          </DocsExample>
-          <h3>Outlined styles</h3>
-          <p class="text-medium-emphasis small">
-            Different variants of button, such at the various outlined styles,
-            are supported.
-          </p>
-          <DocsExample href="forms/checks-radios.html#toggle-buttons">
-            <div>
-              <CFormCheck
-                id="btn-check-outlined"
-                :button="{ color: 'primary', variant: 'outline' }"
-                autocomplete="off"
-                label="Single toggle"
-              />
-            </div>
-            <div>
-              <CFormCheck
-                id="btn-check-2-outlined"
-                :button="{ color: 'secondary', variant: 'outline' }"
-                autocomplete="off"
-                label="Checked"
-                checked
-              />
-            </div>
-            <div>
-              <CFormCheck
-                id="success-outlined"
-                :button="{ color: 'success', variant: 'outline' }"
-                type="radio"
-                name="options-outlined"
-                autocomplete="off"
-                label="Radio"
-                checked
-              />
-              <CFormCheck
-                id="danger-outlined"
-                :button="{ color: 'danger', variant: 'outline' }"
-                type="radio"
-                name="options-outlined"
-                autocomplete="off"
-                label="Radio"
-              />
-            </div>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'ChecksRadios',
-}
-</script>

frontend/src/views/forms/FloatingLabels.vue

@@ -1,181 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Floating Label" href="forms/floating-labels.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Floating labels</strong>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Wrap a pair of <code>&lt;CFormInput&gt;</code> and
-            <code>&lt;CFormLabel&gt;</code> elements in
-            <code>CFormFloating</code> to enable floating labels with textual
-            form fields. A <code>placeholder</code> is required on each
-            <code>&lt;CFormInput&gt;</code> as our method of CSS-only floating
-            labels uses the <code>:placeholder-shown</code> pseudo-element. Also
-            note that the <code>&lt;CFormInput&gt;</code> must come first so we
-            can utilize a sibling selector (e.g., <code>~</code>).
-          </p>
-          <DocsExample href="forms/floating-labels.html">
-            <CFormFloating class="mb-3">
-              <CFormInput
-                id="floatingInput"
-                type="email"
-                placeholder="name@example.com"
-              />
-              <CFormLabel for="floatingInput">Email address</CFormLabel>
-            </CFormFloating>
-            <CFormFloating>
-              <CFormInput
-                id="floatingPassword"
-                type="password"
-                placeholder="Password"
-              />
-              <CFormLabel for="floatingPassword">Password</CFormLabel>
-            </CFormFloating>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            When there&#39;s a <code>value</code> already defined,
-            <code>&lt;CFormLabel&gt;</code>
-            s will automatically adjust to their floated position.
-          </p>
-          <DocsExample href="forms/floating-labels.html">
-            <CFormFloating>
-              <CFormInput
-                id="floatingInputValue"
-                type="email"
-                placeholder="name@example.com"
-                value="test@example.com"
-              />
-              <CFormLabel for="floatingInputValue">Input with value</CFormLabel>
-            </CFormFloating>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Floating labels</strong> <small>Textareas</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            By default, <code>&lt;CFormTextarea&gt;</code>s will be the same
-            height as <code>&lt;CFormInput&gt;</code>s.
-          </p>
-          <DocsExample href="forms/floating-labels.html#textareas">
-            <CFormFloating>
-              <CFormTextarea
-                id="floatingTextarea"
-                placeholder="Leave a comment here"
-              ></CFormTextarea>
-              <CFormLabel for="floatingTextarea">Comments</CFormLabel>
-            </CFormFloating>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>,
-            do not use the <code>rows</code> attribute. Instead, set an explicit
-            <code>height</code> (either inline or via custom CSS).
-          </p>
-          <DocsExample href="forms/floating-labels.html#textareas">
-            <CFormFloating>
-              <CFormTextarea
-                id="floatingTextarea2"
-                placeholder="Leave a comment here"
-                style="height: 100px"
-              ></CFormTextarea>
-              <CFormLabel for="floatingTextarea2">Comments</CFormLabel>
-            </CFormFloating>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Floating labels</strong> <small>Selects</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Other than <code>&lt;CFormInput&gt;</code>, floating labels are only
-            available on <code>&lt;CFormSelect&gt;</code>s. They work in the
-            same way, but unlike <code>&lt;CFormInput&gt;</code>s, they&#39;ll
-            always show the <code>&lt;CFormLabel&gt;</code> in its floated
-            state.
-            <strong>
-              Selects with <code>size</code> and <code>multiple</code> are not
-              supported.
-            </strong>
-          </p>
-          <DocsExample href="forms/floating-labels.html#selects">
-            <CFormFloating>
-              <CFormSelect
-                id="floatingSelect"
-                aria-label="Floating label select example"
-              >
-                <option>Open this select menu</option>
-                <option value="1">One</option>
-                <option value="2">Two</option>
-                <option value="3">Three</option>
-              </CFormSelect>
-              <CFormLabel for="floatingSelect">Works with selects</CFormLabel>
-            </CFormFloating>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Floating labels</strong> <small>Layout</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            When working with the CoreUI for Bootstrap grid system, be sure to
-            place form elements within column classes.
-          </p>
-          <DocsExample href="forms/floating-labels.html#layout">
-            <CRow :xs="{ gutter: 2 }">
-              <CCol md>
-                <CFormFloating>
-                  <CFormInput
-                    id="floatingInputGrid"
-                    type="email"
-                    placeholder="name@example.com"
-                    value="email@example.com"
-                  />
-                  <CFormLabel for="floatingInputGrid">Email address</CFormLabel>
-                </CFormFloating>
-              </CCol>
-              <CCol md>
-                <CFormFloating>
-                  <CFormSelect
-                    id="floatingSelectGrid"
-                    aria-label="Floating label select example"
-                  >
-                    <option>Open this select menu</option>
-                    <option value="1">One</option>
-                    <option value="2">Two</option>
-                    <option value="3">Three</option>
-                  </CFormSelect>
-                  <CFormLabel for="floatingSelectGrid"
-                    >Works with selects</CFormLabel
-                  >
-                </CFormFloating>
-              </CCol>
-            </CRow>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'FloatingLabels',
-}
-</script>

frontend/src/views/forms/FormControl.vue

@@ -1,253 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Form Control" href="forms/form-control.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Form Control</strong>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="forms/form-control.html">
-            <CForm>
-              <div class="mb-3">
-                <CFormLabel for="exampleFormControlInput1"
-                  >Email address</CFormLabel
-                >
-                <CFormInput
-                  id="exampleFormControlInput1"
-                  type="email"
-                  placeholder="name@example.com"
-                />
-              </div>
-              <div class="mb-3">
-                <CFormLabel for="exampleFormControlTextarea1"
-                  >Example textarea</CFormLabel
-                >
-                <CFormTextarea
-                  id="exampleFormControlTextarea1"
-                  rows="3"
-                ></CFormTextarea>
-              </div>
-            </CForm>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Form Control</strong> <small>Sizing</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Set heights using <code>size</code> property like
-            <code>size=&#34;lg&#34;</code> and <code>size=&#34;sm&#34;</code>.
-          </p>
-          <DocsExample href="forms/form-control.html#sizing">
-            <CFormInput
-              type="text"
-              size="lg"
-              placeholder="Large input"
-              aria-label="lg input example"
-            />
-            <br />
-            <CFormInput
-              type="text"
-              placeholder="Default input"
-              aria-label="default input example"
-            />
-            <br />
-            <CFormInput
-              type="text"
-              size="sm"
-              placeholder="Small input"
-              aria-label="sm input example"
-            />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Form Control</strong> <small>Disabled</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add the <code>disabled</code> boolean attribute on an input to give
-            it a grayed out appearance and remove pointer events.
-          </p>
-          <DocsExample href="forms/form-control.html#disabled">
-            <CFormInput
-              type="text"
-              placeholder="Disabled input"
-              aria-label="Disabled input example"
-              disabled
-            />
-            <br />
-            <CFormInput
-              type="text"
-              placeholder="Disabled readonly input"
-              aria-label="Disabled input example"
-              disabled
-              readonly
-            />
-            <br />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Form Control</strong> <small>Readonly</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add the <code>readonly</code> boolean attribute on an input to
-            prevent modification of the input&#39;s value. Read-only inputs
-            appear lighter (just like disabled inputs), but retain the standard
-            cursor.
-          </p>
-          <DocsExample href="forms/form-control.html#readonly">
-            <CFormInput
-              type="text"
-              placeholder="Readonly input here..."
-              aria-label="readonly input example"
-              readonly
-            />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Form Control</strong> <small>Readonly plain text</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            If you want to have <code>&lt;input readonly&gt;</code> elements in
-            your form styled as plain text, use the
-            <code>plain-text</code> boolean property to remove the default form
-            field styling and preserve the correct margin and padding.
-          </p>
-          <DocsExample href="forms/form-control.html#readonly-plain-text">
-            <CRow class="mb-3">
-              <CFormLabel for="staticEmail" class="col-sm-2 col-form-label">
-                Email
-              </CFormLabel>
-              <div class="col-sm-10">
-                <CFormInput
-                  id="staticEmail"
-                  type="text"
-                  value="email@example.com"
-                  readonly
-                  plain-text
-                />
-              </div>
-            </CRow>
-            <CRow class="mb-3">
-              <CFormLabel for="inputPassword" class="col-sm-2 col-form-label">
-                Password
-              </CFormLabel>
-              <div class="col-sm-10">
-                <CFormInput id="inputPassword" type="password" />
-              </div>
-            </CRow>
-          </DocsExample>
-          <DocsExample href="forms/form-control.html#readonly-plain-text">
-            <CForm class="row g-3">
-              <div class="col-auto">
-                <CFormLabel for="staticEmail2" class="visually-hidden">
-                  Email
-                </CFormLabel>
-                <CFormInput
-                  id="staticEmail2"
-                  type="text"
-                  value="email@example.com"
-                  readonly
-                  plain-text
-                />
-              </div>
-              <div class="col-auto">
-                <CFormLabel for="inputPassword2" class="visually-hidden">
-                  Password
-                </CFormLabel>
-                <CFormInput
-                  id="inputPassword2"
-                  type="password"
-                  placeholder="Password"
-                />
-              </div>
-              <div class="col-auto">
-                <CButton type="submit" class="mb-3"> Confirm identity </CButton>
-              </div>
-            </CForm>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Form Control</strong> <small>File input</small>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="forms/form-control.html#file-input">
-            <div class="mb-3">
-              <CFormLabel for="formFile">Default file input example</CFormLabel>
-              <CFormInput id="formFile" type="file" />
-            </div>
-            <div class="mb-3">
-              <CFormLabel for="formFileMultiple"
-                >Multiple files input example</CFormLabel
-              >
-              <CFormInput id="formFileMultiple" type="file" multiple />
-            </div>
-            <div class="mb-3">
-              <CFormLabel for="formFileDisabled"
-                >Disabled file input example</CFormLabel
-              >
-              <CFormInput id="formFileDisabled" type="file" disabled />
-            </div>
-            <div class="mb-3">
-              <CFormLabel for="formFileSm">Small file input example</CFormLabel>
-              <CFormInput id="formFileSm" type="file" size="sm" />
-            </div>
-            <div>
-              <CFormLabel for="formFileLg">Large file input example</CFormLabel>
-              <CFormInput id="formFileLg" type="file" size="lg" />
-            </div>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Form Control</strong> <small>Color</small>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="forms/form-control.html#color">
-            <CFormLabel for="exampleColorInput">Color picker</CFormLabel>
-            <CFormInput
-              id="exampleColorInput"
-              type="color"
-              value="#563d7c"
-              title="Choose your color"
-            />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'FormControl',
-}
-</script>

frontend/src/views/forms/InputGroup.vue

@@ -1,521 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Input Group" href="forms/input-group.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Input group</strong> <small>Basic example</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Place one add-on or button on either side of an input. You may also
-            place one on both sides of an input. Remember to place
-            <code>&lt;CFormLabel&gt;</code>s outside the input group.
-          </p>
-          <DocsExample href="forms/input-group.html">
-            <CInputGroup class="mb-3">
-              <CInputGroupText id="basic-addon1">@</CInputGroupText>
-              <CFormInput
-                placeholder="Username"
-                aria-label="Username"
-                aria-describedby="basic-addon1"
-              />
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CFormInput
-                placeholder="Recipient&#39;s username"
-                aria-label="Recipient&#39;s username"
-                aria-describedby="basic-addon2"
-              />
-              <CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
-            </CInputGroup>
-            <CFormLabel for="basic-url">Your vanity URL</CFormLabel>
-            <CInputGroup class="mb-3">
-              <CInputGroupText id="basic-addon3"
-                >https://example.com/users/</CInputGroupText
-              >
-              <CFormInput id="basic-url" aria-describedby="basic-addon3" />
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CInputGroupText>$</CInputGroupText>
-              <CFormInput aria-label="Amount (to the nearest dollar)" />
-              <CInputGroupText>.00</CInputGroupText>
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CFormInput placeholder="Username" aria-label="Username" />
-              <CInputGroupText>@</CInputGroupText>
-              <CFormInput placeholder="Server" aria-label="Server" />
-            </CInputGroup>
-            <CInputGroup>
-              <CInputGroupText>With textarea</CInputGroupText>
-              <CFormTextarea aria-label="With textarea"></CFormTextarea>
-            </CInputGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Input group</strong> <small>Wrapping</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Input groups wrap by default via <code>flex-wrap: wrap</code> in
-            order to accommodate custom form field validation within an input
-            group. You may disable this with <code>.flex-nowrap</code>.
-          </p>
-          <DocsExample href="forms/input-group.html#wrapping">
-            <CInputGroup class="flex-nowrap">
-              <CInputGroupText id="addon-wrapping">@</CInputGroupText>
-              <CFormInput
-                placeholder="Username"
-                aria-label="Username"
-                aria-describedby="addon-wrapping"
-              />
-            </CInputGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Input group</strong> <small>Sizing</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add the relative form sizing classes to the
-            <code>&lt;CInputGroup&gt;</code> itself and contents within will
-            automatically resize—no need for repeating the form control size
-            classes on each element.
-          </p>
-          <p class="text-medium-emphasis small">
-            <strong
-              >Sizing on the individual input group elements
-              isn&#39;tsupported.</strong
-            >
-          </p>
-          <DocsExample href="forms/input-group.html#sizing">
-            <CInputGroup size="sm" class="mb-3">
-              <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
-              <CFormInput
-                aria-label="Sizing example input"
-                aria-describedby="inputGroup-sizing-sm"
-              />
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CInputGroupText id="inputGroup-sizing-default"
-                >Default</CInputGroupText
-              >
-              <CFormInput
-                aria-label="Sizing example input"
-                aria-describedby="inputGroup-sizing-default"
-              />
-            </CInputGroup>
-            <CInputGroup size="lg">
-              <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
-              <CFormInput
-                aria-label="Sizing example input"
-                aria-describedby="inputGroup-sizing-lg"
-              />
-            </CInputGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Input group</strong> <small>Checkboxes and radios</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Place any checkbox or radio option within an input group&#39;s addon
-            instead of text.
-          </p>
-          <DocsExample href="forms/input-group.html#checkboxes-and-radios">
-            <CInputGroup class="mb-3">
-              <CInputGroupText>
-                <CFormCheck
-                  type="checkbox"
-                  value=""
-                  aria-label="Checkbox for following text input"
-                />
-              </CInputGroupText>
-              <CFormInput aria-label="Text input with checkbox" />
-            </CInputGroup>
-            <CInputGroup>
-              <CInputGroupText>
-                <CFormCheck
-                  type="radio"
-                  value=""
-                  aria-label="Radio button for following text input"
-                />
-              </CInputGroupText>
-              <CFormInput aria-label="Text input with radio button" />
-            </CInputGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Input group</strong> <small>Multiple inputs</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            While multiple <code>&lt;CFormInput&gt;</code>s are supported
-            visually, validation styles are only available for input groups with
-            a single <code>&lt;CFormInput&gt;</code>.
-          </p>
-          <DocsExample href="forms/input-group.html#multiple-inputs">
-            <CInputGroup>
-              <CInputGroupText>First and last name</CInputGroupText>
-              <CFormInput aria-label="First name" />
-              <CFormInput aria-label="Last name" />
-            </CInputGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Input group</strong> <small>Multiple addons</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Multiple add-ons are supported and can be mixed with checkbox and
-            radio input versions..
-          </p>
-          <DocsExample href="forms/input-group.html#multiple-addons">
-            <CInputGroup class="mb-3">
-              <CInputGroupText>$</CInputGroupText>
-              <CInputGroupText>0.00</CInputGroupText>
-              <CFormInput
-                aria-label="Dollar amount (with dot and two decimal places)"
-              />
-            </CInputGroup>
-            <CInputGroup>
-              <CFormInput
-                aria-label="Dollar amount (with dot and two decimal places)"
-              />
-              <CInputGroupText>$</CInputGroupText>
-              <CInputGroupText>0.00</CInputGroupText>
-            </CInputGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Input group</strong> <small>Button addons</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Multiple add-ons are supported and can be mixed with checkbox and
-            radio input versions..
-          </p>
-          <DocsExample href="forms/input-group.html#button-addons">
-            <CInputGroup class="mb-3">
-              <CButton
-                id="button-addon1"
-                type="button"
-                color="secondary"
-                variant="outline"
-              >
-                Button
-              </CButton>
-              <CFormInput
-                placeholder=""
-                aria-label="Example text with button addon"
-                aria-describedby="button-addon1"
-              />
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CFormInput
-                placeholder="Recipient's username"
-                aria-label="Recipient's username"
-                aria-describedby="button-addon2"
-              />
-              <CButton
-                id="button-addon2"
-                type="button"
-                color="secondary"
-                variant="outline"
-              >
-                Button
-              </CButton>
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CButton type="button" color="secondary" variant="outline">
-                Button
-              </CButton>
-              <CButton type="button" color="secondary" variant="outline">
-                Button
-              </CButton>
-              <CFormInput
-                placeholder=""
-                aria-label="Example text with two button addons"
-              />
-            </CInputGroup>
-            <CInputGroup>
-              <CFormInput
-                placeholder="Recipient's username"
-                aria-label="Recipient's username with two button addons"
-              />
-              <CButton type="button" color="secondary" variant="outline">
-                Button
-              </CButton>
-              <CButton type="button" color="secondary" variant="outline">
-                Button
-              </CButton>
-            </CInputGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="forms/input-group.html#buttons-with-dropdowns">
-            <CInputGroup class="mb-3">
-              <CDropdown variant="input-group">
-                <CDropdownToggle color="secondary" variant="outline">
-                  Dropdown
-                </CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CFormInput aria-label="Text input with dropdown button" />
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CFormInput aria-label="Text input with dropdown button" />
-              <CDropdown alignment="end" variant="input-group">
-                <CDropdownToggle color="secondary" variant="outline">
-                  Dropdown
-                </CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </CInputGroup>
-            <CInputGroup>
-              <CDropdown variant="input-group">
-                <CDropdownToggle color="secondary" variant="outline">
-                  Dropdown
-                </CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CFormInput aria-label="Text input with 2 dropdown buttons" />
-              <CDropdown alignment="end" variant="input-group">
-                <CDropdownToggle color="secondary" variant="outline">
-                  Dropdown
-                </CDropdownToggle>
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </CInputGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Input group</strong> <small>Segmented buttons</small>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="forms/input-group.html#segmented-buttons">
-            <CInputGroup class="mb-3">
-              <CDropdown variant="input-group">
-                <CButton type="button" color="secondary" variant="outline">
-                  Action
-                </CButton>
-                <CDropdownToggle color="secondary" variant="outline" split />
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-              <CFormInput
-                aria-label="Text input with segmented dropdown button"
-              />
-            </CInputGroup>
-            <CInputGroup>
-              <CFormInput
-                aria-label="Text input with segmented dropdown button"
-              />
-              <CDropdown alignment="end" variant="input-group">
-                <CButton type="button" color="secondary" variant="outline">
-                  Action
-                </CButton>
-                <CDropdownToggle color="secondary" variant="outline" split />
-                <CDropdownMenu>
-                  <CDropdownItem href="#">Action</CDropdownItem>
-                  <CDropdownItem href="#">Another action</CDropdownItem>
-                  <CDropdownItem href="#">Something else here</CDropdownItem>
-                  <CDropdownDivider />
-                  <CDropdownItem href="#">Separated link</CDropdownItem>
-                </CDropdownMenu>
-              </CDropdown>
-            </CInputGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Input group</strong> <small>Custom select</small>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="forms/input-group.html#custom-select">
-            <CInputGroup class="mb-3">
-              <CInputGroupText component="label" for="inputGroupSelect01">
-                Options
-              </CInputGroupText>
-              <CFormSelect id="inputGroupSelect01">
-                <option>Choose...</option>
-                <option value="1">One</option>
-                <option value="2">Two</option>
-                <option value="3">Three</option>
-              </CFormSelect>
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CFormSelect id="inputGroupSelect02">
-                <option>Choose...</option>
-                <option value="1">One</option>
-                <option value="2">Two</option>
-                <option value="3">Three</option>
-              </CFormSelect>
-              <CInputGroupText component="label" for="inputGroupSelect02">
-                Options
-              </CInputGroupText>
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CButton type="button" color="secondary" variant="outline">
-                Button
-              </CButton>
-              <CFormSelect
-                id="inputGroupSelect03"
-                aria-label="Example select with button addon"
-              >
-                <option>Choose...</option>
-                <option value="1">One</option>
-                <option value="2">Two</option>
-                <option value="3">Three</option>
-              </CFormSelect>
-            </CInputGroup>
-            <CInputGroup>
-              <CFormSelect
-                id="inputGroupSelect04"
-                aria-label="Example select with button addon"
-              >
-                <option>Choose...</option>
-                <option value="1">One</option>
-                <option value="2">Two</option>
-                <option value="3">Three</option>
-              </CFormSelect>
-              <CButton type="button" color="secondary" variant="outline">
-                Button
-              </CButton>
-            </CInputGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Input group</strong> <small>Custom file input</small>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="forms/input-group.html#custom-file-input">
-            <CInputGroup class="mb-3">
-              <CInputGroupText component="label" for="inputGroupFile01">
-                Upload
-              </CInputGroupText>
-              <CFormInput id="inputGroupFile01" type="file" />
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CFormInput id="inputGroupFile02" type="file" />
-              <CInputGroupText component="label" for="inputGroupFile02">
-                Upload
-              </CInputGroupText>
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CButton
-                id="inputGroupFileAddon03"
-                type="button"
-                color="secondary"
-                variant="outline"
-              >
-                Button
-              </CButton>
-              <CFormInput
-                id="inputGroupFile03"
-                type="file"
-                aria-describedby="inputGroupFileAddon03"
-                aria-label="Upload"
-              />
-            </CInputGroup>
-            <CInputGroup>
-              <CFormInput
-                id="inputGroupFile04"
-                type="file"
-                aria-describedby="inputGroupFileAddon04"
-                aria-label="Upload"
-              />
-              <CButton
-                id="inputGroupFileAddon04"
-                type="button"
-                color="secondary"
-                variant="outline"
-              >
-                Button
-              </CButton>
-            </CInputGroup>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'InputGroup',
-}
-</script>

frontend/src/views/forms/Layout.vue

@@ -1,458 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Layout</strong> <small>Form grid</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            More complex forms can be built using our grid classes. Use these
-            for form layouts that require multiple columns, varied widths, and
-            additional alignment options.
-          </p>
-          <DocsExample href="forms/layout.html#form-grid">
-            <CRow>
-              <CCol xs>
-                <CFormInput placeholder="First name" aria-label="First name" />
-              </CCol>
-              <CCol xs>
-                <CFormInput placeholder="Last name" aria-label="Last name" />
-              </CCol>
-            </CRow>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Layout</strong> <small>Gutters</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            By adding
-            <a href="https://coreui.io/docs/layout/gutters/"
-              >gutter modifier classes</a
-            >
-            , you can have control over the gutter width in as well the inline
-            as block direction.
-          </p>
-          <DocsExample href="forms/layout.html#gutters">
-            <CRow class="g-3">
-              <CCol xs>
-                <CFormInput placeholder="First name" aria-label="First name" />
-              </CCol>
-              <CCol xs>
-                <CFormInput placeholder="Last name" aria-label="Last name" />
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            More complex layouts can also be created with the grid system.
-          </p>
-          <DocsExample href="forms/layout.html#gutters">
-            <CForm class="row g-3">
-              <CCol :md="6">
-                <CFormLabel for="inputEmail4">Email</CFormLabel>
-                <CFormInput id="inputEmail4" type="email" />
-              </CCol>
-              <CCol :md="6">
-                <CFormLabel for="inputPassword4">Password</CFormLabel>
-                <CFormInput id="inputPassword4" type="password" />
-              </CCol>
-              <CCol :xs="12">
-                <CFormLabel for="inputAddress">Address</CFormLabel>
-                <CFormInput id="inputAddress" placeholder="1234 Main St" />
-              </CCol>
-              <CCol :xs="12">
-                <CFormLabel for="inputAddress2">Address 2</CFormLabel>
-                <CFormInput
-                  id="inputAddress2"
-                  placeholder="Apartment, studio, or floor"
-                />
-              </CCol>
-              <CCol :md="6">
-                <CFormLabel for="inputCity">City</CFormLabel>
-                <CFormInput id="inputCity" />
-              </CCol>
-              <CCol :md="4">
-                <CFormLabel for="inputState">State</CFormLabel>
-                <CFormSelect id="inputState">
-                  <option>Choose...</option>
-                  <option>...</option>
-                </CFormSelect>
-              </CCol>
-              <CCol :md="2">
-                <CFormLabel for="inputZip">Zip</CFormLabel>
-                <CFormInput id="inputZip" />
-              </CCol>
-              <CCol :xs="12">
-                <CFormCheck
-                  id="gridCheck"
-                  type="checkbox"
-                  label="Check me out"
-                />
-              </CCol>
-              <CCol :xs="12">
-                <CButton type="submit" color="primary">Sign in</CButton>
-              </CCol>
-            </CForm>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Layout</strong> <small>Horizontal form</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Create horizontal forms with the grid by adding the
-            <code>.row</code> class to form groups and using the
-            <code>.col-*-*</code> classes to specify the width of your labels
-            and controls. Be sure to add <code>.col-form-label</code> to your
-            <code>&lt;CFormLabel&gt;</code>s as well so they&#39;re vertically
-            centered with their associated form controls.
-          </p>
-          <p class="text-medium-emphasis small">
-            At times, you maybe need to use margin or padding utilities to
-            create that perfect alignment you need. For example, we&#39;ve
-            removed the <code>padding-top</code> on our stacked radio inputs
-            label to better align the text baseline.
-          </p>
-          <DocsExample href="forms/layout.html#horizontal-form">
-            <CForm>
-              <CRow class="mb-3">
-                <CFormLabel for="inputEmail3" class="col-sm-2 col-form-label">
-                  Email
-                </CFormLabel>
-                <CCol :sm="10">
-                  <CFormInput id="inputEmail3" type="email" />
-                </CCol>
-              </CRow>
-              <CRow class="mb-3">
-                <CFormLabel
-                  for="inputPassword3"
-                  class="col-sm-2 col-form-label"
-                >
-                  Password
-                </CFormLabel>
-                <CCol :sm="10">
-                  <CFormInput id="inputPassword3" type="password" />
-                </CCol>
-              </CRow>
-              <fieldset class="row mb-3">
-                <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
-                <CCol :sm="10">
-                  <CFormCheck
-                    id="gridRadios1"
-                    type="radio"
-                    name="gridRadios"
-                    value="option1"
-                    label="First radio"
-                    checked
-                  />
-                  <CFormCheck
-                    id="gridRadios2"
-                    type="radio"
-                    name="gridRadios"
-                    value="option2"
-                    label="Second radio"
-                  />
-                  <CFormCheck
-                    id="gridRadios3"
-                    type="radio"
-                    name="gridRadios"
-                    value="option3"
-                    label="Third disabled radio"
-                    disabled
-                  />
-                </CCol>
-              </fieldset>
-              <CRow class="mb-3">
-                <div class="col-sm-10 offset-sm-2">
-                  <CFormCheck
-                    id="gridCheck1"
-                    type="checkbox"
-                    label="Example checkbox"
-                  />
-                </div>
-              </CRow>
-              <CButton type="submit" color="primary">Sign in</CButton>
-            </CForm>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Layout</strong> <small>Horizontal form label sizing</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Be sure to use <code>.col-form-label-sm</code> or
-            <code>.col-form-label-lg</code> to your
-            <code>&lt;CFormLabel&gt;</code>s or <code>&lt;legend&gt;</code>s to
-            correctly follow the size of <code>.form-control-lg</code> and
-            <code>.form-control-sm</code>.
-          </p>
-          <DocsExample href="forms/layout.html#horizontal-form-label-sizing">
-            <CRow class="mb-3">
-              <CFormLabel
-                for="colFormLabelSm"
-                class="col-sm-2 col-form-label col-form-label-sm"
-              >
-                Email
-              </CFormLabel>
-              <CCol :sm="10">
-                <CFormInput
-                  id="colFormLabelSm"
-                  type="email"
-                  class="form-control form-control-sm"
-                  placeholder="col-form-label-sm"
-                />
-              </CCol>
-            </CRow>
-            <CRow class="mb-3">
-              <CFormLabel for="colFormLabel" class="col-sm-2 col-form-label">
-                Email
-              </CFormLabel>
-              <CCol :sm="10">
-                <CFormInput
-                  id="colFormLabel"
-                  type="email"
-                  placeholder="col-form-label"
-                />
-              </CCol>
-            </CRow>
-            <CRow>
-              <CFormLabel
-                for="colFormLabelLg"
-                class="col-sm-2 col-form-label col-form-label-lg"
-              >
-                Email
-              </CFormLabel>
-              <CCol :sm="10">
-                <CFormInput
-                  id="colFormLabelLg"
-                  type="email"
-                  class="form-control form-control-lg"
-                  placeholder="col-form-label-lg"
-                />
-              </CCol>
-            </CRow>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Layout</strong> <small>Column sizing</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            As shown in the previous examples, our grid system allows you to
-            place any number of
-            <code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>.
-            They&#39;ll split the available width equally between them. You may
-            also pick a subset of your columns to take up more or less space,
-            while the remaining <code>&lt;CCol&gt;</code>s equally split the
-            rest, with specific column classes like
-            <code>&lt;CCol sm=&#34;7&#34;&gt;</code>.
-          </p>
-          <DocsExample href="forms/layout.html#column-sizing">
-            <CRow class="g-3">
-              <CCol :sm="7">
-                <CFormInput placeholder="City" aria-label="City" />
-              </CCol>
-              <CCol sm>
-                <CFormInput placeholder="State" aria-label="State" />
-              </CCol>
-              <CCol sm>
-                <CFormInput placeholder="Zip" aria-label="Zip" />
-              </CCol>
-            </CRow>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Layout</strong> <small>Auto-sizing</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            The example below uses a flexbox utility to vertically center the
-            contents and changes
-            <code>&lt;CCol&gt;</code> to
-            <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> so that your columns
-            only take up as much space as needed. Put another way, the column
-            sizes itself based on the contents.
-          </p>
-          <DocsExample href="forms/layout.html#auto-sizing">
-            <CForm class="row gy-2 gx-3 align-items-center">
-              <CCol xs="auto">
-                <CFormLabel class="visually-hidden" for="autoSizingInput">
-                  Name
-                </CFormLabel>
-                <CFormInput id="autoSizingInput" placeholder="Jane Doe" />
-              </CCol>
-              <CCol xs="auto">
-                <CFormLabel class="visually-hidden" for="autoSizingInputGroup">
-                  Username
-                </CFormLabel>
-                <CInputGroup>
-                  <CInputGroupText>@</CInputGroupText>
-                  <CFormInput
-                    id="autoSizingInputGroup"
-                    placeholder="Username"
-                  />
-                </CInputGroup>
-              </CCol>
-              <CCol xs="auto">
-                <CFormLabel class="visually-hidden" for="autoSizingSelect">
-                  Preference
-                </CFormLabel>
-                <CFormSelect id="autoSizingSelect">
-                  <option>Choose...</option>
-                  <option value="1">One</option>
-                  <option value="2">Two</option>
-                  <option value="3">Three</option>
-                </CFormSelect>
-              </CCol>
-              <CCol xs="auto">
-                <CFormCheck
-                  id="autoSizingCheck"
-                  type="checkbox"
-                  label="Remember me"
-                />
-              </CCol>
-              <CCol xs="auto">
-                <CButton type="submit" color="primary">Submit</CButton>
-              </CCol>
-            </CForm>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            You can then remix that once again with size-specific column
-            classes.
-          </p>
-          <DocsExample href="forms/layout.html#auto-sizing">
-            <CForm class="row gx-3 gy-2 align-items-center">
-              <CCol :sm="3">
-                <CFormLabel class="visually-hidden" for="specificSizeInputName">
-                  Name
-                </CFormLabel>
-                <CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
-              </CCol>
-              <CCol :sm="3">
-                <CFormLabel
-                  class="visually-hidden"
-                  for="specificSizeInputGroupUsername"
-                >
-                  Username
-                </CFormLabel>
-                <CInputGroup>
-                  <CInputGroupText>@</CInputGroupText>
-                  <CFormInput
-                    id="specificSizeInputGroupUsername"
-                    placeholder="Username"
-                  />
-                </CInputGroup>
-              </CCol>
-              <CCol :sm="3">
-                <CFormLabel class="visually-hidden" for="specificSizeSelect">
-                  Preference
-                </CFormLabel>
-                <CFormSelect id="specificSizeSelect">
-                  <option>Choose...</option>
-                  <option value="1">One</option>
-                  <option value="2">Two</option>
-                  <option value="3">Three</option>
-                </CFormSelect>
-              </CCol>
-              <CCol xs="auto">
-                <CFormCheck
-                  id="autoSizingCheck2"
-                  type="checkbox"
-                  label="Remember me"
-                />
-              </CCol>
-              <CCol xs="auto">
-                <CButton type="submit" color="primary">Submit</CButton>
-              </CCol>
-            </CForm>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Layout</strong> <small>Inline forms</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Use the <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> class to create
-            horizontal layouts. By adding
-            <a href="https://coreui.io/docs/layout/gutters/"
-              >gutter modifier classes</a
-            >, we will have gutters in horizontal and vertical directions. The
-            <code>.align-items-center</code> aligns the form elements to the
-            middle, making the <code>&lt;CFormCheck&gt;</code> align properly.
-          </p>
-          <DocsExample href="forms/layout.html#inline-forms">
-            <CForm class="row row-cols-lg-auto g-3 align-items-center">
-              <CCol :xs="12">
-                <CFormLabel
-                  class="visually-hidden"
-                  for="inlineFormInputGroupUsername"
-                >
-                  Username
-                </CFormLabel>
-                <CInputGroup>
-                  <CInputGroupText>@</CInputGroupText>
-                  <CFormInput
-                    id="inlineFormInputGroupUsername"
-                    placeholder="Username"
-                  />
-                </CInputGroup>
-              </CCol>
-              <CCol :xs="12">
-                <CFormLabel class="visually-hidden" for="inlineFormSelectPref">
-                  Preference
-                </CFormLabel>
-                <CFormSelect id="inlineFormSelectPref">
-                  <option>Choose...</option>
-                  <option value="1">One</option>
-                  <option value="2">Two</option>
-                  <option value="3">Three</option>
-                </CFormSelect>
-              </CCol>
-              <CCol :xs="12">
-                <CFormCheck
-                  id="inlineFormCheck"
-                  type="checkbox"
-                  label="Remember me"
-                />
-              </CCol>
-              <CCol :xs="12">
-                <CButton type="submit" color="primary">Submit</CButton>
-              </CCol>
-            </CForm>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Layout',
-}
-</script>

frontend/src/views/forms/Range.vue

@@ -1,90 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Range" href="forms/range.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader> <strong>Vue Range</strong> <small></small> </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Create custom
-            <code>&lt;input type=&#34;range&#34;&gt;</code> controls with
-            <code>&lt;CFormRange&gt;</code>.
-          </p>
-          <DocsExample href="forms/range.html">
-            <CFormLabel for="customRange1">Example range</CFormLabel>
-            <CFormRange id="customRange1" />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Range</strong> <small>Disabled</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add the <code>disabled</code> boolean attribute on an input to give
-            it a grayed out appearance and remove pointer events.
-          </p>
-          <DocsExample href="forms/range.html#disabled">
-            <CFormLabel for="disabledRange">Disabled range</CFormLabel>
-            <CFormRange id="disabledRange" disabled />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Range</strong> <small>Min and max</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Range inputs have implicit values for <code>min</code> and
-            <code>max</code>— <code>0</code> and <code>100</code>, respectively.
-            You may specify new values for those using the <code>min</code> and
-            <code>max</code> attributes.
-          </p>
-          <DocsExample href="forms/range.html#min-and-max">
-            <CFormLabel for="customRange2">Example range</CFormLabel>
-            <CFormRange id="customRange2" :min="0" :max="5" value="3" />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Range</strong> <small>Steps</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            By default, range inputs &#34;snap&#34; to integer values. To change
-            this, you can specify a <code>step</code> value. In the example
-            below, we double the number of steps by using
-            <code>step=&#34;0.5&#34;</code>.
-          </p>
-          <DocsExample href="forms/range.html#steps">
-            <CFormLabel for="customRange3">Example range</CFormLabel>
-            <CFormRange
-              id="customRange3"
-              :min="0"
-              :max="5"
-              :step="0.5"
-              value="3"
-            />
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Range',
-}
-</script>

frontend/src/views/forms/Select.vue

@@ -1,116 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Form Select" href="forms/select.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Select</strong> <small>Default</small>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="forms/select.html">
-            <CFormSelect aria-label="Default select example">
-              <option>Open this select menu</option>
-              <option value="1">One</option>
-              <option value="2">Two</option>
-              <option value="3">Three</option>
-            </CFormSelect>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Select</strong> <small>Sizing</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            You may also choose from small and large custom selects to match our
-            similarly sized text inputs.
-          </p>
-          <DocsExample href="forms/select.html#sizing">
-            <CFormSelect
-              size="lg"
-              class="mb-3"
-              aria-label="Large select example"
-            >
-              <option>Open this select menu</option>
-              <option value="1">One</option>
-              <option value="2">Two</option>
-              <option value="3">Three</option>
-            </CFormSelect>
-            <CFormSelect
-              size="sm"
-              class="mb-3"
-              aria-label="Small select example"
-            >
-              <option>Open this select menu</option>
-              <option value="1">One</option>
-              <option value="2">Two</option>
-              <option value="3">Three</option>
-            </CFormSelect>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            The <code>multiple</code> attribute is also supported:
-          </p>
-          <DocsExample href="forms/select.html#sizing">
-            <CFormSelect
-              size="lg"
-              multiple
-              aria-label="Multiple select example"
-            >
-              <option>Open this select menu</option>
-              <option value="1">One</option>
-              <option value="2">Two</option>
-              <option value="3">Three</option>
-            </CFormSelect>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            As is the <code>html-size</code> property:
-          </p>
-          <DocsExample href="forms/select.html#sizing">
-            <CFormSelect
-              size="lg"
-              multiple
-              aria-label="Multiple select example"
-            >
-              <option>Open this select menu</option>
-              <option value="1">One</option>
-              <option value="2">Two</option>
-              <option value="3">Three</option>
-            </CFormSelect>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Select</strong> <small>Disabled</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add the <code>disabled</code> boolean attribute on a select to give
-            it a grayed out appearance and remove pointer events.
-          </p>
-          <DocsExample href="forms/select.html#disabled">
-            <CFormSelect aria-label="Disabled select example" disabled>
-              <option>Open this select menu</option>
-              <option value="1">One</option>
-              <option value="2">Two</option>
-              <option value="3">Three</option>
-            </CFormSelect>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Select',
-}
-</script>

frontend/src/views/forms/Validation.vue

@@ -1,516 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Custom styles</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            For custom CoreUI form validation messages, you&#39;ll need to add
-            the
-            <code>novalidate</code> boolean property to your
-            <code>&lt;CForm&gt;</code>. This disables the browser default
-            feedback tooltips, but still provides access to the form validation
-            APIs in JavaScript. Try to submit the form below; our JavaScript
-            will intercept the submit button and relay feedback to you. When
-            attempting to submit, you&#39;ll see the <code>:invalid</code> and
-            <code>:valid</code> styles applied to your form controls.
-          </p>
-          <p class="text-medium-emphasis small">
-            Custom feedback styles apply custom colors, borders, focus styles,
-            and background icons to better communicate feedback.
-          </p>
-          <DocsExample href="forms/validation.html">
-            <CForm
-              class="row g-3 needs-validation"
-              novalidate
-              :validated="validatedCustom01"
-              @submit="handleSubmitCustom01"
-            >
-              <CCol :md="4">
-                <CFormLabel for="validationCustom01">Email</CFormLabel>
-                <CFormInput id="validationCustom01" value="Mark" required />
-                <CFormFeedback valid> Looks good! </CFormFeedback>
-              </CCol>
-              <CCol :md="4">
-                <CFormLabel for="validationCustom02">Email</CFormLabel>
-                <CFormInput id="validationCustom02" value="Otto" required />
-                <CFormFeedback valid> Looks good! </CFormFeedback>
-              </CCol>
-              <CCol :md="4">
-                <CFormLabel for="validationCustomUsername">Username</CFormLabel>
-                <CInputGroup class="has-validation">
-                  <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
-                  <CFormInput
-                    id="validationCustomUsername"
-                    value=""
-                    aria-describedby="inputGroupPrepend"
-                    required
-                  />
-                  <CFormFeedback invalid>
-                    Please choose a username.
-                  </CFormFeedback>
-                </CInputGroup>
-              </CCol>
-              <CCol :md="6">
-                <CFormLabel for="validationCustom03">City</CFormLabel>
-                <CFormInput id="validationCustom03" required />
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
-              </CCol>
-              <CCol :md="3">
-                <CFormLabel for="validationCustom04">City</CFormLabel>
-                <CFormSelect id="validationCustom04">
-                  <option disabled>Choose...</option>
-                  <option>...</option>
-                </CFormSelect>
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
-              </CCol>
-              <CCol :md="3">
-                <CFormLabel for="validationCustom05">City</CFormLabel>
-                <CFormInput id="validationCustom05" required />
-                <CFormFeedback invalid>
-                  Please provide a valid zip.
-                </CFormFeedback>
-              </CCol>
-              <CCol :xs="12">
-                <CFormCheck
-                  id="invalidCheck"
-                  type="checkbox"
-                  label="Agree to terms and conditions"
-                  required
-                />
-                <CFormFeedback invalid>
-                  You must agree before submitting.
-                </CFormFeedback>
-              </CCol>
-              <CCol :xs="12">
-                <CButton color="primary" type="submit">Submit form</CButton>
-              </CCol>
-            </CForm>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Browser defaults</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Not interested in custom validation feedback messages or writing
-            JavaScript to change form behaviors? All good, you can use the
-            browser defaults. Try submitting the form below. Depending on your
-            browser and OS, you&#39;ll see a slightly different style of
-            feedback.
-          </p>
-          <p class="text-medium-emphasis small">
-            While these feedback styles cannot be styled with CSS, you can still
-            customize the feedback text through JavaScript.
-          </p>
-          <DocsExample href="forms/validation.html#browser-defaults">
-            <CForm
-              class="row g-3 needs-validation"
-              :validated="validatedDefault01"
-              @submit="handleSubmitDefault01"
-            >
-              <CCol :md="4">
-                <CFormLabel for="validationDefault01">Email</CFormLabel>
-                <CFormInput id="validationDefault01" value="Mark" required />
-                <CFormFeedback valid> Looks good! </CFormFeedback>
-              </CCol>
-              <CCol :md="4">
-                <CFormLabel for="validationDefault02">Email</CFormLabel>
-                <CFormInput id="validationDefault02" value="Otto" required />
-                <CFormFeedback valid> Looks good! </CFormFeedback>
-              </CCol>
-              <CCol :md="4">
-                <CFormLabel for="validationDefaultUsername"
-                  >Username</CFormLabel
-                >
-                <CInputGroup class="has-validation">
-                  <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
-                  <CFormInput
-                    id="validationDefaultUsername"
-                    value=""
-                    aria-describedby="inputGroupPrepend02"
-                    required
-                  />
-                  <CFormFeedback invalid>
-                    Please choose a username.
-                  </CFormFeedback>
-                </CInputGroup>
-              </CCol>
-              <CCol :md="6">
-                <CFormLabel for="validationDefault03">City</CFormLabel>
-                <CFormInput id="validationDefault03" required />
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
-              </CCol>
-              <CCol :md="3">
-                <CFormLabel for="validationDefault04">City</CFormLabel>
-                <CFormSelect id="validationDefault04">
-                  <option disabled>Choose...</option>
-                  <option>...</option>
-                </CFormSelect>
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
-              </CCol>
-              <CCol :md="3">
-                <CFormLabel for="validationDefault05">City</CFormLabel>
-                <CFormInput id="validationDefault05" required />
-                <CFormFeedback invalid>
-                  Please provide a valid zip.
-                </CFormFeedback>
-              </CCol>
-              <CCol :xs="12">
-                <CFormCheck
-                  id="invalidCheck"
-                  type="checkbox"
-                  label="Agree to terms and conditions"
-                  required
-                />
-                <CFormFeedback invalid>
-                  You must agree before submitting.
-                </CFormFeedback>
-              </CCol>
-              <CCol :xs="12">
-                <CButton color="primary" type="submit">Submit form</CButton>
-              </CCol>
-            </CForm>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Server side</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            We recommend using client-side validation, but in case you require
-            server-side validation, you can indicate invalid and valid form
-            fields with <code>invalid</code> and <code>valid</code> boolean
-            properties.
-          </p>
-          <p class="text-medium-emphasis small">
-            For invalid fields, ensure that the invalid feedback/error message
-            is associated with the relevant form field using
-            <code>aria-describedby</code> (noting that this attribute allows
-            more than one <code>id</code> to be referenced, in case the field
-            already points to additional form text).
-          </p>
-          <DocsExample href="forms/validation.html#server-side">
-            <CForm class="row g-3 needs-validation">
-              <CCol ::md="4">
-                <CFormLabel for="validationServer01">Email</CFormLabel>
-                <CFormInput
-                  id="validationServer01"
-                  type="text"
-                  value="Mark"
-                  valid
-                  required
-                />
-                <CFormFeedback valid>Looks good!</CFormFeedback>
-              </CCol>
-              <CCol ::md="4">
-                <CFormLabel for="validationServer02">Email</CFormLabel>
-                <CFormInput
-                  id="validationServer02"
-                  type="text"
-                  value="Otto"
-                  valid
-                  required
-                />
-                <CFormFeedback valid>Looks good!</CFormFeedback>
-              </CCol>
-              <CCol ::md="4">
-                <CFormLabel for="validationServerUsername">Username</CFormLabel>
-                <CInputGroup class="has-validation">
-                  <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
-                  <CFormInput
-                    id="validationServerUsername"
-                    type="text"
-                    value=""
-                    aria-describedby="inputGroupPrepend03"
-                    invalid
-                    required
-                  />
-                  <CFormFeedback invalid
-                    >Please choose a username.</CFormFeedback
-                  >
-                </CInputGroup>
-              </CCol>
-              <CCol :md="6">
-                <CFormLabel for="validationServer03">City</CFormLabel>
-                <CFormInput
-                  id="validationServer03"
-                  type="text"
-                  invalid
-                  required
-                />
-                <CFormFeedback invalid
-                  >Please provide a valid city.</CFormFeedback
-                >
-              </CCol>
-              <CCol :md="3">
-                <CFormLabel for="validationServer04">City</CFormLabel>
-                <CFormSelect id="validationServer04" invalid>
-                  <option disabled>Choose...</option>
-                  <option>...</option>
-                </CFormSelect>
-                <CFormFeedback invalid
-                  >Please provide a valid city.</CFormFeedback
-                >
-              </CCol>
-              <CCol :md="3">
-                <CFormLabel for="validationServer05">City</CFormLabel>
-                <CFormInput
-                  id="validationServer05"
-                  type="text"
-                  invalid
-                  required
-                />
-                <CFormFeedback invalid
-                  >Please provide a valid zip.</CFormFeedback
-                >
-              </CCol>
-              <CCol :xs="12">
-                <CFormCheck
-                  id="invalidCheck"
-                  type="checkbox"
-                  label="Agree to terms and conditions"
-                  invalid
-                  required
-                />
-                <CFormFeedback invalid
-                  >You must agree before submitting.</CFormFeedback
-                >
-              </CCol>
-              <CCol :xs="12">
-                <CButton color="primary" type="submit"> Submit form </CButton>
-              </CCol>
-            </CForm>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Supported elements</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Validation styles are available for the following form controls and
-            components:
-          </p>
-          <ul>
-            <li><code>&lt;CFormInput&gt;</code>s</li>
-            <li><code>&lt;CFormSelect&gt;</code>s</li>
-            <li><code>&lt;CFormCheck&gt;</code>s</li>
-          </ul>
-          <DocsExample href="forms/validation.html#supported-elements">
-            <CForm :validated="true">
-              <div class="mb-3">
-                <CFormLabel for="validationTextarea" class="form-label"
-                  >Textarea</CFormLabel
-                >
-                <CFormTextarea
-                  id="validationTextarea"
-                  placeholder="Required example textarea"
-                  invalid
-                  required
-                ></CFormTextarea>
-                <CFormFeedback invalid>
-                  Please enter a message in the textarea.
-                </CFormFeedback>
-              </div>
-              <CFormCheck
-                id="validationFormCheck1"
-                class="mb-3"
-                label="Check this checkbox"
-                required
-              />
-              <CFormFeedback invalid
-                >Example invalid feedback text</CFormFeedback
-              >
-              <CFormCheck
-                id="validationFormCheck2"
-                type="radio"
-                name="radio-stacked"
-                label="Check this checkbox"
-                required
-              />
-              <CFormCheck
-                id="validationFormCheck3"
-                class="mb-3"
-                type="radio"
-                name="radio-stacked"
-                label="Or toggle this other radio"
-                required
-              />
-              <CFormFeedback invalid
-                >More example invalid feedback text</CFormFeedback
-              >
-              <div class="mb-3">
-                <CFormSelect required aria-label="select example">
-                  <option>Open this select menu</option>
-                  <option value="1">One</option>
-                  <option value="2">Two</option>
-                  <option value="3">Three</option>
-                </CFormSelect>
-                <CFormFeedback invalid
-                  >Example invalid select feedback</CFormFeedback
-                >
-              </div>
-              <div class="mb-3">
-                <CFormInput
-                  id="validationTextarea"
-                  type="file"
-                  aria-label="file example"
-                  required
-                />
-                <CFormFeedback invalid
-                  >Example invalid form file feedback</CFormFeedback
-                >
-              </div>
-              <div class="mb-3">
-                <CButton type="submit" color="primary" disabled
-                  >Submit form</CButton
-                >
-              </div>
-            </CForm>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Validation</strong> <small>Tooltips</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            If your form layout allows it, you can swap the text for the tooltip
-            to display validation feedback in a styled tooltip. Be sure to have
-            a parent with
-            <code>position: relative</code> on it for tooltip positioning. In
-            the example below, our column classes have this already, but your
-            project may require an alternative setup.
-          </p>
-          <DocsExample href="forms/validation.html#tooltips">
-            <CForm
-              class="row g-3 needs-validation"
-              novalidate
-              :validated="validatedTooltip01"
-              @submit="handleSubmitTooltip01"
-            >
-              <CCol :md="4" class="position-relative">
-                <CFormLabel for="validationTooltip01">Email</CFormLabel>
-                <CFormInput id="validationTooltip01" value="Mark" required />
-                <CFormFeedback tooltip valid> Looks good! </CFormFeedback>
-              </CCol>
-              <CCol :md="4" class="position-relative">
-                <CFormLabel for="validationTooltip02">Email</CFormLabel>
-                <CFormInput id="validationTooltip02" value="Otto" required />
-                <CFormFeedback tooltip valid> Looks good! </CFormFeedback>
-              </CCol>
-              <CCol :md="4" class="position-relative">
-                <CFormLabel for="validationTooltipUsername"
-                  >Username</CFormLabel
-                >
-                <CInputGroup class="has-validation">
-                  <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
-                  <CFormInput
-                    id="validationTooltipUsername"
-                    value=""
-                    aria-describedby="inputGroupPrepend"
-                    required
-                  />
-                  <CFormFeedback tooltip invalid>
-                    Please choose a username.
-                  </CFormFeedback>
-                </CInputGroup>
-              </CCol>
-              <CCol :md="6" class="position-relative">
-                <CFormLabel for="validationTooltip03">City</CFormLabel>
-                <CFormInput id="validationTooltip03" required />
-                <CFormFeedback tooltip invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
-              </CCol>
-              <CCol :md="3" class="position-relative">
-                <CFormLabel for="validationTooltip04">City</CFormLabel>
-                <CFormSelect id="validationTooltip04" required>
-                  <option disabled value="">Choose...</option>
-                  <option>...</option>
-                </CFormSelect>
-                <CFormFeedback tooltip invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
-              </CCol>
-              <CCol :md="3" class="position-relative">
-                <CFormLabel for="validationTooltip05">City</CFormLabel>
-                <CFormInput id="validationTooltip05" required />
-                <CFormFeedback tooltip invalid>
-                  Please provide a valid zip.
-                </CFormFeedback>
-              </CCol>
-              <CCol :xs="12" class="position-relative">
-                <CButton color="primary" type="submit">Submit form</CButton>
-              </CCol>
-            </CForm>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Validation',
-  data: () => {
-    return {
-      validatedCustom01: null,
-      validatedDefault01: null,
-      validatedTooltip01: null,
-    }
-  },
-  methods: {
-    handleSubmitCustom01(event) {
-      const form = event.currentTarget
-      if (form.checkValidity() === false) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-      this.validatedCustom01 = true
-    },
-    handleSubmitDefault01(event) {
-      const form = event.currentTarget
-      if (form.checkValidity() === false) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-      this.validatedDefault01 = true
-    },
-    handleSubmitTooltip01(event) {
-      const form = event.currentTarget
-      if (form.checkValidity() === false) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-      this.validatedTooltip01 = true
-    },
-  },
-}
-</script>

frontend/src/views/icons/Brands.vue

@@ -1,41 +0,0 @@
-<template>
-  <CRow>
-    <CCol>
-      <DocsCallout
-        name="CoreUI Brand Icons"
-        href="components/icon"
-        content="CoreUI Brand Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
-      />
-      <CCard>
-        <CCardHeader>CoreUI Icons - Brand</CCardHeader>
-        <CCardBody>
-          <CRow class="text-center">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
-              <CCol class="mb-5" :xs="3" :sm="2">
-                <CIcon :content="icon" size="xxl" />
-                <div>{{ toKebabCase(iconName) }}</div>
-              </CCol>
-            </template>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-import { brandSet } from '@coreui/icons'
-export default {
-  name: 'CoreUIIcons',
-  setup() {
-    const toKebabCase = (str) =>
-      str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
-    const icons = brandSet
-
-    return {
-      icons,
-      toKebabCase,
-    }
-  },
-}
-</script>

frontend/src/views/icons/CoreUIIcons.vue

@@ -1,41 +0,0 @@
-<template>
-  <CRow>
-    <CCol>
-      <DocsCallout
-        name="CoreUI Icons"
-        href="components/icon"
-        content="CoreUI Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
-      />
-      <CCard>
-        <CCardHeader>CoreUI Icons Free</CCardHeader>
-        <CCardBody>
-          <CRow class="text-center">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
-              <CCol class="mb-5" :xs="3" :sm="2">
-                <CIcon :content="icon" size="xxl" />
-                <div>{{ toKebabCase(iconName) }}</div>
-              </CCol>
-            </template>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-import { freeSet } from '@coreui/icons'
-export default {
-  name: 'CoreUIIcons',
-  setup() {
-    const toKebabCase = (str) =>
-      str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
-    const icons = freeSet
-
-    return {
-      icons,
-      toKebabCase,
-    }
-  },
-}
-</script>

frontend/src/views/icons/Flags.vue

@@ -1,41 +0,0 @@
-<template>
-  <CRow>
-    <CCol>
-      <DocsCallout
-        name="CoreUI Flag Icons"
-        href="components/icon"
-        content="CoreUI Flag Icons. CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app."
-      />
-      <CCard>
-        <CCardHeader>CoreUI Icons - Flag</CCardHeader>
-        <CCardBody>
-          <CRow class="text-center">
-            <template v-for="(icon, iconName) in icons" :key="iconName">
-              <CCol class="mb-5" :xs="3" :sm="2">
-                <CIcon :content="icon" size="xxl" />
-                <div>{{ toKebabCase(iconName) }}</div>
-              </CCol>
-            </template>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-import { flagSet } from '@coreui/icons'
-export default {
-  name: 'CoreUIIcons',
-  setup() {
-    const toKebabCase = (str) =>
-      str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
-    const icons = flagSet
-
-    return {
-      icons,
-      toKebabCase,
-    }
-  },
-}
-</script>

frontend/src/views/notifications/Alerts.vue

@@ -1,159 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Alert" href="components/alert.html" />
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Alert</strong>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Vue Alert is prepared for any length of text, as well as an optional
-            close button. For a styling, use one of the
-            <strong>required</strong> contextual <code>color</code> props (e.g.,
-            <code>primary</code>). For inline dismissal, use the
-            <a
-              href="https://coreui.io/vue/docs/4.0/components/alert.html#dismissing"
-            >
-              dismissing prop
-            </a>
-            .
-          </p>
-          <DocsExample href="components/alert.html">
-            <CAlert color="primary"
-              >A simple primary alert—check it out!</CAlert
-            >
-            <CAlert color="secondary"
-              >A simple secondary alert—check it out!</CAlert
-            >
-            <CAlert color="success"
-              >A simple success alert—check it out!</CAlert
-            >
-            <CAlert color="danger">A simple danger alert—check it out!</CAlert>
-            <CAlert color="warning"
-              >A simple warning alert—check it out!</CAlert
-            >
-            <CAlert color="info">A simple info alert—check it out!</CAlert>
-            <CAlert color="light">A simple light alert—check it out!</CAlert>
-            <CAlert color="dark">A simple dark alert—check it out!</CAlert>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Alert</strong> <small>Link color</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Use the <code>&lt;CAlertLink&gt;</code> component to immediately
-            give matching colored links inside any alert.
-          </p>
-          <DocsExample href="components/alert.html#link-color">
-            <CAlert color="primary">
-              A simple primary alert with
-              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
-              if you like.
-            </CAlert>
-            <CAlert color="secondary">
-              A simple secondary alert with
-              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
-              if you like.
-            </CAlert>
-            <CAlert color="success">
-              A simple success alert with
-              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
-              if you like.
-            </CAlert>
-            <CAlert color="danger">
-              A simple danger alert with
-              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
-              if you like.
-            </CAlert>
-            <CAlert color="warning">
-              A simple warning alert with
-              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
-              if you like.
-            </CAlert>
-            <CAlert color="info">
-              A simple info alert with
-              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
-              if you like.
-            </CAlert>
-            <CAlert color="light">
-              A simple light alert with
-              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
-              if you like.
-            </CAlert>
-            <CAlert color="dark">
-              A simple dark alert with
-              <CAlertLink href="#">an example link</CAlertLink>. Give it a click
-              if you like.
-            </CAlert>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Alert</strong> <small>Additional content</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Alert can also incorporate supplementary components &amp; elements
-            like heading, paragraph, and divider.
-          </p>
-          <DocsExample href="components/alert.html#additional-content">
-            <CAlert color="success">
-              <CAlertHeading tag="h4">Well done!</CAlertHeading>
-              <p>
-                Aww yeah, you successfully read this important alert message.
-                This example text is going to run a bit longer so that you can
-                see how spacing within an alert works with this kind of content.
-              </p>
-              <hr />
-              <p class="mb-0">
-                Whenever you need to, be sure to use margin utilities to keep
-                things nice and tidy.
-              </p>
-            </CAlert>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :xs="12">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Alert</strong> <small>Dismissing</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Alerts can also be easily dismissed. Just add the
-            <code>dismissible</code> prop.
-          </p>
-          <DocsExample href="components/alert.html#dismissing">
-            <CAlert color="warning" dismissible @dismiss="alert">
-              <strong>Go right ahead</strong> and click that dimiss over there
-              on the right.
-            </CAlert>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Alerts',
-  methods: {
-    alert: function () {
-      alert('👋 Well, hi there! Thanks for dismissing me.')
-    },
-  },
-}
-</script>

frontend/src/views/notifications/Badges.vue

@@ -1,98 +0,0 @@
-<template>
-  <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Badges" href="components/badge.html" />
-    </CCol>
-    <CCol :lg="6">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Badges</strong> <small>Dismissing</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Bootstrap badge scale to suit the size of the parent element by
-            using relative font sizing and <code>em</code> units.
-          </p>
-          <DocsExample href="components/badge.html">
-            <h1>Example heading <CBadge color="secondary">New</CBadge></h1>
-            <h2>Example heading <CBadge color="secondary">New</CBadge></h2>
-            <h3>Example heading <CBadge color="secondary">New</CBadge></h3>
-            <h4>Example heading <CBadge color="secondary">New</CBadge></h4>
-            <h5>Example heading <CBadge color="secondary">New</CBadge></h5>
-            <h6>Example heading <CBadge color="secondary">New</CBadge></h6>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            Badges can be used as part of links or buttons to provide a counter.
-          </p>
-          <DocsExample href="components/badge.html">
-            <CButton color="primary">
-              Notifications <CBadge color="secondary">4</CBadge>
-            </CButton>
-          </DocsExample>
-          <p class="text-medium-emphasis small">
-            Remark that depending on how you use them, badges may be complicated
-            for users of screen readers and related assistive technologies.
-          </p>
-          <p class="text-medium-emphasis small">
-            Unless the context is clear, consider including additional context
-            with a visually hidden piece of additional text.
-          </p>
-          <DocsExample href="components/badge.html">
-            <CButton color="primary">
-              Profile <CBadge color="secondary">9</CBadge>
-              <span class="visually-hidden">unread messages</span>
-            </CButton>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-    <CCol :lg="6">
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Badges</strong> <small>Contextual variations</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Add any of the below-mentioned <code>color</code> props to modify
-            the presentation of a badge.
-          </p>
-          <DocsExample href="components/badge.html#contextual-variations">
-            <CBadge color="primary">primary</CBadge>
-            <CBadge color="success">success</CBadge>
-            <CBadge color="danger">danger</CBadge>
-            <CBadge color="warning">warning</CBadge>
-            <CBadge color="info">info</CBadge>
-            <CBadge color="light">light</CBadge>
-            <CBadge color="dark">dark</CBadge>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Badges</strong> <small>Pill badges</small>
-        </CCardHeader>
-        <CCardBody>
-          <p class="text-medium-emphasis small">
-            Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make
-            badges rounded.
-          </p>
-          <DocsExample href="components/badge.html#pill-badges">
-            <CBadge color="primary" shape="rounded-pill"> primary </CBadge>
-            <CBadge color="success" shape="rounded-pill"> success </CBadge>
-            <CBadge color="danger" shape="rounded-pill"> danger </CBadge>
-            <CBadge color="warning" shape="rounded-pill"> warning </CBadge>
-            <CBadge color="info" shape="rounded-pill"> info </CBadge>
-            <CBadge color="light" shape="rounded-pill"> light </CBadge>
-            <CBadge color="dark" shape="rounded-pill"> dark </CBadge>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Badges',
-}
-</script>

frontend/src/views/notifications/Notifications.vue

@@ -1,8 +1,5 @@
 <template>
   <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Modal" href="components/modal.html" />
-    </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>

frontend/src/views/pages/Login.vue

@@ -6,7 +6,7 @@
           <CCardGroup>
             <CCard class="p-4">
               <CCardBody>
-                <CForm @submit="handleLogin">
+                <CForm novalidate @submit="handleLogin">
                   <h1>Login</h1>
                   <p class="text-medium-emphasis">Sign In to your account</p>
                   <CInputGroup class="mb-3">
@@ -17,8 +17,13 @@
                       type="email"
                       placeholder="Username"
                       autocomplete="username"
-                      v-model="user.username"
+                      v-bind:valid="this.v$.user.username.$dirty ? !this.v$.user.username.$error : null"
+                      v-bind:invalid="this.v$.user.username.$dirty ? this.v$.user.username.$error : null"
+                      v-model="this.v$.user.username.$model"
                     />
+                    <CFormFeedback v-for="msg in this.v$.user.username.$errors" :key="msg.id" invalid>
+                      {{ msg.$message }}
+                    </CFormFeedback>
                   </CInputGroup>
                   <CInputGroup class="mb-4">
                     <CInputGroupText>
@@ -28,12 +33,19 @@
                       type="password"
                       placeholder="Password"
                       autocomplete="current-password"
-                      v-model="user.password"
+                      v-bind:valid="this.v$.user.password.$dirty ? !this.v$.user.password.$error : null"
+                      v-bind:invalid="this.v$.user.password.$error"
+                      v-model="this.v$.user.password.$model"
                     />
+                    <CFormFeedback v-for="msg in this.v$.user.password.$errors" :key="msg.id" invalid>
+                      {{ msg.$message }}
+                    </CFormFeedback>
                   </CInputGroup>
+
                   <CRow>
+                    <CAlert v-if="formresult" color="danger">{{ formresult }}</CAlert>
                     <CCol :xs="6">
-                      <CButton color="primary" class="px-4" type="submit">
+                      <CButton color="primary" class="px-4" type="submit" :disabled="this.v$.$invalid">
                         Login
                       </CButton>
                     </CCol>
@@ -100,15 +112,30 @@
 //import { Form, Field, ErrorMessage } from 'vee-validate'
 import User from '@/models/user'
 import SSOProviders from '@/models/ssoproviders'
+import useVuelidate from '@vuelidate/core'
+import { required, email } from '@vuelidate/validators'
+
 export default {
   name: 'Login',
-  //props: {
-  //  show: SSOProviders 
-  //},
+  setup: () => ({ v$: useVuelidate() }),
   data() {
     return {
       user: new User('', ''),
-      show: new SSOProviders(Array(0))
+      show: new SSOProviders(Array(0)),
+      formresult: ""
+    }
+  },
+  validations () {
+    return {
+      user: {
+        username: {
+          required,
+          email
+        },
+        password: {
+          required
+        }
+      }
     }
   },
   mounted() {
@@ -132,28 +159,27 @@ export default {
   created() {
     if (this.loggedIn) {
       console.log('Logged In')
-      //this.$router.push('/profile')
     }
   },
   methods: {
-    handleLogin() {
+    async  handleLogin() {
+      const isValid = await this.v$.$validate()
+      if (!isValid) { 
+        return
+      }
       this.loading = true
       this.$store.dispatch('auth/login', this.user).then(
         () => {
-          this.$router.push('/profile')
+          this.$router.push('/dashboard')
         },
         (error) => {
-          console.log(error.response)
-          this.loading = false
-          this.message =
-            (error.response &&
-              error.response.data &&
-              error.response.data.message) ||
-            error.message ||
-            error.toString()
+          this.formresult = error.response.data.error
         },
       )
     },
+    handleProviderAuth(provider) {
+        this.$auth.authenticate(provider)
+    },
   },
 }
 </script>

frontend/src/views/settings/Settings.vue

@@ -1,8 +1,5 @@
 <template>
   <CRow>
-    <CCol :xs="12">
-      <DocsCallout name="Table" href="components/table.html" />
-    </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>

frontend/src/views/theme/ColorTheme.vue

@@ -1,21 +0,0 @@
-<template>
-  <CCol :xl="2" :md="4" :sm="6" :xs="12" class="mb-4">
-    <div
-      :class="['theme-color w-75 rounded mb-3', color]"
-      style="padding-top: 75%"
-    ></div>
-    <slot></slot>
-  </CCol>
-</template>
-
-<script>
-export default {
-  name: 'ColorTheme',
-  props: {
-    color: {
-      type: String,
-      default: undefined,
-    },
-  },
-}
-</script>

frontend/src/views/theme/Colors.vue

@@ -1,39 +0,0 @@
-<template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader> <CIcon icon="cil-drop" /> Theme colors </CCardHeader>
-        <CCardBody>
-          <CRow>
-            <ColorTheme color="bg-primary">
-              <h6>Brand Primary Color</h6>
-            </ColorTheme>
-            <ColorTheme color="bg-secondary"
-              ><h6>Brand Secondary Color</h6></ColorTheme
-            >
-            <ColorTheme color="bg-success"
-              ><h6>Brand Success Color</h6></ColorTheme
-            >
-            <ColorTheme color="bg-danger"
-              ><h6>Brand Danger Color</h6></ColorTheme
-            >
-            <ColorTheme color="bg-warning"
-              ><h6>Brand Warning Color</h6></ColorTheme
-            >
-            <ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
-            <ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
-            <ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
-          </CRow>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-import ColorTheme from './ColorTheme'
-export default {
-  name: 'Colors',
-  components: { ColorTheme },
-}
-</script>

frontend/src/views/theme/Typography.vue

@@ -1,251 +0,0 @@
-<template>
-  <CRow>
-    <CCol>
-      <CCard class="mb-4">
-        <CCardHeader> Headings </CCardHeader>
-        <CCardBody>
-          <p>
-            Documentation and examples for Bootstrap typography, including
-            global settings, headings, body text, lists, and more.
-          </p>
-          <CTable>
-            <CTableHead>
-              <CTableRow>
-                <CTableHeaderCell>Heading</CTableHeaderCell>
-                <CTableHeaderCell>Example</CTableHeaderCell>
-              </CTableRow>
-            </CTableHead>
-            <CTableBody>
-              <CTableRow>
-                <CTableDataCell>
-                  <p>
-                    <code class="highlighter-rouge">
-                      &lt;h1&gt;&lt;/h1&gt;
-                    </code>
-                  </p>
-                </CTableDataCell>
-                <CTableDataCell
-                  ><span class="h1">h1. Bootstrap heading</span></CTableDataCell
-                >
-              </CTableRow>
-              <CTableRow>
-                <CTableDataCell>
-                  <p>
-                    <code class="highlighter-rouge">
-                      &lt;h2&gt;&lt;/h2&gt;
-                    </code>
-                  </p>
-                </CTableDataCell>
-                <CTableDataCell
-                  ><span class="h2">h2. Bootstrap heading</span></CTableDataCell
-                >
-              </CTableRow>
-              <CTableRow>
-                <CTableDataCell>
-                  <p>
-                    <code class="highlighter-rouge">
-                      &lt;h3&gt;&lt;/h3&gt;
-                    </code>
-                  </p>
-                </CTableDataCell>
-                <CTableDataCell
-                  ><span class="h3">h3. Bootstrap heading</span></CTableDataCell
-                >
-              </CTableRow>
-              <CTableRow>
-                <CTableDataCell>
-                  <p>
-                    <code class="highlighter-rouge">
-                      &lt;h4&gt;&lt;/h4&gt;
-                    </code>
-                  </p>
-                </CTableDataCell>
-                <CTableDataCell
-                  ><span class="h4">h4. Bootstrap heading</span></CTableDataCell
-                >
-              </CTableRow>
-              <CTableRow>
-                <CTableDataCell>
-                  <p>
-                    <code class="highlighter-rouge">
-                      &lt;h5&gt;&lt;/h5&gt;
-                    </code>
-                  </p>
-                </CTableDataCell>
-                <CTableDataCell
-                  ><span class="h5">h5. Bootstrap heading</span></CTableDataCell
-                >
-              </CTableRow>
-              <CTableRow>
-                <CTableDataCell>
-                  <p>
-                    <code class="highlighter-rouge">
-                      &lt;h6&gt;&lt;/h6&gt;
-                    </code>
-                  </p>
-                </CTableDataCell>
-                <CTableDataCell
-                  ><span class="h6">h6. Bootstrap heading</span></CTableDataCell
-                >
-              </CTableRow>
-            </CTableBody>
-          </CTable>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader> Headings </CCardHeader>
-        <CCardBody>
-          <p>
-            <code class="highlighter-rouge">.h1</code> through
-            <code class="highlighter-rouge">.h6</code>
-            classes are also available, for when you want to match the font
-            styling of a heading but cannot use the associated HTML element.
-          </p>
-          <div class="bd-example">
-            <p class="h1">h1. Bootstrap heading</p>
-            <p class="h2">h2. Bootstrap heading</p>
-            <p class="h3">h3. Bootstrap heading</p>
-            <p class="h4">h4. Bootstrap heading</p>
-            <p class="h5">h5. Bootstrap heading</p>
-            <p class="h6">h6. Bootstrap heading</p>
-          </div>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader> Display headings </CCardHeader>
-        <CCardBody>
-          <p>
-            Traditional heading elements are designed to work best in the meat
-            of your page content. When you need a heading to stand out, consider
-            using a <strong>display heading</strong>—a larger, slightly more
-            opinionated heading style.
-          </p>
-          <div class="bd-example bd-example-type">
-            <CTable>
-              <CTableBody>
-                <CTableRow>
-                  <CTableDataCell
-                    ><span class="display-1">Display 1</span></CTableDataCell
-                  >
-                </CTableRow>
-                <CTableRow>
-                  <CTableDataCell
-                    ><span class="display-2">Display 2</span></CTableDataCell
-                  >
-                </CTableRow>
-                <CTableRow>
-                  <CTableDataCell
-                    ><span class="display-3">Display 3</span></CTableDataCell
-                  >
-                </CTableRow>
-                <CTableRow>
-                  <CTableDataCell
-                    ><span class="display-4">Display 4</span></CTableDataCell
-                  >
-                </CTableRow>
-              </CTableBody>
-            </CTable>
-          </div>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader> Inline text elements </CCardHeader>
-        <CCardBody>
-          <p>
-            Traditional heading elements are designed to work best in the meat
-            of your page content. When you need a heading to stand out, consider
-            using a <strong>display heading</strong>—a larger, slightly more
-            opinionated heading style.
-          </p>
-          <div class="bd-example">
-            <p>You can use the mark tag to <mark>highlight</mark> text.</p>
-            <p>
-              <del>
-                This line of text is meant to be treated as deleted text.
-              </del>
-            </p>
-            <p>
-              <s>
-                This line of text is meant to be treated as no longer accurate.
-              </s>
-            </p>
-            <p>
-              <ins>
-                This line of text is meant to be treated as an addition to the
-                document.
-              </ins>
-            </p>
-            <p><u>This line of text will render as underlined</u></p>
-            <p>
-              <small>
-                This line of text is meant to be treated as fine print.
-              </small>
-            </p>
-            <p>
-              <strong>This line rendered as bold text.</strong>
-            </p>
-            <p><em>This line rendered as italicized text.</em></p>
-          </div>
-        </CCardBody>
-      </CCard>
-      <CCard class="mb-4">
-        <CCardHeader> Description list alignment </CCardHeader>
-        <CCardBody>
-          <p>
-            Align terms and descriptions horizontally by using our grid system’s
-            predefined classes (or semantic mixins). For longer terms, you can
-            optionally add a
-            <code class="highlighter-rouge">.text-truncate</code>
-            class to truncate the text with an ellipsis.
-          </p>
-          <div class="bd-example">
-            <dl class="row">
-              <dt class="col-sm-3">Description lists</dt>
-              <dd class="col-sm-9">
-                A description list is perfect for defining terms.
-              </dd>
-
-              <dt class="col-sm-3">Euismod</dt>
-              <dd class="col-sm-9">
-                <p>
-                  Vestibulum id ligula porta felis euismod semper eget lacinia
-                  odio sem nec elit.
-                </p>
-                <p>Donec id elit non mi porta gravida at eget metus.</p>
-              </dd>
-
-              <dt class="col-sm-3">Malesuada porta</dt>
-              <dd class="col-sm-9">
-                Etiam porta sem malesuada magna mollis euismod.
-              </dd>
-
-              <dt class="col-sm-3 text-truncate">
-                Truncated term is truncated
-              </dt>
-              <dd class="col-sm-9">
-                Fusce dapibus, tellus ac cursus commodo, tortor mauris
-                condimentum nibh, ut fermentum massa justo sit amet risus.
-              </dd>
-
-              <dt class="col-sm-3">Nesting</dt>
-              <dd class="col-sm-9">
-                <dl class="row">
-                  <dt class="col-sm-4">Nested definition list</dt>
-                  <dd class="col-sm-8">
-                    Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
-                  </dd>
-                </dl>
-              </dd>
-            </dl>
-          </div>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: 'Typography',
-}
-</script>

frontend/src/views/transports/Transports.vue

@@ -0,0 +1,993 @@
+<template>
+  <CRow>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Basic example</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Using the most basic table CoreUI, here&#39;s how
+            <code>&lt;CTable&gt;</code>-based tables look in CoreUI.
+          </p>
+          <DocsExample href="components/table.html">
+            <CTable>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Variants</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Use contextual classes to color tables, table rows or individual
+            cells.
+          </p>
+          <DocsExample href="components/table.html#variants">
+            <CTable>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">Default</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="primary">
+                  <CTableHeaderCell scope="row">Primary</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="secondary">
+                  <CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="success">
+                  <CTableHeaderCell scope="row">Success</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="danger">
+                  <CTableHeaderCell scope="row">Danger</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="warning">
+                  <CTableHeaderCell scope="row">Warning</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="info">
+                  <CTableHeaderCell scope="row">Info</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="light">
+                  <CTableHeaderCell scope="row">Light</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="dark">
+                  <CTableHeaderCell scope="row">Dark</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Striped rows</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Use <code>striped</code> property to add zebra-striping to any table
+            row within the <code>&lt;CTableBody&gt;</code>.
+          </p>
+          <DocsExample href="components/table.html#striped-rows">
+            <CTable striped>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <p class="text-medium-emphasis small">
+            These classes can also be added to table variants:
+          </p>
+          <DocsExample href="components/table.html#striped-rows">
+            <CTable color="dark" striped>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <DocsExample href="components/table.html#striped-rows">
+            <CTable color="success" striped>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Hoverable rows</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Use <code>hover</code> property to enable a hover state on table
+            rows within a <code>&lt;CTableBody&gt;</code>.
+          </p>
+          <DocsExample href="components/table.html#hoverable-rows">
+            <CTable hover>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <DocsExample href="components/table.html#hoverable-rows">
+            <CTable color="dark" hover>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <DocsExample href="components/table.html#hoverable-rows">
+            <CTable striped hover>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Active tables</small>
+        </CCardHeader>
+        <CCardBody>
+          <DocsExample href="components/table.html#active-tables">
+            <CTable>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow active>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2" active>
+                    Larry the Bird
+                  </CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <DocsExample href="components/table.html#active-tables">
+            <CTable color="dark">
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow active>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2" active>
+                    Larry the Bird
+                  </CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Bordered tables</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add <code>bordered</code> property for borders on all sides of the
+            table and cells.
+          </p>
+          <DocsExample href="components/table.html#bordered-tables">
+            <CTable bordered>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <p class="text-medium-emphasis small">
+            <a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
+              Border color utilities
+            </a>
+            can be added to change colors:
+          </p>
+          <DocsExample href="components/table.html#bordered-tables">
+            <CTable bordered border-color="primary">
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Tables without borders</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add <code>borderless</code> property for a table without borders.
+          </p>
+          <DocsExample href="components/table.html#tables-without-borders">
+            <CTable borderless>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <DocsExample href="components/table.html#tables-without-borders">
+            <CTable color="dark" borderless>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Small tables</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add <code>small</code> property to make any
+            <code>&lt;CTable&gt;</code> more compact by cutting all cell
+            <code>padding</code> in half.
+          </p>
+          <DocsExample href="components/table.html#small-tables">
+            <CTable small>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Vertical alignment</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Table cells of <code>&lt;CTableHead&gt;</code> are always vertical
+            aligned to the bottom. Table cells in
+            <code>&lt;CTableBody&gt;</code> inherit their alignment from
+            <code>&lt;CTable&gt;</code> and are aligned to the the top by
+            default. Use the align property to re-align where needed.
+          </p>
+          <DocsExample href="components/table.html#vertical-alignment">
+            <CTable align="middle" responsive>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col" class="w-25">
+                    Heading 1
+                  </CTableHeaderCell>
+                  <CTableHeaderCell scope="col" class="w-25">
+                    Heading 2
+                  </CTableHeaderCell>
+                  <CTableHeaderCell scope="col" class="w-25">
+                    Heading 3
+                  </CTableHeaderCell>
+                  <CTableHeaderCell scope="col" class="w-25">
+                    Heading 4
+                  </CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: middle;</code> from
+                    the table
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: middle;</code> from
+                    the table
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: middle;</code> from
+                    the table
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    This here is some placeholder text, intended to take up
+                    quite a bit of vertical space, to demonsCTableRowate how the
+                    vertical alignment works in the preceding cells.
+                  </CTableDataCell>
+                </CTableRow>
+                <CTableRow align="bottom">
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: bottom;</code> from
+                    the table row
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: bottom;</code> from
+                    the table row
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: bottom;</code> from
+                    the table row
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    This here is some placeholder text, intended to take up
+                    quite a bit of vertical space, to demonsCTableRowate how the
+                    vertical alignment works in the preceding cells.
+                  </CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: middle;</code> from
+                    the table
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: middle;</code> from
+                    the table
+                  </CTableDataCell>
+                  <CTableDataCell align="top"
+                    >This cell is aligned to the top.</CTableDataCell
+                  >
+                  <CTableDataCell>
+                    This here is some placeholder text, intended to take up
+                    quite a bit of vertical space, to demonsCTableRowate how the
+                    vertical alignment works in the preceding cells.
+                  </CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Nesting</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Border styles, active styles, and table variants are not inherited
+            by nested tables.
+          </p>
+          <DocsExample href="components/table.html#nesting">
+            <CTable striped>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell colspan="4">
+                    <CTable>
+                      <CTableHead>
+                        <CTableRow>
+                          <CTableHeaderCell scope="col"
+                            >Header</CTableHeaderCell
+                          >
+                          <CTableHeaderCell scope="col"
+                            >Header</CTableHeaderCell
+                          >
+                          <CTableHeaderCell scope="col"
+                            >Header</CTableHeaderCell
+                          >
+                        </CTableRow>
+                      </CTableHead>
+                      <CTableBody>
+                        <CTableRow>
+                          <CTableHeaderCell scope="row">A</CTableHeaderCell>
+                          <CTableDataCell>First</CTableDataCell>
+                          <CTableDataCell>Last</CTableDataCell>
+                        </CTableRow>
+                        <CTableRow>
+                          <CTableHeaderCell scope="row">B</CTableHeaderCell>
+                          <CTableDataCell>First</CTableDataCell>
+                          <CTableDataCell>Last</CTableDataCell>
+                        </CTableRow>
+                        <CTableRow>
+                          <CTableHeaderCell scope="row">C</CTableHeaderCell>
+                          <CTableDataCell>First</CTableDataCell>
+                          <CTableDataCell>Last</CTableDataCell>
+                        </CTableRow>
+                      </CTableBody>
+                    </CTable>
+                  </CTableHeaderCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Table head</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Similar to tables and dark tables, use the modifier prop
+            <code>color=&#34;light&#34;</code> or
+            <code>color=&#34;dark&#34;</code> to make
+            <code>&lt;CTableHead&gt;</code>s appear light or dark gray.
+          </p>
+          <DocsExample href="components/table.html#table-head">
+            <CTable>
+              <CTableHead color="light">
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell>Larry</CTableDataCell>
+                  <CTableDataCell>the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <DocsExample href="components/table.html#table-head">
+            <CTable>
+              <CTableHead color="dark">
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Table foot</small>
+        </CCardHeader>
+        <CCardBody>
+          <DocsExample href="components/table.html#table-foot">
+            <CTable>
+              <CTableHead color="light">
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+              <CTableHead>
+                <CTableRow>
+                  <CTableDataCell>Footer</CTableDataCell>
+                  <CTableDataCell>Footer</CTableDataCell>
+                  <CTableDataCell>Footer</CTableDataCell>
+                  <CTableDataCell>Footer</CTableDataCell>
+                </CTableRow>
+              </CTableHead>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Captions</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            A <code>&lt;CTableCaption&gt;</code> functions like a heading for a
+            table. It helps users with screen readers to find a table and
+            understand what it&#39;s about and decide if they want to read it.
+          </p>
+          <DocsExample href="components/table.html#captions">
+            <CTable>
+              <CTableCaption>List of users</CTableCaption>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell>Larry</CTableDataCell>
+                  <CTableDataCell>the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <p class="text-medium-emphasis small">
+            You can also put the <code>&lt;CTableCaption&gt;</code> on the top
+            of the table with <code>caption=&#34;top&#34;</code>.
+          </p>
+          <DocsExample href="components/table.html#captions">
+            <CTable caption="top">
+              <CTableCaption>List of users</CTableCaption>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell>Larry</CTableDataCell>
+                  <CTableDataCell>the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: 'Tables',
+}
+</script>

frontend/src/views/users/Users.vue

@@ -0,0 +1,993 @@
+<template>
+  <CRow>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Basic example</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Using the most basic table CoreUI, here&#39;s how
+            <code>&lt;CTable&gt;</code>-based tables look in CoreUI.
+          </p>
+          <DocsExample href="components/table.html">
+            <CTable>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Variants</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Use contextual classes to color tables, table rows or individual
+            cells.
+          </p>
+          <DocsExample href="components/table.html#variants">
+            <CTable>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">Default</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="primary">
+                  <CTableHeaderCell scope="row">Primary</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="secondary">
+                  <CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="success">
+                  <CTableHeaderCell scope="row">Success</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="danger">
+                  <CTableHeaderCell scope="row">Danger</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="warning">
+                  <CTableHeaderCell scope="row">Warning</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="info">
+                  <CTableHeaderCell scope="row">Info</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="light">
+                  <CTableHeaderCell scope="row">Light</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+                <CTableRow color="dark">
+                  <CTableHeaderCell scope="row">Dark</CTableHeaderCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                  <CTableDataCell>Cell</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Striped rows</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Use <code>striped</code> property to add zebra-striping to any table
+            row within the <code>&lt;CTableBody&gt;</code>.
+          </p>
+          <DocsExample href="components/table.html#striped-rows">
+            <CTable striped>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <p class="text-medium-emphasis small">
+            These classes can also be added to table variants:
+          </p>
+          <DocsExample href="components/table.html#striped-rows">
+            <CTable color="dark" striped>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <DocsExample href="components/table.html#striped-rows">
+            <CTable color="success" striped>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Hoverable rows</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Use <code>hover</code> property to enable a hover state on table
+            rows within a <code>&lt;CTableBody&gt;</code>.
+          </p>
+          <DocsExample href="components/table.html#hoverable-rows">
+            <CTable hover>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <DocsExample href="components/table.html#hoverable-rows">
+            <CTable color="dark" hover>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <DocsExample href="components/table.html#hoverable-rows">
+            <CTable striped hover>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Active tables</small>
+        </CCardHeader>
+        <CCardBody>
+          <DocsExample href="components/table.html#active-tables">
+            <CTable>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow active>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2" active>
+                    Larry the Bird
+                  </CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <DocsExample href="components/table.html#active-tables">
+            <CTable color="dark">
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow active>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2" active>
+                    Larry the Bird
+                  </CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Bordered tables</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add <code>bordered</code> property for borders on all sides of the
+            table and cells.
+          </p>
+          <DocsExample href="components/table.html#bordered-tables">
+            <CTable bordered>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <p class="text-medium-emphasis small">
+            <a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
+              Border color utilities
+            </a>
+            can be added to change colors:
+          </p>
+          <DocsExample href="components/table.html#bordered-tables">
+            <CTable bordered border-color="primary">
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Tables without borders</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add <code>borderless</code> property for a table without borders.
+          </p>
+          <DocsExample href="components/table.html#tables-without-borders">
+            <CTable borderless>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <DocsExample href="components/table.html#tables-without-borders">
+            <CTable color="dark" borderless>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Small tables</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Add <code>small</code> property to make any
+            <code>&lt;CTable&gt;</code> more compact by cutting all cell
+            <code>padding</code> in half.
+          </p>
+          <DocsExample href="components/table.html#small-tables">
+            <CTable small>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Vertical alignment</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Table cells of <code>&lt;CTableHead&gt;</code> are always vertical
+            aligned to the bottom. Table cells in
+            <code>&lt;CTableBody&gt;</code> inherit their alignment from
+            <code>&lt;CTable&gt;</code> and are aligned to the the top by
+            default. Use the align property to re-align where needed.
+          </p>
+          <DocsExample href="components/table.html#vertical-alignment">
+            <CTable align="middle" responsive>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col" class="w-25">
+                    Heading 1
+                  </CTableHeaderCell>
+                  <CTableHeaderCell scope="col" class="w-25">
+                    Heading 2
+                  </CTableHeaderCell>
+                  <CTableHeaderCell scope="col" class="w-25">
+                    Heading 3
+                  </CTableHeaderCell>
+                  <CTableHeaderCell scope="col" class="w-25">
+                    Heading 4
+                  </CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: middle;</code> from
+                    the table
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: middle;</code> from
+                    the table
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: middle;</code> from
+                    the table
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    This here is some placeholder text, intended to take up
+                    quite a bit of vertical space, to demonsCTableRowate how the
+                    vertical alignment works in the preceding cells.
+                  </CTableDataCell>
+                </CTableRow>
+                <CTableRow align="bottom">
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: bottom;</code> from
+                    the table row
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: bottom;</code> from
+                    the table row
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: bottom;</code> from
+                    the table row
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    This here is some placeholder text, intended to take up
+                    quite a bit of vertical space, to demonsCTableRowate how the
+                    vertical alignment works in the preceding cells.
+                  </CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: middle;</code> from
+                    the table
+                  </CTableDataCell>
+                  <CTableDataCell>
+                    This cell inherits <code>vertical-align: middle;</code> from
+                    the table
+                  </CTableDataCell>
+                  <CTableDataCell align="top"
+                    >This cell is aligned to the top.</CTableDataCell
+                  >
+                  <CTableDataCell>
+                    This here is some placeholder text, intended to take up
+                    quite a bit of vertical space, to demonsCTableRowate how the
+                    vertical alignment works in the preceding cells.
+                  </CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Nesting</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Border styles, active styles, and table variants are not inherited
+            by nested tables.
+          </p>
+          <DocsExample href="components/table.html#nesting">
+            <CTable striped>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell colspan="4">
+                    <CTable>
+                      <CTableHead>
+                        <CTableRow>
+                          <CTableHeaderCell scope="col"
+                            >Header</CTableHeaderCell
+                          >
+                          <CTableHeaderCell scope="col"
+                            >Header</CTableHeaderCell
+                          >
+                          <CTableHeaderCell scope="col"
+                            >Header</CTableHeaderCell
+                          >
+                        </CTableRow>
+                      </CTableHead>
+                      <CTableBody>
+                        <CTableRow>
+                          <CTableHeaderCell scope="row">A</CTableHeaderCell>
+                          <CTableDataCell>First</CTableDataCell>
+                          <CTableDataCell>Last</CTableDataCell>
+                        </CTableRow>
+                        <CTableRow>
+                          <CTableHeaderCell scope="row">B</CTableHeaderCell>
+                          <CTableDataCell>First</CTableDataCell>
+                          <CTableDataCell>Last</CTableDataCell>
+                        </CTableRow>
+                        <CTableRow>
+                          <CTableHeaderCell scope="row">C</CTableHeaderCell>
+                          <CTableDataCell>First</CTableDataCell>
+                          <CTableDataCell>Last</CTableDataCell>
+                        </CTableRow>
+                      </CTableBody>
+                    </CTable>
+                  </CTableHeaderCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Table head</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            Similar to tables and dark tables, use the modifier prop
+            <code>color=&#34;light&#34;</code> or
+            <code>color=&#34;dark&#34;</code> to make
+            <code>&lt;CTableHead&gt;</code>s appear light or dark gray.
+          </p>
+          <DocsExample href="components/table.html#table-head">
+            <CTable>
+              <CTableHead color="light">
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell>Larry</CTableDataCell>
+                  <CTableDataCell>the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <DocsExample href="components/table.html#table-head">
+            <CTable>
+              <CTableHead color="dark">
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Table foot</small>
+        </CCardHeader>
+        <CCardBody>
+          <DocsExample href="components/table.html#table-foot">
+            <CTable>
+              <CTableHead color="light">
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+              <CTableHead>
+                <CTableRow>
+                  <CTableDataCell>Footer</CTableDataCell>
+                  <CTableDataCell>Footer</CTableDataCell>
+                  <CTableDataCell>Footer</CTableDataCell>
+                  <CTableDataCell>Footer</CTableDataCell>
+                </CTableRow>
+              </CTableHead>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+    <CCol :xs="12">
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Table</strong> <small>Captions</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            A <code>&lt;CTableCaption&gt;</code> functions like a heading for a
+            table. It helps users with screen readers to find a table and
+            understand what it&#39;s about and decide if they want to read it.
+          </p>
+          <DocsExample href="components/table.html#captions">
+            <CTable>
+              <CTableCaption>List of users</CTableCaption>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell>Larry</CTableDataCell>
+                  <CTableDataCell>the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+          <p class="text-medium-emphasis small">
+            You can also put the <code>&lt;CTableCaption&gt;</code> on the top
+            of the table with <code>caption=&#34;top&#34;</code>.
+          </p>
+          <DocsExample href="components/table.html#captions">
+            <CTable caption="top">
+              <CTableCaption>List of users</CTableCaption>
+              <CTableHead>
+                <CTableRow>
+                  <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Class</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                  <CTableHeaderCell scope="col">Heading</CTableHeaderCell>
+                </CTableRow>
+              </CTableHead>
+              <CTableBody>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">1</CTableHeaderCell>
+                  <CTableDataCell>Mark</CTableDataCell>
+                  <CTableDataCell>Otto</CTableDataCell>
+                  <CTableDataCell>@mdo</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">2</CTableHeaderCell>
+                  <CTableDataCell>Jacob</CTableDataCell>
+                  <CTableDataCell>Thornton</CTableDataCell>
+                  <CTableDataCell>@fat</CTableDataCell>
+                </CTableRow>
+                <CTableRow>
+                  <CTableHeaderCell scope="row">3</CTableHeaderCell>
+                  <CTableDataCell>Larry</CTableDataCell>
+                  <CTableDataCell>the Bird</CTableDataCell>
+                  <CTableDataCell>@twitter</CTableDataCell>
+                </CTableRow>
+              </CTableBody>
+            </CTable>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: 'Tables',
+}
+</script>

frontend/vue.config.js

@@ -3,25 +3,27 @@ module.exports = defineConfig({
   transpileDependencies: true,
   publicPath: '/static',
   devServer: {
+    allowedHosts: "all",
+    port: 8888,
     proxy: {
       '^/v1': {
-        target: 'http://localhost:8888',
+        target: 'http://localhost:8889',
         changeOrigin: true,
       },
       '^/auth': {
-        target: 'http://localhost:8888',
+        target: 'http://localhost:8889',
         changeOrigin: true,
       },
       '^/avatar': {
-        target: 'http://localhost:8888',
-        changeOrigin: true,
+        target: 'http://localhost:8889',
+        changeOrigin: true
       },
       '^/config': {
-        target: 'http://localhost:8888',
+        target: 'http://localhost:8889',
         changeOrigin: true,
       },
       '^/health': {
-        target: 'http://localhost:8888',
+        target: 'http://localhost:8889',
         changeOrigin: true,
       },
     },

go.mod

@@ -18,6 +18,7 @@ require (
 require (
 	github.com/casbin/casbin/v2 v2.37.4
 	github.com/casbin/gorm-adapter/v3 v3.7.4
+	github.com/common-nighthawk/go-figure v0.0.0-20210622060536-734e95fb86be
 	github.com/go-chi/chi v4.1.2+incompatible
 	github.com/go-pkgz/auth v1.19.0
 	github.com/go-pkgz/repeater v1.1.3

go.sum

@@ -122,6 +122,8 @@ github.com/cncf/xds/go v0.0.0-20211011173535-cb28da3451f1/go.mod h1:eXthEFrGJvWH
 github.com/cncf/xds/go v0.0.0-20211130200136-a8f946100490/go.mod h1:eXthEFrGJvWHgFFCl3hGmgk+/aYT6PnTQLykKQRLhEs=
 github.com/cockroachdb/apd v1.1.0 h1:3LFP3629v+1aKXU5Q37mxmRxX/pIu1nijXydLShEq5I=
 github.com/cockroachdb/apd v1.1.0/go.mod h1:8Sl8LxpKi29FqWXR16WEFZRNSz3SoPzUzeMeY4+DwBQ=
+github.com/common-nighthawk/go-figure v0.0.0-20210622060536-734e95fb86be h1:J5BL2kskAlV9ckgEsNQXscjIaLiOYiZ75d4e94E6dcQ=
+github.com/common-nighthawk/go-figure v0.0.0-20210622060536-734e95fb86be/go.mod h1:mk5IQ+Y0ZeO87b858TlA645sVcEcbiX6YqP98kt+7+w=
 github.com/coreos/go-semver v0.3.0/go.mod h1:nnelYz7RCh+5ahJtPPxZlU+153eP4D4r3EedlOD2RNk=
 github.com/coreos/go-systemd v0.0.0-20190321100706-95778dfbb74e/go.mod h1:F5haX7vjVVG0kc13fIWeqUViNPyEJxv/OmvnBo0Yme4=
 github.com/coreos/go-systemd v0.0.0-20190719114852-fd7a80b32e1f/go.mod h1:F5haX7vjVVG0kc13fIWeqUViNPyEJxv/OmvnBo0Yme4=

internal/app/apps.go

@@ -62,9 +62,9 @@ func CreateApp(app AppDetails) (newapp *App, err error) {
 		Log.Info("Creating New App", "App", app)
 		var dbApp App
 		copier.Copy(&dbApp, &app)
-		adminuser, _ := user.GetUser("admin")
+		adminuser, _ := user.GetUser("admin@example.com")
 		dbApp.AssociatedUsers = append(dbApp.AssociatedUsers, adminuser)
-		normaluser, _ := user.GetUser("user")
+		normaluser, _ := user.GetUser("user@example.com")
 		dbApp.AssociatedUsers = append(dbApp.AssociatedUsers, normaluser)
 		if (filter.FindFilter("CopyShortMessage") != nil) {
 			dbApp.Filters = append(dbApp.Filters, ApplicationFilters{Name: "CopyShortMessage"})

internal/auth/telegram/telegram.go

@@ -1,6 +1,5 @@
 package telegramauth
 
-//go:generate moq -out telegram_moq_test.go . TelegramAPI
 
 import (
 	"context"

internal/db/db.go

@@ -2,10 +2,12 @@ package db
 
 import (
 	_ "fmt"
-		"gorm.io/gorm"
-		"gorm.io/driver/sqlite"
-		. "github.com/Fishwaldo/mouthpiece/internal/log"
-	)
+
+	. "github.com/Fishwaldo/mouthpiece/internal/log"
+	//"gorm.io/driver/sqlite"
+	"github.com/glebarez/sqlite"
+	"gorm.io/gorm"
+)
 
 var Db *gorm.DB
 
@@ -16,4 +18,4 @@ func InitializeDB() {
 		panic(err)
 	}
 	Log.Info("Database Initialized")
-}
+}

internal/version.go

@@ -0,0 +1,205 @@
+package mouthpiece
+
+import (
+	"encoding/json"
+	"fmt"
+	"os"
+	"runtime"
+	"runtime/debug"
+	"strings"
+	"text/tabwriter"
+	"time"
+
+	"github.com/common-nighthawk/go-figure"
+)
+
+const unknown = "unknown"
+
+// Base version information.
+//
+// This is the fallback data used when version information from git is not
+// provided via go ldflags.
+var (
+	// Output of "git describe". The prerequisite is that the
+	// branch should be tagged using the correct versioning strategy.
+	gitVersion = "devel"
+	// SHA1 from git, output of $(git rev-parse HEAD)
+	gitCommit = unknown
+	// State of git tree, either "clean" or "dirty"
+	gitTreeState = unknown
+	// Build date in ISO8601 format, output of $(date -u +'%Y-%m-%dT%H:%M:%SZ')
+	buildDate = unknown
+	// flag to print the ascii name banner
+	asciiName = "true"
+	// goVersion is the used golang version.
+	goVersion = unknown
+	// compiler is the used golang compiler.
+	compiler = unknown
+	// platform is the used os/arch identifier.
+	platform = unknown
+)
+
+type Info struct {
+	GitVersion   string `json:"gitVersion"`
+	GitCommit    string `json:"gitCommit"`
+	GitTreeState string `json:"gitTreeState"`
+	BuildDate    string `json:"buildDate"`
+	GoVersion    string `json:"goVersion"`
+	Compiler     string `json:"compiler"`
+	Platform     string `json:"platform"`
+
+	ASCIIName   string `json:"-"`
+	FontName    string `json:"-"`
+	Name        string `json:"-"`
+	Description string `json:"-"`
+}
+
+func getBuildInfo() *debug.BuildInfo {
+	bi, ok := debug.ReadBuildInfo()
+	if !ok {
+		return nil
+	}
+	return bi
+}
+
+func getGitVersion(bi *debug.BuildInfo) string {
+	if bi == nil {
+		return unknown
+	}
+
+	// TODO: remove this when the issue https://github.com/golang/go/issues/29228 is fixed
+	if bi.Main.Version == "(devel)" || bi.Main.Version == "" {
+		return gitVersion
+	}
+
+	return bi.Main.Version
+}
+
+func getCommit(bi *debug.BuildInfo) string {
+	return getKey(bi, "vcs.revision")
+}
+
+func getDirty(bi *debug.BuildInfo) string {
+	modified := getKey(bi, "vcs.modified")
+	if modified == "true" {
+		return "dirty"
+	}
+	if modified == "false" {
+		return "clean"
+	}
+	return unknown
+}
+
+func getBuildDate(bi *debug.BuildInfo) string {
+	buildTime := getKey(bi, "vcs.time")
+	t, err := time.Parse("2006-01-02T15:04:05Z", buildTime)
+	if err != nil {
+		return unknown
+	}
+	return t.Format("2006-01-02T15:04:05")
+}
+
+func getKey(bi *debug.BuildInfo, key string) string {
+	if bi == nil {
+		return unknown
+	}
+	for _, iter := range bi.Settings {
+		if iter.Key == key {
+			return iter.Value
+		}
+	}
+	return unknown
+}
+
+// GetVersionInfo represents known information on how this binary was built.
+func GetVersionInfo() Info {
+	buildInfo := getBuildInfo()
+	gitVersion = getGitVersion(buildInfo)
+	if gitCommit == unknown {
+		gitCommit = getCommit(buildInfo)
+	}
+
+	if gitTreeState == unknown {
+		gitTreeState = getDirty(buildInfo)
+	}
+
+	if buildDate == unknown {
+		buildDate = getBuildDate(buildInfo)
+	}
+
+	if goVersion == unknown {
+		goVersion = runtime.Version()
+	}
+
+	if compiler == unknown {
+		compiler = runtime.Compiler
+	}
+
+	if platform == unknown {
+		platform = fmt.Sprintf("%s/%s", runtime.GOOS, runtime.GOARCH)
+	}
+
+	return Info{
+		ASCIIName:    asciiName,
+		GitVersion:   gitVersion,
+		GitCommit:    gitCommit,
+		GitTreeState: gitTreeState,
+		BuildDate:    buildDate,
+		GoVersion:    goVersion,
+		Compiler:     compiler,
+		Platform:     platform,
+	}
+}
+
+// String returns the string representation of the version info
+func (i *Info) String() string {
+	b := strings.Builder{}
+	w := tabwriter.NewWriter(&b, 0, 0, 2, ' ', 0)
+
+	// name and description are optional.
+	if i.Name != "" {
+		if i.ASCIIName == "true" {
+			f := figure.NewFigure(strings.ToUpper(i.Name), i.FontName, true)
+			_, _ = fmt.Fprint(w, f.String())
+		}
+		_, _ = fmt.Fprint(w, i.Name)
+		if i.Description != "" {
+			_, _ = fmt.Fprintf(w, ": %s", i.Description)
+		}
+		_, _ = fmt.Fprint(w, "\n\n")
+	}
+
+	_, _ = fmt.Fprintf(w, "GitVersion:\t%s\n", i.GitVersion)
+	_, _ = fmt.Fprintf(w, "GitCommit:\t%s\n", i.GitCommit)
+	_, _ = fmt.Fprintf(w, "GitTreeState:\t%s\n", i.GitTreeState)
+	_, _ = fmt.Fprintf(w, "BuildDate:\t%s\n", i.BuildDate)
+	_, _ = fmt.Fprintf(w, "GoVersion:\t%s\n", i.GoVersion)
+	_, _ = fmt.Fprintf(w, "Compiler:\t%s\n", i.Compiler)
+	_, _ = fmt.Fprintf(w, "Platform:\t%s\n", i.Platform)
+
+	_ = w.Flush()
+	return b.String()
+}
+
+// JSONString returns the JSON representation of the version info
+func (i *Info) JSONString() (string, error) {
+	b, err := json.MarshalIndent(i, "", "  ")
+	if err != nil {
+		return "", err
+	}
+
+	return string(b), nil
+}
+
+func (i *Info) CheckFontName(fontName string) bool {
+	assetNames := figure.AssetNames()
+
+	for _, font := range assetNames {
+		if strings.Contains(font, fontName) {
+			return true
+		}
+	}
+
+	fmt.Fprintln(os.Stderr, "font not valid, using default")
+	return false
+}

main.go

@@ -33,7 +33,11 @@ import (
 	//	"reflect"
 	"strings"
 	//	"unsafe"
+	"runtime/debug"
+	"encoding/json"
+	"os"
 
+	_ "github.com/Fishwaldo/mouthpiece/frontend"
 	mouthpiece "github.com/Fishwaldo/mouthpiece/internal"
 	"github.com/Fishwaldo/mouthpiece/internal/app"
 	"github.com/Fishwaldo/mouthpiece/internal/auth"
@@ -80,6 +84,21 @@ func fileServer(r chi.Router, path string, root http.FileSystem) {
 	})
 }
 
+func printBuildInfo() {
+	bi, ok := debug.ReadBuildInfo()
+	if !ok {
+		fmt.Println("Getting build info failed (not in module mode?)!")
+		return
+	}
+	
+	enc := json.NewEncoder(os.Stdout)
+	enc.SetIndent("", "  ")
+	if err := enc.Encode(bi); err != nil {
+		panic(err)
+	}
+}
+
+
 func main() {
 	viper.SetConfigName("config")
 	viper.SetConfigType("yaml")
@@ -99,6 +118,17 @@ func main() {
 			panic(fmt.Errorf("fatal error config file: %w \n", err))
 		}
 	}
+
+	bi := mouthpiece.GetVersionInfo()
+	bi.Name = "MouthPiece"
+	bi.Description = "Messaging Server"
+	if bi.CheckFontName("starwars") {
+		bi.FontName = "starwars"
+	}
+
+	fmt.Println(bi.String())
+
+
 	// Create a new router & CLI with default middleware.
 	InitLogger()
 	db.InitializeDB()