Feature: Improve encryption key wording (#28)

* Refactor wording in encryption helper function

* Refactor wording on html layout

* Refactor wording in README

README.md

@@ -42,8 +42,8 @@ After running the following command, the developer console is available with rig
 ⚠️ Mac App Store builds of Office do not support the OfficeWebAddinDeveloperExtras flag.
 
 ## API key encryption
-If the Freepik API key or the API key secret is renewed, three steps must be executed:
-1. Update the API key or the secret in 1Password.
+If the Freepik API key or the encryption key is renewed, three steps must be executed:
+1. Update the API key or the encryption key in 1Password.
 2. Encrypt the API key by running `node encryptApiKey.ts` in the root directory of this repository.
 3. Update the `const encryptedFreepikApiKey` in the `src/taskpane/encryptionUtils.ts` file with the encrypted API key.
 

encryptApiKey.ts

@@ -1,13 +1,13 @@
-const readline = require("readline");
-const cryptoJS = require("crypto-js");
+import readline from 'readline';
+import cryptoJS from 'crypto-js';
 
 const rl = readline.createInterface({
   input: process.stdin,
   output: process.stdout,
 });
 
 rl.question("Enter Freepik API key from 1Password: ", (apiKey) => {
-  rl.question("Enter API key secret from 1Password: ", (secret) => {
+  rl.question("Enter encryption key from 1Password: ", (secret) => {
     console.log(`Encrypted API key: ${cryptoJS.AES.encrypt(apiKey, secret).toString()}`);
     rl.close();
   });

src/taskpane/encryptionUtils.ts

@@ -3,15 +3,15 @@ import CryptoJS from "crypto-js";
 const encryptedFreepikApiKey =
   "U2FsdGVkX1+uakX7Pa7rDwZUW41gsxUcc5Mk1Zf9Ff/RkAhy5TT6snpzfSoe7kn+A7ulqhvrLMasq4hJ/KkwoA==";
 
-export function storeFreepikApiKeySecret() {
-  document.getElementById("save-api-key-secret").onclick = () => {
-    const encryptionSecret = (<HTMLInputElement>document.getElementById("api-key-secret")).value;
-    localStorage.setItem("apiKeySecret", encryptionSecret);
-    (<HTMLTextAreaElement>document.getElementById("api-key-secret")).value = "API key secret stored";
+export function storeEncryptionKey() {
+  document.getElementById("save-encryption-key").onclick = () => {
+    const encryptionSecret = (<HTMLInputElement>document.getElementById("encryption-key")).value;
+    localStorage.setItem("encryptionKey", encryptionSecret);
+    (<HTMLTextAreaElement>document.getElementById("encryption-key")).value = "Encryption key saved";
   };
 }
 
 export function getDecryptedFreepikApiKey(): string {
-  const decryptedBytes = CryptoJS.AES.decrypt(encryptedFreepikApiKey, localStorage.getItem("apiKeySecret"));
+  const decryptedBytes = CryptoJS.AES.decrypt(encryptedFreepikApiKey, localStorage.getItem("encryptionKey"));
   return decryptedBytes.toString(CryptoJS.enc.Utf8);
 }

src/taskpane/taskpane.html

@@ -35,10 +35,10 @@ <h1 class="ms-font-su">L21s Add-In</h1>
 </header>
 <section id="display-msg" class="ms-welcome__main">
   <div class="padding">
-    <h3 class="ms-font-l">API Key Secret</h3>
+    <h3 class="ms-font-l">Encryption Key</h3>
     <div>
-        <input type="text" id="api-key-secret" value="Enter API key secret from 1Password"/>
-        <button class="save-button btn" id="save-api-key-secret">Save</button>
+        <input type="text" id="encryption-key" value="Enter encryption key from 1Password"/>
+        <button class="save-button btn" id="save-encryption-key">Save</button>
     </div>
 
     <h3 class="ms-font-l">Sticker</h3>

src/taskpane/taskpane.ts

@@ -10,7 +10,7 @@ import * as M from "../../lib/materialize/js/materialize.min";
 import { runPowerPoint } from "./powerPointUtil";
 import { columnLineName, rowLineName, createColumns, createRows } from "./rowsColumns";
 import { getDownloadPathForIconWith, downloadIconWith, fetchIcons } from "./iconDownloadUtils";
-import { storeFreepikApiKeySecret } from "./encryptionUtils";
+import { storeEncryptionKey } from "./encryptionUtils";
 import { FetchIconResponse } from "./types";
 
 Office.onReady((info) => {
@@ -19,7 +19,7 @@ Office.onReady((info) => {
 
     let initials = <HTMLInputElement>document.getElementById("initials");
     initials.value = localStorage.getItem("initials");
-    storeFreepikApiKeySecret();
+    storeEncryptionKey();
 
     document.getElementById("fill-background").onclick = async () => {
       const colorPicker = <HTMLInputElement>document.getElementById("background-color");