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,13 +34,7 @@
 </script>
 
 <FormProviderCore {values}>
-  <div class="root theme-light theme-type-light">
+  <SpecialPageLayout>
-    <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} />
 
@@ -121,58 +114,10 @@
       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>
+  </SpecialPageLayout>
-    </div>
-  </div>
 </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,13 +17,7 @@
   });
 </script>
 
-<div class="root theme-light theme-type-light">
+<SpecialPageLayout>
-  <div class="text">DbGate</div>
-  <div class="wrap">
-    <div class="logo">
-      <img class="img" src="logo192.png" />
-    </div>
-    <div class="box">
   <div class="heading">Configuration error</div>
   {#if $config?.checkedLicense?.status == 'error'}
     <ErrorInfo
@@ -38,57 +33,9 @@
       <Link onClick={() => internalRedirectTo('/')}>Back to app</Link>
     </div>
   {/if}
-    </div>
+</SpecialPageLayout>
-  </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;

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,7 +22,8 @@
   }
 </script>
 
-<div class="root theme-light theme-type-light">
+<SpecialPageLayout>
+  <div class="my-6">
     <div class="title">Sorry, you are not authorized to run DbGate</div>
     {#if error}
       <div class="error">{error}</div>
@@ -32,15 +34,11 @@
       <FormStyledButton value="Log Out" on:click={doLogout} />
     </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>