cloudron-box/dashboard/src/views/OpenIdView.vue

<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import { ref, onMounted, useTemplateRef, computed } from 'vue';
import { Button, ClipboardButton, SingleSelect, 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';

const dashboardModel = DashboardModel.create();
const userDirectoryModel = UserDirectoryModel.create();

const columns = {
  name: { label: 'Name', sort: true },
  actions: {}
};

const actionMenuModel = ref([]);
const actionMenuElement = useTemplateRef('actionMenuElement');
function onActionMenu(client, event) {
  actionMenuModel.value = [{
    icon: 'fa-solid fa-pencil-alt',
    label: t('main.action.edit'),
    action: onEdit.bind(null, client),
  }, {
    separator: true,
  }, {
    icon: 'fa-solid fa-trash-alt',
    label: t('main.action.remove'),
    action: onRemove.bind(null, client),
  }];

  actionMenuElement.value.open(event, event.currentTarget);
}

const inputDialog = useTemplateRef('inputDialog');
const editDialog = useTemplateRef('editDialog');
const newSetDialog = useTemplateRef('newSetDialog');

const clients = ref([]);
const discoveryUrl = ref('');

// edit or add
const submitBusy = ref(false);
const submitError = ref('');
const clientId = ref('');
const clientSecret = ref('');
const newClientId = ref('');
const newClientSecret = ref('');
const clientName = ref('');
const clientLoginRedirectUri = ref('');
const clientTokenSignatureAlgorithm = ref('RS256');

const signatureAlgorithms = [
  { name: 'RS256', value: 'RS256' },
  { name: 'EdDSA', value: 'EdDSA' },
];

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;
  let error, client;
  if (clientId.value) { // edit
    [error] = await userDirectoryModel.updateOpenIdClient(clientId.value, clientName.value, clientLoginRedirectUri.value, clientTokenSignatureAlgorithm.value);
  } else { // add
    [error, client] = await userDirectoryModel.addOpenIdClient(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;

  // reopen to show the new client credentials
  if (client) {
    newClientId.value = client.id;
    newClientSecret.value = client.secret;
    newSetDialog.value.open();
  }
}

async function onRemove(client) {
  const yes = await inputDialog.value.confirm({
    title: t('oidc.deleteClientDialog.title', { client: client.name }),
    message: 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 [error, result] = await dashboardModel.config();
  if (error) return console.error(error);

  discoveryUrl.value = `https://${result.adminFqdn}/.well-known/openid-configuration`;

  await refresh();
});

</script>

<template>
  <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="newClientId" readonly style="flex-grow: 1;"/>
            <ClipboardButton :value="newClientId" />
          </InputGroup>
        </FormGroup>

        <FormGroup>
          <label for="clientSecretInput">{{ $t('oidc.client.secret') }}</label>
          <InputGroup>
            <TextInput id="clientSecretInput" v-model="newClientSecret" readonly style="flex-grow: 1;"/>
            <ClipboardButton :value="newClientSecret" />
          </InputGroup>
        </FormGroup>
      </div>
    </Dialog>

    <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"/>

        <div class="error-label" v-if="submitError">{{ submitError }}</div>

        <FormGroup>
          <label for="clientNameInput">{{ $t('oidc.client.name') }}</label>
          <TextInput id="clientNameInput" v-model="clientName" required/>
        </FormGroup>

        <FormGroup v-show="clientId">
          <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 v-show="clientSecret">
          <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>

        <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>
          <SingleSelect v-model="clientTokenSignatureAlgorithm" :options="signatureAlgorithms" option-key="value" option-label="name" />
        </FormGroup>
      </form>
    </Dialog>

    <Section :title="$t('oidc.title')">
      <div>{{ $t('oidc.description') }}</div>
      <br/>

      <FormGroup>
        <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;"/>
          <ClipboardButton :value="discoveryUrl" />
        </InputGroup>
      </FormGroup>
    </Section>

    <Section :title="$t('oidc.clients.title')">
      <template #header-buttons>
        <Button @click="onAdd()">{{ $t('main.action.add') }}</Button>
      </template>

      <TableView :columns="columns" :model="clients" :placeholder="$t('oidc.clients.empty')">
        <template #actions="client">
          <div style="text-align: right;">
            <Button tool plain secondary @click.capture="onActionMenu(client, $event)" icon="fa-solid fa-ellipsis" />
          </div>
        </template>
      </TableView>
    </Section>
  </div>
</template>