Skip to content

Commit

Permalink
Refactor GrantAccess component and add RevokeAccess component for imp…
Browse files Browse the repository at this point in the history
…roved data access management; update related documentation for clarity and consistency
  • Loading branch information
akugone committed Jan 15, 2025
1 parent 0f8cbaf commit fcc8adf
Show file tree
Hide file tree
Showing 3 changed files with 342 additions and 75 deletions.
217 changes: 145 additions & 72 deletions components/GrantAccess.vue
Original file line number Diff line number Diff line change
@@ -1,66 +1,61 @@
<template>
Connect Your Wallet:
<div class="ml-2 inline-block">
<MetamaskButton @connected="onWalletConnected" />
</div>
<div class="protect-data-container">
<div class="wallet-section">
Connect Your Wallet:
<div class="ml-2 inline-block">
<MetamaskButton @connected="onWalletConnected" />
</div>
</div>

<div class="form-container">
<input v-model="authorizedApp" placeholder="Enter authorized app address" />
<Button
:disabled="!isWalletConnected || isLoadingGrant"
@click="grantAccess"
>
{{ isLoadingGrant ? 'Processing...' : 'Grant Access' }}
</Button>
<div v-if="grantError" class="error">{{ grantError }}</div>
<div
v-if="grantedAccess"
class="protected-data-container text-on-bg-success"
>
<div
class="flex items-center justify-center gap-x-2 text-2xl text-success"
<div class="form-container">
<input
v-model="authorizedApp"
placeholder="Enter authorized app address"
:disabled="!isWalletConnected"
/>
<Button
:disabled="!isWalletConnected || isLoadingGrant"
@click="grantAccess"
class="protect-button"
>
<div class="inline-block rounded-full bg-success p-1.5 text-white">
{{ isLoadingGrant ? 'Processing...' : 'Grant Access' }}
</Button>
<div v-if="grantError" class="error-note">{{ grantError }}</div>
</div>

<div v-if="grantedAccess" class="success-note">
<div class="success-header">
<div class="success-icon">
<Icon icon="mdi:check" height="24" />
</div>
Access has been granted to you and the iExec Application
Access has been granted to Bob and the iApp
</div>

<p>You can now use the protected data with the iExec App.</p>
<p class="address-label">Protected data:</p>
<div class="address-container">{{ protectedData.address }}</div>

<div>
<strong>Protected data:</strong>
<div class="white-block-for-address">
{{ protectedData.address }}
</div>
</div>

<div class="mt-4">
<strong>Authorized iExec App:</strong>
<div class="white-block-for-address">{{ authorizedApp }}</div>
</div>
<p class="address-label">Authorized iExec App:</p>
<div class="address-container">{{ authorizedApp }}</div>

<div class="mt-4">
<strong> Authorized user </strong
><span class="text-sm"
>(The Zero address means that everybody is allowed to use this
protected data)</span
<p class="address-label">
Authorized user
<span class="note-text"
>(As we don't have Bob wallet we use the Zero address to grant access
to all users for the demo)</span
>:
<div class="white-block-for-address">
{{ '0x0000000000000000000000000000000000000000' }}
</div>
</p>
<div class="address-container">
{{ '0x0000000000000000000000000000000000000000' }}
</div>

<div class="mb-2 mt-4">
<strong> Dataset Price </strong>
<span class="text-sm"
<p class="address-label">
Dataset Price
<span class="note-text"
>(oohh interesting it means that we could set a price to the protected
data)</span
>:
<div class="white-block-for-address">
{{ grantedAccess.datasetprice }}
</div>
</div>
</p>
<div class="address-container">{{ grantedAccess.datasetprice }}</div>
</div>
</div>
</template>
Expand Down Expand Up @@ -126,41 +121,119 @@ const grantAccess = async () => {
</script>
<style scoped>
.protect-data-container {
width: 100%;
margin: 2rem 0;
}
.wallet-section {
margin-bottom: 1.5rem;
font-weight: 500;
color: var(--vp-c-text-1);
}
.form-container {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 10px;
gap: 1rem;
margin: 1.5rem 0;
width: 100%;
}
input {
padding: 8px 16px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.95rem;
border: 1px solid var(--vp-c-divider);
border-radius: var(--border-radius);
background: var(--vp-c-bg-soft);
color: var(--vp-c-text-1);
transition: var(--transition);
}
input:focus {
border-color: #fcd15a;
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 2px rgba(252, 209, 90, 0.1);
}
.error {
color: white;
background-color: red;
padding: 8px;
margin-top: 10px;
border-radius: 5px;
}
.protected-data-container {
background-color: #e8f5e9;
margin-top: 50px !important;
border: 1px solid #4caf50;
border-radius: 8px;
padding: 20px;
input:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.protect-button {
width: 100%;
}
.error-note {
background: rgba(255, 59, 48, 0.1);
color: rgb(255, 59, 48);
padding: 0.75rem 1rem;
border-radius: var(--border-radius);
font-size: 0.9rem;
border-left: 4px solid rgb(255, 59, 48);
}
.success-note {
width: 100%;
background: linear-gradient(
135deg,
rgba(52, 199, 89, 0.1),
rgba(52, 199, 89, 0.05)
);
border-radius: var(--border-radius);
padding: 1.5rem;
text-align: center;
max-width: 600px;
margin: 0 auto;
margin-top: 2rem;
border-left: 4px solid rgb(52, 199, 89);
}
.success-header {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
font-size: 1.25rem;
color: rgb(52, 199, 89);
font-weight: 500;
}
.success-icon {
background: rgb(52, 199, 89);
color: white;
border-radius: 50%;
padding: 0.25rem;
display: flex;
align-items: center;
justify-content: center;
}
.address-label {
margin: 1rem 0 0.5rem;
font-weight: 500;
color: var(--vp-c-text-1);
}
.address-container {
background: var(--vp-c-bg-soft);
padding: 0.75rem 1rem;
border-radius: var(--border-radius);
font-family: monospace;
font-size: 0.9rem;
color: var(--vp-c-text-2);
word-break: break-all;
}
.note-text {
font-size: 0.9rem;
color: var(--vp-c-text-2);
font-weight: normal;
}
@media (max-width: 768px) {
.protect-data-container {
margin: 1rem 0;
}
}
</style>
Loading

0 comments on commit fcc8adf

Please sign in to comment.