SYNC: licensing page improvements

packages/web/src/EnterLicensePage.svelte

@@ -14,6 +14,7 @@
   import ErrorInfo from './elements/ErrorInfo.svelte';
   import { isOneOfPage } from './utility/pageDefs';
   import { openWebLink } from './utility/simpleTools';
+  import FontIcon from './icons/FontIcon.svelte';
 
   const config = useConfig();
   const values = writable({ amoid: null, databaseServer: null });
@@ -22,12 +23,10 @@
   $: trialDaysLeft = $config?.trialDaysLeft;
 
   let errorMessage = '';
-  let expiredMessageSet = false;
 
-  $: if (isExpired && !expiredMessageSet) {
+  let isInsertingLicense = false;
-    errorMessage = 'Your license is expired';
+
-    expiredMessageSet = true;
+  $: trialButtonAvailable = !isExpired && trialDaysLeft == null;
-  }
 
   // $: console.log('CONFIG', $config);
 
@@ -41,10 +40,30 @@
 <FormProviderCore {values}>
   <SpecialPageLayout>
     {#if getElectron() || ($config?.storageDatabase && hasPermission('admin/license'))}
-      <div class="heading">License</div>
+      <div class="heading">Thank you for using DbGate!</div>
+
+      {#if isExpired}
+        <div class="infotext"><FontIcon icon="img warn" /> Your license has expired. Please insert new license.</div>
+      {:else if trialDaysLeft > 0}
+        <div class="infotext">
+          <FontIcon icon="img warn" /> Your trial period will expire in {trialDaysLeft} day{trialDaysLeft != 1
+            ? 's'
+            : ''}.
+        </div>
+      {:else}
+        <div class="infotext">
+          <FontIcon icon="img info" /> Please choose licensing model. You could either purchase Premium edition
+          {#if trialButtonAvailable}, use 30-day free trial{/if} or download free
+          <Link href="https://dbgate.io/download-community">Community edition</Link>.
+        </div>
+      {/if}
+
+      {#if isInsertingLicense}
         <FormTextAreaField label="Enter your license key" name="licenseKey" rows={5} />
 
         <div class="submit">
+          <div class="flex flex1">
+            <div class="col-6 flex">
               <FormSubmit
                 value="Save license"
                 on:click={async e => {
@@ -59,8 +78,30 @@
                 }}
               />
             </div>
+            <div class="col-6 flex">
+              <FormStyledButton
+                value="Cancel"
+                on:click={() => {
+                  isInsertingLicense = false;
+                  errorMessage = '';
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      {/if}
 
-      {#if !isExpired && trialDaysLeft == null}
+      {#if !isInsertingLicense}
+        <div class="submit">
+          <FormStyledButton
+            value="Insert license key"
+            on:click={() => {
+              isInsertingLicense = true;
+            }}
+          />
+        </div>
+
+        {#if trialButtonAvailable}
           <div class="submit">
             <FormStyledButton
               value="Start 30-day trial"
@@ -119,6 +160,7 @@
             />
           </div>
         {/if}
+      {/if}
 
       {#if errorMessage}
         <div class="error">{errorMessage}</div>
@@ -141,6 +183,10 @@
     font-size: xx-large;
   }
 
+  .infotext {
+    margin: 1em;
+  }
+
   .submit {
     margin: var(--dim-large-form-margin);
     display: flex;