From bef827821705825cbd11f82a4a995f7a577294f3 Mon Sep 17 00:00:00 2001
From: Maximilian Oertel <maximilian@beyond-consulting.xyz>
Date: Tue, 20 Aug 2024 22:42:49 +0200
Subject: [PATCH 1/3] Refactor user type determination

---
 src/composables/useUserType.js | 47 ++++++++++++++++++++++++++++++++++
 src/constants/auth.js          | 10 ++++++++
 src/pages/HomeSelector.vue     | 29 ++++++++++-----------
 3 files changed, 70 insertions(+), 16 deletions(-)
 create mode 100644 src/composables/useUserType.js

diff --git a/src/composables/useUserType.js b/src/composables/useUserType.js
new file mode 100644
index 000000000..de37aae55
--- /dev/null
+++ b/src/composables/useUserType.js
@@ -0,0 +1,47 @@
+import { computed } from 'vue';
+import { AUTH_USER_TYPE } from '@/constants/auth';
+import _isEmpty from 'lodash/isEmpty';
+
+/**
+ * Get user type
+ *
+ * Composable function to determine the user type based on the user claims. The user type can be either an admin or a
+ * participant. The user type is determined based on the user claims, where a user is considered an admin if they have
+ * the corresponding super_admin or miniamlAdminOrgs claims.
+ *
+ * @param {Object} userClaims - The user claims object.
+ * @returns {Object} The user type and related computed properties.
+ */
+export default function useUserType(userClaims) {
+  const userType = computed(() => {
+    // Abort the user type determination if the user claims are not available yet.
+    if (!userClaims.value) return;
+
+    const claims = userClaims.value.claims;
+
+    // Check if the user is a super admin.
+    if (claims?.super_admin) {
+      return AUTH_USER_TYPE.ADMIN;
+    }
+
+    // Check if the user has any minimal admin organizations.
+    const minimalAdminOrgs = claims.minimalAdminOrgs || {};
+    const hasMinimalAdminOrgs = Object.values(minimalAdminOrgs).some((org) => !_isEmpty(org));
+
+    if (hasMinimalAdminOrgs) {
+      return AUTH_USER_TYPE.ADMIN;
+    }
+
+    // Otherwise, default to participant user type.
+    return AUTH_USER_TYPE.PARTICIPANT;
+  });
+
+  const isAdmin = computed(() => userType.value === AUTH_USER_TYPE.ADMIN);
+  const isParticipant = computed(() => userType.value === AUTH_USER_TYPE.PARTICIPANT);
+
+  return {
+    userType,
+    isAdmin,
+    isParticipant,
+  };
+}
diff --git a/src/constants/auth.js b/src/constants/auth.js
index 1c1424827..288556e69 100644
--- a/src/constants/auth.js
+++ b/src/constants/auth.js
@@ -10,3 +10,13 @@ export const AUTH_SESSION_TIMEOUT_IDLE_THRESHOLD =
   parseInt(import.meta.env.VITE_AUTH_SESSION_TIMEOUT_IDLE_THRESHOLD, 10) || 15 * oneMinuteInMs;
 export const AUTH_SESSION_TIMEOUT_COUNTDOWN_DURATION =
   parseInt(import.meta.env.VITE_AUTH_SESSION_TIMEOUT_COUNTDOWN_DURATION, 10) || 60 * oneSecondInMs;
+
+/**
+ * Auth User Type
+ *
+ * @constant {Object} AUTH_USER_TYPE - User type, admin or participant.
+ */
+export const AUTH_USER_TYPE = {
+  ADMIN: 'admin',
+  PARTICIPANT: 'participant',
+};
diff --git a/src/pages/HomeSelector.vue b/src/pages/HomeSelector.vue
index afb50e491..55401ba6a 100644
--- a/src/pages/HomeSelector.vue
+++ b/src/pages/HomeSelector.vue
@@ -5,12 +5,14 @@
       <p class="text-center">{{ $t('homeSelector.loading') }}</p>
     </div>
   </div>
+
   <div v-else>
-    <HomeParticipant v-if="!isAdmin" />
+    <HomeParticipant v-if="isParticipant" />
     <HomeAdministrator v-else-if="isAdmin" />
   </div>
+
   <ConsentModal
-    v-if="showConsent && isAdmin"
+    v-if="!isLoading && showConsent && isAdmin"
     :consent-text="confirmText"
     :consent-type="consentType"
     @accepted="updateConsent"
