special page refactor

packages/web/src/LoginPage.svelte

@@ -13,6 +13,7 @@
   import FontIcon from './icons/FontIcon.svelte';
   import createRef from './utility/createRef';
   import Link from './elements/Link.svelte';
+  import SpecialPageLayout from './widgets/SpecialPageLayout.svelte';
 
   export let isAdminPage;
 
@@ -71,9 +72,6 @@
   }
 
   onMount(() => {
-    const removed = document.getElementById('starting_dbgate_zero');
-    if (removed) removed.remove();
-
     if (!isAdminPage) {
       loadAvailableAuthProviders();
     }
@@ -134,13 +132,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">Log In</div>
   <div class="login-link">
     {#if $config?.isAdminLoginForm}
@@ -274,37 +266,17 @@
       {/if}
     </div>
   </FormProviderCore>
-    </div>
 
-    <div class="loginButtonWrapper">
+  <svelte:fragment slot="bottom-buttons">
     {#each availableProviders.filter(x => x.workflowType == 'anonymous' || x.workflowType == 'redirect') as provider}
       <div class="loginButton" on:click={() => processSingleProvider(provider)}>
         {provider.name}
       </div>
     {/each}
-    </div>
+  </svelte:fragment>
-  </div>
+</SpecialPageLayout>
-</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;
-  }
   .submit {
     margin: var(--dim-large-form-margin);
     display: flex;
@@ -315,30 +287,6 @@
     font-size: larger;
   }
 
-  .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);
-    position: relative;
-  }
-
   .wrap {
     margin-top: 20vh;
   }
@@ -370,12 +318,6 @@
     background-color: var(--theme-bg-button-inv-3);
   }
 
-  .loginButtonWrapper {
-    display: flex;
-    flex-wrap: wrap;
-    width: 600px;
-  }
-
   .login-link {
     position: absolute;
     top: 10px;

packages/web/src/widgets/SpecialPageLayout.svelte

@@ -64,6 +64,7 @@
     border: 1px solid var(--theme-border);
     border-radius: 4px;
     background-color: var(--theme-bg-0);
+    position: relative;
   }
 
   .wrap {