Add edit/new oidc client dialog

dashboard/src/components/OpenIdClients.vue

@@ -6,8 +6,9 @@ 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 { ref, onMounted, useTemplateRef, computed } from 'vue';
+import { Button, Dialog, TableView, FormGroup, TextInput, InputDialog } from 'pankow';
+import { copyToClipboard } from 'pankow/utils';
 import Section from './Section.vue';
 import DashboardModel from '../models/DashboardModel.js';
 import UserDirectoryModel from '../models/UserDirectoryModel.js';
@@ -21,17 +22,65 @@ const columns = {
 };
 
 const inputDialog = useTemplateRef('inputDialog');
+const editDialog = useTemplateRef('editDialog');
 
 const clients = ref([]);
 const adminFqdn = ref('');
 
-// TODO below
+// 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() {
-  console.log('add')
+  submitBusy.value = false;
+  clientId.value = '';
+  clientSecret.value = '';
+  clientName.value = '';
+  clientLoginRedirectUri.value = '';
+  clientTokenSignatureAlgorithm.value = 'RS256';
+
+  editDialog.value.open();
 }
 
 async function onEdit(client) {
-  console.log('edit', 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) {
@@ -54,6 +103,11 @@ async function refresh() {
   clients.value = result;
 }
 
+function onCopyToClipboard(value) {
+  copyToClipboard(value);
+  window.pankow.notify({ type: 'success', text: 'Copied to clipboard!' });
+}
+
 onMounted(async () => {
   const config = await dashboardModel.getConfig();
   adminFqdn.value = config.adminFqdn;
@@ -66,39 +120,68 @@ onMounted(async () => {
 <template>
   <div>
     <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" autofocus 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>
 
-      <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">
+      <TableView :columns="columns" :model="clients" @row-click="onEdit">
         <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>
+            <Button tool secondary outline small icon="fa-solid fa-pencil-alt" @click.stop="onEdit(slotProps)"></Button>
+            <Button tool danger outline small icon="fa-solid fa-trash-alt" @click.stop="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>