+
+
+
+
+
+
+ Loading details...
+
+
+
+
+
+
diff --git a/internal/mfaportal/resources/frontend/src/composables/useApi.ts b/internal/mfaportal/resources/frontend/src/composables/useApi.ts
new file mode 100644
index 00000000..73621f8b
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/src/composables/useApi.ts
@@ -0,0 +1,82 @@
+import axios from 'axios'
+import { reactive, toRefs, type UnwrapRef } from 'vue'
+
+import { useToastError } from '@/composables/useToastError'
+
+
+interface UseAPIStateRegister MFA Method
+
+
+
+ No MFA methods, configured and enabled.
+
+
+
diff --git a/internal/mfaportal/resources/frontend/src/pages/Oidc.vue b/internal/mfaportal/resources/frontend/src/pages/Oidc.vue
new file mode 100644
index 00000000..4768b8b7
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/src/pages/Oidc.vue
@@ -0,0 +1,8 @@
+
+
+
+ + Redirecting you to your SSO provider... +
+ diff --git a/internal/mfaportal/resources/frontend/src/pages/Pam.vue b/internal/mfaportal/resources/frontend/src/pages/Pam.vue new file mode 100644 index 00000000..93f04489 --- /dev/null +++ b/internal/mfaportal/resources/frontend/src/pages/Pam.vue @@ -0,0 +1,29 @@ + + + +Enter Password
+ +
+
+
diff --git a/internal/mfaportal/resources/frontend/src/pages/Success.vue b/internal/mfaportal/resources/frontend/src/pages/Success.vue
new file mode 100644
index 00000000..c78c10fe
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/src/pages/Success.vue
@@ -0,0 +1,56 @@
+
+
+
+ + In order to access restricted resources you must verify your identity. + Please ente r your credentials below. If you are encountering issues, + please send an email to + {{ + infoStore.user.helpmail + }} +
+ + +Authorised!
+ +
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/internal/mfaportal/resources/frontend/src/pages/Totp.vue b/internal/mfaportal/resources/frontend/src/pages/Totp.vue
new file mode 100644
index 00000000..6781ffe7
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/src/pages/Totp.vue
@@ -0,0 +1,108 @@
+
+
+
+
+ MFA Code
+ +
+
+
+
+ + In order to access restricted resources you must verify your identity. + Please enter your MFA code below. If you are encountering issues, please + send an email to + {{ + infoStore.user.helpmail + }}. +
+
+
+
+
+ Configure mobile app
+-
+
- Install Google Authenticator. +
- In the app, tap the + symbol and choose "Scan a QR code". +
- Scan the image below. +
- Enter Code and hit submit +
+ ![]()
+
+
+ + If you are unable to scan this image, select "Enter a setup key" and enter the following information. +
+ +Account name: {{ totpDetails.account_name }}
+ Your key: {{ totpDetails.key }}
+ Type of key: Time based
+
+
+
+
+
+
+
+ Insert security key
+
+
+
diff --git a/internal/mfaportal/resources/frontend/src/router/index.ts b/internal/mfaportal/resources/frontend/src/router/index.ts
new file mode 100644
index 00000000..88357b56
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/src/router/index.ts
@@ -0,0 +1,39 @@
+import { createRouter, createWebHistory } from "vue-router";
+
+const router = createRouter({
+ history: createWebHistory(import.meta.env.BASE_URL),
+ routes: [
+ {
+ path: "/",
+ name: "index",
+ component: () => import("../pages/Index.vue"),
+ },
+ {
+ path: "/totp",
+ name: "totp",
+ component: () => import("../pages/Totp.vue"),
+ },
+ {
+ path: "/pam",
+ name: "pam",
+ component: () => import("../pages/Pam.vue"),
+ },
+ {
+ path: "/webauthn",
+ name: "webauthn",
+ component: () => import("../pages/Webauthn.vue"),
+ },
+ {
+ path: "/oidc",
+ name: "oidc",
+ component: () => import("../pages/Oidc.vue"),
+ },
+ {
+ path: "/success",
+ name: "success",
+ component: () => import("../pages/Success.vue"),
+ },
+ ],
+});
+
+export default router;
diff --git a/internal/mfaportal/resources/frontend/src/store/config.ts b/internal/mfaportal/resources/frontend/src/store/config.ts
new file mode 100644
index 00000000..6aed77f5
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/src/store/config.ts
@@ -0,0 +1,44 @@
+import { defineStore } from "pinia";
+
+import { getAllDevices } from "@/api/devices";
+import type { DeviceDTO } from "@/api/types";
+
+export type DevicesStore = {
+ devices: DeviceDTO[];
+ loading: boolean;
+};
+
+export const useDevicesStore = defineStore({
+ id: "devices-store",
+
+ state: () =>
+ ({
+ devices: [] as DeviceDTO[],
+ loading: false,
+ }) as DevicesStore,
+
+ actions: {
+ async load(forceRefetch = false) {
+ if (this.loading) {
+ return;
+ }
+
+ if (forceRefetch || this.devices.length === 0) {
+ this.loading = true;
+ try {
+ this.devices = await getAllDevices();
+ } finally {
+ this.loading = false;
+ }
+ }
+ },
+ },
+
+ getters: {
+ byAddress: (state) => (address: string) =>
+ state.devices.find((x) => x.internal_ip == address),
+ byOwner: (state) => (owner: string) =>
+ state.devices.find((x) => x.owner == owner),
+ numDevices: (state) => () => state.devices?.length ?? 0,
+ },
+});
diff --git a/internal/mfaportal/resources/frontend/src/store/devices.ts b/internal/mfaportal/resources/frontend/src/store/devices.ts
new file mode 100644
index 00000000..6aed77f5
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/src/store/devices.ts
@@ -0,0 +1,44 @@
+import { defineStore } from "pinia";
+
+import { getAllDevices } from "@/api/devices";
+import type { DeviceDTO } from "@/api/types";
+
+export type DevicesStore = {
+ devices: DeviceDTO[];
+ loading: boolean;
+};
+
+export const useDevicesStore = defineStore({
+ id: "devices-store",
+
+ state: () =>
+ ({
+ devices: [] as DeviceDTO[],
+ loading: false,
+ }) as DevicesStore,
+
+ actions: {
+ async load(forceRefetch = false) {
+ if (this.loading) {
+ return;
+ }
+
+ if (forceRefetch || this.devices.length === 0) {
+ this.loading = true;
+ try {
+ this.devices = await getAllDevices();
+ } finally {
+ this.loading = false;
+ }
+ }
+ },
+ },
+
+ getters: {
+ byAddress: (state) => (address: string) =>
+ state.devices.find((x) => x.internal_ip == address),
+ byOwner: (state) => (owner: string) =>
+ state.devices.find((x) => x.owner == owner),
+ numDevices: (state) => () => state.devices?.length ?? 0,
+ },
+});
diff --git a/internal/mfaportal/resources/frontend/src/store/info.ts b/internal/mfaportal/resources/frontend/src/store/info.ts
new file mode 100644
index 00000000..f084675a
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/src/store/info.ts
@@ -0,0 +1,54 @@
+import { defineStore } from "pinia";
+
+import type { MFAMethod, UserInfoDTO } from "@/api/types";
+import { apiGetInfo } from "@/api/info";
+
+export type UserInfoState = {
+ whoamiDetails: UserInfoDTO | null;
+
+ isInfoLoading: boolean;
+ loginError: string | null;
+};
+
+export const useInfoStore = defineStore({
+ id: "info-store",
+
+ state: () =>
+ ({
+ whoamiDetails: null,
+
+ loginError: null,
+ isInfoLoading: false,
+ }) as UserInfoState,
+
+ actions: {
+ async load() {
+ if (this.isInfoLoading) {
+ return;
+ }
+
+ this.isInfoLoading = true;
+ try {
+ const details = await apiGetInfo();
+
+ this.whoamiDetails = details;
+ this.loginError = null;
+ } catch (err: any) {
+ this.whoamiDetails = null;
+ } finally {
+ this.isInfoLoading = false;
+ }
+ },
+ },
+
+ getters: {
+ isLoggedIn: (state) => state.whoamiDetails?.is_authorized,
+ loggedInUser: (state) => state.whoamiDetails?.username,
+
+ user: (state) => state.whoamiDetails ?? ({
+ available_mfa_methods: [] as MFAMethod[],
+ } as UserInfoDTO),
+
+ error: (state) => state.loginError,
+ },
+});
diff --git a/internal/mfaportal/resources/frontend/src/styles.css b/internal/mfaportal/resources/frontend/src/styles.css
new file mode 100644
index 00000000..2a346d8e
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/src/styles.css
@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ --padding-card: 24px;
+}
+
+.compact-table tr th:first-of-type,
+.compact-table tr td:first-of-type {
+ padding-left: 0;
+}
+
+.compact-table tr th:last-of-type,
+.compact-table tr td:last-of-type {
+ padding-right: 0;
+}
+
+table.table-first-col-bold tr > td:first-of-type {
+ font-weight: bold;
+}
+
+.btn {
+ text-transform: uppercase;
+}
+
+.btn.normal-case {
+ text-transform: none;
+}
+
+.label {
+ padding-left: 0px !important;
+}
diff --git a/internal/mfaportal/resources/frontend/tailwind.config.js b/internal/mfaportal/resources/frontend/tailwind.config.js
new file mode 100644
index 00000000..5b8cb7b5
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/tailwind.config.js
@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ['./src/**/*.vue'],
+ theme: {
+ extend: {
+ colors: {
+ 'primary-content': 'oklch(91.85% 0.041 287.86)'
+ },
+ },
+ },
+ plugins: [require('daisyui'), require('@tailwindcss/typography')],
+ daisyui: {
+ themes: [{
+ corporate: {
+ ...require('daisyui/src/theming/themes')['corporate'],
+ 'primary-content': 'oklch(91.85% 0.041 287.86)',
+ }
+ }]
+ }
+}
diff --git a/internal/mfaportal/resources/frontend/tsconfig.app.json b/internal/mfaportal/resources/frontend/tsconfig.app.json
new file mode 100644
index 00000000..e14c754d
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/tsconfig.app.json
@@ -0,0 +1,14 @@
+{
+ "extends": "@vue/tsconfig/tsconfig.dom.json",
+ "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+ "exclude": ["src/**/__tests__/*"],
+ "compilerOptions": {
+ "composite": true,
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
+}
diff --git a/internal/mfaportal/resources/frontend/tsconfig.json b/internal/mfaportal/resources/frontend/tsconfig.json
new file mode 100644
index 00000000..a2229a56
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/tsconfig.json
@@ -0,0 +1,21 @@
+{
+ "extends": "@vue/tsconfig/tsconfig.dom.json",
+ "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+ "compilerOptions": {
+ "lib": [
+ "ES2020",
+ "DOM",
+ "DOM.Iterable"
+ ],
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+
+ "references": [
+ {
+ "path": "./tsconfig.node.json"
+ }
+ ]
+}
diff --git a/internal/mfaportal/resources/frontend/tsconfig.node.json b/internal/mfaportal/resources/frontend/tsconfig.node.json
new file mode 100644
index 00000000..59485c30
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+ "extends": "@vue/tsconfig/tsconfig.lib.json",
+ "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
+ "compilerOptions": {
+
+ "composite": true,
+ "types": ["node"]
+ }
+}
diff --git a/internal/mfaportal/resources/frontend/vite.config.d.ts b/internal/mfaportal/resources/frontend/vite.config.d.ts
new file mode 100644
index 00000000..340562af
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/vite.config.d.ts
@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;
diff --git a/internal/mfaportal/resources/frontend/vite.config.ts b/internal/mfaportal/resources/frontend/vite.config.ts
new file mode 100644
index 00000000..63d19976
--- /dev/null
+++ b/internal/mfaportal/resources/frontend/vite.config.ts
@@ -0,0 +1,16 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [
+ vue(),
+ ],
+ resolve: {
+ alias: {
+ '@': fileURLToPath(new URL('./src', import.meta.url))
+ },
+ },
+})
+ In order to access restricted resources you must verify your identity. + Please insert your security key. If you are encountering issues, please + send an email to + {{ + infoStore.user.helpmail + }} +
+ +