mirror of
https://github.com/DeNNiiInc/dbgate.git
synced 2026-04-19 01:26:01 +00:00
special page refactor
This commit is contained in:
Jan Prochazka
@@ -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,177 +132,151 @@
|
||||
}
|
||||
</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>
|
||||
<div class="login-link">
|
||||
{#if $config?.isAdminLoginForm}
|
||||
{#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>
|
||||
<SpecialPageLayout>
|
||||
<div class="heading">Log In</div>
|
||||
<div class="login-link">
|
||||
{#if $config?.isAdminLoginForm}
|
||||
{#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>
|
||||
</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>
|
||||
.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;
|
||||
|
||||
@@ -64,6 +64,7 @@
|
||||
border: 1px solid var(--theme-border);
|
||||
border-radius: 4px;
|
||||
background-color: var(--theme-bg-0);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
|
||||
Reference in New Issue
Block a user