Mirroristas/pockethost
2
0
Fork 0
mirror of https://github.com/pockethost/pockethost.git synced 2025-03-30 15:08:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finish cosmetics

Browse Source
This commit is contained in:
Ben Allfree 2022-09-19 12:12:31 -07:00
parent 32692fd131
commit cfd04716c6
15 changed files with 257 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/pockethost.io/src/components/Button/Button.svelte
View File

@ -1,22 +1,31 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation' import { goto } from '$app/navigation'
import { Button } from 'sveltestrap' import { Button } from 'sveltestrap'
import { ButtonStyles } from './types' import { ButtonColors, ButtonSizes } from './types'
export let style: ButtonStyles = ButtonStyles.Wide export let color: ButtonColors = ButtonColors.Primary
export let size: ButtonSizes = ButtonSizes.Normal
export let disabled = false export let disabled = false
export let href: string = '#' export let href: string = '#'
export let click: () => void = () => { export let click: () => void = () => {
goto(href) goto(href)
} }
const size = style === ButtonStyles.Micro ? 'sm' : 'lg'
</script> </script>
<Button <div class="button">
class={style} <Button
color={'primary'} class={size}
{disabled} {color}
block={style === ButtonStyles.Wide} {disabled}
{size} block={size === ButtonSizes.Wide}
on:click={click}><slot /></Button size={size === ButtonSizes.Micro ? 'sm' : 'lg'}
> on:click={click}><slot /></Button
>
</div>
<style lang="scss">
.button {
margin: 2px;
display: inline-block;
}
</style>

20
packages/pockethost.io/src/components/Button/types.ts
View File

@ -1,5 +1,21 @@
export enum ButtonStyles { export enum ButtonSizes {
Micro = 'micro', Micro = 'micro',
Normal = 'normal', Normal = 'normal',
Wide = 'wide', Wide = 'wide'
}
/**
* | 'primary'
| 'secondary'
| 'success'
| 'danger'
| 'warning'
| 'info'
| 'light'
| 'dark'
| 'link';
*/
export enum ButtonColors {
Primary = 'primary',
Light = 'light'
} }

47
packages/pockethost.io/src/components/CodeSample.svelte
View File

@ -1,35 +1,32 @@
<script lang="ts"> <script lang="ts">
import { Highlight } from 'svelte-highlight' import { Highlight } from 'svelte-highlight'
import { typescript } from 'svelte-highlight/languages' import { typescript } from 'svelte-highlight/languages'
import Clipboard from './Clipboard.svelte' import 'svelte-highlight/styles/github.css'
import 'svelte-highlight/styles/github.css' import CopyButton from './CopyButton.svelte'
import Button from './Button/Button.svelte'
import { ButtonStyles } from './Button/types'
import CopyButton from './CopyButton.svelte'
export let code: string export let code: string
const handleCopy = () => { const handleCopy = () => {
console.log('copied') console.log('copied')
} }
</script> </script>
<div class="copy-container"> <div class="copy-container">
<Highlight language={typescript} {code} /> <Highlight language={typescript} {code} />
<div class="copy-button"> <div class="copy-button">
<CopyButton {code} copy={handleCopy} /> <CopyButton {code} copy={handleCopy} />
</div> </div>
</div> </div>
<style type="text/scss"> <style type="text/scss">
.copy-container { .copy-container {
position: relative; position: relative;
margin: 5px; margin: 5px;
border: 1px solid gray; border: 1px solid gray;
.copy-button { .copy-button {
position: absolute; position: absolute;
top: 2px; top: 2px;
right: 2px; right: 2px;
} }
} }
</style> </style>

22
packages/pockethost.io/src/components/CopyButton.svelte
View File

@ -1,17 +1,17 @@
<script lang="ts"> <script lang="ts">
import Button from './Button/Button.svelte' import Button from './Button/Button.svelte'
import { ButtonStyles } from './Button/types' import { ButtonSizes } from './Button/types'
import Clipboard from './Clipboard.svelte' import Clipboard from './Clipboard.svelte'
let isCopied = false let isCopied = false
export let code: string export let code: string
export let copy: () => void export let copy: () => void
const handleCopy = () => { const handleCopy = () => {
isCopied = true isCopied = true
copy() copy()
} }
</script> </script>
<Clipboard text={code} let:copy on:copy={handleCopy}> <Clipboard text={code} let:copy on:copy={handleCopy}>
<Button style={ButtonStyles.Micro} click={copy}>{isCopied ? 'Copied!' : 'Copy'}</Button> <Button size={ButtonSizes.Micro} click={copy}>{isCopied ? 'Copied!' : 'Copy'}</Button>
</Clipboard> </Clipboard>

