Skip to content

Commit 82ee89d

Browse files
aulmeaulme
committed
componentizing
1 parent 3738eb3 commit 82ee89d

34 files changed

+822
-850
lines changed

‎webroot/adm/client-key.html‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
<meta charset="UTF-8">
44
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
55
<script src="/js/main.js"></script>
6-
<script type="module" src="/js/dangerModal.js"></script>
7-
<script type="module" src="/js/operations.js"></script>
8-
<script type="module" src="/js/output.js"></script>
9-
<script type="module" src="/js/roleBadge.js"></script>
106
<link rel="stylesheet" href="/css/style.css">
117
</head>
128
<body>
@@ -24,8 +20,10 @@ <h1>UID2 Env - Client Key Management</h1>
2420
{% endif %}
2521

2622
<script type="module">
27-
import { initializeOperations } from '/js/operations.js';
28-
import { initializeOutput } from '/js/output.js';
23+
import { initializeOperations } from '/js/component/operations.js';
24+
import { initializeOutput } from '/js/component/output.js';
25+
26+
const devKeyNameWarning = '⚠️ Keys for dev/test purposes must be named dev-uid2-&lt;THREE_LETTER_INITIALS|TEAM_NAME&gt;-&lt;JIRA_TICKET&gt;-&lt;BRIEF_DESCRIPTION&gt;. ⚠️';
2927

