Mostly add OpenIdClients UI

dashboard/src/components/ExternalLdap.vue

@@ -387,24 +387,3 @@ onMounted(async () => {
     </Section>
   </div>
 </template>
-
-<style scoped>
-
-.info-row {
-  display: flex;
-}
-
-.info-label {
-  font-weight: bold;
-  flex-basis: 50%;
-}
-
-.info-value {
-  flex-basis: 50%;
-  text-align: right;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  text-wrap: nowrap;
-}
-
-</style>

dashboard/src/components/OpenIdClients.vue

@@ -0,0 +1,104 @@
+<script setup>
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted, useTemplateRef } from 'vue';
+import { Button, TableView, InputDialog } from 'pankow';
+import Section from './Section.vue';
+import DashboardModel from '../models/DashboardModel.js';
+import UserDirectoryModel from '../models/UserDirectoryModel.js';
+
+const dashboardModel = DashboardModel.create(API_ORIGIN, localStorage.token);
+const userDirectoryModel = UserDirectoryModel.create(API_ORIGIN, localStorage.token);
+
+const columns = {
+  name: { label: 'Name', sort: true },
+  actions: {}
+};
+
+const inputDialog = useTemplateRef('inputDialog');
+
+const clients = ref([]);
+const adminFqdn = ref('');
+
+// TODO below
+async function onAdd() {
+  console.log('add')
+}
+
+async function onEdit(client) {
+  console.log('edit', client)
+}
+
+async function onRemove(client) {
+  const yes = await inputDialog.value.confirm({
+    message: t('oidc.deleteClientDialog.title', { client: client.name }) + ' ' + t('oidc.deleteClientDialog.description'),
+    confirmStyle: 'danger',
+    confirmLabel: t('main.dialog.delete'),
+    rejectLabel: t('main.dialog.cancel')
+  });
+
+  if (!yes) return;
+
+  await userDirectoryModel.removeOpenIdClient(client.id);
+  await refresh();
+}
+
+async function refresh() {
+  const [error, result] = await userDirectoryModel.getOpenIdClients();
+  if (error) return console.error(error);
+  clients.value = result;
+}
+
+onMounted(async () => {
+  const config = await dashboardModel.getConfig();
+  adminFqdn.value = config.adminFqdn;
+
+  await refresh();
+});
+
+</script>
+
+<template>
+  <div>
+    <InputDialog ref="inputDialog" />
+
+    <Section :title="$t('oidc.title')">
+      <div class="info-row">
+        <div class="info-label">{{ $t('oidc.env.discoveryUrl') }} <sup><a href="https://docs.cloudron.io/user-directory/#endpoints" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
+        <div class="info-value">https://{{ adminFqdn }}/.well-known/openid-configuration</div>
+      </div>
+
+      <h4 class="header-with-button">
+        {{ $t('oidc.clients.title') }}
+        <Button @click="onAdd()" icon="fa-solid fa-plus">{{ $t('oidc.clients.newClient') }}</Button>
+      </h4>
+
+      <TableView :columns="columns" :model="clients">
+        <template #actions="slotProps">
+          <div class="table-actions">
+            <Button tool secondary outline small icon="fa-solid fa-pencil-alt" @click="onEdit(slotProps)"></Button>
+            <Button tool danger outline small icon="fa-solid fa-trash-alt" @click="onRemove(slotProps)"></Button>
+          </div>
+        </template>
+      </TableView>
+    </Section>
+  </div>
+</template>
+
+<style scoped>
+
+.header-with-button {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+  gap: 5px;
+}
+
+</style>

dashboard/src/components/UserDirectoryView.vue

@@ -7,6 +7,7 @@ import { Button, Checkbox } from 'pankow';
 import Section from './Section.vue';
 import ExternalLdap from './ExternalLdap.vue';
 import ExposedLdap from './ExposedLdap.vue';
+import OpenIdClients from './OpenIdClients.vue';
 import UserDirectoryModel from '../models/UserDirectoryModel.js';
 
 const userDirectoryModel = UserDirectoryModel.create(API_ORIGIN, localStorage.token);
@@ -55,6 +56,6 @@ onMounted(async () => {
 
     <ExternalLdap />
     <ExposedLdap />
-    <!-- TODO oidc clients -->
+    <OpenIdClients />
   </div>
 </template>