cloudron-box/dashboard/src/components/OpenIdClients.vue

<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 './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>
    <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>

      <TableView :columns="columns" :model="clients" @row-click="onEdit">
        <template #actions="slotProps">
          <div class="table-actions">
            <Button tool secondary small icon="fa-solid fa-pencil-alt" @click.stop="onEdit(slotProps)"></Button>
            <Button tool danger small icon="fa-solid fa-trash-alt" @click.stop="onRemove(slotProps)"></Button>
          </div>
        </template>
      </TableView>
    </Section>
  </div>
</template>