From 5d8b62d499074b0697e77494b52ccc21e43f71ae Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 26 Aug 2022 16:17:25 -0700
Subject: [PATCH] Add settings UI to opt into db login mode

Just a cute lil thing on the homepage, not very obvious at all but easy to find if you're looking for it!
---
 src/app/GlobalHeader.js              |  2 +-
 src/app/HomePage.js                  | 56 +++++++++++++++++++++++++++-
 src/app/components/useCurrentUser.js | 13 +++++--
 3 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/src/app/GlobalHeader.js b/src/app/GlobalHeader.js
index 69b5b05..4f57199 100644
--- a/src/app/GlobalHeader.js
+++ b/src/app/GlobalHeader.js
@@ -157,7 +157,7 @@ function UserNavBarSection() {
 }
 
 function LoginButton() {
-  const authMode = useAuthModeFeatureFlag();
+  const [authMode] = useAuthModeFeatureFlag();
   const { loginWithRedirect } = useAuth0();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index 1d6bd82..40a2baa 100644
--- a/src/app/HomePage.js
+++ b/src/app/HomePage.js
@@ -7,6 +7,9 @@ import {
   Button,
   Center,
   Flex,
+  FormControl,
+  FormHelperText,
+  FormLabel,
   HStack,
   IconButton,
   Input,
@@ -15,7 +18,14 @@ import {
   InputRightElement,
   Link as ChakraLink,
   ListItem,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverTrigger,
   Skeleton,
+  Switch,
   Textarea,
   Tooltip,
   UnorderedList,
@@ -45,6 +55,7 @@ import SquareItemCard, {
   SquareItemCardSkeleton,
 } from "./components/SquareItemCard";
 import WIPCallout from "./components/WIPCallout";
+import { useAuthModeFeatureFlag } from "./components/useCurrentUser";
 
 import HomepageSplashImg from "./images/homepage-splash.png";
 import FeedbackKikoImg from "./images/feedback-kiko.png";
@@ -679,6 +690,8 @@ function FeedbackFormContainer({ background, borderColor, children }) {
 }
 
 function FeedbackFormPitch() {
+  const [authMode, setAuthMode] = useAuthModeFeatureFlag();
+
   return (
     <Flex direction="column" textAlign="left" opacity="0.9">
       <Box as="header">Hi friends! Welcome to the beta!</Box>
@@ -720,7 +733,48 @@ function FeedbackFormPitch() {
             Coming soon
           </Box>
           <UnorderedList>
-            <ListItem>Better login system</ListItem>
+            <ListItem>
+              <Popover>
+                <PopoverTrigger>
+                  <Box tabIndex="0" textDecoration="underline" cursor="pointer">
+                    Better login system
+                  </Box>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <PopoverArrow />
+                  <PopoverCloseButton />
+                  <PopoverBody>
+                    <FormControl>
+                      <Flex>
+                        <Box>
+                          <FormLabel
+                            htmlFor="hi-res-mode-setting"
+                            fontSize="sm"
+                            margin="0"
+                          >
+                            Experimental login mode
+                          </FormLabel>
+                          <FormHelperText marginTop="0" fontSize="xs">
+                            Should be faster and easier—help us try it out!
+                            After turning this on, try logging in.
+                          </FormHelperText>
+                        </Box>
+                        <Box width="2" />
+                        <Switch
+                          id="hi-res-mode-setting"
+                          size="sm"
+                          marginTop="0.1rem"
+                          isChecked={authMode === "db"}
+                          onChange={(e) =>
+                            setAuthMode(e.target.checked ? "db" : "auth0")
+                          }
+                        />
+                      </Flex>
+                    </FormControl>
+                  </PopoverBody>
+                </PopoverContent>
+              </Popover>
+            </ListItem>
             <ListItem>Making sure we're ready for the long-term</ListItem>
             <ListItem>
               …a lot of little things{" "}
diff --git a/src/app/components/useCurrentUser.js b/src/app/components/useCurrentUser.js
index 1a29e24..9f4bee0 100644
--- a/src/app/components/useCurrentUser.js
+++ b/src/app/components/useCurrentUser.js
@@ -11,7 +11,7 @@ const NOT_LOGGED_IN_USER = {
 };
 
 function useCurrentUser() {
-  const authMode = useAuthModeFeatureFlag();
+  const [authMode] = useAuthModeFeatureFlag();
   const currentUserViaAuth0 = useCurrentUserViaAuth0({
     isEnabled: authMode === "auth0",
   });
@@ -165,7 +165,7 @@ function getUserInfoFromAuth0Data(user) {
  */
 export function useLogout() {
   const { logout: logoutWithAuth0 } = useAuth0();
-  const authMode = useAuthModeFeatureFlag();
+  const [authMode] = useAuthModeFeatureFlag();
 
   const [sendLogoutMutation, { loading, error }] = useMutation(
     gql`
@@ -223,7 +223,10 @@ export function useAuthModeFeatureFlag() {
   // default to `null` instead of "auth0", I want to be unambiguous that this
   // is the *absence* of a localStorage value, and not risk accidentally
   // setting this override value to auth0 on everyone's devices 😅)
-  let [savedValue] = useLocalStorage("DTIAuthModeFeatureFlag", null);
+  let [savedValue, setSavedValue] = useLocalStorage(
+    "DTIAuthModeFeatureFlag",
+    null
+  );
 
   useEffect(() => {
     window.setAuthModeFeatureFlag = setAuthModeFeatureFlag;
@@ -237,7 +240,9 @@ export function useAuthModeFeatureFlag() {
     savedValue = null;
   }
 
-  return savedValue || "auth0";
+  const value = savedValue || "auth0";
+
+  return [value, setSavedValue];
 }
 
 /**