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

<script setup>

import { ref, onMounted, inject } from 'vue';
import { Switch } from 'pankow';
import Section from '../components/Section.vue';
import SettingsItem from '../components/SettingsItem.vue';
import ExternalLdap from '../components/ExternalLdap.vue';
import UserDirectoryModel from '../models/UserDirectoryModel.js';

const features = inject('features');

const userDirectoryModel = UserDirectoryModel.create();

const busy = ref(false);
const editableUserProfiles = ref(false);
const mandatory2FA = ref(false);

async function onToggleMandatory2FA(value) {
  busy.value = true;

  const [error] = await userDirectoryModel.setGlobalProfileConfig({ mandatory2FA: value, lockUserProfiles: !editableUserProfiles.value });
  if (error) {
    mandatory2FA.value = !value;
    console.error(error);
  }

  busy.value = false;
}

async function onToggleEditableUserProfiles(value) {
  busy.value = true;

  const [error] = await userDirectoryModel.setGlobalProfileConfig({ mandatory2FA: mandatory2FA.value, lockUserProfiles: !value });
  if (error) {
    editableUserProfiles.value = !value;
    console.error(error);
  }

  busy.value = false;
}

onMounted(async () => {
  const [error, result] = await userDirectoryModel.getGlobalProfileConfig();
  if (error) return console.error(error);

  editableUserProfiles.value = !result.lockUserProfiles;
  mandatory2FA.value = result.mandatory2FA;
});

</script>

<template>
  <div class="content">
    <Section :title="$t('users.title')" :padding="false" :title-badge="!features.profileConfig ? 'Upgrade' : ''">
      <SettingsItem>
        <div>{{ $t('users.settings.allowProfileEditCheckbox') }} <sup><a href="https://docs.cloudron.io/user-directory/#lock-profile" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
        <Switch v-model="editableUserProfiles" @change="onToggleEditableUserProfiles" :disabled="busy || !features.profileConfig"/>
      </SettingsItem>

      <SettingsItem>
        <div>{{ $t('users.settings.require2FACheckbox') }}</div>
        <Switch v-model="mandatory2FA" @change="onToggleMandatory2FA" :disabled="busy || !features.profileConfig"/>
      </SettingsItem>
    </Section>

    <ExternalLdap />
  </div>
</template>