CSS tidy

consolidate our style sheets
resolve style conflicts
use primevue defaults where possible
make semi-responsive

app/app.ts

@@ -6,6 +6,7 @@ import { join } from 'path';
 import Problem from 'api-problem';
 import querystring from 'querystring';
 
+import { name as appName, version as appVersion } from './package.json';
 import { getLogger, httpLogger } from './src/components/log';
 import { getGitRevision, readIdpList } from './src/components/utils';
 
@@ -64,9 +65,9 @@ appRouter.get('/api', (_req: Request, res: Response): void => {
     res.status(200).json({
       app: {
         gitRev: state.gitRev,
-        name: process.env.npm_package_name,
+        name: appName,
         nodeVersion: process.version,
-        version: process.env.npm_package_version
+        version: appVersion
       },
       endpoints: ['/api/v1'],
       versions: [1]
@@ -91,7 +92,7 @@ app.use((err: Problem, _req: Request, res: Response, _next: () => void): void =>
     err.send(res, null);
   } else {
     new Problem(500, 'Server Error', {
-      detail: (err.message) ? err.message : err
+      detail: err.message ? err.message : err
     }).send(res);
   }
 });

app/tsconfig.json

@@ -32,7 +32,7 @@
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    "resolveJsonModule": true, /* Enable importing .json files. */
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
     /* JavaScript Support */
     // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */

frontend/package.json

@@ -36,7 +36,7 @@
     "pinia-plugin-persistedstate": "^3.2.0",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primevue": "~3.34.1",
+    "primevue": "^3.40.1",
     "qrcode.vue": "^3.4.1",
     "vee-validate": "^4.11.8",
     "vue": "^3.3.7",

frontend/src/App.vue

@@ -44,15 +44,28 @@ onErrorCaptured((e: Error) => {
 </script>
 
 <template>
-  <ConfirmDialog />
-  <ProgressLoader v-if="getIsLoading" />
-  <Toast />
-  <AppLayout>
-    <template #nav>
-      <Navbar />
-    </template>
-    <template #main>
-      <RouterView v-if="ready" />
-    </template>
-  </AppLayout>
+  <div class="container">
+    <ConfirmDialog />
+    <ProgressLoader v-if="getIsLoading" />
+    <Toast />
+
+    <AppLayout>
+      <template #nav>
+        <Navbar />
+      </template>
+      <template #main>
+        <RouterView v-if="ready" />
+      </template>
+    </AppLayout>
+  </div>
 </template>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  width: 100%;
+}
+</style>