special page refactor

packages/web/src/EnterLicensePage.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { useConfig } from './utility/metadataLoaders';
-  import ErrorInfo from './elements/ErrorInfo.svelte';
   import Link from './elements/Link.svelte';
   import { internalRedirectTo } from './clientAuth';
-  import TextAreaField from './forms/TextAreaField.svelte';
   import { writable } from 'svelte/store';
   import FormProviderCore from './forms/FormProviderCore.svelte';
   import FormTextAreaField from './forms/FormTextAreaField.svelte';
@@ -13,6 +11,7 @@
   import FormStyledButton from './buttons/FormStyledButton.svelte';
   import getElectron from './utility/getElectron';
   import { openWebLink } from './utility/exportFileTools';
+  import SpecialPageLayout from './widgets/SpecialPageLayout.svelte';
 
   const config = useConfig();
   const values = writable({ amoid: null, databaseServer: null });
@@ -35,144 +34,90 @@
 </script>
 
 <FormProviderCore {values}>
-  <div class="root theme-light theme-type-light">
-    <div class="text">DbGate</div>
-    <div class="wrap">
-      <div class="logo">
-        <img class="img" src="logo192.png" />
-      </div>
-      <div class="box">
-        <div class="heading">License</div>
-        <FormTextAreaField label="Enter your license key" name="licenseKey" rows={5} />
+  <SpecialPageLayout>
+    <div class="heading">License</div>
+    <FormTextAreaField label="Enter your license key" name="licenseKey" rows={5} />
 
