Add Create New Dictionary button in account actions

src/js/account/dictionaryManagement.js

@@ -1,7 +1,18 @@
-import { performSync } from "./sync";
+import { clearDictionary, saveDictionary } from "../dictionaryManagement";
+import { uploadWholeDictionary, performSync } from "./sync";
 import { request } from "./helpers";
 import { saveToken } from "./utilities";
 import { addMessage } from "../utilities";
+import { renderAll } from "../render";
+
+export function createNewDictionary() {
+  clearDictionary();
+  saveDictionary();
+  renderAll();
+  uploadWholeDictionary(true);
+  document.getElementById('settingsModal').style.display = 'none';
+  addMessage('New Dictionary Created!');
+}
 
 export function changeDictionary(dictionary) {
   dictionary = typeof dictionary.target !== 'undefined' ? dictionary.target.value : dictionary;

src/js/account/render.js

@@ -1,4 +1,4 @@
-import { setupLoginModal, setupChangeDictionary } from "./setupListeners";
+import { setupLoginModal, setupChangeDictionary, setupCreateNewDictionary } from "./setupListeners";
 import { request } from "./helpers";
 
 export function renderLoginForm() {
@@ -66,6 +66,7 @@ export function renderAccountActions() {
   const accountActionsColumn = document.getElementById('accountActions');
   const accountActionsHTML = `<h3>Account Actions</h3>
   <label>Change Dictionary<br><select id="accountSettingsChangeDictionary"></select></label>
+  <p><a class="button" id="accountSettingsCreateNewDictionary">Create New Dictionary</a></p>
   <h4>Request Your Data</h4>
   <p>
     Per your <a href="https://www.eugdpr.org/" target="_blank">GDPR</a> rights in Articles 13–15 and 20, we allow you to request any and all data we have stored about you. The only data we have about you personally is your email address and your Public Name, if you decided to set one. All other data (your Dictionary data) is visible and accessible via the Export button under your Dictionary's Settings. Send an email to help@lexicon.ga to request your information.
@@ -82,6 +83,7 @@ export function renderAccountActions() {
   accountActionsColumn.innerHTML = accountActionsHTML;
 
   renderChangeDictionaryOptions();
+  setupCreateNewDictionary();
 }
 
 export function renderChangeDictionaryOptions() {

src/js/account/setupListeners.js

@@ -1,6 +1,6 @@
 import { logIn, createAccount } from "./login";
 import { setCookie } from "../StackOverflow/cookie";
-import { changeDictionary } from "./dictionaryManagement";
+import { changeDictionary, createNewDictionary } from "./dictionaryManagement";
 
 export function setupLoginModal(modal) {
   const closeElements = modal.querySelectorAll('.modal-background, .close-button');
@@ -24,3 +24,7 @@ export function setupLogoutButton(logoutButton) {
 export function setupChangeDictionary() {
   document.getElementById('accountSettingsChangeDictionary').addEventListener('change', changeDictionary);
 }
+
+export function setupCreateNewDictionary() {
+  document.getElementById('accountSettingsCreateNewDictionary').addEventListener('click', createNewDictionary);
+}