Add persistence to API keys

Author: rzats

src/components/dialogs/ImportAPIDialog.svelte

@@ -19,7 +19,7 @@
   import NowCast from './dataSources/Nowcast.svelte';
   import CovidHosp from './dataSources/COVIDHosp.svelte';
   import CoviDcast from './dataSources/COVIDcast.svelte';
-  import { navMode } from '../../store';
+  import { navMode, storeApiKeys } from '../../store';
   import { NavMode } from '../chartUtils';
 
   const dispatch = createEventDispatcher();
@@ -68,6 +68,14 @@
 <Dialog title="Load from Epidata API" on:close>
   <form class="uk-form-stacked" {id} on:submit={onSubmit}>
     <div>
+      <div class="uk-form-controls uk-form-controls-text">
+        <div class="uk-form-controls uk-form-controls-text api">
+          <label
+            ><input class="uk-checkbox" type="checkbox" bind:checked={$storeApiKeys} />
+            Save API keys & auth tokens</label
+          >
+        </div>
+      </div>
       <div class="uk-form-label">Data Source</div>
       <div class="uk-form-controls uk-form-controls-text">
         <label
@@ -180,3 +188,9 @@
     {/if}
   </button>
 </Dialog>
+
+<style>
+  .api {
+    float: right;
+  }
+</style>

src/components/dialogs/apiKeySelections.ts

@@ -0,0 +1,20 @@
+export default class ApiKeySelections {
+  cdc = '';
+  fluView = '';
+  ght = '';
+  quidel = '';
+  sensors = '';
+  twitter = '';
+}
+
+export function getApiKeySelections() {
+  try {
+    if (localStorage.getItem('api')) {
+      return JSON.parse(localStorage.getItem('api')!) as ApiKeySelections;
+    }
+    return new ApiKeySelections();
+  } catch {
+    localStorage.removeItem('api');
+    return new ApiKeySelections();
+  }
+}

src/components/dialogs/dataSources/CDC.svelte

@@ -3,16 +3,23 @@
   import { cdcLocations as regions } from '../../../data/data';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
+  import { apiKeySelections } from '../../../store';
 
   export let id: string;
 
   let locations = regions[0].value;
-  let auth = '';
+  let auth = $apiKeySelections.cdc;
 
   export function importDataSet() {
     return importCDC({ locations, auth });
   }
 </script>
 
-<TextField id="{id}-auth" name="auth" label="Authorizaton Token" bind:value={auth} placeholder="authorization token" />
+<TextField
+  id="{id}-auth"
+  name="auth"
+  label="Authorizaton Token"
+  bind:value={$apiKeySelections.cdc}
+  placeholder="authorization token"
+/>
 <SelectField id="{id}-r" label="Location" bind:value={locations} options={regions} />

src/components/dialogs/dataSources/FluView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { importFluView } from '../../../api/EpiData';
   import { fluViewRegions } from '../../../data/data';
+  import { apiKeySelections } from '../../../store';
   import SelectField from '../inputs/SelectField.svelte';
   import SelectIssue from '../inputs/SelectIssue.svelte';
   import TextField from '../inputs/TextField.svelte';
@@ -10,7 +11,7 @@
 
   let regions = fluViewRegions[0].value;
   let issue = DEFAULT_ISSUE;
