feat: new settings UI (#578)

* feat: settings page * feat: sysem properties dialog
obiba · Jan 4, 2025 · 3aa94f8 · 3aa94f8
1 parent 3223da9
commit 3aa94f8
Show file tree

Hide file tree

Showing 12 changed files with 553 additions and 93 deletions.
diff --git a/agate-ui/src/components/ApplicationDialog.vue b/agate-ui/src/components/ApplicationDialog.vue
@@ -93,7 +93,8 @@
               size="sm"
               :label="t('application.add_scope')"
               @click="onAddScope"
-              class="q-mt-md" />
+              class="q-mt-md"
+            />
           </div>
           <div class="q-mb-md">
             <div>{{ t('application.realms_groups') }}</div>
@@ -108,7 +109,8 @@
                       :options="realmOptions"
                       emit-value
                       map-options
-                      dense />
+                      dense
+                    />
                     <q-select
                       v-model="realmGroup.groups"
                       :label="t('groups')"
@@ -118,11 +120,19 @@
                       map-options
                       use-chips
                       dense
-                      style="min-width: 200px;" />
+                      style="min-width: 200px"
+                    />
                   </div>
                 </q-item-section>
                 <q-item-section side>
-                  <q-btn flat dense icon="delete" size="sm" color="negative" @click="removeRealmGroups(realmGroup.realm)" />
+                  <q-btn
+                    flat
+                    dense
+                    icon="delete"
+                    size="sm"
+                    color="negative"
+                    @click="removeRealmGroups(realmGroup.realm)"
+                  />
                 </q-item-section>
               </q-item>
             </q-list>
@@ -133,7 +143,8 @@
               size="sm"
               :label="t('application.add_realm_groups')"
               @click="onAddRealmGroups"
-              class="q-mt-md" />
+              class="q-mt-md"
+            />
           </div>
         </q-form>
       </q-card-section>
@@ -172,8 +183,8 @@ const editMode = ref(false);
 const key = ref('');
 
 const groupOptions = computed(() => groupStore.groups?.map((group) => ({ label: group.name, value: group.id })) ?? []);
-const realmOptions = computed(() => 
-  realmStore.realms?.map((realm) => ({ label: realm.name, value: realm.id || '' })) ?? []
+const realmOptions = computed(
+  () => realmStore.realms?.map((realm) => ({ label: realm.name, value: realm.id || '' })) ?? [],
 );
 const isValid = computed(
   () =>
@@ -258,7 +269,9 @@ function onAddRealmGroups() {
   if (!selected.value.realmGroups) {
     selected.value.realmGroups = [];
   }
-  const realm = realmOptions.value.find((rlm) => !selected.value.realmGroups.map((rlmGrps) => rlmGrps.realm).includes(rlm.value))?.value || '';
+  const realm =
+    realmOptions.value.find((rlm) => !selected.value.realmGroups.map((rlmGrps) => rlmGrps.realm).includes(rlm.value))
+      ?.value || '';
   if (!realm) {
     return;
   }

diff --git a/agate-ui/src/components/ApplicationsTable.vue b/agate-ui/src/components/ApplicationsTable.vue
@@ -143,5 +143,4 @@ function onAdd() {
 function onSaved() {
   refresh();
 }
-
 </script>
diff --git a/agate-ui/src/components/MainDrawer.vue b/agate-ui/src/components/MainDrawer.vue
@@ -53,6 +53,14 @@
           <q-item-label>{{ t('realms') }}</q-item-label>
         </q-item-section>
       </q-item>
+      <q-item :to="`/tickets`">
+        <q-item-section avatar>
+          <q-icon name="local_activity" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>{{ t('tickets') }}</q-item-label>
+        </q-item-section>
+      </q-item>
       <q-item v-if="authStore.isAdministrator" :to="`/settings`">
         <q-item-section avatar>
           <q-icon name="settings" />

diff --git a/agate-ui/src/components/SystemProperties.vue b/agate-ui/src/components/SystemProperties.vue
@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <q-btn @click="onEdit" label="Edit" icon="edit" size="sm" color="primary" class="q-mb-md" />
+    <div class="row q-col-gutter-md">
+      <div class="col">
+        <q-list separator class="fields-list">
+          <q-item v-ripple>
+            <q-item-section>
+              <q-item-label class="text-overline">{{ t('name') }}</q-item-label>
+              <q-item-label caption>{{ t('system.name_hint') }}</q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              {{ config.name }}
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-overline">{{ t('system.public_url') }}</q-item-label>
+              <q-item-label caption>{{ t('system.public_url_hint') }}</q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              <a v-if="config.publicUrl" :href="config.publicUrl" target="_blank">{{ config.publicUrl }}</a>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-overline">{{ t('system.portal_url') }}</q-item-label>
+              <q-item-label caption>{{ t('system.portal_url_hint') }}</q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              <a v-if="config.portalUrl" :href="config.portalUrl" target="_blank">{{ config.portalUrl }}</a>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-overline">{{ t('system.sso_domain') }}</q-item-label>
+              <q-item-label caption>{{ t('system.sso_domain_hint') }}</q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              {{ config.domain }}
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-overline">{{ t('system.short_timeout') }}</q-item-label>
+              <q-item-label caption>{{ t('system.short_timeout_hint') }}</q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              {{ config.shortTimeout }}
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-overline">{{ t('system.long_timeout') }}</q-item-label>
+              <q-item-label caption>{{ t('system.long_timeout_hint') }}</q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              {{ config.longTimeout }}
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-overline">{{ t('system.inactive_timeout') }}</q-item-label>
+              <q-item-label caption>{{ t('system.inactive_timeout_hint') }}</q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              {{ config.inactiveTimeout }}
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+      <div class="col">
+        <q-list separator class="fields-list">
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-overline">{{ t('system.languages') }}</q-item-label>
+              <q-item-label caption>{{ t('system.languages_hint') }}</q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              {{ config.languages?.join(', ') }}
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-overline">{{ t('system.signup_enabled') }}</q-item-label>
+              <q-item-label caption>{{ t('system.signup_enabled_hint') }}</q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              <q-icon :name="config.joinPageEnabled ? 'check_box' : 'check_box_outline_blank'" size="sm" dense />
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-overline">{{ t('system.signup_username') }}</q-item-label>
+              <q-item-label caption>{{ t('system.signup_username_hint') }}</q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              <q-icon :name="config.joinWithUsername ? 'check_box' : 'check_box_outline_blank'" size="sm" dense />
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-overline">{{ t('system.signup_whitelist') }}</q-item-label>
+              <q-item-label caption>{{ t('system.signup_whitelist_hint') }}</q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              {{ config.joinWhitelist }}
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-overline">{{ t('system.signup_blacklist') }}</q-item-label>
+              <q-item-label caption>{{ t('system.signup_blacklist_hint') }}</q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              {{ config.joinBlacklist }}
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-overline">{{ t('system.otp_strategy') }}</q-item-label>
+              <q-item-label caption>{{ t('system.otp_strategy_hint') }}</q-item-label>
+            </q-item-section>
+            <q-item-section avatar>
+              {{ t(`system.otp_strategies.${config.enforced2FAStrategy}`) }}
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+    </div>
+    <system-properties-dialog v-model="showDialog" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SystemPropertiesDialog from 'src/components/SystemPropertiesDialog.vue';
+
+const systemStore = useSystemStore();
+const { t } = useI18n();
+
+const showDialog = ref(false);
+
+const config = computed(() => systemStore.configuration);
+
+onMounted(() => {
+  systemStore.init();
+});
+
+const onEdit = () => {
+  showDialog.value = true;
+};
+</script>