dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-29 00:36:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

special page refactor

Browse Source
This commit is contained in:
Jan Prochazka
2024-10-21 13:02:50 +02:00
parent e9302c7d6f
commit 3fdf27f820
4 changed files with 193 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
packages/web/src/EnterLicensePage.svelte
View File

@@ -1,10 +1,8 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { useConfig } from './utility/metadataLoaders'; import { useConfig } from './utility/metadataLoaders';
import ErrorInfo from './elements/ErrorInfo.svelte';
import Link from './elements/Link.svelte'; import Link from './elements/Link.svelte';
import { internalRedirectTo } from './clientAuth'; import { internalRedirectTo } from './clientAuth';
import TextAreaField from './forms/TextAreaField.svelte';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import FormProviderCore from './forms/FormProviderCore.svelte'; import FormProviderCore from './forms/FormProviderCore.svelte';
import FormTextAreaField from './forms/FormTextAreaField.svelte'; import FormTextAreaField from './forms/FormTextAreaField.svelte';
@@ -13,6 +11,7 @@
import FormStyledButton from './buttons/FormStyledButton.svelte'; import FormStyledButton from './buttons/FormStyledButton.svelte';
import getElectron from './utility/getElectron'; import getElectron from './utility/getElectron';
import { openWebLink } from './utility/exportFileTools'; import { openWebLink } from './utility/exportFileTools';
import SpecialPageLayout from './widgets/SpecialPageLayout.svelte';
const config = useConfig(); const config = useConfig();
const values = writable({ amoid: null, databaseServer: null }); const values = writable({ amoid: null, databaseServer: null });
@@ -35,144 +34,90 @@
</script> </script>
<FormProviderCore {values}> <FormProviderCore {values}>
<div class="root theme-light theme-type-light"> <SpecialPageLayout>
<div class="text">DbGate</div> <div class="heading">License</div>
<div class="wrap"> <FormTextAreaField label="Enter your license key" name="licenseKey" rows={5} />
<div class="logo">
<img class="img" src="logo192.png" />
</div>
<div class="box">
<div class="heading">License</div>
<FormTextAreaField label="Enter your license key" name="licenseKey" rows={5} />
<div class="submit"> <div class="submit">
<FormSubmit <FormSubmit
value="Save license" value="Save license"
on:click={async e => { on:click={async e => {
sessionStorage.setItem('continueTrialConfirmed', '1'); sessionStorage.setItem('continueTrialConfirmed', '1');
const { licenseKey } = e.detail; const { licenseKey } = e.detail;
const resp = await apiCall('config/save-license-key', { licenseKey }); const resp = await apiCall('config/save-license-key', { licenseKey });
if (resp?.status == 'ok') { if (resp?.status == 'ok') {
internalRedirectTo('/index.html'); internalRedirectTo('/index.html');
} else { } else {
errorMessage = resp?.errorMessage || 'Error saving license key'; errorMessage = resp?.errorMessage || 'Error saving license key';
} }
}} }}
/> />
</div>
{#if !isExpired && trialDaysLeft == null}
<div class="submit">
<FormStyledButton
value="Start 30-day trial"
on:click={async e => {
errorMessage = '';
const license = await apiCall('config/start-trial');
if (license?.status == 'ok') {
sessionStorage.setItem('continueTrialConfirmed', '1');
internalRedirectTo('/index.html');
} else {
errorMessage = license?.errorMessage || 'Error starting trial';
}
}}
/>
</div>
{/if}
{#if trialDaysLeft > 0}
<div class="submit">
<FormStyledButton
value={`Continue trial (${trialDaysLeft} days left)`}
on:click={async e => {
sessionStorage.setItem('continueTrialConfirmed', '1');
internalRedirectTo('/index.html');
}}
/>
</div>
{/if}
<div class="submit">
<FormStyledButton
value="Purchase DbGate Premium"
on:click={async e => {
openWebLink(
`https://auth.dbgate.eu/create-checkout-session-simple?source=trial-${isExpired ? 'expired' : (trialDaysLeft ?? 'no')}`
);
}}
/>
</div>
{#if getElectron()}
<div class="submit">
<FormStyledButton
value="Exit"
on:click={e => {
getElectron().send('quit-app');
}}
/>
</div>
{/if}
{#if errorMessage}
<div class="error">{errorMessage}</div>
{/if}
<div class="purchase-info">
For more info about DbGate licensing, you could visit <Link href="https://dbgate.eu/">dbgate.eu</Link> web or contact
us at <Link href="mailto:sales@dbgate.eu">sales@dbgate.eu</Link>
</div>
</div>
</div> </div>
</div>
{#if !isExpired && trialDaysLeft == null}
<div class="submit">
<FormStyledButton
value="Start 30-day trial"
on:click={async e => {
errorMessage = '';
const license = await apiCall('config/start-trial');
if (license?.status == 'ok') {
sessionStorage.setItem('continueTrialConfirmed', '1');
internalRedirectTo('/index.html');
} else {
errorMessage = license?.errorMessage || 'Error starting trial';
}
}}
/>
</div>
{/if}
{#if trialDaysLeft > 0}
<div class="submit">
<FormStyledButton
value={`Continue trial (${trialDaysLeft} days left)`}
on:click={async e => {
sessionStorage.setItem('continueTrialConfirmed', '1');
internalRedirectTo('/index.html');
}}
/>
</div>
{/if}
<div class="submit">
<FormStyledButton
value="Purchase DbGate Premium"
on:click={async e => {
openWebLink(
`https://auth.dbgate.eu/create-checkout-session-simple?source=trial-${isExpired ? 'expired' : (trialDaysLeft ?? 'no')}`
);
}}
/>
</div>
{#if getElectron()}
<div class="submit">
<FormStyledButton
value="Exit"
on:click={e => {
getElectron().send('quit-app');
}}
/>
</div>
{/if}
{#if errorMessage}
<div class="error">{errorMessage}</div>
{/if}
<div class="purchase-info">
For more info about DbGate licensing, you could visit <Link href="https://dbgate.eu/">dbgate.eu</Link> web or contact
us at <Link href="mailto:sales@dbgate.eu">sales@dbgate.eu</Link>
</div>
</SpecialPageLayout>
</FormProviderCore> </FormProviderCore>
<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;
}
.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);
}
.wrap {
margin-top: 20vh;
}
.heading { .heading {
text-align: center; text-align: center;
margin: 1em; margin: 1em;

87
packages/web/src/ErrorPage.svelte
View File

@@ -4,6 +4,7 @@
import ErrorInfo from './elements/ErrorInfo.svelte'; import ErrorInfo from './elements/ErrorInfo.svelte';
import Link from './elements/Link.svelte'; import Link from './elements/Link.svelte';
import { internalRedirectTo } from './clientAuth'; import { internalRedirectTo } from './clientAuth';
import SpecialPageLayout from './widgets/SpecialPageLayout.svelte';
const config = useConfig(); const config = useConfig();
@@ -16,79 +17,25 @@
}); });
</script> </script>
<div class="root theme-light theme-type-light"> <SpecialPageLayout>
<div class="text">DbGate</div> <div class="heading">Configuration error</div>
<div class="wrap"> {#if $config?.checkedLicense?.status == 'error'}
<div class="logo"> <ErrorInfo
<img class="img" src="logo192.png" /> message={`Invalid license. Please contact sales@dbgate.eu for more details. ${$config?.checkedLicense?.error}`}
/>
{:else if $config?.configurationError}
<ErrorInfo message={$config?.configurationError} />
{:else if error}
<ErrorInfo message={error} />
{:else}
<ErrorInfo message="No error found, try to open app again" />
<div class="m-2">
<Link onClick={() => internalRedirectTo('/')}>Back to app</Link>
</div> </div>
<div class="box"> {/if}
<div class="heading">Configuration error</div> </SpecialPageLayout>
{#if $config?.checkedLicense?.status == 'error'}
<ErrorInfo
message={`Invalid license. Please contact sales@dbgate.eu for more details. ${$config?.checkedLicense?.error}`}
/>
{:else if $config?.configurationError}
<ErrorInfo message={$config?.configurationError} />
{:else if error}
<ErrorInfo message={error} />
{:else}
<ErrorInfo message="No error found, try to open app again" />
<div class="m-2">
<Link onClick={() => internalRedirectTo('/')}>Back to app</Link>
</div>
{/if}
</div>
</div>
</div>
<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;
}
.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);
}
.wrap {
margin-top: 20vh;
}
.heading { .heading {
text-align: center; text-align: center;
margin: 1em; margin: 1em;

26
packages/web/src/NotLoggedPage.svelte
View File

@@ -2,6 +2,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import FormStyledButton from './buttons/FormStyledButton.svelte'; import FormStyledButton from './buttons/FormStyledButton.svelte';
import { doLogout, redirectToAdminLogin, redirectToLogin } from './clientAuth'; import { doLogout, redirectToAdminLogin, redirectToLogin } from './clientAuth';
import SpecialPageLayout from './widgets/SpecialPageLayout.svelte';
onMount(() => { onMount(() => {
const removed = document.getElementById('starting_dbgate_zero'); const removed = document.getElementById('starting_dbgate_zero');
@@ -21,26 +22,23 @@
} }
</script> </script>
<div class="root theme-light theme-type-light"> <SpecialPageLayout>
<div class="title">Sorry, you are not authorized to run DbGate</div> <div class="my-6">
{#if error} <div class="title">Sorry, you are not authorized to run DbGate</div>
<div class="error">{error}</div> {#if error}
{/if} <div class="error">{error}</div>
{/if}
<div class="button"> <div class="button">
<FormStyledButton value="Log In" on:click={handleLogin} /> <FormStyledButton value="Log In" on:click={handleLogin} />
<FormStyledButton value="Log Out" on:click={doLogout} /> <FormStyledButton value="Log Out" on:click={doLogout} />
</div>
</div> </div>
</div> </SpecialPageLayout>
<style> <style>
.root {
color: var(--theme-font-1);
}
.title { .title {
font-size: x-large; font-size: x-large;
margin-top: 20vh;
text-align: center; text-align: center;
} }

84
packages/web/src/widgets/SpecialPageLayout.svelte Normal file
View File

@@ -0,0 +1,84 @@
<script lang="ts">
import { onMount } from 'svelte';
import { useConfig } from '../utility/metadataLoaders';
import ErrorInfo from '../elements/ErrorInfo.svelte';
import Link from '../elements/Link.svelte';
import { internalRedirectTo } from '../clientAuth';
const config = useConfig();
const params = new URLSearchParams(location.search);
const error = params.get('error');
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">
<slot />
</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: 30pt;
font-family: monospace;
color: var(--theme-bg-2);
text-transform: uppercase;
}
.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);
}
.wrap {
margin-top: 20vh;
}
.heading {
text-align: center;
margin: 1em;
font-size: xx-large;
}
</style>