further improvement of UI

This commit is contained in:
Samuel Andert 2023-09-06 15:49:50 +02:00
parent aaf4a7461a
commit 563e9945c3
3 changed files with 49 additions and 47 deletions

View File

@ -6,8 +6,9 @@
} from "./services/mutateAccessControlConditions.ts";
let signingConditions =
JSON.parse(localStorage.getItem("signingConditions")) || [];
let newParameter = "";
let newComparator = "";
let newParameter = ":userAddress";
let newComparator = "=";
let newValue = "";
async function handleCreateNewACC() {
@ -24,48 +25,50 @@
}
</script>
<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
<div
class="card"
style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;"
>
<div class="p-4">
<h2 class="text-xl">
<b>{condition.resourceId.baseUrl}{condition.resourceId.path}</b>
</h2>
<p>
{acc.parameters.join(", ")}
{acc.returnValueTest.comparator}
{acc.returnValueTest.value}
</p>
</div>
<button
on:click={() => handleDeleteACC(index)}
class="btn variant-filled-error mt-2">Delete ACC</button
>
<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
>
{/each}
<div class="mt-4">
<div class="mt-4 flex">
<input
bind:value={newParameter}
placeholder="Parameter"
class="px-4 py-2 border rounded-md mr-2"
class="input mr-2"
style="width: max-content; max-width: 125px;"
readonly
/>
<input
bind:value={newComparator}
placeholder="Comparator"
class="px-4 py-2 border rounded-md mr-2"
class="input mr-2"
style="width: max-content; max-width: 36px;"
readonly
/>
<input
bind:value={newValue}
placeholder="Value"
class="px-4 py-2 border rounded-md mr-2"
class="input mr-2 flex-grow"
/>
<button
on:click={handleCreateNewACC}
class="px-4 py-2 bg-blue-500 text-white rounded-md">Create New ACC</button
<button on:click={handleCreateNewACC} class="btn variant-filled flex-grow"
>Create New ACC</button
>
</div>

View File

@ -9,6 +9,7 @@
startSignIn as startSignInService,
} from "./services/signInWithGoogle";
import { getDrawerStore } from "@skeletonlabs/skeleton";
import { goto } from "$app/navigation";
const { state, send } = useMachine(walletMachine);
const drawerStore = getDrawerStore();
@ -66,7 +67,7 @@
<div class="flex flex-col items-center w-1/3">
<button
on:click={startSignIn}
class="flex items-center justify-center w-full py-2 text-white bg-blue-500 rounded hover:bg-blue-700"
class="btn variant-filled flex items-center justify-center py-2"
>
<span class="mr-2"><Icon icon="flat-color-icons:google" /></span>
<span>Sign in with Google</span>
@ -78,22 +79,20 @@
<div class="flex items-center justify-between w-full space-x-4">
<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>
<a href="/me" on:click|preventDefault={() => goto("/me")}>
<div class="flex items-center space-x-2">
<Icon
icon="iconamoon:profile-circle-fill"
class="w-12 h-12 text-gray-500"
/>
<div>
<div class="text-sm">
<div class="font-semibold">Address</div>
{$state.context.pkps[0].ethAddress.substring(0, 8) + "..."}
</div>
</div>
</div>
</div>
</a>
</aside>
<div class="col-span-5 w-full">
<div class="flex justify-end space-x-4">
@ -132,9 +131,9 @@
</div>
{/if}
{:else}
<div class="p-10 bg-white rounded-full">
<div class="p-5 bg-white rounded-full animate-spin">
<Icon icon="la:spinner" width="100" height="100" />
<div class="flex justify-center items-center w-full pb-4">
<div class="animate-spin">
<Icon icon="la:spinner" width="48" height="48" />
</div>
</div>
{/if}

View File

@ -52,7 +52,7 @@ const walletMachine = createMachine({
actions: [
assign({
pkps: (_, event) => event.data,
})
}),
],
},
onError: 'authenticated',