mirror of
https://github.com/immich-app/immich.git
synced 2025-11-28 20:09:53 +09:00
chore(web): change license wording and other things (#11309)
This commit is contained in:
Alex
GitHub
@@ -1,172 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { licenseStore } from '$lib/stores/license.store';
|
||||
import { user } from '$lib/stores/user.store';
|
||||
import {
|
||||
deleteServerLicense,
|
||||
deleteUserLicense,
|
||||
getAboutInfo,
|
||||
getMyUser,
|
||||
getServerLicense,
|
||||
isHttpError,
|
||||
type LicenseResponseDto,
|
||||
} from '@immich/sdk';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { mdiLicense } from '@mdi/js';
|
||||
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import LicenseContent from '$lib/components/shared-components/license/license-content.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { getAccountAge } from '$lib/utils/auth';
|
||||
const { isLicenseActivated } = licenseStore;
|
||||
|
||||
let isServerLicense = false;
|
||||
let serverLicenseInfo: LicenseResponseDto | null = null;
|
||||
const accountAge = getAccountAge();
|
||||
|
||||
const checkLicenseInfo = async () => {
|
||||
const serverInfo = await getAboutInfo();
|
||||
isServerLicense = serverInfo.licensed;
|
||||
|
||||
const userInfo = await getMyUser();
|
||||
if (userInfo.license) {
|
||||
$user = { ...$user, license: userInfo.license };
|
||||
}
|
||||
|
||||
if (isServerLicense && $user.isAdmin) {
|
||||
serverLicenseInfo = await getServerLicenseInfo();
|
||||
}
|
||||
};
|
||||
|
||||
const getServerLicenseInfo = async () => {
|
||||
try {
|
||||
return await getServerLicense();
|
||||
} catch (error) {
|
||||
if (isHttpError(error) && error.status === 404) {
|
||||
return null;
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
if (!$isLicenseActivated) {
|
||||
return;
|
||||
}
|
||||
|
||||
await checkLicenseInfo();
|
||||
});
|
||||
|
||||
const removeUserLicense = async () => {
|
||||
try {
|
||||
const isConfirmed = await dialogController.show({
|
||||
title: 'Remove License',
|
||||
prompt: 'Are you sure you want to remove the license?',
|
||||
confirmText: 'Remove',
|
||||
cancelText: 'Cancel',
|
||||
});
|
||||
|
||||
if (!isConfirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
await deleteUserLicense();
|
||||
licenseStore.setLicenseStatus(false);
|
||||
} catch (error) {
|
||||
handleError(error, 'Failed to remove license');
|
||||
}
|
||||
};
|
||||
|
||||
const removeServerLicense = async () => {
|
||||
try {
|
||||
const isConfirmed = await dialogController.show({
|
||||
title: 'Remove License',
|
||||
prompt: 'Are you sure you want to remove the Server license?',
|
||||
confirmText: 'Remove',
|
||||
cancelText: 'Cancel',
|
||||
});
|
||||
|
||||
if (!isConfirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
await deleteServerLicense();
|
||||
licenseStore.setLicenseStatus(false);
|
||||
} catch (error) {
|
||||
handleError(error, 'Failed to remove license');
|
||||
}
|
||||
};
|
||||
|
||||
const onLicenseActivated = async () => {
|
||||
licenseStore.setLicenseStatus(true);
|
||||
await checkLicenseInfo();
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="my-4">
|
||||
<div in:fade={{ duration: 500 }}>
|
||||
{#if $isLicenseActivated}
|
||||
{#if isServerLicense}
|
||||
<div
|
||||
class="bg-gray-50 border border-immich-dark-primary/50 dark:bg-immich-dark-primary/15 p-6 pr-12 rounded-xl flex place-content-center gap-4"
|
||||
>
|
||||
<Icon path={mdiLicense} size="56" class="text-immich-primary dark:text-immich-dark-primary" />
|
||||
|
||||
<div>
|
||||
<p class="text-immich-primary dark:text-immich-dark-primary font-semibold text-lg">Server License</p>
|
||||
|
||||
{#if $user.isAdmin && serverLicenseInfo?.activatedAt}
|
||||
<p class="dark:text-white text-sm mt-1 col-start-2">
|
||||
Activated on {new Date(serverLicenseInfo?.activatedAt).toLocaleDateString()}
|
||||
</p>
|
||||
{:else}
|
||||
<p class="dark:text-white">Your license is managed by the admin</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $user.isAdmin}
|
||||
<div class="text-right mt-4">
|
||||
<Button size="sm" color="red" on:click={removeServerLicense}>Remove license</Button>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div
|
||||
class="bg-gray-50 border border-immich-dark-primary/50 dark:bg-immich-dark-primary/15 p-6 pr-12 rounded-xl flex place-content-center gap-4"
|
||||
>
|
||||
<Icon path={mdiLicense} size="56" class="text-immich-primary dark:text-immich-dark-primary" />
|
||||
|
||||
<div>
|
||||
<p class="text-immich-primary dark:text-immich-dark-primary font-semibold text-lg">Individual License</p>
|
||||
{#if $user.license?.activatedAt}
|
||||
<p class="dark:text-white text-sm mt-1 col-start-2">
|
||||
Activated on {new Date($user.license?.activatedAt).toLocaleDateString()}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-right mt-4">
|
||||
<Button size="sm" color="red" on:click={removeUserLicense}>Remove license</Button>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
{#if accountAge > 14}
|
||||
<div
|
||||
class="text-center bg-gray-100 border border-immich-dark-primary/50 dark:bg-immich-dark-primary/15 p-4 rounded-xl"
|
||||
>
|
||||
<p class="text-immich-dark-gray/80 dark:text-immich-gray text-balance">
|
||||
{$t('license_trial_info_2')}
|
||||
<span class="text-immich-primary dark:text-immich-dark-primary font-semibold">
|
||||
{$t('license_trial_info_3', { values: { accountAge } })}</span
|
||||
>. {$t('license_trial_info_4')}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
<LicenseContent onActivate={onLicenseActivated} />
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,180 @@
|
||||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { purchaseStore } from '$lib/stores/purchase.store';
|
||||
import { preferences, user } from '$lib/stores/user.store';
|
||||
import {
|
||||
deleteServerLicense as deleteServerProductKey,
|
||||
deleteUserLicense as deleteIndividualProductKey,
|
||||
getAboutInfo,
|
||||
getMyUser,
|
||||
getServerLicense,
|
||||
isHttpError,
|
||||
type LicenseResponseDto,
|
||||
} from '@immich/sdk';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { mdiKey } from '@mdi/js';
|
||||
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import PurchaseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
|
||||
import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
|
||||
const { isPurchased } = purchaseStore;
|
||||
|
||||
let isServerProduct = false;
|
||||
let serverPurchaseInfo: LicenseResponseDto | null = null;
|
||||
|
||||
const checkPurchaseInfo = async () => {
|
||||
const serverInfo = await getAboutInfo();
|
||||
isServerProduct = serverInfo.licensed;
|
||||
|
||||
const userInfo = await getMyUser();
|
||||
if (userInfo.license) {
|
||||
$user = { ...$user, license: userInfo.license };
|
||||
}
|
||||
|
||||
if (isServerProduct && $user.isAdmin) {
|
||||
serverPurchaseInfo = await getServerPurchaseInfo();
|
||||
}
|
||||
};
|
||||
|
||||
const getServerPurchaseInfo = async () => {
|
||||
try {
|
||||
return await getServerLicense();
|
||||
} catch (error) {
|
||||
if (isHttpError(error) && error.status === 404) {
|
||||
return null;
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
if (!$isPurchased) {
|
||||
return;
|
||||
}
|
||||
|
||||
await checkPurchaseInfo();
|
||||
});
|
||||
|
||||
const removeIndividualProductKey = async () => {
|
||||
try {
|
||||
const isConfirmed = await dialogController.show({
|
||||
title: 'Remove Product Key',
|
||||
prompt: 'Are you sure you want to remove the product key?',
|
||||
confirmText: 'Remove',
|
||||
cancelText: 'Cancel',
|
||||
});
|
||||
|
||||
if (!isConfirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
await deleteIndividualProductKey();
|
||||
purchaseStore.setPurchaseStatus(false);
|
||||
} catch (error) {
|
||||
handleError(error, 'Failed to remove product key');
|
||||
}
|
||||
};
|
||||
|
||||
const removeServerProductKey = async () => {
|
||||
try {
|
||||
const isConfirmed = await dialogController.show({
|
||||
title: 'Remove License',
|
||||
prompt: 'Are you sure you want to remove the Server product key?',
|
||||
confirmText: 'Remove',
|
||||
cancelText: 'Cancel',
|
||||
});
|
||||
|
||||
if (!isConfirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
await deleteServerProductKey();
|
||||
purchaseStore.setPurchaseStatus(false);
|
||||
} catch (error) {
|
||||
handleError(error, 'Failed to remove product key');
|
||||
}
|
||||
};
|
||||
|
||||
const onProductActivated = async () => {
|
||||
purchaseStore.setPurchaseStatus(true);
|
||||
await checkPurchaseInfo();
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="my-4">
|
||||
<div in:fade={{ duration: 500 }}>
|
||||
{#if $isPurchased}
|
||||
<!-- BADGE TOGGLE -->
|
||||
<div class="mb-4">
|
||||
<SettingSwitch
|
||||
title={$t('show_supporter_badge')}
|
||||
subtitle={$t('show_supporter_badge_description')}
|
||||
bind:checked={$preferences.purchase.showSupportBadge}
|
||||
on:toggle={({ detail }) => setSupportBadgeVisibility(detail)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- PRODUCT KEY INFO CARD -->
|
||||
{#if isServerProduct}
|
||||
<div
|
||||
class="bg-gray-50 border border-immich-dark-primary/20 dark:bg-immich-dark-primary/15 p-6 pr-12 rounded-xl flex place-content-center gap-4"
|
||||
>
|
||||
<Icon path={mdiKey} size="56" class="text-immich-primary dark:text-immich-dark-primary" />
|
||||
|
||||
<div>
|
||||
<p class="text-immich-primary dark:text-immich-dark-primary font-semibold text-lg">
|
||||
{$t('purchase_server_title')}
|
||||
</p>
|
||||
|
||||
{#if $user.isAdmin && serverPurchaseInfo?.activatedAt}
|
||||
<p class="dark:text-white text-sm mt-1 col-start-2">
|
||||
{$t('purchase_activated_time', {
|
||||
values: { date: new Date(serverPurchaseInfo.activatedAt).toLocaleDateString() },
|
||||
})}
|
||||
</p>
|
||||
{:else}
|
||||
<p class="dark:text-white">{$t('purchase_settings_server_activated')}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $user.isAdmin}
|
||||
<div class="text-right mt-4">
|
||||
<Button size="sm" color="red" on:click={removeServerProductKey}>{$t('purchase_button_remove_key')}</Button>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div
|
||||
class="bg-gray-50 border border-immich-dark-primary/20 dark:bg-immich-dark-primary/15 p-6 pr-12 rounded-xl flex place-content-center gap-4"
|
||||
>
|
||||
<Icon path={mdiKey} size="56" class="text-immich-primary dark:text-immich-dark-primary" />
|
||||
|
||||
<div>
|
||||
<p class="text-immich-primary dark:text-immich-dark-primary font-semibold text-lg">
|
||||
{$t('purchase_individual_title')}
|
||||
</p>
|
||||
{#if $user.license?.activatedAt}
|
||||
<p class="dark:text-white text-sm mt-1 col-start-2">
|
||||
{$t('purchase_activated_time', {
|
||||
values: { date: new Date($user.license?.activatedAt).toLocaleDateString() },
|
||||
})}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-right mt-4">
|
||||
<Button size="sm" color="red" on:click={removeIndividualProductKey}>{$t('purchase_button_remove_key')}</Button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<PurchaseContent onActivate={onProductActivated} showTitle={false} />
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
@@ -18,7 +18,7 @@
|
||||
import NotificationsSettings from '$lib/components/user-settings-page/notifications-settings.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import DownloadSettings from '$lib/components/user-settings-page/download-settings.svelte';
|
||||
import LicenseSettings from '$lib/components/user-settings-page/license-settings.svelte';
|
||||
import UserPurchaseSettings from '$lib/components/user-settings-page/user-purchase-settings.svelte';
|
||||
|
||||
export let keys: ApiKeyResponseDto[] = [];
|
||||
export let sessions: SessionResponseDto[] = [];
|
||||
@@ -53,14 +53,6 @@
|
||||
<DownloadSettings />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion
|
||||
key="user-license-settings"
|
||||
title={$t('user_license_settings')}
|
||||
subtitle={$t('user_license_settings_description')}
|
||||
>
|
||||
<LicenseSettings />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion key="memories" title={$t('memories')} subtitle={$t('memories_setting_description')}>
|
||||
<MemoriesSettings />
|
||||
</SettingAccordion>
|
||||
@@ -87,4 +79,12 @@
|
||||
<SettingAccordion key="partner-sharing" title={$t('partner_sharing')} subtitle={$t('manage_sharing_with_partners')}>
|
||||
<PartnerSettings user={$user} />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion
|
||||
key="user-purchase-settings"
|
||||
title={$t('user_purchase_settings')}
|
||||
subtitle={$t('user_purchase_settings_description')}
|
||||
>
|
||||
<UserPurchaseSettings />
|
||||
</SettingAccordion>
|
||||
</SettingAccordionState>
|
||||
|
||||
Reference in New Issue
Block a user