3028
document.addEventListener('DOMContentLoaded', function () {
3129
const siteIdInput = {
@@ -59,7 +57,28 @@ <h1>UID2 Env - Client Key Management</h1>
5957
name: 'roles',
6058
label: 'Roles',
6159
required: true,
62-
type: 'multi-line'
60+
type: 'multi-select',
61+
options: [
62+
{
63+
value: 'MAPPER',
64+
label: 'MAPPER',
65+
hint: 'For Advertisers'
66+
},
67+
{
68+
value: 'ID_READER',
69+
label: 'ID_READER',
70+
hint: 'For DSPs'
71+
},
72+
{
73+
value: 'GENERATOR',
74+
label: 'GENERATOR',
75+
hint: 'For Publishers'
76+
},
77+
{
78+
value: 'SHARER',
79+
label: 'SHARER',
80+
},
81+
]
6382
};
6483

6584
const keyIdInput = {
@@ -139,21 +158,12 @@ <h1>UID2 Env - Client Key Management</h1>
139158
serviceIdInput,
140159
rolesInput
141160
],
161+
description: devKeyNameWarning,
142162
apiCall: {
143163
method: 'POST',
144164
getUrl: (inputs) => `/api/client/add?name=${encodeURIComponent(inputs.name)}&roles=${encodeURIComponent(inputs.roles)}&site_id=${inputs.siteId}&service_id=${inputs.serviceId}`
145165
}
146166
},
147-
{
148-
id: 'revealKey',
149-
title: 'Reveal Key',
150-
role: 'elevated',
151-
inputs: [ contactInput ],
152-
apiCall: {
153-
method: 'GET',
154-
getUrl: (inputs) => `/api/client/reveal?contact=${encodeURIComponent(inputs.contact)}`
155-
}
156-
},
157167
{
158168
id: 'updateRoles',
159169
title: 'Update Roles',
@@ -183,6 +193,16 @@ <h1>UID2 Env - Client Key Management</h1>
183193
},
184194
],
185195
danger: [
196+
{
197+
id: 'revealKey',
198+
title: 'Reveal Key',
199+
role: 'elevated',
200+
inputs: [ contactInput ],
201+
apiCall: {
202+
method: 'GET',
203+
getUrl: (inputs) => `/api/client/reveal?contact=${encodeURIComponent(inputs.contact)}`
204+
}
205+
},
186206
{
187207
id: 'deleteKey',
188208
title: 'Delete Key',
@@ -226,7 +246,7 @@ <h1>UID2 Env - Client Key Management</h1>
226246
contactInput,
227247
{...nameInput, name: 'newName', label: 'New Name'}
228248
],
229-
description: 'This will change the display name of the client key.',
249+
description: 'This will change the display name of the client key.\n' + devKeyNameWarning,
230250
confirmationText: 'This will rename the client key. Make sure you have confirmed this change with the participant.',
231251
apiCall: {
232252
method: 'POST',

‎webroot/adm/client-side-keypair.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
<meta charset="UTF-8">
44
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
55
<script src="/js/main.js"></script>
6-
<script type="module" src="/js/dangerModal.js"></script>
7-
<script type="module" src="/js/operations.js"></script>
8-
<script type="module" src="/js/output.js"></script>
9-
<script type="module" src="/js/roleBadge.js"></script>
106
<link rel="stylesheet" href="/css/style.css">
117
</head>
128
<body>
@@ -20,8 +16,8 @@ <h1>UID2 Env - Client Side Keypair Management</h1>
2016
</div>
2117

2218
<script type="module">
23-
import { initializeOperations } from '/js/operations.js';
24-
import { initializeOutput } from '/js/output.js';
19+
import { initializeOperations } from '/js/component/operations.js';
20+
import { initializeOutput } from '/js/component/output.js';
2521

2622
document.addEventListener('DOMContentLoaded', function () {
2723
const siteIdInput = {

‎webroot/adm/cloud-encryption-key.html‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
<meta charset="UTF-8">
44
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
55
<script src="/js/main.js"></script>
6-
<script type="module" src="/js/dangerModal.js"></script>
7-
<script type="module" src="/js/operations.js"></script>
8-
<script type="module" src="/js/output.js"></script>
9-
<script type="module" src="/js/roleBadge.js"></script>
106
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
117
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
128
<link rel="stylesheet" href="/css/style.css">
9+
<style>
10+
.active { color: darkgreen; }
11+
.inactive { color: darkred; }
12+
</style>
1313
</head>
1414
<body>
1515
<h1>UID2 Env - Cloud Encryption Key Management</h1>
@@ -24,8 +24,8 @@ <h1>UID2 Env - Cloud Encryption Key Management</h1>
2424
<div id="output-table" style="margin: 20px 0; width: 100%;"></div>
2525

2626
<script type="module">
27-
import { initializeOperations } from '/js/operations.js';
28-
import { initializeOutput } from '/js/output.js';
27+
import { initializeOperations } from '/js/component/operations.js';
28+
import { initializeOutput } from '/js/component/output.js';
2929
import { httpClient } from '/js/httpClient.js';
3030

3131
document.addEventListener('DOMContentLoaded', function () {
@@ -154,23 +154,19 @@ <h1>UID2 Env - Cloud Encryption Key Management</h1>
154154
return {};
155155
},
156156
postProcess: async (response) => {
157-
// First get sites to map site names
158157
try {
159158
const sites = await httpClient.get('/api/site/list');
160159
const siteDict = sites.reduce((acc, site) => {
161160
acc[site.id] = site.name;
162161
return acc;
163162
}, {});
164163

165-
// Add site names to keys
166164
response.cloudEncryptionKeys.forEach((key) => {
167165
key.siteName = siteDict[key.siteId] || "Unknown site";
168166
});
169167

170-
// Update grid - this is the primary output for this operation
171168
updateGrid(response);
172169

173-
// Return null to prevent standard output display
174170
return null;
175171
} catch (error) {
176172
throw new Error("Failed to load sites data: " + error.message);

‎webroot/adm/enclave-gcp-v2.html‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
<meta charset="UTF-8">
44
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
55
<script src="/js/main.js"></script>
6-
<script type="module" src="/js/dangerModal.js"></script>
7-
<script type="module" src="/js/operations.js"></script>
8-
<script type="module" src="/js/output.js"></script>
9-
<script type="module" src="/js/roleBadge.js"></script>
106
<link rel="stylesheet" href="/css/style.css">
117
<style>
128
label.bold {
@@ -61,7 +57,6 @@ <h1>UID2 Env - GCP Enclave ID Tool(V2)</h1>
6157

6258
<div class="main-content">
6359
<div class="operations-container"></div>
64-
<div class="output-container"></div>
6560
</div>
6661

6762
<!-- GCP Examples Section - positioned below operations and output -->
@@ -76,8 +71,8 @@ <h3>Generated Examples</h3>
7671
</div>
7772

7873
<script type="module">
79-
import { initializeOperations } from '/js/operations.js';
80-
import { initializeOutput } from '/js/output.js';
74+
import { initializeOperations } from '/js/component/operations.js';
75+
import { initializeOutput } from '/js/component/output.js';
8176

8277
document.addEventListener('DOMContentLoaded', function () {
8378
const gcloudCli = `$ gcloud compute instances create <INSTANCE_NAME> \\
@@ -110,17 +105,35 @@ <h3>Generated Examples</h3>
110105
}
111106

112107
const operationConfig = {
113-
write: {
114-
title: 'GCP Enclave V2 Operations',
115-
operations: [
108+
write: [
116109
{
117110
id: 'generateGcpV2EnclaveConfig',
118111
title: 'Generate Enclave ID and gcloud command',
119112
role: 'elevated',
120113
inputs: [
121-
imageIdInput,
122-
envIdSelectInput,
123-
debugModeCheckboxInput
114+
{
115+
name: 'imageId',
116+
label: 'Operator Docker Image ID',
117+
required: true,
118+
size: 3,
119+
placeholder: 'The full digest for the image, with or without \'sha256:\''
120+
},
121+
{
122+
name: 'envId',
123+
label: 'Environment',
124+
type: 'select',
125+
required: true,
126+
defaultValue: 'integ',
127+
options: [
128+
{ value: 'integ', label: 'Integration' },
129+
{ value: 'prod', label: 'Production' }
130+
]
131+
},
132+
{
133+
name: 'debugMode',
134+
label: 'Debug Mode (Integration Only)',
135+
type: 'checkbox',
136+
}
124137
],
125138
description: 'Set Debug Mode to true if you want to use DebugMode Confidential Space host image in integration env. (You need to generate a new enclaveId.)',
126139
preProcess: async (inputs) => {
@@ -175,11 +188,9 @@ <h3>Generated Examples</h3>
175188
}
176189
}
177190
]
178-
}
179191
};
180192

181193
initializeOperations(operationConfig);
182-
initializeOutput();
183194
});
184195
</script>
185196

‎webroot/adm/enclave-gcp.html‎

Lines changed: 47 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
<meta charset="UTF-8">
44
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
55
<script src="/js/main.js"></script>
6-
<script type="module" src="/js/dangerModal.js"></script>
7-
<script type="module" src="/js/operations.js"></script>
8-
<script type="module" src="/js/output.js"></script>
9-
<script type="module" src="/js/roleBadge.js"></script>
106
<link rel="stylesheet" href="/css/style.css">
117
<style>
128
.gcp-examples-box {
@@ -58,26 +54,25 @@ <h1>UID2 Env - GCP Enclave ID Tool</h1>
5854

5955
<div class="main-content">
6056
<div class="operations-container"></div>
61-
<div class="output-container"></div>
6257
</div>
6358

6459
<!-- GCP Examples Section - positioned below operations and output -->
6560
<div class="gcp-examples-box">
6661
<h3>Generated Examples</h3>
67-
62+
6863
<label for="cloudInitSha256">cloud-init sha256, make sure your downloaded cloud-init config matches exactly the value below:</label>
6964
<pre><label id="cloudInitSha256">TBD</label></pre>
70-
65+
7166
<label for="gcloudCli">Example gcloud command to create GCP Operator Enclave VM:</label>
7267
<textarea id="gcloudCli" name="gcloudCli" readonly></textarea>
73-
68+
7469
<label for="enclaveId">Generated GCP Enclave ID:</label>
7570
<pre><label id="enclaveId">TBD</label></pre>
7671
</div>
7772

7873
<script type="module">
79-
import { initializeOperations } from '/js/operations.js';
80-
import { initializeOutput } from '/js/output.js';
74+
import { initializeOperations } from '/js/component/operations.js';
75+
import { initializeOutput } from '/js/component/output.js';
8176

8277
document.addEventListener('DOMContentLoaded', function () {
8378
const gcloudCliOrig = `$ sha256sum < ./<CLOUD_INIT_FN> # !!! check if sha256 matches exactly below !!!\\
@@ -185,19 +180,53 @@ <h3>Generated Examples</h3>
185180
}
186181

187182
const operationConfig = {
188-
write: {
189-
title: 'GCP Enclave Operations',
190-
operations: [
183+
write: [
191184
{
192185
id: 'generateGcpEnclaveConfig',
193186
title: 'Generate GCP cloud-init, Enclave ID and gcloud command',
194187
role: 'elevated',
195188
inputs: [
196-
diskUriInput,
197-
apiTokenInput,
198-
imageIdInput,
199-
envIdSelectInput,
200-
accessTokenInput
189+
190+
{
191+
name: 'diskUri',
192+
label: 'GCP Disk URI',
193+
required: true,
194+
size: 3,
195+
placeholder: 'To get the latest: gcloud compute images list --filter="name~\'cos-stable\'" --standard-images --uri'
196+
},
197+
{
198+
name: 'apiToken',
199+
label: 'Operator Api Key',
200+
required: true,
201+
size: 3,
202+
placeholder: 'Enter the operator API key'
203+
},
204+
{
205+
name: 'imageId',
206+
label: 'Operator Docker Image ID',
207+
required: true,
208+
size: 3,
209+
placeholder: 'The full digest for the image, with or without \'sha256:\''
210+
},
211+
{
212+
name: 'envId',
213+
label: 'Environment',
214+
type: 'select',
215+
required: true,
216+
size: 1,
217+
defaultValue: 'integ',
218+
options: [
219+
{ value: 'integ', label: 'Integration' },
220+
{ value: 'prod', label: 'Production' }
221+
]
222+
},
223+
{
224+
name: 'accesstokenId',
225+
label: 'Docker Registry Access Token',
226+
required: true,
227+
size: 3,
228+
placeholder: 'Personal Access Token that allows read access to ghcr.io'
229+
}
201230
],
202231
description: 'Generates GCP cloud-init configuration file, calculates Enclave ID, and provides gcloud command for VM creation.<br><br><strong>Note:</strong> The Operator Api Key can be found in <a href="operator-key.html">Operator Key Management</a> using the "Reveal Operator Key" operation.',
203232
preProcess: async (inputs) => {
@@ -277,11 +306,9 @@ <h3>Generated Examples</h3>
277306
}
278307
}
279308
]
280-
}
281309
};
282310

283311
initializeOperations(operationConfig);
284-
initializeOutput();
285312
});
286313
</script>
287314

0 commit comments

Comments
 (0)