User can log out Closes #743

app/components/Layout/UserItem.tsx

@@ -1,7 +1,10 @@
 import { useLocation } from "remix";
-import { getLogInUrl } from "~/utils";
 import { useUser } from "~/hooks/common";
+import { getLogInUrl } from "~/utils";
+import { Button } from "../Button";
 import { DiscordIcon } from "../icons/Discord";
+import { LogOutIcon } from "../icons/LogOut";
+import { Popover } from "../Popover";
 
 export function UserItem() {
   const user = useUser();
@@ -9,10 +12,20 @@ export function UserItem() {
 
   if (user && user.discordAvatar)
     return (
-      <img
-        className="layout__avatar"
-        src={`https://cdn.discordapp.com/avatars/${user.discordId}/${user.discordAvatar}.png?size=80`}
-      />
+      <Popover
+        trigger={
+          <img
+            className="layout__avatar"
+            src={`https://cdn.discordapp.com/avatars/${user.discordId}/${user.discordAvatar}.png?size=80`}
+          />
+        }
+      >
+        <form method="post" action="/logout">
+          <Button tiny variant="outlined" icon={<LogOutIcon />}>
+            Log out
+          </Button>
+        </form>
+      </Popover>
     );
 
   // TODO: just show text... my profile?

app/components/Popover.tsx

@@ -2,7 +2,13 @@ import { Popover as HeadlessPopover } from "@headlessui/react";
 import * as React from "react";
 import { usePopper } from "react-popper";
 
-export function Popover({ children }: { children: React.ReactNode }) {
+export function Popover({
+  children,
+  trigger,
+}: {
+  children: React.ReactNode;
+  trigger: React.ReactNode;
+}) {
   const [referenceElement, setReferenceElement] = React.useState();
   const [popperElement, setPopperElement] = React.useState();
   const { styles, attributes } = usePopper(referenceElement, popperElement);
@@ -14,7 +20,7 @@ export function Popover({ children }: { children: React.ReactNode }) {
         ref={setReferenceElement}
         className="minimal tiny"
       >
-        INFO
+        {trigger}
       </HeadlessPopover.Button>
 
       <HeadlessPopover.Panel

app/components/icons/LogOut.tsx

@@ -0,0 +1,18 @@
+export function LogOutIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+      />
+    </svg>
+  );
+}

app/components/play/GroupMembers.tsx

@@ -90,7 +90,9 @@ function Contents({ members }: { members: LookingLoaderDataGroup["members"] }) {
               </div>
             )}
             <div className="play__card__info">
-              {member.miniBio && <Popover>{member.miniBio}</Popover>}
+              {member.miniBio && (
+                <Popover trigger="INFO">{member.miniBio}</Popover>
+              )}
             </div>
           </div>
         );

server/auth.ts

@@ -135,10 +135,10 @@ export function setUpAuth(app: Express): void {
       successRedirect: returnTo,
     })(req, res, next);
   });
-  // app.post("/logout", function (req, res) {
-  //   req.logout();
-  //   res.redirect("/");
-  // });
+  app.post("/logout", function (req, res) {
+    req.logout();
+    res.redirect("/");
+  });
 
   app.use(function (req, _res, next) {
     if (req.session?.returnTo) {