mirror of
https://github.com/DeNNiiInc/dbgate.git
synced 2026-04-22 16:55:59 +00:00
special page refactor
This commit is contained in:
Jan Prochazka
@@ -13,6 +13,7 @@
|
|||||||
import FontIcon from './icons/FontIcon.svelte';
|
import FontIcon from './icons/FontIcon.svelte';
|
||||||
import createRef from './utility/createRef';
|
import createRef from './utility/createRef';
|
||||||
import Link from './elements/Link.svelte';
|
import Link from './elements/Link.svelte';
|
||||||
|
import SpecialPageLayout from './widgets/SpecialPageLayout.svelte';
|
||||||
|
|
||||||
export let isAdminPage;
|
export let isAdminPage;
|
||||||
|
|
||||||
@@ -71,9 +72,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const removed = document.getElementById('starting_dbgate_zero');
|
|
||||||
if (removed) removed.remove();
|
|
||||||
|
|
||||||
if (!isAdminPage) {
|
if (!isAdminPage) {
|
||||||
loadAvailableAuthProviders();
|
loadAvailableAuthProviders();
|
||||||
}
|
}
|
||||||
@@ -134,177 +132,151 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="root theme-light theme-type-light">
|
<SpecialPageLayout>
|
||||||
<div class="text">DbGate</div>
|
<div class="heading">Log In</div>
|
||||||
<div class="wrap">
|
<div class="login-link">
|
||||||
<div class="logo">
|
{#if $config?.isAdminLoginForm}
|
||||||
<img class="img" src="logo192.png" />
|
{#if isAdminPage}
|
||||||
</div>
|
<Link internalRedirect="/login.html">Log In as Regular User</Link>
|
||||||
<div class="box">
|
{:else}
|
||||||
<div class="heading">Log In</div>
|
<Link internalRedirect="/admin-login.html">Log In as Administrator</Link>
|
||||||
<div class="login-link">
|
{/if}
|
||||||
{#if $config?.isAdminLoginForm}
|
{/if}
|
||||||
{#if isAdminPage}
|
|
||||||
<Link internalRedirect="/login.html">Log In as Regular User</Link>
|
|
||||||
{:else}
|
|
||||||
<Link internalRedirect="/admin-login.html">Log In as Administrator</Link>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<FormProviderCore {values}>
|
|
||||||
{#if !isAdminPage && availableProviders?.length >= 2}
|
|
||||||
<FormSelectField
|
|
||||||
label="Authentization method"
|
|
||||||
name="amoid"
|
|
||||||
isNative
|
|
||||||
options={availableProviders.map(mtd => ({ value: mtd.amoid, label: mtd.name }))}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if !isAdminPage && availableConnections && workflowType == 'database'}
|
|
||||||
<FormSelectField
|
|
||||||
label="Database server"
|
|
||||||
name="databaseServer"
|
|
||||||
isNative
|
|
||||||
options={availableConnections.map(conn => ({ value: conn.conid, label: conn.label }))}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if selectedConnection}
|
|
||||||
{#if selectedConnection.passwordMode == 'askUser'}
|
|
||||||
<FormTextField label="Username" name="login" autocomplete="username" saveOnInput />
|
|
||||||
{/if}
|
|
||||||
{#if selectedConnection.passwordMode == 'askUser' || selectedConnection.passwordMode == 'askPassword'}
|
|
||||||
<FormPasswordField label="Password" name="password" autocomplete="current-password" saveOnInput />
|
|
||||||
{/if}
|
|
||||||
{:else}
|
|
||||||
{#if !isAdminPage && workflowType == 'credentials'}
|
|
||||||
<FormTextField label="Username" name="login" autocomplete="username" saveOnInput />
|
|
||||||
{/if}
|
|
||||||
{#if workflowType == 'credentials'}
|
|
||||||
<FormPasswordField label="Password" name="password" autocomplete="current-password" saveOnInput />
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if isAdminPage && $config && !$config.isAdminLoginForm}
|
|
||||||
<ErrorInfo message="Admin login is not configured. Please set ADMIN_PASSWORD environment variable" />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if isTesting}
|
|
||||||
<div class="ml-5">
|
|
||||||
<FontIcon icon="icon loading" /> Testing connection
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if !isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'error'}
|
|
||||||
<div class="error-result ml-5">
|
|
||||||
Connect failed: <FontIcon icon="img error" />
|
|
||||||
{sqlConnectResult.error}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="submit">
|
|
||||||
{#if selectedConnection?.useRedirectDbLogin}
|
|
||||||
<FormSubmit
|
|
||||||
value="Open database login page"
|
|
||||||
on:click={async e => {
|
|
||||||
const state = `dbg-dblogin:${strmid}:${selectedConnection?.conid}:${$values.amoid}`;
|
|
||||||
sessionStorage.setItem('dbloginAuthState', state);
|
|
||||||
// openWebLink(
|
|
||||||
// `connections/dblogin?conid=${selectedConnection?.conid}&state=${encodeURIComponent(state)}&redirectUri=${
|
|
||||||
// location.origin + location.pathname
|
|
||||||
// }`
|
|
||||||
// );
|
|
||||||
internalRedirectTo(
|
|
||||||
`/connections/dblogin-web?conid=${selectedConnection?.conid}&state=${encodeURIComponent(state)}&redirectUri=${extractRedirectUri()}`
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{:else if selectedConnection}
|
|
||||||
<FormSubmit
|
|
||||||
value="Log In"
|
|
||||||
on:click={async e => {
|
|
||||||
if (selectedConnection.passwordMode == 'askUser' || selectedConnection.passwordMode == 'askPassword') {
|
|
||||||
enableApi();
|
|
||||||
isTesting = true;
|
|
||||||
testIdRef.update(x => x + 1);
|
|
||||||
const testid = testIdRef.get();
|
|
||||||
const resp = await apiCall('connections/dblogin-auth', {
|
|
||||||
amoid: $values.amoid,
|
|
||||||
conid: selectedConnection.conid,
|
|
||||||
user: $values['login'],
|
|
||||||
password: $values['password'],
|
|
||||||
});
|
|
||||||
if (testIdRef.get() != testid) return;
|
|
||||||
isTesting = false;
|
|
||||||
if (resp.accessToken) {
|
|
||||||
localStorage.setItem('accessToken', resp.accessToken);
|
|
||||||
internalRedirectTo('/');
|
|
||||||
} else {
|
|
||||||
sqlConnectResult = resp;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
enableApi();
|
|
||||||
const resp = await apiCall('connections/dblogin-auth', {
|
|
||||||
amoid: $values.amoid,
|
|
||||||
conid: selectedConnection.conid,
|
|
||||||
});
|
|
||||||
localStorage.setItem('accessToken', resp.accessToken);
|
|
||||||
internalRedirectTo('/');
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<FormSubmit
|
|
||||||
value={isAdminPage
|
|
||||||
? 'Log In as Administrator'
|
|
||||||
: workflowType == 'redirect'
|
|
||||||
? 'Redirect to login page'
|
|
||||||
: 'Log In'}
|
|
||||||
on:click={async e => {
|
|
||||||
enableApi();
|
|
||||||
|
|
||||||
if (isAdminPage || workflowType == 'credentials' || workflowType == 'anonymous') {
|
|
||||||
await processCredentialsLogin($values.amoid, e.detail);
|
|
||||||
} else if (workflowType == 'redirect') {
|
|
||||||
await processRedirectLogin($values.amoid);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</FormProviderCore>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="loginButtonWrapper">
|
|
||||||
{#each availableProviders.filter(x => x.workflowType == 'anonymous' || x.workflowType == 'redirect') as provider}
|
|
||||||
<div class="loginButton" on:click={() => processSingleProvider(provider)}>
|
|
||||||
{provider.name}
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<FormProviderCore {values}>
|
||||||
|
{#if !isAdminPage && availableProviders?.length >= 2}
|
||||||
|
<FormSelectField
|
||||||
|
label="Authentization method"
|
||||||
|
name="amoid"
|
||||||
|
isNative
|
||||||
|
options={availableProviders.map(mtd => ({ value: mtd.amoid, label: mtd.name }))}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if !isAdminPage && availableConnections && workflowType == 'database'}
|
||||||
|
<FormSelectField
|
||||||
|
label="Database server"
|
||||||
|
name="databaseServer"
|
||||||
|
isNative
|
||||||
|
options={availableConnections.map(conn => ({ value: conn.conid, label: conn.label }))}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if selectedConnection}
|
||||||
|
{#if selectedConnection.passwordMode == 'askUser'}
|
||||||
|
<FormTextField label="Username" name="login" autocomplete="username" saveOnInput />
|
||||||
|
{/if}
|
||||||
|
{#if selectedConnection.passwordMode == 'askUser' || selectedConnection.passwordMode == 'askPassword'}
|
||||||
|
<FormPasswordField label="Password" name="password" autocomplete="current-password" saveOnInput />
|
||||||
|
{/if}
|
||||||
|
{:else}
|
||||||
|
{#if !isAdminPage && workflowType == 'credentials'}
|
||||||
|
<FormTextField label="Username" name="login" autocomplete="username" saveOnInput />
|
||||||
|
{/if}
|
||||||
|
{#if workflowType == 'credentials'}
|
||||||
|
<FormPasswordField label="Password" name="password" autocomplete="current-password" saveOnInput />
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if isAdminPage && $config && !$config.isAdminLoginForm}
|
||||||
|
<ErrorInfo message="Admin login is not configured. Please set ADMIN_PASSWORD environment variable" />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if isTesting}
|
||||||
|
<div class="ml-5">
|
||||||
|
<FontIcon icon="icon loading" /> Testing connection
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if !isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'error'}
|
||||||
|
<div class="error-result ml-5">
|
||||||
|
Connect failed: <FontIcon icon="img error" />
|
||||||
|
{sqlConnectResult.error}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="submit">
|
||||||
|
{#if selectedConnection?.useRedirectDbLogin}
|
||||||
|
<FormSubmit
|
||||||
|
value="Open database login page"
|
||||||
|
on:click={async e => {
|
||||||
|
const state = `dbg-dblogin:${strmid}:${selectedConnection?.conid}:${$values.amoid}`;
|
||||||
|
sessionStorage.setItem('dbloginAuthState', state);
|
||||||
|
// openWebLink(
|
||||||
|
// `connections/dblogin?conid=${selectedConnection?.conid}&state=${encodeURIComponent(state)}&redirectUri=${
|
||||||
|
// location.origin + location.pathname
|
||||||
|
// }`
|
||||||
|
// );
|
||||||
|
internalRedirectTo(
|
||||||
|
`/connections/dblogin-web?conid=${selectedConnection?.conid}&state=${encodeURIComponent(state)}&redirectUri=${extractRedirectUri()}`
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{:else if selectedConnection}
|
||||||
|
<FormSubmit
|
||||||
|
value="Log In"
|
||||||
|
on:click={async e => {
|
||||||
|
if (selectedConnection.passwordMode == 'askUser' || selectedConnection.passwordMode == 'askPassword') {
|
||||||
|
enableApi();
|
||||||
|
isTesting = true;
|
||||||
|
testIdRef.update(x => x + 1);
|
||||||
|
const testid = testIdRef.get();
|
||||||
|
const resp = await apiCall('connections/dblogin-auth', {
|
||||||
|
amoid: $values.amoid,
|
||||||
|
conid: selectedConnection.conid,
|
||||||
|
user: $values['login'],
|
||||||
|
password: $values['password'],
|
||||||
|
});
|
||||||
|
if (testIdRef.get() != testid) return;
|
||||||
|
isTesting = false;
|
||||||
|
if (resp.accessToken) {
|
||||||
|
localStorage.setItem('accessToken', resp.accessToken);
|
||||||
|
internalRedirectTo('/');
|
||||||
|
} else {
|
||||||
|
sqlConnectResult = resp;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
enableApi();
|
||||||
|
const resp = await apiCall('connections/dblogin-auth', {
|
||||||
|
amoid: $values.amoid,
|
||||||
|
conid: selectedConnection.conid,
|
||||||
|
});
|
||||||
|
localStorage.setItem('accessToken', resp.accessToken);
|
||||||
|
internalRedirectTo('/');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<FormSubmit
|
||||||
|
value={isAdminPage
|
||||||
|
? 'Log In as Administrator'
|
||||||
|
: workflowType == 'redirect'
|
||||||
|
? 'Redirect to login page'
|
||||||
|
: 'Log In'}
|
||||||
|
on:click={async e => {
|
||||||
|
enableApi();
|
||||||
|
|
||||||
|
if (isAdminPage || workflowType == 'credentials' || workflowType == 'anonymous') {
|
||||||
|
await processCredentialsLogin($values.amoid, e.detail);
|
||||||
|
} else if (workflowType == 'redirect') {
|
||||||
|
await processRedirectLogin($values.amoid);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</FormProviderCore>
|
||||||
|
|
||||||
|
<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}
|
||||||
|
</svelte:fragment>
|
||||||
|
</SpecialPageLayout>
|
||||||
|
|
||||||
<style>
|
<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 {
|
.submit {
|
||||||
margin: var(--dim-large-form-margin);
|
margin: var(--dim-large-form-margin);
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -315,30 +287,6 @@
|
|||||||
font-size: larger;
|
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 {
|
.wrap {
|
||||||
margin-top: 20vh;
|
margin-top: 20vh;
|
||||||
}
|
}
|
||||||
@@ -370,12 +318,6 @@
|
|||||||
background-color: var(--theme-bg-button-inv-3);
|
background-color: var(--theme-bg-button-inv-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loginButtonWrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-link {
|
.login-link {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
|
|||||||
@@ -64,6 +64,7 @@
|
|||||||
border: 1px solid var(--theme-border);
|
border: 1px solid var(--theme-border);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: var(--theme-bg-0);
|
background-color: var(--theme-bg-0);
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
|
|||||||
Reference in New Issue
Block a user