thuang-1840-authn-prompt (#1911)

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 = (
       <Menu>
         <MenuItem
@@ -67,7 +84,7 @@ const Auth = React.memo((props) => {
     );
   }
 
-  return (
+  const LoginButton = (
     <Tooltip
       content="Log in to cellxgene"
       position="bottom"
@@ -76,7 +93,6 @@ const Auth = React.memo((props) => {
       <AnchorButton
         type="button"
         data-testid="log-in"
-        disabled={false}
         href={auth.login}
         className={styles.menubarButton}
       >
@@ -84,6 +100,76 @@ const Auth = React.memo((props) => {
       </AnchorButton>
     </Tooltip>
   );
+
+  if (isPromptOpen) {
+    return (
+      <Popover
+        position={PopoverPosition.AUTO_END}
+        isOpen
+        content={<PromptContent setIsPromptOpen={setIsPromptOpen} />}
+        onInteraction={setIsPromptOpen}
+      >
+        {LoginButton}
+      </Popover>
+    );
+  }
+
+  return LoginButton;
+
+  function shouldShowAuth() {
+    return auth && auth.requires_client_login;
+  }
+
+  function shouldShowPrompt() {
+    if (storageGet(KEYS.LOGIN_PROMPT) === LOGIN_PROMPT_OFF) return false;
+
+    return shouldShowAuth && !isAuthenticated;
+  }
 });
 
+function PromptContent({ setIsPromptOpen }) {
+  const [isChecked, setIsChecked] = useState(false);
+
+  function handleOKClick() {
+    if (isChecked) {
+      storageSet(KEYS.LOGIN_PROMPT, LOGIN_PROMPT_OFF);
+    }
+
+    setIsPromptOpen(false);
+  }
+
+  function handleCheckboxChange() {
+    setIsChecked(!isChecked);
+  }
+
+  return (
+    <Card style={{ width: "500px" }} elevation={Elevation.TWO}>
+      <p>
+        Logging in will enable you to create your own categories and labels.
+        Logging in later will reset cellxgene to the default view and cause you
+        to lose progress.
+      </p>
+      <Checkbox
+        style={{ width: "230px" }}
+        checked={isChecked}
+        onChange={handleCheckboxChange}
+        data-testid="login-hint-do-not-show-again"
+      >
+        Do not show me this message again
+      </Checkbox>
+      <div
+        style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}
+      >
+        <Button
+          onClick={handleOKClick}
+          intent="primary"
+          data-testid="login-hint-yes"
+        >
+          Acknowledge
+        </Button>
+      </div>
+    </Card>
+  );
+}
+
 export default Auth;