forms login

packages/web/src/LoginPage.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { internalRedirectTo } from './clientAuth';
   import FormButton from './forms/FormButton.svelte';
   import FormPasswordField from './forms/FormPasswordField.svelte';
   import FormProvider from './forms/FormProvider.svelte';
@@ -22,15 +23,26 @@
     <div class="box">
       <div class="heading">Log In</div>
       <FormProvider>
-        <FormTextField label="Username" name="login" />
-        <FormPasswordField label="Password" name="password" />
+        <FormTextField label="Username" name="login" autocomplete="username" />
+        <FormPasswordField label="Password" name="password" autocomplete="current-password" />
 
         <div class="submit">
           <FormSubmit
             value="Log In"
-            on:click={e => {
+            on:click={async e => {
               enableApi();
-              apiCall('auth/login', e.detail);
+              const resp = await apiCall('auth/login', e.detail);
+              if (resp.error) {
+                internalRedirectTo(`/?page=not-logged&error=${encodeURIComponent(resp.error)}`);
+                return;
+              }
+              const { accessToken } = resp;
+              if (accessToken) {
+                localStorage.setItem('accessToken', accessToken);
+                internalRedirectTo('/');
+                return;
+              }
+              internalRedirectTo(`/?page=not-logged`);
             }}
           />
         </div>

packages/web/src/NotLoggedPage.svelte

@@ -1,18 +1,51 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  
+  import FormStyledButton from './buttons/FormStyledButton.svelte';
+  import { redirectToLogin } from './clientAuth';
+
   onMount(() => {
     const removed = document.getElementById('starting_dbgate_zero');
     if (removed) removed.remove();
   });
+
+  const params = new URLSearchParams(location.search);
+  const error = params.get('error');
+
+  function handleLogin() {
+    redirectToLogin(undefined, true);
+  }
 </script>
 
-<div class='title'>Sorry, you are not authorized to run DbGate</div>
+<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}
+
+  <div class="button">
+    <FormStyledButton value="Log In" on:click={handleLogin} />
+  </div>
+</div>
 
 <style>
+  .root {
+    color: var(--theme-font-1);
+  }
+
   .title {
     font-size: x-large;
     margin-top: 20vh;
     text-align: center;
   }
+
+  .error {
+    margin-top: 1em;
+    text-align: center;
+  }
+
+  .button {
+    display: flex;
+    justify-content: center;
+    margin-top: 1em;
+  }
 </style>

packages/web/src/clientAuth.ts

@@ -1,4 +1,4 @@
-import { apiCall, disableApi } from './utility/api';
+import { apiCall, disableApi, enableApi } from './utility/api';
 import { getConfig } from './utility/metadataLoaders';
 
 export function isOauthCallback() {
@@ -23,7 +23,7 @@ export function handleOauthCallback() {
     }).then(authResp => {
       const { accessToken } = authResp;
       localStorage.setItem('accessToken', accessToken);
-      location.replace('/');
+      internalRedirectTo('/');
     });
 
     return true;
@@ -42,13 +42,21 @@ export async function handleAuthOnStartup(config) {
   }
 }
 
-export async function redirectToLogin(config = null) {
-  if (!config) config = await getConfig();
+export async function redirectToLogin(config = null, force = false) {
+  if (!config) {
+    enableApi();
+    config = await getConfig();
+  }
 
   if (config.isLoginForm) {
-    const index = location.pathname.lastIndexOf('/');
-    const loginPath = index >= 0 ? location.pathname.substring(0, index) + '/?page=login' : '/?page=login';
-    location.replace(loginPath);
+    if (!force) {
+      const params = new URLSearchParams(location.search);
+      if (params.get('page') == 'login' || params.get('page') == 'not-logged') {
+        return;
+      }
+    }
+    internalRedirectTo('/?page=login');
+    return;
   }
 
   if (config.oauth) {
@@ -60,5 +68,12 @@ export async function redirectToLogin(config = null) {
         location.origin + location.pathname
       )}&state=${encodeURIComponent(state)}`
     );
+    return;
   }
 }
+
+export function internalRedirectTo(path) {
+  const index = location.pathname.lastIndexOf('/');
+  const newPath = index >= 0 ? location.pathname.substring(0, index) + path : path;
+  location.replace(newPath);
+}

packages/web/src/forms/TextField.svelte

@@ -4,6 +4,7 @@
   export let value;
   export let focused = false;
   export let domEditor = undefined;
+  export let autocomplete = 'new-password';
 
   if (focused) onMount(() => domEditor.focus());
 </script>
@@ -17,5 +18,5 @@
   on:click
   bind:this={domEditor}
   on:keydown
-  autocomplete="new-password"
+  {autocomplete}
 />