feat(web,server): external domain setting (#6146)

* feat: external domain setting

* chore: open api

* mobile: handle serverconfig-externalDomain

---------

Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>

web/src/api/open-api/api.ts

@@ -3007,6 +3007,12 @@ export interface SearchResponseDto {
  * @interface ServerConfigDto
  */
 export interface ServerConfigDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof ServerConfigDto
+     */
+    'externalDomain': string;
     /**
      * 
      * @type {boolean}
@@ -3590,6 +3596,12 @@ export interface SystemConfigDto {
      * @memberof SystemConfigDto
      */
     'reverseGeocoding': SystemConfigReverseGeocodingDto;
+    /**
+     * 
+     * @type {SystemConfigServerDto}
+     * @memberof SystemConfigDto
+     */
+    'server': SystemConfigServerDto;
     /**
      * 
      * @type {SystemConfigStorageTemplateDto}
@@ -4014,6 +4026,19 @@ export interface SystemConfigReverseGeocodingDto {
      */
     'enabled': boolean;
 }
+/**
+ * 
+ * @export
+ * @interface SystemConfigServerDto
+ */
+export interface SystemConfigServerDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof SystemConfigServerDto
+     */
+    'externalDomain': string;
+}
 /**
  * 
  * @export

web/src/api/utils.ts

@@ -19,6 +19,10 @@ export const copyToClipboard = async (secret: string) => {
   }
 };
 
+export const makeSharedLinkUrl = (externalDomain: string, key: string) => {
+  return `${externalDomain || window.location.origin}/share/${key}`;
+};
+
 export const oauth = {
   isCallback: (location: Location) => {
     const search = location.search;

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

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import SettingButtonsRow from '$lib/components/admin-page/settings/setting-buttons-row.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import type { ResetOptions } from '$lib/utils/dipatch';
+  import { handleError } from '$lib/utils/handle-error';
+  import { api, SystemConfigServerDto } from '@api';
+  import { isEqual } from 'lodash-es';
+  import { fade } from 'svelte/transition';
+  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+
+  export let serverConfig: SystemConfigServerDto; // this is the config that is being edited
+  export let disabled = false;
+
+  let savedConfig: SystemConfigServerDto;
+  let defaultConfig: SystemConfigServerDto;
+
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
+  async function getConfigs() {
+    [savedConfig, defaultConfig] = await Promise.all([
+      api.systemConfigApi.getConfig().then((res) => res.data.server),
+      api.systemConfigApi.getConfigDefaults().then((res) => res.data.server),
+    ]);
+  }
+
+  async function reset() {
+    const { data: resetConfig } = await api.systemConfigApi.getConfig();
+
+    serverConfig = { ...resetConfig.server };
+    savedConfig = { ...resetConfig.server };
+
+    notificationController.show({
+      message: 'Reset server settings to the recent saved settings',
+      type: NotificationType.Info,
+    });
+  }
+
+  async function resetToDefault() {
+    const { data: configs } = await api.systemConfigApi.getConfigDefaults();
+
+    serverConfig = { ...configs.server };
+    defaultConfig = { ...configs.server };
+
+    notificationController.show({
+      message: 'Reset server settings to default',
+      type: NotificationType.Info,
+    });
+  }
+
+  async function saveSetting() {
+    try {
+      const { data: configs } = await api.systemConfigApi.getConfig();
+
+      const result = await api.systemConfigApi.updateConfig({
+        systemConfigDto: {
+          ...configs,
+          server: serverConfig,
+        },
+      });
+
+      serverConfig = { ...result.data.server };
+      savedConfig = { ...result.data.server };
+
+      notificationController.show({
+        message: 'Server settings saved',
+        type: NotificationType.Info,
+      });
+    } catch (e) {
+      handleError(e, 'Unable to save settings');
+    }
+  }
+</script>
+
+<div>
+  {#await getConfigs() then}
+    <div in:fade={{ duration: 500 }}>
+      <form autocomplete="off" on:submit|preventDefault>
+        <div class="mt-2">
+          <SettingInputField
+            inputType={SettingInputFieldType.TEXT}
+            label="EXTERNAL DOMAIN"
+            desc="Domain for public shared links, including http(s)://"
+            bind:value={serverConfig.externalDomain}
+            isEdited={serverConfig.externalDomain !== savedConfig.externalDomain}
+          />
+          <div class="ml-4">
+            <SettingButtonsRow
+              on:reset={({ detail }) => handleReset(detail)}
+              on:save={saveSetting}
+              showResetToDefault={!isEqual(savedConfig, defaultConfig)}
+              {disabled}
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+  {/await}
+</div>

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -5,7 +5,7 @@
   import SettingSwitch from '$lib/components/admin-page/settings/setting-switch.svelte';
   import Button from '$lib/components/elements/buttons/button.svelte';
   import { handleError } from '$lib/utils/handle-error';
-  import { api, copyToClipboard, SharedLinkResponseDto, SharedLinkType } from '@api';
+  import { api, copyToClipboard, makeSharedLinkUrl, SharedLinkResponseDto, SharedLinkType } from '@api';
   import { createEventDispatcher, onMount } from 'svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import BaseModal from '../base-modal.svelte';
@@ -13,6 +13,7 @@
   import DropdownButton from '../dropdown-button.svelte';
   import { notificationController, NotificationType } from '../notification/notification';
   import { mdiLink } from '@mdi/js';
+  import { serverConfig } from '$lib/stores/server-config.store';
 
   export let albumId: string | undefined = undefined;
   export let assetIds: string[] = [];
@@ -82,7 +83,7 @@
           showMetadata,
         },
       });
-      sharedLink = `${window.location.origin}/share/${data.key}`;
+      sharedLink = makeSharedLinkUrl($serverConfig.externalDomain, data.key);
     } catch (e) {
       handleError(e, 'Failed to create shared link');
     }
@@ -182,7 +183,7 @@
       {:else}
         <div class="text-sm">
           Individual shared | <span class="text-immich-primary dark:text-immich-dark-primary"
-            >{editingLink.description}</span
+            >{editingLink.description || ''}</span
           >
         </div>
       {/if}

web/src/lib/stores/server-config.store.ts

@@ -26,6 +26,7 @@ export const serverConfig = writable<ServerConfig>({
   loginPageMessage: '',
   trashDays: 30,
   isInitialized: false,
+  externalDomain: '',
 });
 
 export const loadConfig = async () => {

web/src/routes/(user)/sharing/sharedlinks/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import { api, copyToClipboard, SharedLinkResponseDto } from '@api';
+  import { api, copyToClipboard, makeSharedLinkUrl, SharedLinkResponseDto } from '@api';
   import { goto } from '$app/navigation';
   import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
   import {
@@ -13,6 +13,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { AppRoute } from '$lib/constants';
   import { mdiArrowLeft } from '@mdi/js';
+  import { serverConfig } from '$lib/stores/server-config.store';
 
   let sharedLinks: SharedLinkResponseDto[] = [];
   let editSharedLink: SharedLinkResponseDto | null = null;
@@ -49,7 +50,7 @@
   };
 
   const handleCopyLink = async (key: string) => {
-    await copyToClipboard(`${window.location.origin}/share/${key}`);
+    await copyToClipboard(makeSharedLinkUrl($serverConfig.externalDomain, key));
   };
 </script>
 

web/src/routes/admin/system-settings/+page.svelte

@@ -9,6 +9,7 @@
   import SettingAccordion from '$lib/components/admin-page/settings/setting-accordion.svelte';
   import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
   import ThumbnailSettings from '$lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte';
+  import ServerSettings from '$lib/components/admin-page/settings/server/server-settings.svelte';
   import TrashSettings from '$lib/components/admin-page/settings/trash-settings/trash-settings.svelte';
   import ThemeSettings from '$lib/components/admin-page/settings/theme/theme-settings.svelte';
   import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
@@ -95,6 +96,10 @@
         <PasswordLoginSettings disabled={$featureFlags.configFile} passwordLoginConfig={configs.passwordLogin} />
       </SettingAccordion>
 
+      <SettingAccordion title="Server Settings" subtitle="Manage server settings">
+        <ServerSettings disabled={$featureFlags.configFile} serverConfig={configs.server} />
+      </SettingAccordion>
+
       <SettingAccordion
         title="Storage Template"
         subtitle="Manage the folder structure and file name of the upload asset"