Major UI upgrade

This commit is contained in:
Samuel Andert 2023-09-06 15:08:55 +02:00
parent 102f4fa855
commit aaf4a7461a
15 changed files with 220 additions and 120 deletions

View File

@ -21,6 +21,7 @@
"@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-static": "^2.0.3", "@sveltejs/adapter-static": "^2.0.3",
"@sveltejs/kit": "^1.5.0", "@sveltejs/kit": "^1.5.0",
"@tailwindcss/forms": "^0.5.6",
"@tauri-apps/cli": "^1.4.0", "@tauri-apps/cli": "^1.4.0",
"@types/cookie": "^0.5.1", "@types/cookie": "^0.5.1",
"@types/js-cookie": "^3.0.3", "@types/js-cookie": "^3.0.3",

View File

@ -111,6 +111,9 @@ devDependencies:
'@sveltejs/kit': '@sveltejs/kit':
specifier: ^1.5.0 specifier: ^1.5.0
version: 1.5.0(svelte@3.54.0)(vite@4.2.0) version: 1.5.0(svelte@3.54.0)(vite@4.2.0)
'@tailwindcss/forms':
specifier: ^0.5.6
version: 0.5.6(tailwindcss@3.3.3)
'@tauri-apps/cli': '@tauri-apps/cli':
specifier: ^1.4.0 specifier: ^1.4.0
version: 1.4.0 version: 1.4.0
@ -4612,6 +4615,15 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@tailwindcss/forms@0.5.6(tailwindcss@3.3.3):
resolution: {integrity: sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==}
peerDependencies:
tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
dependencies:
mini-svg-data-uri: 1.4.4
tailwindcss: 3.3.3
dev: true
/@tanstack/query-core@4.29.1: /@tanstack/query-core@4.29.1:
resolution: {integrity: sha512-vkPewLEG8ua0efo3SsVT0BcBtkq5RZX8oPhDAyKL+k/rdOYSQTEocfGEXSaBwIwsXeOGBUpfKqI+UmHvNqdWXg==} resolution: {integrity: sha512-vkPewLEG8ua0efo3SsVT0BcBtkq5RZX8oPhDAyKL+k/rdOYSQTEocfGEXSaBwIwsXeOGBUpfKqI+UmHvNqdWXg==}
dev: false dev: false
@ -9377,6 +9389,11 @@ packages:
engines: {node: '>=4'} engines: {node: '>=4'}
dev: true dev: true
/mini-svg-data-uri@1.4.4:
resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
hasBin: true
dev: true
/minimalistic-assert@1.0.1: /minimalistic-assert@1.0.1:
resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==} resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
dev: false dev: false

View File

