samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed GoogleAuth and clearMessages again and updated the routing and navigation

Browse Source
This commit is contained in:
Samuel Andert 2023-07-27 12:41:56 +02:00
parent e2ea57e89f
commit 1ce7b80c9b
13 changed files with 170 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -15,6 +15,7 @@
"test:unit": "vitest"
},
"devDependencies": {
"@iconify/svelte": "^3.1.4",
"@playwright/test": "^1.28.1",
"@skeletonlabs/skeleton": "^1.10.0",
"@sveltejs/adapter-auto": "^2.0.0",

16
pnpm-lock.yaml
View File

@ -36,6 +36,9 @@ dependencies:
version: 1.4.1(typescript@5.1.6)
devDependencies:
'@iconify/svelte':
specifier: ^3.1.4
version: 3.1.4(svelte@4.1.1)
'@playwright/test':
specifier: ^1.28.1
version: 1.36.2
@ -845,6 +848,19 @@ packages:
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
dev: true
/@iconify/svelte@3.1.4(svelte@4.1.1):
resolution: {integrity: sha512-YDwQlN46ka8KPRayDb7TivmkAPizfTXi6BSRNqa1IV0+byA907n8JcgQafA7FD//pW5XCuuAhVx6uRbKTo+CfA==}
peerDependencies:
svelte: '*'
dependencies:
'@iconify/types': 2.0.0
svelte: 4.1.1
dev: true
/@iconify/types@2.0.0:
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
dev: true
/@ipld/dag-cbor@6.0.15:
resolution: {integrity: sha512-Vm3VTSTwlmGV92a3C5aeY+r2A18zbH2amehNhsX8PBa3muXICaWrN8Uri85A5hLH7D7ElhE8PdjxD6kNqUmTZA==}
dependencies:

26
src/lib/components/Actions.svelte Normal file
View File

@ -0,0 +1,26 @@
<script>
import { clearMessages } from '$lib/services/messages/messages';
import { drawerStore } from '@skeletonlabs/skeleton';
function handleClear() {
clearMessages();
drawerStore.close();
}
let buttons = [
{
label: 'clear Messages',
handler: handleClear
}
];
</script>
<div class="flex flex-col items-start p-4">
<h2 class="mb-4 font-bold h3">Actions</h2>
{#each buttons as button}
<button on:click={button.handler} class="btn variant-filled-secondary">
{button.label}
</button>
{/each}
</div>

4
src/lib/components/AppBar.svelte
View File

@ -1,12 +1,8 @@
<script>
import { AppBar } from '@skeletonlabs/skeleton';
import { Avatar } from '@skeletonlabs/skeleton';
</script>
<AppBar>
<svelte:fragment slot="lead"
><Avatar src="logo.png" width="w-8" rounded="rounded-full" /></svelte:fragment
>
<h1 class="h4">Nova</h1>
<!-- <svelte:fragment slot="trail">(actions)</svelte:fragment> -->
</AppBar>

31
src/lib/components/Apps.svelte
View File

@ -1,17 +1,26 @@
<script>
import Icon from '@iconify/svelte';
import { drawerStore } from '@skeletonlabs/skeleton';
const routes = [
{ path: '/', name: 'Home', icon: '🏠' },
{ path: '/wallet', name: 'Wallet', icon: '💼' },
{ path: '/helloearth', name: 'Hello Earth', icon: '🌍' },
{ path: '/login', name: 'Login', icon: '🔑' }
{ path: '/', name: 'Home', icon: 'iconoir:home-simple-door' },
{ path: '/messages', name: 'Messages', icon: 'iconoir:message-text' },
{ path: '/wallet', name: 'Wallet', icon: 'iconoir:wallet' },
{ path: '/helloearth', name: 'Hello Earth', icon: 'iconoir:planet-sat' }
];
function closeDrawer() {
drawerStore.close();
}
</script>
<div class="logo-cloud grid-cols-1 lg:!grid-cols-4 gap-1">
{#each routes as route, index}
<a class="logo-item" href={route.path}>
<span>{route.icon}</span>
<span>{route.name}</span>
</a>
{/each}
<div class="flex flex-col items-start p-4">
<h2 class="font-bold h3">Apps</h2>
<div class="flex space-x-4">
{#each routes as route}
<a class="flex flex-col items-center w-28 logo-item" href={route.path} on:click={closeDrawer}>
<Icon icon={route.icon} width="96" height="96" />
<span class="mt-2 text-center">{route.name}</span>
</a>
{/each}
</div>
</div>

75
src/lib/components/GoogleAuth.svelte
View File

@ -5,8 +5,10 @@
import { ProviderType } from '@lit-protocol/constants';
import { createMessage } from '$lib/services/messages/messages';
import { createLitSession } from '$lib/services/createLitSession/createLitSession';
import Icon from '@iconify/svelte';
import Apps from '$lib/components/Apps.svelte';
const redirectUri = 'http://localhost:5173/login/';
const redirectUri = 'http://localhost:5173/';
export let services;
@ -109,37 +111,42 @@
}
</script>
<main>
{#if error}
<h1>Error</h1>
<p>{error.message}</p>
<button on:click={resetView}>Got it</button>
{:else if isLoading}
<h1>Loading...</h1>
{:else if view === 'sign_in'}
<h1>Sign in with Lit</h1>
<button on:click={authWithGoogle}>Google</button>
{:else if view === 'fetching'}
<h1>Fetching your PKPs...</h1>
{:else if view === 'NO_PKPS'}
<h1>No PKPs found.</h1>
<button on:click={mint}>Mint a PKP</button>
{:else if view === 'fetched'}
<h1>Select a PKP to continue</h1>
{#each pkps as pkp}
<button on:click={async () => await createSession(pkp)}>{pkp.ethAddress}</button>
{/each}
{:else if view === 'MINTING'}
<h1>Minting your PKP...</h1>
{:else if view === 'MINTED'}
<h1>Minted!</h1>
{:else if view === 'CREATING_SESSION'}
<h1>Creating session...</h1>
{:else if view === 'SESSION_CREATED'}
<h1>Ready for the open web</h1>
<div>
<p>Check out your PKP:</p>
<p>{currentPKP.ethAddress}</p>
</div>
{/if}
<main class="flex items-center justify-center h-full">
<div class="text-center">
{#if error}
<h1>Error</h1>
<p>{error.message}</p>
<button on:click={resetView}>Got it</button>
{:else if isLoading}
<h1>Loading...</h1>
{:else if view === 'sign_in'}
<button on:click={authWithGoogle} class="btn variant-filled">
<span><Icon icon="flat-color-icons:google" /></span>
<span>Sign in with Google</span>
</button>
{:else if view === 'fetching'}
<h1>Fetching your PKPs...</h1>
{:else if view === 'NO_PKPS'}
<h1>No PKPs found.</h1>
<button on:click={mint}>Mint a PKP</button>
{:else if view === 'fetched'}
<h1>Select a PKP to continue</h1>
{#each pkps as pkp}
<button on:click={async () => await createSession(pkp)}>{pkp.ethAddress}</button>
{/each}
{:else if view === 'MINTING'}
<h1>Minting your PKP...</h1>
{:else if view === 'MINTED'}
<h1>Minted!</h1>
{:else if view === 'CREATING_SESSION'}
<h1>Creating session...</h1>
{:else if view === 'SESSION_CREATED'}
<h1>Ready for the open web</h1>
<div>
<p>Check out your PKP:</p>
<p>{currentPKP.ethAddress}</p>
</div>
<Apps />
{/if}
</div>
</main>

9
src/lib/components/Navigation.svelte Normal file
View File

@ -0,0 +1,9 @@
<script lang="ts">
import Apps from '$lib/components/Apps.svelte';
import Actions from '$lib/components/Actions.svelte';
</script>
<div>
<Actions />
<Apps />
</div>

22
src/lib/components/Terminal.svelte
View File

@ -1,14 +1,16 @@
<!-- TerminalComponent.svelte -->
<script lang="ts">
import { createMessage, clearMessages } from '$lib/services/messages/messages';
import { createMessage } from '$lib/services/messages/messages';
import { drawerStore } from '@skeletonlabs/skeleton';
import type { DrawerSettings } from '@skeletonlabs/skeleton';
import { Avatar } from '@skeletonlabs/skeleton';
const drawerSettings: DrawerSettings = {
position: 'bottom',
id: 'drawer',
meta: { id: 'apps', component: 'Apps' }
meta: { id: 'navigation', component: 'Navigation' },
height: 'auto'
};
const openDrawer = () => {
@ -45,18 +47,15 @@
createMessage(message);
}
}
// Clear messages logic
function handleClear() {
clearMessages();
}
</script>
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] rounded-container-token h-12">
<button class="input-group-shim" on:click={openDrawer}>+</button>
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] rounded-container-token h-14">
<button class="input-group-shim" on:drawer{closeDrawer} on:click={openDrawer}>
<Avatar src="logo.png" width="w-10" rounded="rounded-full" />
</button>
<textarea
class="bg-transparent border-0 ring-0"
<input
class="p-4 bg-transparent border-0 ring-0"
name="prompt"
id="prompt"
placeholder="Write a message..."
@ -65,5 +64,4 @@
on:keydown={handleKeyDown}
/>
<button class="variant-filled-primary" on:click={() => sendMessage(newMessageText)}>Send</button>
<!-- <button class="variant-filled-primary" on:click={handleClear}>clear</button> -->
</div>

13
src/lib/core/Composite.svelte
View File

@ -39,6 +39,7 @@
if (composite?.children) {
composite.children.forEach((child) => {
initializeCompositeState(child);
initializeAndLoadServices(child);
mapAndSubscribe(child);
});
@ -161,7 +162,10 @@
}
</script>
<div class={`grid w-full h-full ${composite?.layout?.tailwindClasses || ''}`} style={layoutStyle}>
<div
class={`grid w-full h-full overflow-hidden ${composite?.layout?.tailwindClasses || ''}`}
style={layoutStyle}
>
{#if composite?.servicesLoaded}
{#await loadComponentAndService(composite) then Component}
{#if Component}
@ -171,15 +175,16 @@
store={getCompositeStore(composite.id)}
services={loadedServices}
/>
{:else}
<p>Component {composite.component} not found.</p>
{/if}
{/await}
{/if}
{#if composite?.children}
{#each composite.children as child (child.id)}
<div class="w-full h-full overflow-hidden" style={`grid-area: ${child.slot}`}>
<div
class="grid w-full h-full overflow-hidden ${composite?.layout?.tailwindClasses || ''}"
style={`grid-area: ${child.slot}`}
>
{#if child.servicesLoaded}
{#await loadComponentAndService(child) then ChildComponent}
{#if ChildComponent}

2
src/routes/+layout.svelte
View File

@ -6,7 +6,6 @@
import { initChainProvider } from '$lib/services/provider/setupChainProvider';
import { onMount } from 'svelte';
import { Modal, modalStore } from '@skeletonlabs/skeleton';
import { Drawer, drawerStore } from '@skeletonlabs/skeleton';
import Composite from '$lib/core/Composite.svelte';
@ -19,7 +18,6 @@
});
</script>
<Modal />
<Drawer>
<Composite composite={$drawerStore.meta} />
</Drawer>

30
src/routes/+page.svelte
View File

@ -1,34 +1,10 @@
<script>
import Composite from '$lib/core/Composite.svelte';
import { dataStore } from '$lib/core/dataLoader';
$: console.log('Data Store contents:', $dataStore);
let composite = {
id: 'composite',
layout: {
areas: `
"top top"
"main main"
"footer footer";
`,
columns: '1fr 300px',
rows: 'auto 1fr auto'
},
children: [
{ id: 'appbar', component: 'AppBar', slot: 'top' },
{
id: 'me',
component: 'Messages',
slot: 'main',
map: { messages: 'data.queryMessages' }
},
{
id: 'terminal',
component: 'Terminal',
slot: 'footer'
}
]
id: 'google',
component: 'GoogleAuth',
services: ['setupLit']
};
</script>

17
src/routes/login/+page.svelte
View File

@ -1,17 +0,0 @@
<script>
import Composite from '$lib/core/Composite.svelte';
let composite = {
id: 'login',
children: [
{
id: 'google',
component: 'GoogleAuth',
slot: 'main',
services: ['setupLit']
}
]
};
</script>
<Composite {composite} />

35
src/routes/messages/+page.svelte Normal file
View File

@ -0,0 +1,35 @@
<script>
import Composite from '$lib/core/Composite.svelte';
import { dataStore } from '$lib/core/dataLoader';
$: console.log('Data Store contents:', $dataStore);
let composite = {
id: 'composite',
layout: {
areas: `
"top top"
"main main"
"footer footer";
`,
columns: '1fr 300px',
rows: 'auto 1fr auto'
},
children: [
{ id: 'appbar', component: 'AppBar', slot: 'top' },
{
id: 'me',
component: 'Messages',
slot: 'main',
map: { messages: 'data.queryMessages' }
},
{
id: 'terminal',
component: 'Terminal',
slot: 'footer'
}
]
};
</script>
<Composite {composite} />