pages/settings.vue

Vue page component for admin settings, handling multiple configuration tabs and validation.

<!--
  Source: https://github.com/hoppscotch/hoppscotch | License: MIT | Copyright 2022
  Provided via justclaw.it.com; keep this notice with the code.
-->
<template>
  <div class="flex flex-col">
    <h1 class="text-lg font-bold text-secondaryDark">
      {{ t('settings.settings') }}
    </h1>
  </div>

  <div
    v-if="fetchingInfraConfigs || fetchingAllowedAuthProviders"
    class="flex justify-center"
  >
    <HoppSmartSpinner />
  </div>

  <div v-else-if="infraConfigsError || allowedAuthProvidersError">
    {{ t('configs.load_error') }}
  </div>

  <div v-else-if="workingConfigs" class="flex flex-col py-8">
    <HoppSmartTabs v-model="selectedOptionTab" render-inactive-tabs>
      <HoppSmartTab
        id="auth"
        :label="t('configs.tabs.auth')"
        :indicator="tabHasError(

... (truncated -- full source via MCP)