added buttons to the account page to update authentication settings

src/js/settings.js

@@ -15,6 +15,7 @@ import * as EditPresetPopup from "./edit-preset-popup";
 import * as ThemePicker from "./theme-picker";
 import * as ImportExportSettingsPopup from "./import-export-settings-popup";
 import * as CustomThemePopup from "./custom-theme-popup";
+import * as AccountController from "./account-controller";
 
 export let groups = {};
 async function initGroups() {
@@ -417,6 +418,53 @@ export function updateDiscordSection() {
   }
 }
 
+export function updateAuthSections() {
+  $(".pageSettings .section.passwordAuthSettings .button").addClass("hidden");
+  $(".pageSettings .section.googleAuthSettings .button").addClass("hidden");
+
+  let user = firebase.auth().currentUser;
+  if (!user) return;
+
+  let passwordProvider = user.providerData.find(
+    (provider) => provider.providerId === "password"
+  );
+  let googleProvider = user.providerData.find(
+    (provider) => provider.providerId === "google.com"
+  );
+
+  if (passwordProvider) {
+    $(
+      ".pageSettings .section.passwordAuthSettings #emailPasswordAuth"
+    ).removeClass("hidden");
+    $(
+      ".pageSettings .section.passwordAuthSettings #passPasswordAuth"
+    ).removeClass("hidden");
+  } else {
+    $(
+      ".pageSettings .section.passwordAuthSettings #addPasswordAuth"
+    ).removeClass("hidden");
+  }
+
+  if (googleProvider) {
+    $(
+      ".pageSettings .section.googleAuthSettings #removeGoogleAuth"
+    ).removeClass("hidden");
+    if (passwordProvider) {
+      $(
+        ".pageSettings .section.googleAuthSettings #removeGoogleAuth"
+      ).removeClass("disabled");
+    } else {
+      $(".pageSettings .section.googleAuthSettings #removeGoogleAuth").addClass(
+        "disabled"
+      );
+    }
+  } else {
+    $(".pageSettings .section.googleAuthSettings #addGoogleAuth").removeClass(
+      "hidden"
+    );
+  }
+}
+
 function setActiveFunboxButton() {
   $(`.pageSettings .section.funbox .button`).removeClass("active");
   $(
@@ -505,6 +553,7 @@ export function update() {
   ThemePicker.updateActiveTab();
   ThemePicker.setCustomInputs(true);
   updateDiscordSection();
+  updateAuthSections();
   ThemePicker.refreshButtons();
   // ThemePicker.updateActiveButton();
 
@@ -794,18 +843,30 @@ $(".pageSettings #resetPersonalBestsButton").on("click", (e) => {
   SimplePopups.list.resetPersonalBests.show();
 });
 
-$(".pageSettings #updateAccountEmail").on("click", (e) => {
-  SimplePopups.list.updateEmail.show();
-});
-
 $(".pageSettings #updateAccountName").on("click", (e) => {
   SimplePopups.list.updateName.show();
 });
 
-$(".pageSettings #updateAccountPassword").on("click", (e) => {
+$(".pageSettings #addPasswordAuth").on("click", (e) => {
+  SimplePopups.list.addPasswordAuth.show();
+});
+
+$(".pageSettings #emailPasswordAuth").on("click", (e) => {
+  SimplePopups.list.updateEmail.show();
+});
+
+$(".pageSettings #passPasswordAuth").on("click", (e) => {
   SimplePopups.list.updatePassword.show();
 });
 
+$(".pageSettings #addGoogleAuth").on("click", (e) => {
+  AccountController.addGoogleAuth();
+});
+
+$(".pageSettings #removeGoogleAuth").on("click", (e) => {
+  AccountController.removeGoogleAuth();
+});
+
 $(".pageSettings #deleteAccount").on("click", (e) => {
   SimplePopups.list.deleteAccount.show();
 });

static/index.html

@@ -4323,7 +4323,61 @@
                   </div>
                 </div>
               </div>
-              <div class="section updateAccountEmail needsAccount hidden">
+              <div class="section passwordAuthSettings needsAccount hidden">
+                <h1>password authentication settings</h1>
+                <div class="text">
+                  Add password authentication, update your password or email.
+                </div>
+                <div class="buttons vertical">
+                  <div
+                    class="button danger"
+                    id="addPasswordAuth"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    add password authentication
+                  </div>
+                  <div
+                    class="button danger"
+                    id="emailPasswordAuth"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    update email
+                  </div>
+                  <div
+                    class="button danger"
+                    id="passPasswordAuth"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    update password
+                  </div>
+                </div>
+              </div>
+              <div class="section googleAuthSettings needsAccount hidden">
+                <h1>google authentication settings</h1>
+                <div class="text">Add or remove Google authentication.</div>
+                <div class="buttons vertical">
+                  <div
+                    class="button danger"
+                    id="addGoogleAuth"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    add google authentication
+                  </div>
+                  <div
+                    class="button danger"
+                    id="removeGoogleAuth"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                    remove google authentication
+                  </div>
+                </div>
+              </div>
+              <!-- <div class="section updateAccountEmail needsAccount hidden">
                 <h1>update account email</h1>
                 <div class="text">
                   In case you misspell it or get a new address.
@@ -4352,7 +4406,7 @@
                     update password
                   </div>
                 </div>
-              </div>
+              </div> -->
               <div class="section deleteAccount needsAccount hidden">
                 <h1>delete account</h1>
                 <div class="text">