5
packages/pockethost.io/src/components/Icons/Github.svelte Normal file
View File

@ -0,0 +1,5 @@
<script>
import { Icon } from 'sveltestrap'
</script>
<Icon name="github" />

38
packages/pockethost.io/src/components/Navbar.svelte
View File

@ -1,9 +1,24 @@
<script lang="ts"> <script lang="ts">
import { redirect } from '$util/redirect' import { redirect } from '$util/redirect'
import { isLoggedIn, logOut, user } from '@pockethost/common/src/pocketbase' import { isLoggedIn, logOut, user } from '@pockethost/common/src/pocketbase'
import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'sveltestrap' import {
Collapse,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
Icon,
Nav,
Navbar,
NavbarBrand,
NavbarToggler,
NavItem,
NavLink
} from 'sveltestrap'
import logo from '../assets/logo-square.png' import logo from '../assets/logo-square.png'
import Github from './Icons/Github.svelte'
import NavbarBrandImage from './NavbarBrandImage.svelte' import NavbarBrandImage from './NavbarBrandImage.svelte'
import NavbarText from './NavbarText.svelte'
import Title from './Title/Title.svelte' import Title from './Title/Title.svelte'
import { TitleSize } from './Title/types' import { TitleSize } from './Title/types'
@ -28,15 +43,21 @@
<Collapse {isOpen} navbar expand="md" on:update={handleUpdate}> <Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
<Nav class="ms-auto" navbar> <Nav class="ms-auto" navbar>
{#if isLoggedIn()} {#if isLoggedIn()}
<NavItem> <NavItem />
<div class="navbar-text">Welcome back, {user()?.email}</div>
</NavItem>
<NavItem> <NavItem>
<NavLink href="/dashboard">Dashboard</NavLink> <NavLink href="/dashboard">Dashboard</NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem />
<NavLink on:click={handleLogout}>Logout</NavLink> <Dropdown nav inNavbar>
</NavItem> <DropdownToggle nav><Icon name="person-fill" /></DropdownToggle>
<DropdownMenu end>
<DropdownItem>
<NavbarText>{user()?.email}</NavbarText>
</DropdownItem>
<DropdownItem divider />
<DropdownItem><NavLink on:click={handleLogout}>Logout</NavLink></DropdownItem>
</DropdownMenu>
</Dropdown>
{/if} {/if}
{#if !isLoggedIn()} {#if !isLoggedIn()}
<NavItem> <NavItem>
@ -46,6 +67,9 @@
<NavLink href="/login">Log in</NavLink> <NavLink href="/login">Log in</NavLink>
</NavItem> </NavItem>
{/if} {/if}
<NavItem>
<NavLink href="https://github.com/benallfree/pockethost"><Github /></NavLink>
</NavItem>
</Nav> </Nav>
</Collapse> </Collapse>
</Navbar> </Navbar>

1
packages/pockethost.io/src/components/NavbarText.svelte Normal file
View File

@ -0,0 +1 @@
<div class="navbar-text"><slot /></div>

6
packages/pockethost.io/src/components/Title/Title.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import { TitleSize } from './types' import { TitleSize } from './types'
export let first = 'Pocket' export let first = ''
export let second = 'Host' export let second = ''
export let third = '' export let third = ''
export let size: TitleSize = TitleSize.Normal export let size: TitleSize = TitleSize.Normal
</script> </script>
@ -12,7 +12,7 @@
<style type="text/scss"> <style type="text/scss">
h1 { h1 {
color: #ff3e00; color: #ff3e00;
font-size: 12vw; font-size: 30px;
font-weight: 100; font-weight: 100;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;

10
packages/pockethost.io/src/routes/+layout.svelte
View File

@ -5,4 +5,12 @@
<Styles /> <Styles />
<Navbar /> <Navbar />
<slot /> <main>
<slot />
</main>
<style lang="scss">
main {
margin-top: 20px;
}
</style>

4
packages/pockethost.io/src/routes/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import Button from '$components/Button/Button.svelte' import Button from '$components/Button/Button.svelte'
import { ButtonStyles } from '$components/Button/types' import { ButtonSizes } from '$components/Button/types'
import Caption from '$components/Caption/Caption.svelte' import Caption from '$components/Caption/Caption.svelte'
import { CaptionSize } from '$components/Caption/types' import { CaptionSize } from '$components/Caption/types'
import Feature from '$components/Feature.svelte' import Feature from '$components/Feature.svelte'
@ -11,7 +11,7 @@
<Caption size={CaptionSize.Hero}>Firebase and Supabase...<br />ljbf</Caption> <Caption size={CaptionSize.Hero}>Firebase and Supabase...<br />ljbf</Caption>
<div style="max-width: 400px; margin-left: auto; margin-right: auto"> <div style="max-width: 400px; margin-left: auto; margin-right: auto">
<Button href="/signup" style={ButtonStyles.Wide}>Get Started Free</Button> <Button href="/signup" size={ButtonSizes.Wide}>Get Started Free</Button>
</div> </div>
<Gap /> <Gap />
<div> <div>

51
packages/pockethost.io/src/routes/app/instances/[instanceId]/+page.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores' import { page } from '$app/stores'
import Button from '$components/Button/Button.svelte'
import Caption from '$components/Caption/Caption.svelte' import Caption from '$components/Caption/Caption.svelte'
import CodeSample from '$components/CodeSample.svelte' import CodeSample from '$components/CodeSample.svelte'
import Protected from '$components/Protected.svelte' import Protected from '$components/Protected.svelte'
@ -38,29 +39,39 @@
</script> </script>
<Protected> <Protected>
<Title /> <main>
{#if instance} <Title />
{#if instance.status === InstanceStatuses.Started} {#if instance}
<Caption>Your PocketHost instance is now live.</Caption> {#if instance.status === InstanceStatuses.Started}
<div> <ProvisioningStatus status={instance.status} />
Admin URL: <a href={`${url}/_`} target="_blank">{`${url}/_`}</a>
</div> <div>
<div> Admin URL: <a href={`${url}/_`} target="_blank">{`${url}/_`}</a>
JavaScript: </div>
<CodeSample {code} /> <div>
</div> JavaScript:
<CodeSample {code} />
</div>
{/if}
{#if instance.status !== InstanceStatuses.Started}
<Caption>Please stand by, your instance is starting now...</Caption>
<div class="provisioning">
<ProvisioningStatus status={instance.status} size={ProvisioningSize.Hero} />
</div>
{/if}
{/if} {/if}
{#if instance.status !== InstanceStatuses.Started} <Button href="/dashboard">&lt; Back to Dashboard</Button>
<Caption>Please stand by, your instance is starting now...</Caption> </main>
<div class="provisioning">
<ProvisioningStatus status={instance.status} size={ProvisioningSize.Hero} />
</div>
{/if}
{/if}
</Protected> </Protected>
<style lang="scss"> <style lang="scss">
.provisioning { main {
text-align: center; margin: 10px;
.provisioning {
text-align: center;
}
a {
text-decoration: initial;
}
} }
</style> </style>

8
packages/pockethost.io/src/routes/app/new/+page.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { browser } from '$app/environment' import { browser } from '$app/environment'
import Button from '$components/Button/Button.svelte' import Button from '$components/Button/Button.svelte'
import { ButtonStyles } from '$components/Button/types' import { ButtonColors, ButtonSizes } from '$components/Button/types'
import Error from '$components/Error/Error.svelte' import Error from '$components/Error/Error.svelte'
import { parseError } from '$components/Error/parseError' import { parseError } from '$components/Error/parseError'
import Protected from '$components/Protected.svelte' import Protected from '$components/Protected.svelte'
@ -48,13 +48,12 @@
</script> </script>
<Protected> <Protected>
<Title /> <Title first="New" second="App" />
<main> <main>
<h2>New App</h2>
<div class="caption">Choose a name for your PocketBase app.</div> <div class="caption">Choose a name for your PocketBase app.</div>
<div class="subdomain"> <div class="subdomain">
<label for="instanceName">Instance Name</label> <label for="instanceName">Instance Name</label>
<Button click={() => (instanceName = generateSlug(2))} style={ButtonStyles.Micro}> <Button click={() => (instanceName = generateSlug(2))} size={ButtonSizes.Micro}>
<Fa icon={faRefresh} /></Button <Fa icon={faRefresh} /></Button
> >
@ -67,6 +66,7 @@
</div> </div>
<Error>{errorMessage}</Error> <Error>{errorMessage}</Error>
<Button click={handleCreate}>Create</Button> <Button click={handleCreate}>Create</Button>
<Button href={`/dashboard`} color={ButtonColors.Light}>Cancel</Button>
</main> </main>
</Protected> </Protected>

71
packages/pockethost.io/src/routes/dashboard/+page.svelte
View File

@ -1,12 +1,14 @@
<script lang="ts"> <script lang="ts">
import Button from '$components/Button/Button.svelte' import Button from '$components/Button/Button.svelte'
import { ButtonStyles } from '$components/Button/types' import { ButtonSizes } from '$components/Button/types'
import Gap from '$components/Gap.svelte'
import Protected from '$components/Protected.svelte' import Protected from '$components/Protected.svelte'
import ProvisioningStatus from '$components/ProvisioningStatus/ProvisioningStatus.svelte' import ProvisioningStatus from '$components/ProvisioningStatus/ProvisioningStatus.svelte'
import Title from '$components/Title/Title.svelte' import Title from '$components/Title/Title.svelte'
import { getAllInstancesById } from '@pockethost/common/src/pocketbase' import { getAllInstancesById } from '@pockethost/common/src/pocketbase'
import { InstanceStatuses, type Instance_Out_ByIdCollection } from '@pockethost/common/src/schema' import { InstanceStatuses, type Instance_Out_ByIdCollection } from '@pockethost/common/src/schema'
import { values } from '@s-libs/micro-dash' import { values } from '@s-libs/micro-dash'
import { Col, Container, Row } from 'sveltestrap'
let apps: Instance_Out_ByIdCollection = {} let apps: Instance_Out_ByIdCollection = {}
getAllInstancesById() getAllInstancesById()
@ -19,39 +21,56 @@
</script> </script>
<Protected> <Protected>
<Title /> <Title first="Dash" second="board" />
<main> <main>
<h2>Dashboard</h2> <h2>Apps</h2>
<h4>Apps</h4> <Container>
{#each values(apps) as app} {#each values(apps) as app}
<div> <Row>
<ProvisioningStatus status={app.status} /> <Col>
{app.subdomain}.pockethost.io <ProvisioningStatus status={app.status} />
</Col>
<Col>
{app.subdomain}.pockethost.io
</Col>
<Button style={ButtonStyles.Micro} href={`/app/instances/${app.id}`}>Details</Button> <Col>
<Button <Button size={ButtonSizes.Micro} href={`/app/instances/${app.id}`}>Details</Button>
disabled={app.status !== InstanceStatuses.Started}
style={ButtonStyles.Micro} <Button
click={() => { disabled={app.status !== InstanceStatuses.Started}
window.open(`https://${app.subdomain}.pockethost.io/_`) size={ButtonSizes.Micro}
}}>Admin</Button click={() => {
> window.open(`https://${app.subdomain}.pockethost.io/_`)
</div> }}>Admin</Button
{/each} >
<Button href="/app/new">+</Button> </Col>
</Row>
{/each}
</Container>
<Gap />
<div class="newApp">
<Button href="/app/new" size={ButtonSizes.Wide}>+ New App</Button>
</div>
</main> </main>
</Protected> </Protected>
<style type="text/scss"> <style type="text/scss">
main { main {
padding: 1em; margin-top: 10px;
margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 10px;
.caption { margin-left: auto;
font-size: 30px; max-width: 600px;
margin-top: 20px; padding: 10px;
margin-bottom: 20px; h2 {
text-align: center;
}
.newApp {
width: 200px;
margin-left: auto;
margin-right: auto;
text-align: center;
} }
} }
</style> </style>

40
packages/pockethost.io/src/routes/login/+page.svelte
View File

@ -3,6 +3,7 @@
import Title from '$components/Title/Title.svelte' import Title from '$components/Title/Title.svelte'
import { redirect } from '$util/redirect' import { redirect } from '$util/redirect'
import { authViaEmail } from '@pockethost/common/src/pocketbase' import { authViaEmail } from '@pockethost/common/src/pocketbase'
import { Form, FormGroup, Input, Label } from 'sveltestrap'
let email = '' let email = ''
let password = '' let password = ''
@ -21,18 +22,21 @@
} }
</script> </script>
<Title first="Log" second="In" /> <Title first="Log" second="in" />
<main> <main>
<error>{loginError}</error> <error>{loginError}</error>
<div> <Form>
<label for="email">Email</label> <FormGroup>
<input name="email" type="email" bind:value={email} /> <Label for="email">Email</Label>
</div> <Input type="email" id="email" bind:value={email} />
<div> </FormGroup>
<label for="password">Password</label> <FormGroup>
<input name="password" type="password" bind:value={password} /> <Label for="password">Password</Label>
</div> <Input type="password" id="password" bind:value={password} />
</FormGroup>
</Form>
<div> <div>
Need to <a href="/signup">create an account</a>? Need to <a href="/signup">create an account</a>?
</div> </div>
@ -40,25 +44,9 @@
</main> </main>
<style type="text/scss"> <style type="text/scss">
error {
color: red;
display: block;
}
label {
display: block;
font-weight: bold;
width: 200px;
}
main { main {
padding: 1em; max-width: 300px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.caption {
font-size: 30px;
margin-top: 20px;
margin-bottom: 20px;
}
</style> </style>

72
packages/pockethost.io/src/routes/signup/+page.svelte
View File

@ -1,12 +1,15 @@
<script lang="ts"> <script lang="ts">
import Button from '$components/Button/Button.svelte' import Button from '$components/Button/Button.svelte'
import Error from '$components/Error/Error.svelte'
import { parseError } from '$components/Error/parseError' import { parseError } from '$components/Error/parseError'
import Title from '$components/Title/Title.svelte' import Title from '$components/Title/Title.svelte'
import { TitleSize } from '$components/Title/types'
import { redirect } from '$util/redirect' import { redirect } from '$util/redirect'
import { authViaEmail, createUser } from '@pockethost/common/src/pocketbase' import { authViaEmail, createUser } from '@pockethost/common/src/pocketbase'
import { Form, FormGroup, Input, Label } from 'sveltestrap'
let email = '' let email = ''
let errorMessage = '' let emailError = ''
let password = '' let password = ''
let passwordError = '' let passwordError = ''
@ -19,7 +22,7 @@
// .catch((e) => console.error(`user login error`, e)) // .catch((e) => console.error(`user login error`, e))
const handleSignup = () => { const handleSignup = () => {
errorMessage = '' emailError = ''
passwordError = '' passwordError = ''
createUser(email, password) createUser(email, password)
.then((user) => { .then((user) => {
@ -33,25 +36,27 @@
.catch((e) => console.error(`user login error`, e)) .catch((e) => console.error(`user login error`, e))
}) })
.catch((e) => { .catch((e) => {
errorMessage = parseError(e) emailError = parseError(e)
console.error(errorMessage, e) console.error(emailError, e)
}) })
} }
</script> </script>
<Title first="Sign" second="Up" /> <Title first="Sign" second="up" size={TitleSize.Normal} />
<main> <main>
<div> <Form>
<label for="email">Email</label> <FormGroup>
<input name="email" type="email" bind:value={email} /> <Label for="email">Email Address</Label>
<error>{errorMessage}</error> <Input type="email" bind:value={email} id="email" />
</div> <Error>{emailError}</Error>
<div> </FormGroup>
<label for="password">Password</label> <FormGroup>
<input name="password" type="password" bind:value={password} /> <Label for="password">Password</Label>
<error>{passwordError}</error> <Input type="password" name="password" id="password" bind:value={password} />
</div> <Error>{passwordError}</Error>
</FormGroup>
</Form>
<Button click={handleSignup} disabled={email.length === 0 || password.length === 0}> <Button click={handleSignup} disabled={email.length === 0 || password.length === 0}>
Sign Up Sign Up
</Button> </Button>
@ -61,25 +66,30 @@
</main> </main>
<style type="text/scss"> <style type="text/scss">
error {
color: red;
display: block;
}
label {
display: block;
font-weight: bold;
width: 200px;
}
main { main {
padding: 1em; max-width: 300px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} error {
color: red;
display: block;
}
.caption { label {
font-size: 30px; display: block;
margin-top: 20px; font-weight: bold;
margin-bottom: 20px; width: 200px;
}
main {
padding: 1em;
margin-left: auto;
margin-right: auto;
}
.caption {
font-size: 30px;
margin-top: 20px;
margin-bottom: 20px;
}
} }
</style> </style>