Major UI upgrade

2023-09-06 15:08:55 +02:00 · 2023-09-06 15:08:55 +02:00 · aaf4a7461a
commit aaf4a7461a
parent 102f4fa855
15 changed files with 220 additions and 120 deletions
--- a/package.json
+++ b/package.json
@ -21,6 +21,7 @@
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/adapter-static": "^2.0.3",
    "@sveltejs/kit": "^1.5.0",
+    "@tailwindcss/forms": "^0.5.6",
    "@tauri-apps/cli": "^1.4.0",
    "@types/cookie": "^0.5.1",
    "@types/js-cookie": "^3.0.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -111,6 +111,9 @@ devDependencies:
  '@sveltejs/kit':
    specifier: ^1.5.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':
    specifier: ^1.4.0
    version: 1.4.0
@ -4612,6 +4615,15 @@ packages:
      - supports-color
    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:
    resolution: {integrity: sha512-vkPewLEG8ua0efo3SsVT0BcBtkq5RZX8oPhDAyKL+k/rdOYSQTEocfGEXSaBwIwsXeOGBUpfKqI+UmHvNqdWXg==}
    dev: false
@ -9377,6 +9389,11 @@ packages:
    engines: {node: '>=4'}
    dev: true

+  /mini-svg-data-uri@1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
+    dev: true
+
  /minimalistic-assert@1.0.1:
    resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
    dev: false
--- a/src/lib/ACCs.svelte
+++ b/src/lib/ACCs.svelte
@ -24,51 +24,48 @@
  }
 </script>