-  let auth: string = '';
+  let auth = $apiKeySelections.fluView;
 
   export function importDataSet() {
     return importFluView({ regions, ...issue, auth });
@@ -23,7 +24,7 @@
   id="{id}-auth"
   name="auth"
   label="Auth Key"
-  bind:value={auth}
+  bind:value={$apiKeySelections.fluView}
   required={false}
   placeholder="authorization token"
 />

src/components/dialogs/dataSources/GHT.svelte

@@ -1,20 +1,27 @@
 <script lang="ts">
   import { importGHT } from '../../../api/EpiData';
   import { ghtLocations as regions } from '../../../data/data';
+  import { apiKeySelections } from '../../../store';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
 
   export let id: string;
 
   let locations = regions[0].value;
-  let auth = '';
+  let auth = $apiKeySelections.ght;
   let query = '';
 
   export function importDataSet() {
     return importGHT({ auth, locations, query });
   }
 </script>
 
-<TextField id="{id}-auth" name="auth" label="Authorizaton Token" bind:value={auth} placeholder="authorization token" />
+<TextField
+  id="{id}-auth"
+  name="auth"
+  label="Authorizaton Token"
+  bind:value={$apiKeySelections.ght}
+  placeholder="authorization token"
+/>
 <SelectField id="{id}-r" label="Location" bind:value={locations} options={regions} />
 <TextField id="{id}-query" name="query" label="Search Query or Topic" bind:value={query} />

src/components/dialogs/dataSources/Quidel.svelte

@@ -1,18 +1,25 @@
 <script lang="ts">
   import { importQuidel } from '../../../api/EpiData';
   import { quidelLocations as regions } from '../../../data/data';
+  import { apiKeySelections } from '../../../store';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
 
   export let id: string;
 
   let locations = regions[0].value;
-  let auth = '';
+  let auth = $apiKeySelections.quidel;
 
   export function importDataSet() {
     return importQuidel({ auth, locations });
   }
 </script>
 
-<TextField id="{id}-auth" name="auth" label="Authorizaton Token" bind:value={auth} placeholder="authorization token" />
+<TextField
+  id="{id}-auth"
+  name="auth"
+  label="Authorizaton Token"
+  bind:value={$apiKeySelections.quidel}
+  placeholder="authorization token"
+/>
 <SelectField id="{id}-r" label="Location" bind:value={locations} options={regions} />

src/components/dialogs/dataSources/Sensors.svelte

@@ -1,20 +1,27 @@
 <script lang="ts">
   import { importSensors } from '../../../api/EpiData';
   import { sensorLocations as regions, sensorNames } from '../../../data/data';
+  import { apiKeySelections } from '../../../store';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
 
   export let id: string;
 
   let locations = regions[0].value;
-  let auth = '';
+  let auth = $apiKeySelections.sensors;
   let names = sensorNames[0].value;
 
   export function importDataSet() {
     return importSensors({ auth, names, locations });
   }
 </script>
 
-<TextField id="{id}-auth" name="auth" label="Authorizaton Token" bind:value={auth} placeholder="authorization token" />
+<TextField
+  id="{id}-auth"
+  name="auth"
+  label="Authorizaton Token"
+  bind:value={$apiKeySelections.sensors}
+  placeholder="authorization token"
+/>
 <SelectField id="{id}-s" label="Name" bind:value={names} options={sensorNames} name="sensor" />
 <SelectField id="{id}-r" label="Location" bind:value={locations} options={regions} />

src/components/dialogs/dataSources/Twitter.svelte

@@ -1,21 +1,28 @@
 <script lang="ts">
   import { importTwitter } from '../../../api/EpiData';
   import { twitterLocations as regions } from '../../../data/data';
+  import { apiKeySelections } from '../../../store';
   import SelectField from '../inputs/SelectField.svelte';
   import TextField from '../inputs/TextField.svelte';
 
   export let id: string;
 
   let locations = regions[0].value;
-  let auth = '';
+  let auth = $apiKeySelections.twitter;
   let resolution: 'daily' | 'weekly' = 'daily';
 
   export function importDataSet() {
     return importTwitter({ auth, locations, resolution });
   }
 </script>
 
-<TextField id="{id}-auth" name="auth" label="Authorizaton Token" bind:value={auth} placeholder="authorization token" />
+<TextField
+  id="{id}-auth"
+  name="auth"
+  label="Authorizaton Token"
+  bind:value={$apiKeySelections.twitter}
+  placeholder="authorization token"
+/>
 <SelectField id="{id}-r" label="Location" bind:value={locations} options={regions} />
 <div>
   <div class="uk-form-label">Temporal Resolution</div>

src/store.ts

@@ -2,6 +2,7 @@ import { get, writable } from 'svelte/store';
 import { NavMode } from './components/chartUtils';
 import DataSet, { DataGroup } from './data/DataSet';
 import deriveLinkDefaults, { getDirectLinkImpl } from './deriveLinkDefaults';
+import ApiKeySelections, { getApiKeySelections } from './components/dialogs/apiKeySelections';
 
 declare const __VERSION__: string;
 
@@ -17,6 +18,18 @@ export const isShowingPoints = writable(defaults.showPoints);
 export const initialViewport = writable(defaults.viewport);
 export const navMode = writable(NavMode.autofit);
 
+export const storeApiKeys = writable(true);
+storeApiKeys.subscribe((val) => {
+  if (!val) {
+    // reset local storage if user decides not to store API keys
+    localStorage.removeItem('api');
+  }
+});
+export const apiKeySelections = writable(getApiKeySelections());
+apiKeySelections.subscribe((val) => {
+  localStorage.setItem('api', JSON.stringify(val));
+});
+
 export function addDataSet(dataset: DataSet | DataGroup): void {
   const root = get(datasetTree);
   root.datasets.push(dataset);