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 } from 'vue';
import { Button, ClipboardButton, SingleSelect, Dialog, TableView, FormGroup, TextInput, InputGroup, InputDialog } from '@cloudron/pankow';
import ActionBar from '../components/ActionBar.vue';
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: {}
};

function createActionMenu(client) {
  return [{
    icon: 'fa-solid fa-pencil-alt',
    label: t('main.action.edit'),
    quickAction: true,
    action: onEdit.bind(null, client),
  }, {
    icon: 'fa-solid fa-trash-alt',
    label: t('main.action.remove'),
    quickAction: true,
    action: onRemove.bind(null, client),
  }];
}

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 form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
  isFormValid.value = form.value ? form.value.checkValidity() : false;
}

async function onAdd() {
  submitBusy.value = false;
  clientId.value = '';
  clientSecret.value = '';
  clientName.value = '';
  clientLoginRedirectUri.value = '';
  clientTokenSignatureAlgorithm.value = 'RS256';

  editDialog.value.open();
  setTimeout(checkValidity, 100); // update state of the confirm button
}

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();
  setTimeout(checkValidity, 100); // update state of the confirm button
}

async function onSubmit() {
  if (!form.value.reportValidity()) 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'),
    message: t('oidc.deleteClientDialog.description', { clientName: client.name }),
    confirmStyle: 'danger',
    confirmLabel: t('main.dialog.delete'),
    rejectLabel: t('main.dialog.cancel'),
    rejectStyle: 'secondary'
  });

  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">
    <InputDialog ref="inputDialog" />

    <Dialog ref="newSetDialog"
      :title="$t('oidc.clientCredentials.title')"
      :reject-label="$t('main.dialog.close')"
      reject-style="secondary"
    >
      <div>
        <div>{{ $t('oidc.clientCredentials.description', { clientName: clientName }) }}</div>
        <br/>
        <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') : $t('oidc.newClientDialog.title')"
      :confirm-active="!submitBusy && isFormValid"
      :confirm-busy="submitBusy"
      :confirm-label="clientId ? $t('main.dialog.save') : $t('oidc.newClientDialog.createAction')"
      :reject-label="$t('main.dialog.cancel')"
       reject-style="secondary"
       @confirm="onSubmit()"
    >
      <form @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
        <input style="display: none" type="submit" />

        <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/>
          <small class="helper-text">{{ $t('oidc.client.loginRedirectUriPlaceholder') }}</small>
        </FormGroup>

        <FormGroup>
          <label class="control-label">{{ $t('oidc.client.signingAlgorithm') }}</label>
          <SingleSelect v-model="clientTokenSignatureAlgorithm" :options="signatureAlgorithms" option-key="value" option-label="name" required />
        </FormGroup>
      </form>
    </Dialog>

    <Section title="OpenID">
      <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">
          <ActionBar :actions="createActionMenu(client)"/>
        </template>
      </TableView>
    </Section>
  </div>
</template>