feat(admin): add user role management

apps/tailwind-components/components/Navigation.vue

@@ -22,7 +22,6 @@ const mainButtons = computed(() =>
 const subButtons = computed(() =>
   props.navigation.slice(props.maximumButtonShown)
 );
-const active = "underline";
 </script>
 
 <template>

apps/tailwind-components/server/routes/[schema]/graphql.ts

@@ -2,13 +2,13 @@ import { joinURL } from "ufo";
 import { createConsola } from "consola";
 
 export default defineEventHandler((event) => {
- const config = useRuntimeConfig(event); 
- const logger = createConsola({ level: config.logLevel?? 3 });
+  const config = useRuntimeConfig(event);
+  const logger = createConsola({ level: config.logLevel ?? 3 });
   logger.info("proxy schema gql request : ", event.path);
   if (event.method === "POST") {
     readBody(event).then((body) => {
       if (body.query) {
-        logger.debug( body.query);
+        logger.debug(body.query);
       }
       if (body.variables) {
         logger.debug(body.variables);
@@ -17,6 +17,6 @@ export default defineEventHandler((event) => {
   }
   const schema = getRouterParam(event, "schema") || "";
   logger.info("to : ", joinURL(config.public.apiBase, schema, "graphql"));
-  const target = joinURL(config.public.apiBase, schema,"graphql");
+  const target = joinURL(config.public.apiBase, schema, "graphql");
   return proxyRequest(event, target);
 });

apps/ui/layouts/default.vue

@@ -2,7 +2,7 @@
 const config = useRuntimeConfig();
 const route = useRoute();
 const { data: session } = await useSession();
-console.log("session form defaiult layout: ", session.value);
+console.log("session form default layout: ", session.value);
 
 const faviconHref = config.public.emx2Theme
   ? `/_nuxt-styles/img/${config.public.emx2Theme}.ico`
@@ -11,16 +11,18 @@ const faviconHref = config.public.emx2Theme
 useHead({
   htmlAttrs: {
     "data-theme":
-      (route.query.theme as string) || config.public.emx2Theme || "",
+      (route.query.theme as string) ||
+      (config.public.emx2Theme as string) ||
+      "",
   },
   link: [{ rel: "icon", href: faviconHref }],
   titleTemplate: (titleChunk) => {
     if (titleChunk && config.public.siteTitle) {
       return `${titleChunk} | ${config.public.siteTitle}`;
     } else if (titleChunk) {
       return titleChunk;
-    } else if (config.public.siteTitle) {
-      return config.public.siteTitle;
+      // } else if (config.public.siteTitle) {
+      //   return config.public.siteTitle;
     } else {
       return "Emx2";
     }
@@ -65,6 +67,11 @@ const navigation = computed(() => {
           <Navigation :navigation="navigation" />
         </template>
         <template #account>
+          <HeaderButton
+            label="Admin"
+            icon="Database"
+            @click="navigateTo({ path: '/admin/' })"
+          />
           <HeaderButton
             :label="isSignedIn ? 'Account' : 'Signin'"
             icon="user"

apps/ui/middleware/adminOnly.ts

@@ -1,7 +1,7 @@
-export default defineNuxtRouteMiddleware(async (to, from) => {
-    const {data: session} = await useSession();
-    const isAdmin = computed(() => session.value.email === "admin");
-    if (!isAdmin.value) {
-      return navigateTo('/login')
-    }
-  })
+export default defineNuxtRouteMiddleware(async (_to, _from) => {
+  const { data: session } = await useSession();
+  const isAdmin = computed(() => session.value.email === "admin");
+  if (!isAdmin.value) {
+    return navigateTo("/login");
+  }
+});

apps/ui/pages/account.vue

@@ -37,15 +37,17 @@ async function signout() {
           type="primary"
           size="medium"
           @click="signout"
-          >Sign out</Button
         >
+          Sign out
+        </Button>
         <Button
           v-else
           type="primary"
           size="medium"
           @click="navigateTo('/login')"
-          >Sign in</Button
         >
+          Sign in
+        </Button>
       </div>
 
       <div class="mt-3">{{ errorMsg }}</div>

apps/ui/pages/admin.vue

@@ -0,0 +1,45 @@
+<template>
+  <PageHeader title="Admin Tools" />
+  <Container class="flex flex-col items-center">
+    <ContentBlock class="w-full mt-3" title="User management">
+      <h2>User List</h2>
+      <Table>
+        <template #head>
+          <TableHeadRow>
+            <TableHead>name</TableHead>
+            <TableHead>description</TableHead>
+          </TableHeadRow>
+        </template>
+        <template #body>
+          <TableRow v-for="user in users">
+            <TableCell>{{ user.userName }}</TableCell>
+            <TableCell>{{ user }}</TableCell>
+          </TableRow>
+        </template>
+      </Table>
+    </ContentBlock>
+  </Container>
+</template>
+
+<script lang="ts">
+import { request } from "graphql-request";
+definePageMeta({
+  middleware: "admin-only",
+});
+
+const users = ref<Record<string, any>[]>([]);
+const userCount = ref(0);
+
+getUsers();
+
+async function getUsers() {
+  const result: any = await request(
+    "graphql",
+    `{_admin{users{email},userCount}}`
+  ).catch((error) => {
+    console.log("Error loading users: ", error);
+  });
+  users.value = result?._admin?.users || [];
+  userCount.value = result?._admin?.userCount ?? 0;
+}
+</script>