showing banner and info if user needs to change name

frontend/src/styles/banners.scss

@@ -55,6 +55,14 @@
     &.bad {
       background: var(--error-color);
     }
+    a {
+      color: var(--bg-color);
+      text-decoration: underline;
+      &:hover {
+        color: var(--text-color);
+        cursor: pointer;
+      }
+    }
   }
 
   &.focus {

frontend/src/ts/controllers/account-controller.ts

@@ -127,34 +127,12 @@ export async function getDataAndInit(): Promise<boolean> {
   });
 
   if (snapshot.needsToChangeName) {
-    //verify username
-    //invalid, get new
-    let nameGood = false;
-    let name = "";
-
-    while (!nameGood) {
-      name =
-        prompt(
-          "Please provide a new username (cannot be longer than 16 characters, can only contain letters, numbers, underscores, dots and dashes):"
-        ) ?? "";
-
-      if (!name) {
-        return false;
-      }
-
-      const response = await Ape.users.updateName(name);
-
-      if (response.status !== 200) {
-        Notifications.add("Failed to update name: " + response.message, -1);
-        return false;
-      }
-
-      nameGood = true;
-      Notifications.add("Name updated", 1);
-      snapshot.name = name;
-      DB.setSnapshot(snapshot);
-      $("#menu .text-button.account .text").text(name);
-    }
+    Notifications.addBanner(
+      "Your name was reset. <a class='openNameChange'>Click here</a> to change it and learn more about why.",
+      -1,
+      undefined,
+      true
+    );
   }
   if (!UpdateConfig.changedBeforeDb) {
     //config didnt change before db loaded

frontend/src/ts/popups/simple-popups.ts

@@ -392,6 +392,11 @@ list["updateName"] = new SimplePopup(
       Notifications.add("Name updated", 1);
       DB.getSnapshot().name = newName;
       $("#menu .text-button.account .text").text(newName);
+      if (DB.getSnapshot().needsToChangeName) {
+        setTimeout(() => {
+          location.reload();
+        }, 1000);
+      }
     } catch (e) {
       const typedError = e as FirebaseError;
       if (typedError.code === "auth/wrong-password") {
@@ -409,6 +414,11 @@ list["updateName"] = new SimplePopup(
       thisPopup.inputs[0].hidden = true;
       thisPopup.buttonText = "Reauthenticate to update";
     }
+    const snapshot = DB.getSnapshot();
+    if (snapshot.needsToChangeName === true) {
+      thisPopup.text =
+        "We're recently identified several issues that allowed users to register with names that were already taken. Accounts which signed up earliest get to keep the duplicated name, and others are forced to change. Unique names are essential for smooth operation of upcoming features like public profiles, multiplayer and more. Sorry for the inconvenience.";
+    }
   },
   (_thisPopup) => {
     //
@@ -1073,6 +1083,10 @@ $(".pageSettings #updateAccountName").on("click", () => {
   list["updateName"].show();
 });
 
+$(document).on("click", "#bannerCenter .banner .text .openNameChange", () => {
+  list["updateName"].show();
+});
+
 $(".pageSettings #addPasswordAuth").on("click", () => {
   list["addPasswordAuth"].show();
 });