-<div class="p-12">
-  <h1>Access Control Conditions</h1>
-  {#each signingConditions as condition, index (index)}
-    {#each condition.accs as acc}
-      <div class="text-lg p-4 border rounded-md shadow-md">
-        <span class="text-xl"
-          ><b>{condition.resourceId.baseUrl}{condition.resourceId.path}</b
-          ></span
-        >
-        <p>
-          {acc.parameters.join(", ")}
-          {acc.returnValueTest.comparator}
-          {acc.returnValueTest.value}
-        </p>
-        <p>
-          <span class="text-xs">{JSON.stringify(condition)}</span>
-        </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
-    >
+<h1>Access Control Conditions</h1>
+{#each signingConditions as condition, index (index)}
+  {#each condition.accs as acc}
+    <div class="text-lg p-4 border rounded-md shadow-md">
+      <span class="text-xl"
+        ><b>{condition.resourceId.baseUrl}{condition.resourceId.path}</b></span
+      >
+      <p>
+        {acc.parameters.join(", ")}
+        {acc.returnValueTest.comparator}
+        {acc.returnValueTest.value}
+      </p>
+      <p>
+        <span class="text-xs">{JSON.stringify(condition)}</span>
+      </p>
+    </div>
  {/each}
-  <div class="mt-4">
-    <input
-      bind:value={newParameter}
-      placeholder="Parameter"
-      class="px-4 py-2 border rounded-md mr-2"
-    />
-    <input
-      bind:value={newComparator}
-      placeholder="Comparator"
-      class="px-4 py-2 border rounded-md mr-2"
-    />
-    <input
-      bind:value={newValue}
-      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>
+  <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}
+<div class="mt-4">
+  <input
+    bind:value={newParameter}
+    placeholder="Parameter"
+    class="px-4 py-2 border rounded-md mr-2"
+  />
+  <input
+    bind:value={newComparator}
+    placeholder="Comparator"
+    class="px-4 py-2 border rounded-md mr-2"
+  />
+  <input
+    bind:value={newValue}
+    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>
--- a/src/lib/Wallet.svelte
+++ b/src/lib/Wallet.svelte
@ -13,6 +13,7 @@
  const { state, send } = useMachine(walletMachine);
  const drawerStore = getDrawerStore();

+  let search = "";
  $: walletState.set($state.context);

  $: {
@ -73,30 +74,55 @@
      </div>
    </div>
  {:else if $state.context.pkps}
-    <div
-      class="flex flex-col items-center p-3 space-y-4 bg-white bg-opacity-75 rounded-t-lg shadow-md"
-    >
+    <div class="flex flex-col items-center p-3 space-y-4">
      <div class="flex items-center justify-between w-full space-x-4">
-        <div class="flex items-center space-x-2">
-          <div>
-            <p class="text-sm">
-              <span class="font-semibold">Address:</span>
-              {$state.context.pkps[0].ethAddress}
-            </p>
-            <p class="text-xs">
-              <span class="font-semibold">Provider:</span>
-              {$state.context.providerName}
-            </p>
+        <div class="w-full h-full overflow-hidden grid grid-cols-6">
+          <aside class="col-span-1">
+            <div class="flex items-center space-x-2">
+              <Icon
+                icon="iconamoon:profile-circle-fill"
+                class="w-12 h-12 text-gray-500"
+              />
+              <div>
+                <p class="text-sm">
+                  <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>
-        <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>
  {:else if $state.matches("sessionExpired")}
--- a/src/lib/layouts/HeaderMain.svelte
+++ b/src/lib/layouts/HeaderMain.svelte
@ -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>
--- a/src/lib/machines/walletMachine.ts
+++ b/src/lib/machines/walletMachine.ts
@ -49,9 +49,11 @@ const walletMachine = createMachine({
                },
                onDone: {
                    target: 'creatingSession',
-                    actions: assign({
-                        pkps: (_, event) => event.data,
-                    }),
+                    actions: [
+                        assign({
+                            pkps: (_, event) => event.data,
+                        })
+                    ],
                },
                onError: 'authenticated',
            },
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -24,15 +24,16 @@
  let signingConditions = signingConditionsCookie
    ? JSON.parse(signingConditionsCookie)
    : [];
-  console.log("layout signingConditions: ", signingConditions); // Add this line
+  console.log("layout signingConditions: ", signingConditions);
  let correctCondition = signingConditions
    ? signingConditions.find(
        (condition) =>
          condition.resourceId.baseUrl === "https://localhost:3000" &&
-          condition.resourceId.path === "/server/wundergraph"
+          condition.resourceId.path === "/server/wundergraph" &&
+          condition.resourceId.role === "owner"
      )
    : null;
-  console.log("layout correctcondition: ", correctCondition); // Update this line
+  console.log("layout correctcondition: ", correctCondition);

  const token = correctCondition ? correctCondition.jwt : null;

@ -58,16 +59,9 @@
  {/if}</Drawer
 >

-<div
-  class="grid h-screen bg-center bg-cover grid-rows-layout"
-  style="background-image: url('lake.jpeg');"
->
+<div class="grid h-screen grid-rows-layout bg-color">
  <QueryClientProvider client={data.queryClient}>
-    <div class="w-full h-full p-6 overflow-hidden">
-      <div class="w-full h-full overflow-hidden bg-white rounded-xl">
-        <slot />
-      </div>
-    </div>
+    <slot />
  </QueryClientProvider>

  <div class="row-start-2 row-end-3">
@ -76,6 +70,9 @@
 </div>

 <style>
+  .bg-color {
+    background-color: #e6e7e1;
+  }
  .grid-rows-layout {
    grid-template-rows: 1fr auto;
  }
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -9,23 +9,29 @@
  // export let data: PageData;
 </script>

-<section
-  class="flex flex-col items-center justify-center min-h-screen p-8 space-y-8 text-white bg-green-500"
->
-  <h2 class="text-4xl font-bold text-center">
-    Unleash Your Full Potential and Transform Your Life <br />
-  </h2>
-  <h1 class="text-6xl font-bold text-center">Become a Vision Architect</h1>
-
-  <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 class="w-full h-full p-6 overflow-hidden">
+  <div class="w-full h-full overflow-hidden bg-white rounded-xl">
+    <section
+      class="flex flex-col items-center justify-center min-h-screen p-8 space-y-8 text-white bg-green-500"
+    >
+      <h2 class="text-4xl font-bold text-center">
+        Unleash Your Full Potential and Transform Your Life <br />
+      </h2>
+      <h1 class="text-6xl font-bold text-center">Become a Vision Architect</h1>

+      <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> -->

 <!-- <button on:click={trigger}>Sign Request</button> -->
--- a/src/routes/acc/+page.svelte
+++ b/src/routes/acc/+page.svelte
@ -1,5 +0,0 @@
-<script>
-  import ACCs from "$lib/ACCs.svelte";
-</script>
-
-<ACCs />
--- a/src/routes/me/+layout.svelte
+++ b/src/routes/me/+layout.svelte
@ -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>
--- a/src/routes/me/+page.svelte
+++ b/src/routes/me/+page.svelte
@ -1,19 +1,11 @@
-<script lang="ts">
-  import { createQuery } from "../../lib/wundergraph";
-
-  const projectsQuery = createQuery({
-    operationName: "Projects",
-  });
+<script>
+  import HeaderMain from "$lib/layouts/HeaderMain.svelte";
 </script>

-<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}
+<HeaderMain>
+  <div slot="header">
+    <h1>Dashboard</h1>
  </div>
-</div>
+
+  <div slot="main">Welcome back, Samuel this is your Dashboard</div>
+</HeaderMain>
--- a/src/routes/me/acc/+page.svelte
+++ b/src/routes/me/acc/+page.svelte
@ -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>
--- a/src/routes/me/projects/+page.svelte
+++ b/src/routes/me/projects/+page.svelte
@ -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>
--- a/src/routes/server/wundergraph/+server.ts
+++ b/src/routes/server/wundergraph/+server.ts
@ -29,6 +29,6 @@ export async function GET({ request }) {
        return new Response(JSON.stringify(payload), { status: 200 });
    } catch (err) {
        console.log("JWT error");
-        throw error(401, "JWT payload not machting")
+        throw error(401, "JWT error")
    }
 }
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -1,6 +1,7 @@

 import { join } from 'path';
 import type { Config } from 'tailwindcss';
+import forms from '@tailwindcss/forms';

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