login page

packages/web/src/LoginPage.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import FormButton from './forms/FormButton.svelte';
+  import FormPasswordField from './forms/FormPasswordField.svelte';
+  import FormProvider from './forms/FormProvider.svelte';
+  import FormSubmit from './forms/FormSubmit.svelte';
+  import FormTextField from './forms/FormTextField.svelte';
+
+  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">
+      <div class="heading">Log In</div>
+      <FormProvider>
+        <FormTextField label="Username" name="login" />
+        <FormPasswordField label="Password" name="password" />
+
+        <div class="submit">
+          <FormSubmit
+            value="Log In"
+            on:click={e => {
+              console.log('log in', e);
+            }}
+          />
+        </div>
+      </FormProvider>
+    </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: 40pt;
+    color: var(--theme-bg-2);
+  }
+  .submit {
+    margin: var(--dim-large-form-margin);
+    display: flex;
+  }
+
+  .submit :global(input) {
+    flex: 1;
+    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 {
+    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>

packages/web/src/NotLoggedPage.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  
+  onMount(() => {
+    const removed = document.getElementById('starting_dbgate_zero');
+    if (removed) removed.remove();
+  });
+</script>
+
+<div class='title'>Sorry, you are not authorized to run DbGate</div>
+
+<style>
+  .title {
+    font-size: x-large;
+    margin-top: 20vh;
+    text-align: center;
+  }
+</style>

packages/web/src/clientAuth.ts

@@ -19,7 +19,7 @@ export function handleOauthCallback() {
     sessionStorage.removeItem('oauthState');
     apiCall('auth/oauth-token', {
       code: sentCode,
-      redirectUri: location.origin,
+      redirectUri: location.origin + location.pathname,
     }).then(authResp => {
       const { accessToken } = authResp;
       localStorage.setItem('accessToken', accessToken);
@@ -50,7 +50,7 @@ export async function redirectToLogin(config = null) {
   console.log('Redirecting to OAUTH provider');
   location.replace(
     `${config.oauth}?client_id=dbgate&response_type=code&redirect_uri=${encodeURIComponent(
-      location.origin
+      location.origin + location.pathname
     )}&state=${encodeURIComponent(state)}`
   );
 }

packages/web/src/main.ts

@@ -4,18 +4,40 @@ import './utility/changeCurrentDbByTab';
 import './commands/stdCommands';
 import localStorageGarbageCollector from './utility/localStorageGarbageCollector';
 import { handleOauthCallback } from './clientAuth';
+import LoginPage from './LoginPage.svelte';
+import NotLoggedPage from './NotLoggedPage.svelte';
 
 const isOauthCallback = handleOauthCallback();
 
+const params = new URLSearchParams(location.search);
+const page = params.get('page');
+
 localStorageGarbageCollector();
 
-const app = isOauthCallback
-  ? null
-  : new App({
-      target: document.body,
-      props: {},
-    });
+function createApp() {
+  if (isOauthCallback) {
+    return null;
+  }
 
-// const app = null;
+  switch (page) {
+    case 'login':
+      return new LoginPage({
+        target: document.body,
+        props: {},
+      });
+    case 'not-logged':
+      return new NotLoggedPage({
+        target: document.body,
+        props: {},
+      });
+  }
+
+  return new App({
+    target: document.body,
+    props: {},
+  });
+}
+
+const app = createApp();
 
 export default app;