mirrors/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-02-15 17:30:04 +00:00
Code Activity

feat: add info box to app settings if UI config is disabled

Browse Source
This commit is contained in:
Elias Schneider
2025-09-07 19:49:07 +02:00
parent 1d7cbc2a4e
commit a1d8538c64
3 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/messages/en.json
View File

@@ -443,5 +443,7 @@
"custom_client_id_description": "Set a custom client ID if this is required by your application. Otherwise, leave it blank to generate a random one.", "custom_client_id_description": "Set a custom client ID if this is required by your application. Otherwise, leave it blank to generate a random one.",
"generated": "Generated", "generated": "Generated",
"administration": "Administration", "administration": "Administration",
"group_rdn_attribute_description": "The attribute used in the groups distinguished name (DN). Recommended value: `cn`" "group_rdn_attribute_description": "The attribute used in the groups distinguished name (DN). Recommended value: `cn`",
"ui_config_disabled_info_title": "UI Configuration Disabled",
"ui_config_disabled_info_description": "The UI configuration is disabled because the application configuration settings are managed through environment variables. Some settings may not be editable."
} }

7
frontend/src/lib/components/ui/alert/alert.svelte
View File

@@ -1,11 +1,12 @@
<script lang="ts" module> <script lang="ts" module>
import { type VariantProps, tv } from 'tailwind-variants'; import { tv, type VariantProps } from 'tailwind-variants';
export const alertVariants = tv({ export const alertVariants = tv({
base: 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', base: 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
variants: { variants: {
variant: { variant: {
default: 'bg-card text-card-foreground', default: 'bg-card text-card-foreground',
info: 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100 [&>svg]:text-blue-900 dark:[&>svg]:text-blue-100',
destructive: destructive:
'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current', 'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current',
warning: warning:
@@ -21,10 +22,10 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from 'svelte/elements';
import { cn, type WithElementRef } from '$lib/utils/style.js'; import { cn, type WithElementRef } from '$lib/utils/style.js';
import { onMount } from 'svelte';
import { LucideX } from '@lucide/svelte'; import { LucideX } from '@lucide/svelte';
import { onMount } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
let { let {
ref = $bindable(null), ref = $bindable(null),

19
frontend/src/routes/settings/admin/application-configuration/+page.svelte
View File

@@ -1,11 +1,19 @@
<script lang="ts"> <script lang="ts">
import CollapsibleCard from '$lib/components/collapsible-card.svelte'; import CollapsibleCard from '$lib/components/collapsible-card.svelte';
import * as Alert from '$lib/components/ui/alert';
import { m } from '$lib/paraglide/messages'; import { m } from '$lib/paraglide/messages';
import AppConfigService from '$lib/services/app-config-service'; import AppConfigService from '$lib/services/app-config-service';
import appConfigStore from '$lib/stores/application-configuration-store'; import appConfigStore from '$lib/stores/application-configuration-store';
import type { AllAppConfig } from '$lib/types/application-configuration'; import type { AllAppConfig } from '$lib/types/application-configuration';
import { axiosErrorToast } from '$lib/utils/error-util'; import { axiosErrorToast } from '$lib/utils/error-util';
import { LucideImage, Mail, SlidersHorizontal, UserSearch, Users } from '@lucide/svelte'; import {
LucideImage,
LucideInfo,
Mail,
SlidersHorizontal,
UserSearch,
Users
} from '@lucide/svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import AppConfigEmailForm from './forms/app-config-email-form.svelte'; import AppConfigEmailForm from './forms/app-config-email-form.svelte';
import AppConfigGeneralForm from './forms/app-config-general-form.svelte'; import AppConfigGeneralForm from './forms/app-config-general-form.svelte';
@@ -58,6 +66,15 @@
<title>{m.application_configuration()}</title> <title>{m.application_configuration()}</title>
</svelte:head> </svelte:head>
{#if $appConfigStore.uiConfigDisabled}
<Alert.Root variant="info">
<LucideInfo class="size-4" />
<Alert.Title>{m.ui_config_disabled_info_title()}</Alert.Title>
<Alert.Description>
{m.ui_config_disabled_info_description()}
</Alert.Description>
</Alert.Root>
{/if}
<div> <div>
<CollapsibleCard <CollapsibleCard
id="application-configuration-general" id="application-configuration-general"