Skip to content

Commit

Permalink
Improve data export
Browse files Browse the repository at this point in the history
  • Loading branch information
@SRichner
SRichner committed Mar 6, 2024
1 parent 70b503b commit 683a391
Show file tree
Hide file tree
Showing 3 changed files with 173 additions and 169 deletions.
25 changes: 13 additions & 12 deletions src/electron/electron/main/services/WindowService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ export class WindowService {
const __dirname = dirname(__filename);
const preload = join(__dirname, '../preload/index.mjs');
this.dataExportWindow = new BrowserWindow({
width: 900,
width: 1200,
height: 850,
show: false,
minimizable: false,
Expand All @@ -239,17 +239,18 @@ export class WindowService {
return { action: 'deny' };
});

const template = [
{
label: 'Edit',
submenu: [
{ label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
{ label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' }
]
}
];

Menu.setApplicationMenu(Menu.buildFromTemplate(template));
if (!is.dev) {
const template = [
{
label: 'Edit',
submenu: [
{ label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
{ label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' }
]
}
];
Menu.setApplicationMenu(Menu.buildFromTemplate(template));
}

if (is.macOS) {
await app.dock.show();
Expand Down
120 changes: 64 additions & 56 deletions src/electron/src/components/DataExportUserInputTracker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,64 +32,72 @@ const emitChange = () => {
<template>
<div class="my-5 border border-slate-400 p-2">
<div class="prose">
<h2>Decide how your User Input data is shared</h2>
<p v-if="selectedOption != DataExportType.None">Here is a sample of your unmodified data:</p>
<h2>How do you want to share your User Input data?</h2>
</div>
<div v-if="selectedOption != DataExportType.None" class="max-h-48 overflow-auto">
<table
class="table table-zebra table-pin-rows w-full overflow-auto text-xs"
>
<thead class="border-b">
<tr>
<th>Keys Total</th>
<th>Click Total</th>
<th>Moved Distance</th>
<th>Scroll Delta</th>
<th>Start Timestamp</th>
<th>End Timestamp</th>
</tr>
</thead>
<tbody class="">
<tr v-for="windowActivity in data" :key="windowActivity.id">
<td>{{ windowActivity.keysTotal }}</td>
<td>{{ windowActivity.clickTotal }}</td>
<td>{{ windowActivity.movedDistance }}</td>
<td>{{ windowActivity.scrollDelta }}</td>
<td>{{ windowActivity.tsStart.toLocaleString() }}</td>
<td>{{ windowActivity.tsEnd.toLocaleString() }}</td>
</tr>
</tbody>
</table>
<div class="mt-4 flex w-1/3 flex-col">
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Share data as-is</span>
<input
v-model="selectedOption"
type="radio"
:value="DataExportType.All"
class="radio checked:bg-blue-500"
@change="emitChange"
/>
</label>
</div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Do not share this data</span>
<input
v-model="selectedOption"
type="radio"
:value="DataExportType.None"
class="radio checked:bg-blue-500"
@change="emitChange"
/>
</label>
</div>
</div>
<div class="mt-4 flex">
<div class="mr-4">
<div class="prose">
<h2>How do you want to share your data?</h2>
</div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Share data as-is</span>
<input
v-model="selectedOption"
type="radio"
:value="DataExportType.All"
class="radio checked:bg-blue-500"
@change="emitChange"
/>
</label>
</div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Do not share this data</span>
<input
v-model="selectedOption"
type="radio"
:value="DataExportType.None"
class="radio checked:bg-blue-500"
@change="emitChange"
/>
</label>
</div>
<div class="prose mt-5">
<p>Here is a sample of your data:</p>
</div>
<div
class="relative mt-5"
:class="{
'cursor-not-allowed overflow-hidden opacity-50': selectedOption === DataExportType.None
}"
>
<div
v-if="selectedOption === DataExportType.None"
class="absolute inset-0 z-10 flex items-center justify-center bg-slate-800 bg-opacity-40"
>
<p class="bg-slate-800 p-5 text-lg text-white">This data is not being shared</p>
</div>
<div class="max-h-48 w-full overflow-y-auto">
<table class="table table-zebra table-pin-rows max-h-48 w-full text-xs">
<thead class="border-b">
<tr>
<th>Keys Total</th>
<th>Click Total</th>
<th>Moved Distance</th>
<th>Scroll Delta</th>
<th>Start Timestamp</th>
<th>End Timestamp</th>
</tr>
</thead>
<tbody>
<tr v-for="windowActivity in data" :key="windowActivity.id">
<td>{{ windowActivity.keysTotal }}</td>
<td>{{ windowActivity.clickTotal }}</td>
<td>{{ windowActivity.movedDistance }}</td>
<td>{{ windowActivity.scrollDelta }}</td>
<td>{{ windowActivity.tsStart.toLocaleString() }}</td>
<td>{{ windowActivity.tsEnd.toLocaleString() }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Expand Down
197 changes: 96 additions & 101 deletions src/electron/src/components/DataExportWindowActivityTracker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,113 +40,51 @@ const emitObfuscateSampleData = async () => {
<template>
<div class="my-5 border border-slate-400 p-2">
<div class="prose">
<h2>Decide how your Window Activity data is shared</h2>
<p v-if="selectedOption != DataExportType.None">
Here is a sample of your {{ shouldObfuscate ? 'modified' : 'unmodified' }} data:
</p>
</div>
<div v-if="selectedOption != DataExportType.None" class="max-h-48 overflow-auto">
<table class="table table-zebra table-pin-rows w-full overflow-auto text-xs">
<thead class="border-b">
<tr>
<th>Window Title</th>
<th>URL</th>
<th>Activity</th>
<th>Process Name</th>
<th>Process Path</th>
<th>Process ID</th>
<th>Timestamp</th>
</tr>
</thead>
<tbody class="">
<tr v-for="windowActivity in data" :key="windowActivity.id">
<td>
<div class="max-w-56 truncate">{{ windowActivity.windowTitle }}</div>
</td>
<td>
<div class="max-w-56 truncate">{{ windowActivity.url }}</div>
</td>
<td>{{ windowActivity.activity }}</td>
<td>{{ windowActivity.processName }}</td>
<td>
<div class="max-w-56 truncate">{{ windowActivity.processPath }}</div>
</td>
<td>{{ windowActivity.processId }}</td>
<td>{{ windowActivity.ts.toLocaleString() }}</td>
</tr>
</tbody>
</table>
<h2>How do you want to share your Window Activity data?</h2>
</div>

<div class="mt-8 flex flex-col">
<div class="flex w-2/3 flex-col">
<div class="prose">
<h2>How do you want to share your data?</h2>
</div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">{{
obfuscationTermsInput.length > 0
? 'Share partially obfuscated data'
: 'Share data as-is'
}}</span>
<input
v-model="selectedOption"
type="radio"
:value="DataExportType.All"
class="radio checked:bg-blue-500"
@change="emitOptionChanged"
/>
</label>
</div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Obfuscate potentially sensitive data</span>
<input
v-model="selectedOption"
type="radio"
:value="DataExportType.Obfuscate"
class="radio checked:bg-blue-500"
@change="emitOptionChanged"
/>
</label>
</div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Do not share this data</span>
<input
v-model="selectedOption"
type="radio"
:value="DataExportType.None"
class="radio checked:bg-blue-500"
@change="emitOptionChanged"
/>
</label>
</div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text"
>Only obfuscate data with the following (comma-separated) list of terms</span
>
<input
v-model="selectedOption"
type="radio"
:value="DataExportType.ObfuscateWithTerms"
class="radio checked:bg-blue-500"
@change="emitOptionChanged"
/>
</label>
</div>
<div class="mt-4 flex w-1/3 flex-col">
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Share data as-is</span>
<input
v-model="selectedOption"
type="radio"
:value="DataExportType.All"
class="radio checked:bg-blue-500"
@change="emitOptionChanged"
/>
</label>
</div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Obfuscate potentially sensitive data</span>
<input
v-model="selectedOption"
type="radio"
:value="DataExportType.Obfuscate"
class="radio checked:bg-blue-500"
@change="emitOptionChanged"
/>
</label>
</div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text"
>Only obfuscate data with the following (comma-separated) list of terms</span
>
<input
v-model="selectedOption"
type="radio"
:value="DataExportType.ObfuscateWithTerms"
class="radio checked:bg-blue-500"
@change="emitOptionChanged"
/>
</label>
</div>
<div v-if="selectedOption === DataExportType.ObfuscateWithTerms">
<div class="prose">
<h3>Obfuscate content by terms</h3>
</div>
<div class="flex flex-col">
<label class="form-control w-full">
<div class="label">
<span class="label-text">You can enter multiple terms separated by commas</span>
</div>
<input
v-model="obfuscationTermsInput"
type="text"
Expand All @@ -161,6 +99,63 @@ const emitObfuscateSampleData = async () => {
</button>
</div>
</div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Do not share this data</span>
<input
v-model="selectedOption"
type="radio"
:value="DataExportType.None"
class="radio checked:bg-blue-500"
@change="emitOptionChanged"
/>
</label>
</div>
</div>
<div
class="relative mt-5"
:class="{
'cursor-not-allowed overflow-hidden opacity-50': selectedOption === DataExportType.None
}"
>
<div
v-if="selectedOption === DataExportType.None"
class="absolute inset-0 z-10 flex items-center justify-center bg-slate-800 bg-opacity-40"
>
<p class="bg-slate-800 p-5 text-lg text-white">This data is not being shared</p>
</div>
<div class="max-h-48 w-full overflow-y-auto">
<table class="table table-zebra table-pin-rows max-h-48 w-full text-xs">
<thead class="border-b">
<tr>
<th>Window Title</th>
<th>URL</th>
<th>Activity</th>
<th>Process Name</th>
<th>Process Path</th>
<th>Process ID</th>
<th>Timestamp</th>
</tr>
</thead>
<tbody>
<tr v-for="windowActivity in data" :key="windowActivity.id">
<td>
<div class="max-w-56 truncate">{{ windowActivity.windowTitle }}</div>
</td>
<td>
<div class="max-w-56 truncate">{{ windowActivity.url }}</div>
</td>
<td>{{ windowActivity.activity }}</td>
<td>{{ windowActivity.processName }}</td>
<td>
<div class="max-w-56 truncate">{{ windowActivity.processPath }}</div>
</td>
<td>{{ windowActivity.processId }}</td>
<td>{{ windowActivity.ts.toLocaleString() }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>

0 comments on commit 683a391

Please sign in to comment.