Add login button to lobby screen

src/Room.jsx

@@ -24,6 +24,7 @@ import {
   MicButton,
   VideoButton,
   ScreenshareButton,
+  LinkButton,
 } from "./button";
 import {
   Header,
@@ -59,9 +60,11 @@ const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 export function Room() {
   const [registeringGuest, setRegisteringGuest] = useState(false);
   const [registrationError, setRegistrationError] = useState();
-  const { loading, isAuthenticated, error, client, registerGuest } =
+  const { loading, isAuthenticated, error, client, registerGuest, isGuest } =
     useClient();
 
+  console.log({ isGuest });
+
   useEffect(() => {
     if (!loading && !isAuthenticated) {
       setRegisteringGuest(true);
@@ -85,10 +88,10 @@ export function Room() {
     return <ErrorView error={registrationError || error} />;
   }
 
-  return <GroupCall client={client} />;
+  return <GroupCall client={client} isGuest={isGuest} />;
 }
 
-export function GroupCall({ client }) {
+export function GroupCall({ client, isGuest }) {
   const { roomId: maybeRoomId } = useParams();
   const { hash, search } = useLocation();
   const [simpleGrid, viaServers] = useMemo(() => {
@@ -116,6 +119,7 @@ export function GroupCall({ client }) {
 
   return (
     <GroupCallView
+      isGuest={isGuest}
       client={client}
       roomId={roomId}
       groupCall={groupCall}
@@ -124,7 +128,13 @@ export function GroupCall({ client }) {
   );
 }
 
-export function GroupCallView({ client, roomId, groupCall, simpleGrid }) {
+export function GroupCallView({
+  client,
+  isGuest,
+  roomId,
+  groupCall,
+  simpleGrid,
+}) {
   const [showInspector, setShowInspector] = useState(false);
   const {
     state,
@@ -200,6 +210,7 @@ export function GroupCallView({ client, roomId, groupCall, simpleGrid }) {
   } else {
     return (
       <RoomSetupView
+        isGuest={isGuest}
         client={client}
         hasLocalParticipant={hasLocalParticipant}
         roomName={groupCall.room.name}
@@ -237,6 +248,7 @@ export function EnteringRoomView() {
 
 function RoomSetupView({
   client,
+  isGuest,
   roomName,
   state,
   onInitLocalCallFeed,
@@ -252,6 +264,7 @@ function RoomSetupView({
 }) {
   const { stream } = useCallFeed(localCallFeed);
   const videoRef = useMediaStream(stream, true);
+  const location = useLocation();
 
   useEffect(() => {
     onInitLocalCallFeed();
@@ -264,7 +277,13 @@ function RoomSetupView({
           <RoomHeaderInfo roomName={roomName} />
         </LeftNav>
         <RightNav>
-          <UserMenu />
+          {isGuest ? (
+            <LinkButton to={{ pathname: "/login", state: { from: location } }}>
+              Log in
+            </LinkButton>
+          ) : (
+            <UserMenu />
+          )}
         </RightNav>
       </Header>
       <div className={styles.joinRoom}>

src/button/Button.module.css

@@ -28,6 +28,7 @@ limitations under the License.
   padding: 0;
   border: none;
   cursor: pointer;
+  text-decoration: none;
 }
 
 .secondary,

src/button/LinkButton.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import classNames from "classnames";
+import styles from "./Button.module.css";
+
+export function LinkButton({ className, children, ...rest }) {
+  return (
+    <Link className={classNames(styles.secondary, className)} {...rest}>
+      {children}
+    </Link>
+  );
+}

src/button/index.js

@@ -1,2 +1,3 @@
 export * from "./Button";
 export * from "./CopyButton";
+export * from "./LinkButton";