add not logged in warning to flags modal, refactored to its own lit component (#3521)

## Description:

So players know they are logged out and don't think their purchased
flags dissappeared.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan

src/client/components/NotLoggedInWarning.ts

@@ -0,0 +1,49 @@
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { UserMeResponse } from "../../core/ApiSchemas";
+import { hasLinkedAccount } from "../Api";
+
+@customElement("not-logged-in-warning")
+export class NotLoggedInWarning extends LitElement {
+  @state() private linked = false;
+
+  private _onUserMe = (event: CustomEvent<UserMeResponse | false>) => {
+    this.linked = hasLinkedAccount(event.detail);
+  };
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener(
+      "userMeResponse",
+      this._onUserMe as EventListener,
+    );
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener(
+      "userMeResponse",
+      this._onUserMe as EventListener,
+    );
+  }
+
+  render() {
+    if (this.linked) return html``;
+
+    return html`<div class="flex items-center">
+      <button
+        class="px-4 py-2 text-xs font-bold uppercase tracking-wider transition-colors duration-200 rounded-lg bg-red-500/20 text-red-400 border border-red-500/30 cursor-pointer hover:bg-red-500/30"
+        data-i18n="common.not_logged_in"
+        @click=${() => {
+          window.showPage?.("page-account");
+        }}
+      >
+        Not logged in
+      </button>
+    </div>`;
+  }
+}