admin page support

packages/api/src/controllers/config.js

@@ -48,6 +48,7 @@ module.exports = {
       oauthScope: process.env.OAUTH_SCOPE,
       oauthLogout: process.env.OAUTH_LOGOUT,
       isLoginForm,
+      isAdminLoginForm: !!(process.env.STORAGE_DATABASE && process.env.ADMIN_PASSWORD && !process.env.BASIC_AUTH),
       storageDatabase: process.env.STORAGE_DATABASE,
       logsFilePath: getLogsFilePath(),
       connectionsFilePath: path.join(datadir(), 'connections.jsonl'),

packages/web/src/App.svelte

@@ -22,6 +22,8 @@
   import SettingsListener from './utility/SettingsListener.svelte';
   import { handleAuthOnStartup, handleOauthCallback } from './clientAuth';
 
+  export let isAdminPage = false;
+
   let loadedApi = false;
   let loadedPlugins = false;
 
@@ -35,7 +37,7 @@
       // console.log('************** LOADING API');
 
       const config = await getConfig();
-      await handleAuthOnStartup(config);
+      await handleAuthOnStartup(config, isAdminPage);
 
       const connections = await apiCall('connections/list');
       const settings = await getSettings();

packages/web/src/LoginPage.svelte

@@ -8,6 +8,8 @@
   import FormTextField from './forms/FormTextField.svelte';
   import { apiCall, enableApi } from './utility/api';
 
+  export let isAdminPage;
+
   onMount(() => {
     const removed = document.getElementById('starting_dbgate_zero');
     if (removed) removed.remove();
@@ -23,12 +25,14 @@
     <div class="box">
       <div class="heading">Log In</div>
       <FormProvider>
-        <FormTextField label="Username" name="login" autocomplete="username" saveOnInput />
+        {#if !isAdminPage}
+          <FormTextField label="Username" name="login" autocomplete="username" saveOnInput />
+        {/if}
         <FormPasswordField label="Password" name="password" autocomplete="current-password" saveOnInput />
 
         <div class="submit">
           <FormSubmit
-            value="Log In"
+            value={isAdminPage ? 'Log In as Administrator' : 'Log In'}
             on:click={async e => {
               enableApi();
               const resp = await apiCall('auth/login', e.detail);

packages/web/src/clientAuth.ts

@@ -39,7 +39,16 @@ export function handleOauthCallback() {
   return false;
 }
 
-export async function handleAuthOnStartup(config) {
+export async function handleAuthOnStartup(config, isAdminPage = false) {
+  if (config.isAdminLoginForm && isAdminPage) {
+    if (localStorage.getItem('adminAccessToken')) {
+      return;
+    }
+
+    redirectToAdminLogin();
+    return;
+  }
+
   if (config.oauth) {
     console.log('OAUTH callback URL:', location.origin + location.pathname);
   }
@@ -52,6 +61,11 @@ export async function handleAuthOnStartup(config) {
   }
 }
 
+export async function redirectToAdminLogin() {
+  internalRedirectTo('/?page=admin-login');
+  return;
+}
+
 export async function redirectToLogin(config = null, force = false) {
   if (!config) {
     enableApi();
@@ -61,7 +75,7 @@ export async function redirectToLogin(config = null, force = false) {
   if (config.isLoginForm) {
     if (!force) {
       const params = new URLSearchParams(location.search);
-      if (params.get('page') == 'login' || params.get('page') == 'not-logged') {
+      if (params.get('page') == 'login' || params.get('page') == 'admin-login' || params.get('page') == 'not-logged') {
         return;
       }
     }

packages/web/src/main.ts

@@ -25,11 +25,25 @@ function createApp() {
         target: document.body,
         props: {},
       });
+    case 'admin-login':
+      return new LoginPage({
+        target: document.body,
+        props: {
+          isAdminPage: true,
+        },
+      });
     case 'not-logged':
       return new NotLoggedPage({
         target: document.body,
         props: {},
       });
+    case 'admin':
+      return new App({
+        target: document.body,
+        props: {
+          isAdminPage: true,
+        },
+      });
   }
 
   return new App({

packages/web/src/utility/api.ts

@@ -4,7 +4,7 @@ import { writable } from 'svelte/store';
 import getElectron from './getElectron';
 // import socket from './socket';
 import { showSnackbarError } from '../utility/snackbar';
-import { isOauthCallback, redirectToLogin } from '../clientAuth';
+import { isOauthCallback, redirectToAdminLogin, redirectToLogin } from '../clientAuth';
 import { showModal } from '../modals/modalTools';
 import DatabaseLoginModal, { isDatabaseLoginVisible } from '../modals/DatabaseLoginModal.svelte';
 import _ from 'lodash';
@@ -132,9 +132,13 @@ export async function apiCall(route: string, args: {} = undefined) {
 
       disableApi();
       console.log('Disabling API', route);
-      if (params.get('page') != 'login' && params.get('page') != 'not-logged') {
+      if (params.get('page') != 'login' && params.get('page') != 'admin-login' && params.get('page') != 'not-logged') {
         // unauthorized
-        redirectToLogin();
+        if (params.get('page') == 'admin') {
+          redirectToAdminLogin();
+        } else {
+          redirectToLogin();
+        }
       }
       return;
     }