-        <div class="submit">
-          <FormSubmit
-            value="Save license"
-            on:click={async e => {
-              sessionStorage.setItem('continueTrialConfirmed', '1');
-              const { licenseKey } = e.detail;
-              const resp = await apiCall('config/save-license-key', { licenseKey });
-              if (resp?.status == 'ok') {
-                internalRedirectTo('/index.html');
-              } else {
-                errorMessage = resp?.errorMessage || 'Error saving license key';
-              }
-            }}
-          />
-        </div>
-
-        {#if !isExpired && trialDaysLeft == null}
-          <div class="submit">
-            <FormStyledButton
-              value="Start 30-day trial"
-              on:click={async e => {
-                errorMessage = '';
-                const license = await apiCall('config/start-trial');
-                if (license?.status == 'ok') {
-                  sessionStorage.setItem('continueTrialConfirmed', '1');
-                  internalRedirectTo('/index.html');
-                } else {
-                  errorMessage = license?.errorMessage || 'Error starting trial';
-                }
-              }}
-            />
-          </div>
-        {/if}
-
-        {#if trialDaysLeft > 0}
-          <div class="submit">
-            <FormStyledButton
-              value={`Continue trial (${trialDaysLeft} days left)`}
-              on:click={async e => {
-                sessionStorage.setItem('continueTrialConfirmed', '1');
-                internalRedirectTo('/index.html');
-              }}
-            />
-          </div>
-        {/if}
-
-        <div class="submit">
-          <FormStyledButton
-            value="Purchase DbGate Premium"
-            on:click={async e => {
-              openWebLink(
-                `https://auth.dbgate.eu/create-checkout-session-simple?source=trial-${isExpired ? 'expired' : (trialDaysLeft ?? 'no')}`
-              );
-            }}
-          />
-        </div>
-
-        {#if getElectron()}
-          <div class="submit">
-            <FormStyledButton
-              value="Exit"
-              on:click={e => {
-                getElectron().send('quit-app');
-              }}
-            />
-          </div>
-        {/if}
-
-        {#if errorMessage}
-          <div class="error">{errorMessage}</div>
-        {/if}
-
-        <div class="purchase-info">
-          For more info about DbGate licensing, you could visit <Link href="https://dbgate.eu/">dbgate.eu</Link> web or contact
-          us at <Link href="mailto:sales@dbgate.eu">sales@dbgate.eu</Link>
-        </div>
-      </div>
+    <div class="submit">
+      <FormSubmit
+        value="Save license"
+        on:click={async e => {
+          sessionStorage.setItem('continueTrialConfirmed', '1');
+          const { licenseKey } = e.detail;
+          const resp = await apiCall('config/save-license-key', { licenseKey });
+          if (resp?.status == 'ok') {
+            internalRedirectTo('/index.html');
+          } else {
+            errorMessage = resp?.errorMessage || 'Error saving license key';
+          }
+        }}
+      />
     </div>
-  </div>
+
+    {#if !isExpired && trialDaysLeft == null}
+      <div class="submit">
+        <FormStyledButton
+          value="Start 30-day trial"
+          on:click={async e => {
+            errorMessage = '';
+            const license = await apiCall('config/start-trial');
+            if (license?.status == 'ok') {
+              sessionStorage.setItem('continueTrialConfirmed', '1');
+              internalRedirectTo('/index.html');
+            } else {
+              errorMessage = license?.errorMessage || 'Error starting trial';
+            }
+          }}
+        />
+      </div>
+    {/if}
+
+    {#if trialDaysLeft > 0}
+      <div class="submit">
+        <FormStyledButton
+          value={`Continue trial (${trialDaysLeft} days left)`}
+          on:click={async e => {
+            sessionStorage.setItem('continueTrialConfirmed', '1');
+            internalRedirectTo('/index.html');
+          }}
+        />
+      </div>
+    {/if}
+
+    <div class="submit">
+      <FormStyledButton
+        value="Purchase DbGate Premium"
+        on:click={async e => {
+          openWebLink(
+            `https://auth.dbgate.eu/create-checkout-session-simple?source=trial-${isExpired ? 'expired' : (trialDaysLeft ?? 'no')}`
+          );
+        }}
+      />
+    </div>
+
+    {#if getElectron()}
+      <div class="submit">
+        <FormStyledButton
+          value="Exit"
+          on:click={e => {
+            getElectron().send('quit-app');
+          }}
+        />
+      </div>
+    {/if}
+
+    {#if errorMessage}
+      <div class="error">{errorMessage}</div>
+    {/if}
+
+    <div class="purchase-info">
+      For more info about DbGate licensing, you could visit <Link href="https://dbgate.eu/">dbgate.eu</Link> web or contact
+      us at <Link href="mailto:sales@dbgate.eu">sales@dbgate.eu</Link>
+    </div>
+  </SpecialPageLayout>
 </FormProviderCore>
 
 <style>
-  .logo {
-    display: flex;
-    margin-bottom: 1rem;
-    align-items: center;
-    justify-content: center;
-  }
-  .img {
-    width: 80px;
-  }
-  .text {
-    position: fixed;
-    top: 1rem;
-    left: 1rem;
-    font-size: 30pt;
-    font-family: monospace;
-    color: var(--theme-bg-2);
-    text-transform: uppercase;
-  }
-
-  .root {
-    color: var(--theme-font-1);
-    display: flex;
-    justify-content: center;
-    background-color: var(--theme-bg-1);
-    align-items: baseline;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  .box {
-    width: 600px;
-    max-width: 80vw;
-    /* max-width: 600px;
-        width: 40vw; */
-    border: 1px solid var(--theme-border);
-    border-radius: 4px;
-    background-color: var(--theme-bg-0);
-  }
-
-  .wrap {
-    margin-top: 20vh;
-  }
-
   .heading {
     text-align: center;
     margin: 1em;

packages/web/src/ErrorPage.svelte

@@ -4,6 +4,7 @@
   import ErrorInfo from './elements/ErrorInfo.svelte';
   import Link from './elements/Link.svelte';
   import { internalRedirectTo } from './clientAuth';
+  import SpecialPageLayout from './widgets/SpecialPageLayout.svelte';
 
   const config = useConfig();
 
@@ -16,79 +17,25 @@
   });
 </script>
 
-<div class="root theme-light theme-type-light">
-  <div class="text">DbGate</div>
-  <div class="wrap">
-    <div class="logo">
-      <img class="img" src="logo192.png" />
+<SpecialPageLayout>
+  <div class="heading">Configuration error</div>
+  {#if $config?.checkedLicense?.status == 'error'}
+    <ErrorInfo
+      message={`Invalid license. Please contact sales@dbgate.eu for more details. ${$config?.checkedLicense?.error}`}
+    />
+  {:else if $config?.configurationError}
+    <ErrorInfo message={$config?.configurationError} />
+  {:else if error}
+    <ErrorInfo message={error} />
+  {:else}
+    <ErrorInfo message="No error found, try to open app again" />
+    <div class="m-2">
+      <Link onClick={() => internalRedirectTo('/')}>Back to app</Link>
     </div>
-    <div class="box">
-      <div class="heading">Configuration error</div>
-      {#if $config?.checkedLicense?.status == 'error'}
-        <ErrorInfo
-          message={`Invalid license. Please contact sales@dbgate.eu for more details. ${$config?.checkedLicense?.error}`}
-        />
-      {:else if $config?.configurationError}
-        <ErrorInfo message={$config?.configurationError} />
-      {:else if error}
-        <ErrorInfo message={error} />
-      {:else}
-        <ErrorInfo message="No error found, try to open app again" />
-        <div class="m-2">
-          <Link onClick={() => internalRedirectTo('/')}>Back to app</Link>
-        </div>
-      {/if}
-    </div>
-  </div>
-</div>
+  {/if}
+</SpecialPageLayout>
 
 <style>
-  .logo {
-    display: flex;
-    margin-bottom: 1rem;
-    align-items: center;
-    justify-content: center;
-  }
-  .img {
-    width: 80px;
-  }
-  .text {
-    position: fixed;
-    top: 1rem;
-    left: 1rem;
-    font-size: 30pt;
-    font-family: monospace;
-    color: var(--theme-bg-2);
-    text-transform: uppercase;
-  }
-
-  .root {
-    color: var(--theme-font-1);
-    display: flex;
-    justify-content: center;
-    background-color: var(--theme-bg-1);
-    align-items: baseline;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  .box {
-    width: 600px;
-    max-width: 80vw;
-    /* max-width: 600px;
-      width: 40vw; */
-    border: 1px solid var(--theme-border);
-    border-radius: 4px;
-    background-color: var(--theme-bg-0);
-  }
-
-  .wrap {
-    margin-top: 20vh;
-  }
-
   .heading {
     text-align: center;
     margin: 1em;

packages/web/src/NotLoggedPage.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import FormStyledButton from './buttons/FormStyledButton.svelte';
   import { doLogout, redirectToAdminLogin, redirectToLogin } from './clientAuth';
+  import SpecialPageLayout from './widgets/SpecialPageLayout.svelte';
 
   onMount(() => {
     const removed = document.getElementById('starting_dbgate_zero');
@@ -21,26 +22,23 @@
   }
 </script>
 
-<div class="root theme-light theme-type-light">
-  <div class="title">Sorry, you are not authorized to run DbGate</div>
-  {#if error}
-    <div class="error">{error}</div>
-  {/if}
+<SpecialPageLayout>
+  <div class="my-6">
+    <div class="title">Sorry, you are not authorized to run DbGate</div>
+    {#if error}
+      <div class="error">{error}</div>
+    {/if}
 
-  <div class="button">
-    <FormStyledButton value="Log In" on:click={handleLogin} />
-    <FormStyledButton value="Log Out" on:click={doLogout} />
+    <div class="button">
+      <FormStyledButton value="Log In" on:click={handleLogin} />
+      <FormStyledButton value="Log Out" on:click={doLogout} />
+    </div>
   </div>
-</div>
+</SpecialPageLayout>
 
 <style>
-  .root {
-    color: var(--theme-font-1);
-  }
-
   .title {
     font-size: x-large;
-    margin-top: 20vh;
     text-align: center;
   }
 

packages/web/src/widgets/SpecialPageLayout.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { useConfig } from '../utility/metadataLoaders';
+    import ErrorInfo from '../elements/ErrorInfo.svelte';
+    import Link from '../elements/Link.svelte';
+    import { internalRedirectTo } from '../clientAuth';
+  
+    const config = useConfig();
+  
+    const params = new URLSearchParams(location.search);
+    const error = params.get('error');
+  
+    onMount(() => {
+      const removed = document.getElementById('starting_dbgate_zero');
+      if (removed) removed.remove();
+    });
+  
+</script>
+  
+  <div class="root theme-light theme-type-light">
+    <div class="text">DbGate</div>
+    <div class="wrap">
+      <div class="logo">
+        <img class="img" src="logo192.png" />
+      </div>
+      <div class="box">
+        <slot />
+      </div>
+    </div>
+  </div>
+  
+  <style>
+    .logo {
+      display: flex;
+      margin-bottom: 1rem;
+      align-items: center;
+      justify-content: center;
+    }
+    .img {
+      width: 80px;
+    }
+    .text {
+      position: fixed;
+      top: 1rem;
+      left: 1rem;
+      font-size: 30pt;
+      font-family: monospace;
+      color: var(--theme-bg-2);
+      text-transform: uppercase;
+    }
+  
+    .root {
+      color: var(--theme-font-1);
+      display: flex;
+      justify-content: center;
+      background-color: var(--theme-bg-1);
+      align-items: baseline;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  
+    .box {
+      width: 600px;
+      max-width: 80vw;
+      /* max-width: 600px;
+        width: 40vw; */
+      border: 1px solid var(--theme-border);
+      border-radius: 4px;
+      background-color: var(--theme-bg-0);
+    }
+  
+    .wrap {
+      margin-top: 20vh;
+    }
+  
+    .heading {
+      text-align: center;
+      margin: 1em;
+      font-size: xx-large;
+    }
+  </style>