feat(server,web): server config (#4006)

* feat: server config

* chore: open api

* fix: redirect /map to /photos when disabled

web/src/lib/components/admin-page/jobs/jobs-panel.svelte

@@ -4,7 +4,7 @@
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import { AppRoute } from '$lib/constants';
-  import { featureFlags } from '$lib/stores/feature-flags.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
   import { handleError } from '$lib/utils/handle-error';
   import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
   import type { ComponentType } from 'svelte';

web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
+  import { api, SystemConfigMapDto } from '@api';
+  import { isEqual } from 'lodash-es';
+  import { fade } from 'svelte/transition';
+  import SettingButtonsRow from '../setting-buttons-row.svelte';
+  import SettingSwitch from '../setting-switch.svelte';
+  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+
+  export let mapConfig: SystemConfigMapDto; // this is the config that is being edited
+  export let disabled = false;
+
+  let savedConfig: SystemConfigMapDto;
+  let defaultConfig: SystemConfigMapDto;
+
+  async function getConfigs() {
+    [savedConfig, defaultConfig] = await Promise.all([
+      api.systemConfigApi.getConfig().then((res) => res.data.map),
+      api.systemConfigApi.getDefaults().then((res) => res.data.map),
+    ]);
+  }
+
+  async function saveSetting() {
+    try {
+      const { data: current } = await api.systemConfigApi.getConfig();
+      const { data: updated } = await api.systemConfigApi.updateConfig({
+        systemConfigDto: { ...current, map: mapConfig },
+      });
+
+      mapConfig = { ...updated.map };
+      savedConfig = { ...updated.map };
+
+      notificationController.show({ message: 'Settings saved', type: NotificationType.Info });
+    } catch (error) {
+      handleError(error, 'Unable to save settings');
+    }
+  }
+
+  async function reset() {
+    const { data: resetConfig } = await api.systemConfigApi.getConfig();
+
+    mapConfig = { ...resetConfig.map };
+    savedConfig = { ...resetConfig.map };
+
+    notificationController.show({
+      message: 'Reset settings to the recent saved settings',
+      type: NotificationType.Info,
+    });
+  }
+
+  async function resetToDefault() {
+    const { data: configs } = await api.systemConfigApi.getDefaults();
+
+    mapConfig = { ...configs.map };
+    defaultConfig = { ...configs.map };
+
+    notificationController.show({
+      message: 'Reset map settings to default',
+      type: NotificationType.Info,
+    });
+  }
+</script>
+
+<div>
+  {#await getConfigs() then}
+    <div in:fade={{ duration: 500 }}>
+      <form autocomplete="off" on:submit|preventDefault>
+        <div class="ml-4 mt-4 flex flex-col gap-4">
+          <SettingSwitch title="ENABLED" {disabled} subtitle="Enable map features" bind:checked={mapConfig.enabled} />
+
+          <hr />
+
+          <SettingInputField
+            inputType={SettingInputFieldType.TEXT}
+            label="Tile URL"
+            desc="URL to a leaflet compatible tile server"
+            bind:value={mapConfig.tileUrl}
+            required={true}
+            disabled={disabled || !mapConfig.enabled}
+            isEdited={mapConfig.tileUrl !== savedConfig.tileUrl}
+          />
+
+          <SettingButtonsRow
+            on:reset={reset}
+            on:save={saveSetting}
+            on:reset-to-default={resetToDefault}
+            showResetToDefault={!isEqual(savedConfig, defaultConfig)}
+            {disabled}
+          />
+        </div>
+      </form>
+    </div>
+  {/await}
+</div>

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import { locale } from '$lib/stores/preferences.store';
+  import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
+  import { getAssetFilename } from '$lib/utils/asset-utils';
+  import { AlbumResponseDto, AssetResponseDto, ThumbnailFormat, api } from '@api';
   import type { LatLngTuple } from 'leaflet';
   import { DateTime } from 'luxon';
+  import { createEventDispatcher } from 'svelte';
   import Calendar from 'svelte-material-icons/Calendar.svelte';
   import CameraIris from 'svelte-material-icons/CameraIris.svelte';
   import Close from 'svelte-material-icons/Close.svelte';
   import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
   import MapMarkerOutline from 'svelte-material-icons/MapMarkerOutline.svelte';
-  import { createEventDispatcher } from 'svelte';
-  import { AssetResponseDto, AlbumResponseDto, api, ThumbnailFormat } from '@api';
   import { asByteUnitString } from '../../utils/byte-units';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import { getAssetFilename } from '$lib/utils/asset-utils';
   import UserAvatar from '../shared-components/user-avatar.svelte';
 
   export let asset: AssetResponseDto;
@@ -268,12 +269,12 @@
   </div>
 </section>
 
-{#if latlng}
+{#if latlng && $featureFlags.loaded && $featureFlags.map}
   <div class="h-[360px]">
     {#await import('../shared-components/leaflet') then { Map, TileLayer, Marker }}
       <Map center={latlng} zoom={14}>
         <TileLayer
-          urlTemplate={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'}
+          urlTemplate={$serverConfig.mapTileUrl}
           options={{
             attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
           }}

web/src/lib/components/forms/login-form.svelte

@@ -2,7 +2,7 @@
   import { goto } from '$app/navigation';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { AppRoute } from '$lib/constants';
-  import { featureFlags } from '$lib/stores/feature-flags.store';
+  import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
   import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
   import { api, oauth } from '@api';
   import { createEventDispatcher, onMount } from 'svelte';
@@ -158,7 +158,7 @@
           <LoadingSpinner />
         </span>
       {:else}
-        {$featureFlags.passwordLogin ? 'Login with OAuth' : 'Login'}
+        {$serverConfig.oauthButtonText}
       {/if}
     </Button>
   </div>

web/src/lib/components/shared-components/leaflet/tile-layer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
   import { TileLayer, type TileLayerOptions } from 'leaflet';
+  import { onDestroy, onMount } from 'svelte';
   import { getMapContext } from './map.svelte';
 
   export let urlTemplate: string;
@@ -15,6 +15,6 @@
   });
 
   onDestroy(() => {
-    if (tileLayer) tileLayer.remove();
+    tileLayer?.remove();
   });
 </script>

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -16,7 +16,7 @@
   import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
   import Cog from 'svelte-material-icons/Cog.svelte';
   import UserAvatar from '../user-avatar.svelte';
-  import { featureFlags } from '$lib/stores/feature-flags.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
   export let user: UserResponseDto;
   export let showUploadButton = true;
 

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -17,7 +17,7 @@
   import SideBarButton from './side-bar-button.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import SideBarSection from './side-bar-section.svelte';
-  import { featureFlags } from '$lib/stores/feature-flags.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
 
   const getStats = async (dto: AssetApiGetAssetStatsRequest) => {
     const { data: stats } = await api.assetApi.getAssetStats(dto);
@@ -62,9 +62,11 @@
       <SideBarButton title="Explore" logo={Magnify} isSelected={$page.route.id === '/(user)/explore'} />
     </a>
   {/if}
-  <a data-sveltekit-preload-data="hover" href={AppRoute.MAP} draggable="false">
-    <SideBarButton title="Map" logo={Map} isSelected={$page.route.id === '/(user)/map'} />
-  </a>
+  {#if $featureFlags.map}
+    <a data-sveltekit-preload-data="hover" href={AppRoute.MAP} draggable="false">
+      <SideBarButton title="Map" logo={Map} isSelected={$page.route.id === '/(user)/map'} />
+    </a>
+  {/if}
   <a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
     <SideBarButton
       title="Sharing"

web/src/lib/components/user-settings-page/oauth-settings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { featureFlags } from '$lib/stores/feature-flags.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
   import { oauth, UserResponseDto } from '@api';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';

web/src/lib/components/user-settings-page/user-settings-list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { browser } from '$app/environment';
   import { page } from '$app/stores';
-  import { featureFlags } from '$lib/stores/feature-flags.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
   import { APIKeyResponseDto, AuthDeviceResponseDto, oauth, UserResponseDto } from '@api';
   import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
   import ChangePasswordSettings from './change-password-settings.svelte';