Split user directory views

2025-04-21 12:48:22 +02:00
parent 1d5bca7962
commit 3ec502d862
4 changed files with 29 additions and 16 deletions
@@ -0,0 +1,187 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted, useTemplateRef, computed } from 'vue';
+import { Button, Dialog, TableView, FormGroup, TextInput, InputDialog } from 'pankow';
+import { copyToClipboard } from 'pankow/utils';
+import Section from '../components/Section.vue';
+import DashboardModel from '../models/DashboardModel.js';
+import UserDirectoryModel from '../models/UserDirectoryModel.js';
+
+const dashboardModel = DashboardModel.create();
+const userDirectoryModel = UserDirectoryModel.create();
+
+const columns = {
+  name: { label: 'Name', sort: true },
+  actions: {}
+};
+
+const inputDialog = useTemplateRef('inputDialog');
+const editDialog = useTemplateRef('editDialog');
+
+const clients = ref([]);
+const adminFqdn = ref('');
+
+// edit or add
+const submitBusy = ref(false);
+const submitError = ref('');
+const clientId = ref('');
+const clientSecret = ref('');
+const clientName = ref('');
+const clientLoginRedirectUri = ref('');
+const clientTokenSignatureAlgorithm = ref('RS256');
+
+const isValid = computed(() => {
+  if (!clientName.value) return false;
+  if (!clientLoginRedirectUri.value) return false;
+  if (!clientTokenSignatureAlgorithm.value) return false;
+
+  return true;
+});
+
+async function onAdd() {
+  submitBusy.value = false;
+  clientId.value = '';
+  clientSecret.value = '';
+  clientName.value = '';
+  clientLoginRedirectUri.value = '';
+  clientTokenSignatureAlgorithm.value = 'RS256';
+
+  editDialog.value.open();
+}
+
+async function onEdit(client) {
+  submitBusy.value = false;
+  clientId.value = client.id;
+  clientSecret.value = client.secret;
+  clientName.value = client.name;
+  clientLoginRedirectUri.value = client.loginRedirectUri;
+  clientTokenSignatureAlgorithm.value = client.tokenSignatureAlgorithm;
+
+  editDialog.value.open();
+}
+
+async function onSubmit() {
+  if (!isValid.value) return;
+
+  submitBusy.value = true;
+  const [error] = await userDirectoryModel.updateOpenIdClient(clientId.value, clientName.value, clientLoginRedirectUri.value, clientTokenSignatureAlgorithm.value);
+  if (error) {
+    submitBusy.value = false;
+    submitError.value = error.body ? error.body.message : 'Internal error';
+    return console.error(error);
+  }
+
+  await refresh();
+  editDialog.value.close();
+
+  submitBusy.value = false;
+}
+
+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;
+}
+
+function onCopyToClipboard(value) {
+  copyToClipboard(value);
+  window.pankow.notify({ type: 'success', text: 'Copied to clipboard!' });
+}
+
+onMounted(async () => {
+  const [error, result] = await dashboardModel.config();
+  if (error) return console.error(error);
+
+  adminFqdn.value = result.adminFqdn;
+
+  await refresh();
+});
+
+</script>
+
+<template>
+  <div class="content">
+    <InputDialog ref="inputDialog" />
+    <Dialog ref="editDialog"
+      :title="clientId ? $t('oidc.editClientDialog.title', { client: clientName }) : $t('oidc.newClientDialog.title')"
+      :confirm-active="isValid"
+      :confirm-busy="submitBusy"
+      :confirm-label="clientId ? $t('main.dialog.save') : $t('oidc.newClientDialog.createAction')"
+      :reject-label="$t('main.dialog.close')"
+       reject-style="secondary"
+       @confirm="onSubmit()"
+    >
+      <form novalidate @submit.prevent="onSubmit()" autocomplete="off">
+        <input style="display: none" type="submit" :disabled="!isValid"/>
+
+        <p class="text-danger" ng-show="submitError">{{ submitError }}</p>
+
+        <FormGroup v-show="clientId">
+          <label for="clientIdInput">{{ $t('oidc.client.id') }}</label>
+          <TextInput id="clientIdInput" v-model="clientId" @click="onCopyToClipboard(clientId)" style="cursor: copy" readonly/>
+        </FormGroup>
+
+        <FormGroup v-show="clientSecret">
+          <label for="clientSecretInput">{{ $t('oidc.client.secret') }}</label>
+          <TextInput id="clientSecretInput" v-model="clientSecret" @click="onCopyToClipboard(clientSecret)" style="cursor: copy" readonly/>
+        </FormGroup>
+
+        <FormGroup>
+          <label for="clientNameInput">{{ $t('oidc.client.name') }}</label>
+          <TextInput id="clientNameInput" v-model="clientName" required/>
+        </FormGroup>
+
+        <FormGroup>
+          <label for="clientLoginRedirectUriInput">{{ $t('oidc.client.loginRedirectUri') }}</label>
+          <TextInput id="clientLoginRedirectUriInput" v-model="clientLoginRedirectUri" required/>
+        </FormGroup>
+
+        <FormGroup>
+          <label class="control-label">{{ $t('oidc.client.signingAlgorithm') }}</label>
+          <select v-model="clientTokenSignatureAlgorithm">
+            <option value="RS256">RS256</option>
+            <option value="EdDSA">EdDSA</option>
+          </select>
+        </FormGroup>
+      </form>
+    </Dialog>
+
+    <Section :title="$t('oidc.title')">
+      <template #header-buttons>
+        <Button @click="onAdd()" icon="fa-solid fa-plus">{{ $t('oidc.clients.newClient') }}</Button>
+      </template>
+
+      <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>
+
+      <TableView :columns="columns" :model="clients" @row-click="onEdit">
+        <template #actions="client">
+          <div class="table-actions">
+            <Button tool secondary small icon="fa-solid fa-pencil-alt" @click.stop="onEdit(client)"></Button>
+            <Button tool danger small icon="fa-solid fa-trash-alt" @click.stop="onRemove(client)"></Button>
+          </div>
+        </template>
+      </TableView>
+    </Section>
+  </div>
+</template>