Split account settings into settings and actions

index.html

@@ -149,6 +149,7 @@
       <section>
         <form class="split two">
           <div>
+            <h3>General Settings</h3>
             <label>Use IPA Auto-Fill
               <input id="settingsUseIPA" type="checkbox" checked><br />
               <small>Check this to use character combinations to input International Phonetic Alphabet characters into
@@ -170,8 +171,9 @@
                 <option value="royal">Royal</option>
               </select>
             </label>
-            </div>
             <div id="accountSettings"></div>
+          </div>
+          <div id="accountActions"></div>
         </form>
       </section>
       <footer>

src/js/account/login.js

@@ -2,7 +2,7 @@ import { request } from "./helpers";
 import { saveToken } from "./utilities";
 import { addMessage } from "../utilities";
 import { setupLogoutButton } from "./setupListeners";
-import { renderAccountSettings } from "./render";
+import { renderAccountSettings, renderAccountActions } from "./render";
 import { uploadWholeDictionary, syncDictionary } from "./sync";
 import { setCookie } from "../StackOverflow/cookie";
 
@@ -138,4 +138,5 @@ export function triggerLoginChanges() {
   setupLogoutButton(logoutButton);
 
   renderAccountSettings();
+  renderAccountActions();
 }

src/js/account/render.js

@@ -58,7 +58,13 @@ export function renderAccountSettings() {
   const accountSettingsHTML = `<h3>Account Settings</h3>
   <label>Email Address<br><input id="accountSettingsEmail" required maxlength="100" value="${window.account.email}"></label>
   <label>Public Name<br><input id="accountSettingsPublicName" placeholder="Someone" maxlength="50" value="${window.account.publicName}"></label>
-  <label>Allow Emails <input type="checkbox" id="accountSettingsAllowEmails"${window.account.allowEmails ? ' checked' : ''}></label>
+  <label>Allow Emails <input type="checkbox" id="accountSettingsAllowEmails"${window.account.allowEmails ? ' checked' : ''}></label>`;
+  accountSettingsColumn.innerHTML = accountSettingsHTML;
+}
+
+export function renderAccountActions() {
+  const accountActionsColumn = document.getElementById('accountActions');
+  const accountActionsHTML = `<h3>Account Actions</h3>
   <label>Change Dictionary<br><select id="accountSettingsChangeDictionary"></select></label>
   <h4>Request Your Data</h4>
   <p>
@@ -73,7 +79,7 @@ export function renderAccountSettings() {
     Anything that is deleted from our system is permanently and irretrievably removed from our system and cannot be restored, though search engines or internet archives may retain a cached version of your content (there is nothing we can do about this, and you will need to seek out removal of that information by directly contacting the services that are caching your data).
   </p>
   `;
-  accountSettingsColumn.innerHTML = accountSettingsHTML;
+  accountActionsColumn.innerHTML = accountActionsHTML;
 
   renderChangeDictionaryOptions();
 }