feat(web): license UI (#11182)

web/src/routes/(user)/buy/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import LicenseActivationSuccess from '$lib/components/shared-components/license/license-activation-success.svelte';
+  import LicenseContent from '$lib/components/shared-components/license/license-content.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { user } from '$lib/stores/user.store';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiAlertCircleOutline, mdiLicense } from '@mdi/js';
+  import { licenseStore } from '$lib/stores/license.store';
+
+  export let data: PageData;
+  let showLicenseActivated = false;
+  const { isLicenseActivated } = licenseStore;
+</script>
+
+<UserPageLayout title={$t('buy')}>
+  <section class="mx-4 flex place-content-center">
+    <div class={`w-full ${$user.isAdmin ? 'max-w-3xl' : 'max-w-xl'}`}>
+      {#if data.isActivated === false}
+        <div
+          class="bg-red-100 text-red-700 px-4 py-3 rounded-md flex place-items-center place-content-center gap-2"
+          role="alert"
+        >
+          <Icon path={mdiAlertCircleOutline} size="18" />
+          <p>{$t('license_failed_activation')}</p>
+        </div>
+      {/if}
+
+      {#if $isLicenseActivated}
+        <div
+          class="bg-immich-primary/10 text-immich-primary px-4 py-3 rounded-md flex place-items-center place-content-center gap-2 mb-5 dark:text-black dark:bg-immich-dark-primary"
+          role="alert"
+        >
+          <Icon path={mdiLicense} size="24" />
+          <p>{$t('license_account_info')}</p>
+        </div>
+      {/if}
+
+      {#if showLicenseActivated || data.isActivated === true}
+        <LicenseActivationSuccess onDone={() => goto(AppRoute.PHOTOS, { replaceState: false })} />
+      {:else}
+        <LicenseContent
+          onActivate={() => {
+            showLicenseActivated = true;
+          }}
+        />
+      {/if}
+    </div>
+  </section>
+</UserPageLayout>

web/src/routes/(user)/buy/+page.ts

@@ -0,0 +1,38 @@
+import { licenseStore } from '$lib/stores/license.store';
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { activateLicense, getActivationKey } from '$lib/utils/license-utils';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ url }) => {
+  await authenticate();
+
+  const $t = await getFormatter();
+  const licenseKey = url.searchParams.get('licenseKey');
+  let activationKey = url.searchParams.get('activationKey');
+  let isActivated: boolean | undefined = undefined;
+
+  try {
+    if (licenseKey && !activationKey) {
+      activationKey = await getActivationKey(licenseKey);
+    }
+
+    if (licenseKey && activationKey) {
+      const response = await activateLicense(licenseKey, activationKey);
+      if (response.activatedAt !== '') {
+        isActivated = true;
+        licenseStore.setLicenseStatus(true);
+      }
+    }
+  } catch (error) {
+    isActivated = false;
+    console.log('error navigating to /buy', error);
+  }
+
+  return {
+    meta: {
+      title: $t('buy'),
+    },
+    isActivated,
+  };
+}) satisfies PageLoad;

web/src/routes/+layout.svelte

@@ -22,7 +22,6 @@
   import { t } from 'svelte-i18n';
 
   let showNavigationLoadingBar = false;
-
   $: changeTheme($colorTheme);
 
   $: if ($user) {

web/src/routes/link/+page.ts

@@ -7,11 +7,11 @@ export const load = (({ url }) => {
     HOME = 'home',
     UNSUBSCRIBE = 'unsubscribe',
     VIEW_ASSET = 'view_asset',
+    ACTIVATE_LICENSE = 'activate_license',
   }
 
   const queryParams = url.searchParams;
   const target = queryParams.get('target') as LinkTarget;
-
   switch (target) {
     case LinkTarget.HOME: {
       return redirect(302, AppRoute.PHOTOS);
@@ -28,6 +28,26 @@ export const load = (({ url }) => {
       }
       break;
     }
+
+    case LinkTarget.ACTIVATE_LICENSE: {
+      // https://my.immich.app/link?target=activate_license&licenseKey=IMCL-76S5-B4KG-4HXA-KRQF-C1G1-7PJ6-9V9V-7WQH
+      // https://my.immich.app/link?target=activate_license&licenseKey=IMCL-9XC3-T4S3-37BU-GGJ5-8MWP-F2Y1-BGEX-AQTF
+      const licenseKey = queryParams.get('licenseKey');
+      const activationKey = queryParams.get('activationKey');
+      const redirectUrl = new URL(AppRoute.BUY, url.origin);
+
+      if (licenseKey) {
+        redirectUrl.searchParams.append('licenseKey', licenseKey);
+
+        if (activationKey) {
+          redirectUrl.searchParams.append('activationKey', activationKey);
+        }
+
+        return redirect(302, redirectUrl);
+      }
+
+      break;
+    }
   }
 
   return redirect(302, AppRoute.PHOTOS);