@ -24,51 +24,48 @@
} }
</script> </script>
<div class="p-12"> <h1>Access Control Conditions</h1>
<h1>Access Control Conditions</h1> {#each signingConditions as condition, index (index)}
{#each signingConditions as condition, index (index)} {#each condition.accs as acc}
{#each condition.accs as acc} <div class="text-lg p-4 border rounded-md shadow-md">
<div class="text-lg p-4 border rounded-md shadow-md"> <span class="text-xl"
<span class="text-xl" ><b>{condition.resourceId.baseUrl}{condition.resourceId.path}</b></span
><b>{condition.resourceId.baseUrl}{condition.resourceId.path}</b >
></span <p>
> {acc.parameters.join(", ")}
<p> {acc.returnValueTest.comparator}
{acc.parameters.join(", ")} {acc.returnValueTest.value}
{acc.returnValueTest.comparator} </p>
{acc.returnValueTest.value} <p>
</p> <span class="text-xs">{JSON.stringify(condition)}</span>
<p> </p>
<span class="text-xs">{JSON.stringify(condition)}</span> </div>
</p>
</div>
{/each}
<p />
<p />
<button
on:click={() => handleDeleteACC(index)}
class="mt-2 px-4 py-2 bg-red-500 text-white rounded-md">Delete ACC</button
>
{/each} {/each}
<div class="mt-4"> <p />
<input <p />
bind:value={newParameter} <button
placeholder="Parameter" on:click={() => handleDeleteACC(index)}
class="px-4 py-2 border rounded-md mr-2" class="mt-2 px-4 py-2 bg-red-500 text-white rounded-md">Delete ACC</button
/> >
<input {/each}
bind:value={newComparator} <div class="mt-4">
placeholder="Comparator" <input
class="px-4 py-2 border rounded-md mr-2" bind:value={newParameter}
/> placeholder="Parameter"
<input class="px-4 py-2 border rounded-md mr-2"
bind:value={newValue} />
placeholder="Value" <input
class="px-4 py-2 border rounded-md mr-2" bind:value={newComparator}
/> placeholder="Comparator"
<button class="px-4 py-2 border rounded-md mr-2"
on:click={handleCreateNewACC} />
class="px-4 py-2 bg-blue-500 text-white rounded-md">Create New ACC</button <input
> bind:value={newValue}
</div> placeholder="Value"
class="px-4 py-2 border rounded-md mr-2"
/>
<button
on:click={handleCreateNewACC}
class="px-4 py-2 bg-blue-500 text-white rounded-md">Create New ACC</button
>
</div> </div>

View File

@ -13,6 +13,7 @@
const { state, send } = useMachine(walletMachine); const { state, send } = useMachine(walletMachine);
const drawerStore = getDrawerStore(); const drawerStore = getDrawerStore();
let search = "";
$: walletState.set($state.context); $: walletState.set($state.context);
$: { $: {
@ -73,30 +74,55 @@
</div> </div>
</div> </div>
{:else if $state.context.pkps} {:else if $state.context.pkps}
<div <div class="flex flex-col items-center p-3 space-y-4">
class="flex flex-col items-center p-3 space-y-4 bg-white bg-opacity-75 rounded-t-lg shadow-md"
>
<div class="flex items-center justify-between w-full space-x-4"> <div class="flex items-center justify-between w-full space-x-4">
<div class="flex items-center space-x-2"> <div class="w-full h-full overflow-hidden grid grid-cols-6">
<div> <aside class="col-span-1">
<p class="text-sm"> <div class="flex items-center space-x-2">
<span class="font-semibold">Address:</span> <Icon
{$state.context.pkps[0].ethAddress} icon="iconamoon:profile-circle-fill"
</p> class="w-12 h-12 text-gray-500"
<p class="text-xs"> />
<span class="font-semibold">Provider:</span> <div>
{$state.context.providerName} <p class="text-sm">
</p> <span class="font-semibold">Address:</span>
{$state.context.pkps[0].ethAddress.substring(0, 8) + "..."}
</p>
<p class="text-xs">
<span class="font-semibold">Provider:</span>
{$state.context.providerName}
</p>
</div>
</div>
</aside>
<div class="col-span-5 w-full">
<div class="flex justify-end space-x-4">
<div class="w-full">
<input bind:value={search} class="input" type="text" />
</div>
<button type="button" class="btn-icon variant-filled-success">
<div class="px-4">
<Icon
icon="carbon:send-alt-filled"
class=""
width="24"
height="24"
/>
</div>
</button>
<button
on:click={signRequestTrigger}
type="button"
class="btn variant-filled">SignRequest</button
>
<button
type="button"
class="btn variant-filled"
on:click={clearSession}>Logout</button
>
</div>
</div> </div>
</div> </div>
<button
on:click={signRequestTrigger}
type="button"
class="btn variant-filled">SignRequest</button
>
<button type="button" class="btn variant-filled" on:click={clearSession}
>Logout</button
>
</div> </div>
</div> </div>
{:else if $state.matches("sessionExpired")} {:else if $state.matches("sessionExpired")}

View File

@ -0,0 +1,8 @@
<div class="py-6 px-12">
<header>
<h3 class="text-xl font-bold mb-4 uppercase"><slot name="header" /></h3>
</header>
<main>
<slot name="main" />
</main>
</div>

View File

@ -49,9 +49,11 @@ const walletMachine = createMachine({
}, },
onDone: { onDone: {
target: 'creatingSession', target: 'creatingSession',
actions: assign({ actions: [
pkps: (_, event) => event.data, assign({
}), pkps: (_, event) => event.data,
})
],
}, },
onError: 'authenticated', onError: 'authenticated',
}, },

View File

@ -24,15 +24,16 @@
let signingConditions = signingConditionsCookie let signingConditions = signingConditionsCookie
? JSON.parse(signingConditionsCookie) ? JSON.parse(signingConditionsCookie)
: []; : [];
console.log("layout signingConditions: ", signingConditions); // Add this line console.log("layout signingConditions: ", signingConditions);
let correctCondition = signingConditions let correctCondition = signingConditions
? signingConditions.find( ? signingConditions.find(
(condition) => (condition) =>
condition.resourceId.baseUrl === "https://localhost:3000" && condition.resourceId.baseUrl === "https://localhost:3000" &&
condition.resourceId.path === "/server/wundergraph" condition.resourceId.path === "/server/wundergraph" &&
condition.resourceId.role === "owner"
) )
: null; : null;
console.log("layout correctcondition: ", correctCondition); // Update this line console.log("layout correctcondition: ", correctCondition);
const token = correctCondition ? correctCondition.jwt : null; const token = correctCondition ? correctCondition.jwt : null;
@ -58,16 +59,9 @@
{/if}</Drawer {/if}</Drawer
> >
<div <div class="grid h-screen grid-rows-layout bg-color">
class="grid h-screen bg-center bg-cover grid-rows-layout"
style="background-image: url('lake.jpeg');"
>
<QueryClientProvider client={data.queryClient}> <QueryClientProvider client={data.queryClient}>
<div class="w-full h-full p-6 overflow-hidden"> <slot />
<div class="w-full h-full overflow-hidden bg-white rounded-xl">
<slot />
</div>
</div>
</QueryClientProvider> </QueryClientProvider>
<div class="row-start-2 row-end-3"> <div class="row-start-2 row-end-3">
@ -76,6 +70,9 @@
</div> </div>
<style> <style>
.bg-color {
background-color: #e6e7e1;
}
.grid-rows-layout { .grid-rows-layout {
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;
} }

View File

@ -9,23 +9,29 @@
// export let data: PageData; // export let data: PageData;
</script> </script>
<section <div class="w-full h-full p-6 overflow-hidden">
class="flex flex-col items-center justify-center min-h-screen p-8 space-y-8 text-white bg-green-500" <div class="w-full h-full overflow-hidden bg-white rounded-xl">
> <section
<h2 class="text-4xl font-bold text-center"> class="flex flex-col items-center justify-center min-h-screen p-8 space-y-8 text-white bg-green-500"
Unleash Your Full Potential and Transform Your Life <br /> >
</h2> <h2 class="text-4xl font-bold text-center">
<h1 class="text-6xl font-bold text-center">Become a Vision Architect</h1> Unleash Your Full Potential and Transform Your Life <br />
</h2>
<p class="text-xl text-center"> <h1 class="text-6xl font-bold text-center">Become a Vision Architect</h1>
We are committed to creating an amazing life experience for every human on
the planet. Our mission is to foster a world where everyone can thrive in
abundance, excitement, and creativity. We envision a sustainable green
planet and future cities where innovation and nature coexist harmoniously.
</p>
<h3 class="text-2xl">Stand Up NOW, Break Free And Follow Your Passions</h3>
</section>
<p class="text-xl text-center">
We are committed to creating an amazing life experience for every human
on the planet. Our mission is to foster a world where everyone can
thrive in abundance, excitement, and creativity. We envision a
sustainable green planet and future cities where innovation and nature
coexist harmoniously.
</p>
<h3 class="text-2xl">
Stand Up NOW, Break Free And Follow Your Passions
</h3>
</section>
</div>
</div>
<!-- <div class="bg-white">myPKP {data.myPKP}</div> --> <!-- <div class="bg-white">myPKP {data.myPKP}</div> -->
<!-- <button on:click={trigger}>Sign Request</button> --> <!-- <button on:click={trigger}>Sign Request</button> -->

View File

@ -1,5 +0,0 @@
<script>
import ACCs from "$lib/ACCs.svelte";
</script>
<ACCs />

View File

@ -0,0 +1,15 @@
<div class="w-full h-full overflow-hidden grid grid-cols-6">
<aside class="col-span-1">
<nav class="list-nav p-6">
<h3 class="text-xl font-bold mb-4">MY HOME</h3>
<ul>
<li><a href="/me">Dashboard</a></li>
<li><a href="/me/projects">My Projects</a></li>
<li><a href="/me/acc">Access Control</a></li>
</ul>
</nav>
</aside>
<div class="col-span-5 w-full h-full overflow-hidden bg-white rounded-bl-3xl">
<slot />
</div>
</div>

View File

@ -1,19 +1,11 @@
<script lang="ts"> <script>
import { createQuery } from "../../lib/wundergraph"; import HeaderMain from "$lib/layouts/HeaderMain.svelte";
const projectsQuery = createQuery({
operationName: "Projects",
});
</script> </script>
<div class="w-full h-full overflow-y-auto"> <HeaderMain>
<div class="w-full h-full results"> <div slot="header">
{#if $projectsQuery.isLoading} <h1>Dashboard</h1>
<p>Loading...</p>
{:else if $projectsQuery.error}
<pre>Error: {JSON.stringify($projectsQuery.error, null, 2)}</pre>
{:else}
<pre>{JSON.stringify($projectsQuery.data, null, 2)}</pre>
{/if}
</div> </div>
</div>
<div slot="main">Welcome back, Samuel this is your Dashboard</div>
</HeaderMain>

View File

@ -0,0 +1,14 @@
<script>
import ACCs from "$lib/ACCs.svelte";
import HeaderMain from "$lib/layouts/HeaderMain.svelte";
</script>
<HeaderMain>
<div slot="header">
<h1>Access Control</h1>
</div>
<div slot="main">
<ACCs />
</div>
</HeaderMain>

View File

@ -0,0 +1,28 @@
<script lang="ts">
import HeaderMain from "$lib/layouts/HeaderMain.svelte";
import { createQuery } from "../../../lib/wundergraph";
const projectsQuery = createQuery({
operationName: "Projects",
});
</script>
<HeaderMain>
<div slot="header">
<h1>Projects</h1>
</div>
<div slot="main">
<div class="w-full h-full overflow-y-auto">
<div class="w-full h-full results">
{#if $projectsQuery.isLoading}
<p>Loading...</p>
{:else if $projectsQuery.error}
<pre>Error: {JSON.stringify($projectsQuery.error, null, 2)}</pre>
{:else}
<pre>{JSON.stringify($projectsQuery.data, null, 2)}</pre>
{/if}
</div>
</div>
</div>
</HeaderMain>

View File

@ -29,6 +29,6 @@ export async function GET({ request }) {
return new Response(JSON.stringify(payload), { status: 200 }); return new Response(JSON.stringify(payload), { status: 200 });
} catch (err) { } catch (err) {
console.log("JWT error"); console.log("JWT error");
throw error(401, "JWT payload not machting") throw error(401, "JWT error")
} }
} }

View File

@ -1,6 +1,7 @@
import { join } from 'path'; import { join } from 'path';
import type { Config } from 'tailwindcss'; import type { Config } from 'tailwindcss';
import forms from '@tailwindcss/forms';
// 1. Import the Skeleton plugin // 1. Import the Skeleton plugin
import { skeleton } from '@skeletonlabs/tw-plugin'; import { skeleton } from '@skeletonlabs/tw-plugin';
@ -20,6 +21,7 @@ const config = {
extend: {}, extend: {},
}, },
plugins: [ plugins: [
forms,
// 4. Append the Skeleton plugin (after other plugins) // 4. Append the Skeleton plugin (after other plugins)
skeleton({ skeleton({
themes: { preset: ["wintry"] } themes: { preset: ["wintry"] }