feat(web): license UI (#11182)

2024-07-18 10:56:27 -05:00
parent 88f62087fd
commit ef0e1a81b9
39 changed files with 1157 additions and 148 deletions
@@ -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>
@@ -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;