diff --git a/client/src/components/menubar/authButtons.js b/client/src/components/menubar/authButtons.js
index a9ad8176..91729679 100644
--- a/client/src/components/menubar/authButtons.js
+++ b/client/src/components/menubar/authButtons.js
@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useState } from "react";
+
import {
AnchorButton,
Button,
@@ -6,20 +7,36 @@ import {
Tooltip,
Popover,
Menu,
+ Elevation,
+ PopoverPosition,
+ Checkbox,
+ Card,
} from "@blueprintjs/core";
+
import { IconNames } from "@blueprintjs/icons";
import * as globals from "../../globals";
+
import styles from "./menubar.css";
+import { storageGet, storageSet, KEYS } from "../util/localStorage";
+
const BASE_EMOJI = [0x1f9d1, 0x1f468, 0x1f469];
const SKIN_TONES = [0x1f3fb, 0x1f3fc, 0x1f3fd, 0x1f3fe, 0x1f3ff];
const MICROSCOPE = 0x1f52c;
const ZERO_WIDTH_JOINER = 0x0200d;
+const LOGIN_PROMPT_OFF = "off";
+
const Auth = React.memo((props) => {
+ const [isPromptOpen, setIsPromptOpen] = useState(shouldShowPrompt());
+
const { auth, userinfo } = props;
+ const isAuthenticated = userinfo && userinfo.is_authenticated;
+
+ window.userinfo = userinfo;
+
const randomInt = Math.random() * 15;
const sexIndex = Math.floor(randomInt / 5);
const skinToneIndex = Math.floor(randomInt % 5);
@@ -31,9 +48,9 @@ const Auth = React.memo((props) => {
MICROSCOPE
);
- if (!auth?.["requires_client_login"]) return null;
+ if (!shouldShowAuth()) return null;
- if (userinfo?.["is_authenticated"]) {
+ if (isAuthenticated) {
const PopoverContent = (