@@ -19,7 +21,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, toRaw, watch } from 'vue';
+import { computed, defineAsyncComponent, onMounted, ref, toRaw, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
@@ -29,12 +31,13 @@ import _union from 'lodash/union';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 
+import useUserType from '@/composables/useUserType';
 import useUserDataQuery from '@/composables/queries/useUserDataQuery';
 import useUserClaimsQuery from '@/composables/queries/useUserClaimsQuery';
 
-const HomeParticipant = ref(null);
-const HomeAdministrator = ref(null);
-const ConsentModal = ref(null);
+const HomeParticipant = defineAsyncComponent(() => import('@/pages/HomeParticipant.vue'));
+const HomeAdministrator = defineAsyncComponent(() => import('@/pages/HomeAdministrator.vue'));
+const ConsentModal = defineAsyncComponent(() => import('@/components/ConsentModal.vue'));
 
 const isLevante = import.meta.env.MODE === 'LEVANTE';
 const authStore = useAuthStore();
@@ -73,13 +76,9 @@ const { isLoading: isLoadingClaims, data: userClaims } = useUserClaimsQuery({
   enabled: initialized,
 });
 
-const isLoading = computed(() => isLoadingClaims.value || isLoadingUserData.value);
+const { isAdmin, isParticipant } = useUserType(userClaims);
 
-const isAdmin = computed(() => {
-  if (userClaims.value?.claims?.super_admin) return true;
-  if (_isEmpty(_union(...Object.values(userClaims.value?.claims?.minimalAdminOrgs ?? {})))) return false;
-  return true;
-});
+const isLoading = computed(() => isLoadingClaims.value || isLoadingUserData.value);
 
 const consentType = computed(() => {
   if (isAdmin.value) {
@@ -108,11 +107,13 @@ async function checkConsent() {
     // skip the consent for levante
     return;
   }
+
   // Check for consent
   if (isAdmin.value) {
     const consentStatus = _get(userData.value, `legal.${consentType.value}`);
     const consentDoc = await authStore.getLegalDoc(consentType.value);
     consentVersion.value = consentDoc.version;
+
     if (!_get(toRaw(consentStatus), consentDoc.version)) {
       confirmText.value = consentDoc.text;
       showConsent.value = true;
@@ -121,10 +122,6 @@ async function checkConsent() {
 }
 
 onMounted(async () => {
-  HomeParticipant.value = (await import('@/pages/HomeParticipant.vue')).default;
-  HomeAdministrator.value = (await import('@/pages/HomeAdministrator.vue')).default;
-  ConsentModal.value = (await import('@/components/ConsentModal.vue')).default;
-
   if (requireRefresh.value) {
     requireRefresh.value = false;
     router.go(0);

From 2285397e7d9d2f1841c8f3081702c65928292590 Mon Sep 17 00:00:00 2001
From: Maximilian Oertel <maximilian@beyond-consulting.xyz>
Date: Wed, 21 Aug 2024 11:58:54 +0200
Subject: [PATCH 2/3] Fix linter offenses

---
 src/pages/HomeSelector.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/pages/HomeSelector.vue b/src/pages/HomeSelector.vue
index 55401ba6a..bd4d9a228 100644
--- a/src/pages/HomeSelector.vue
+++ b/src/pages/HomeSelector.vue
@@ -23,13 +23,11 @@
 <script setup>
 import { computed, defineAsyncComponent, onMounted, ref, toRaw, watch } from 'vue';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import _get from 'lodash/get';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import _get from 'lodash/get';
-import _isEmpty from 'lodash/isEmpty';
-import _union from 'lodash/union';
-import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
 
 import useUserType from '@/composables/useUserType';
 import useUserDataQuery from '@/composables/queries/useUserDataQuery';

From 50be7dce734e17a665b1eb80f49563194e7da593 Mon Sep 17 00:00:00 2001
From: Maximilian Oertel <maximilian@beyond-consulting.xyz>
Date: Wed, 21 Aug 2024 17:18:50 +0200
Subject: [PATCH 3/3] Add useUserType unit tests

---
 src/composables/useUserType.test.js | 54 +++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/composables/useUserType.test.js

diff --git a/src/composables/useUserType.test.js b/src/composables/useUserType.test.js
new file mode 100644
index 000000000..e452fd566
--- /dev/null
+++ b/src/composables/useUserType.test.js
@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest';
+import { computed } from 'vue';
+import { AUTH_USER_TYPE } from '@/constants/auth';
+import useUserType from './useUserType';
+
+describe('useUserType', () => {
+  it('should return admin user type when user is a super admin', () => {
+    const userClaims = computed(() => ({ claims: { super_admin: true } }));
+    const { userType, isAdmin, isParticipant } = useUserType(userClaims);
+
+    expect(userType.value).toBe(AUTH_USER_TYPE.ADMIN);
+    expect(isAdmin.value).toBe(true);
+    expect(isParticipant.value).toBe(false);
+  });
+
+  it('should return admin user type when user has minimal admin orgs', () => {
+    const userClaims = computed(() => ({
+      claims: {
+        minimalAdminOrgs: {
+          org1: [{ id: 1 }],
+          org2: [{ id: 2 }],
+        },
+      },
+    }));
+    const { userType, isAdmin, isParticipant } = useUserType(userClaims);
+
+    expect(userType.value).toBe(AUTH_USER_TYPE.ADMIN);
+    expect(isAdmin.value).toBe(true);
+    expect(isParticipant.value).toBe(false);
+  });
+
+  it('should return participant user type when user is not a super admin and has no minimal admin orgs', () => {
+    const userClaims = computed(() => ({
+      claims: {
+        super_admin: false,
+        minimalAdminOrgs: {},
+      },
+    }));
+    const { userType, isAdmin, isParticipant } = useUserType(userClaims);
+
+    expect(userType.value).toBe(AUTH_USER_TYPE.PARTICIPANT);
+    expect(isAdmin.value).toBe(false);
+    expect(isParticipant.value).toBe(true);
+  });
+
+  it('should return undefined user type when no claims are provided', () => {
+    const userClaims = computed(() => null);
+    const { userType, isAdmin, isParticipant } = useUserType(userClaims);
+
+    expect(userType.value).toBe(undefined);
+    expect(isAdmin.value).toBe(false);
+    expect(isParticipant.value).toBe(false);
+  });
+});