Show new OpenID credentials in a separate dialog

dashboard/src/views/UserDirectoryOpenIdProviderView.vue

@@ -5,8 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
-import { Button, Menu, Dialog, TableView, FormGroup, TextInput, InputGroup, InputDialog } from '@cloudron/pankow';
-import { copyToClipboard } from '@cloudron/pankow/utils';
+import { Button, ClipboardButton, Menu, Dialog, TableView, FormGroup, TextInput, InputGroup, InputDialog } from '@cloudron/pankow';
 import Section from '../components/Section.vue';
 import DashboardModel from '../models/DashboardModel.js';
 import UserDirectoryModel from '../models/UserDirectoryModel.js';
@@ -39,6 +38,7 @@ function onActionMenu(client, event) {
 
 const inputDialog = useTemplateRef('inputDialog');
 const editDialog = useTemplateRef('editDialog');
+const newSetDialog = useTemplateRef('newSetDialog');
 
 const clients = ref([]);
 const discoveryUrl = ref('');
@@ -105,7 +105,11 @@ async function onSubmit() {
   submitBusy.value = false;
 
   // reopen to show the new client credentials
-  if (client) onEdit(client);
+  if (client) {
+    clientId.value = client.id;
+    clientSecret.value = client.secret;
+    newSetDialog.value.open();
+  }
 }
 
 async function onRemove(client) {
@@ -129,11 +133,6 @@ async function refresh() {
   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);
@@ -149,6 +148,31 @@ onMounted(async () => {
   <div class="content">
     <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
+
+    <Dialog ref="newSetDialog"
+      :reject-label="$t('main.dialog.close')"
+    >
+      <div>
+        <!-- TODO translate -->
+        <div>New client credentials for <b>{{ clientName }}</b></div>
+        <FormGroup>
+          <label for="clientIdInput">{{ $t('oidc.client.id') }}</label>
+          <InputGroup>
+            <TextInput id="clientIdInput" v-model="clientId" readonly style="flex-grow: 1;"/>
+            <ClipboardButton :value="clientId" />
+          </InputGroup>
+        </FormGroup>
+
+        <FormGroup>
+          <label for="clientSecretInput">{{ $t('oidc.client.secret') }}</label>
+          <InputGroup>
+            <TextInput id="clientSecretInput" v-model="clientSecret" readonly style="flex-grow: 1;"/>
+            <ClipboardButton :value="clientSecret" />
+          </InputGroup>
+        </FormGroup>
+      </div>
+    </Dialog>
+
     <Dialog ref="editDialog"
       :title="clientId ? $t('oidc.editClientDialog.title', { client: clientName }) : $t('oidc.newClientDialog.title')"
       :confirm-active="isValid"
@@ -172,7 +196,7 @@ onMounted(async () => {
           <label for="clientIdInput">{{ $t('oidc.client.id') }}</label>
           <InputGroup>
             <TextInput id="clientIdInput" v-model="clientId" readonly style="flex-grow: 1;"/>
-            <Button tool @click="onCopyToClipboard(clientId)" icon="fa fa-clipboard" />
+            <ClipboardButton :value="clientId" />
           </InputGroup>
         </FormGroup>
 
@@ -180,7 +204,7 @@ onMounted(async () => {
           <label for="clientSecretInput">{{ $t('oidc.client.secret') }}</label>
           <InputGroup>
             <TextInput id="clientSecretInput" v-model="clientSecret" readonly style="flex-grow: 1;"/>
-            <Button tool @click="onCopyToClipboard(clientSecret)" icon="fa fa-clipboard" />
+            <ClipboardButton :value="clientSecret" />
           </InputGroup>
         </FormGroup>
 
@@ -206,7 +230,7 @@ onMounted(async () => {
         <label for="discoverUrlInput">{{ $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></label>
         <InputGroup>
           <TextInput id="discoveryUrlInput" v-model="discoveryUrl" readonly style="flex-grow: 1;"/>
-          <Button tool @click="onCopyToClipboard(discoveryUrl)" icon="fa fa-clipboard" />
+          <ClipboardButton :value="discoveryUrl" />
         </InputGroup>
       </FormGroup>
     </Section>