Set autogenerated guest username

src/ConferenceCallManagerHooks.js

@@ -91,18 +91,22 @@ export function useClient(homeserverUrl) {
         const authStore = localStorage.getItem("matrix-auth-store");
 
         if (authStore) {
-          const { user_id, device_id, access_token } = JSON.parse(authStore);
+          const { user_id, device_id, access_token, guest } =
+            JSON.parse(authStore);
 
-          const client = await initClient({
-            baseUrl: homeserverUrl,
-            accessToken: access_token,
-            userId: user_id,
-            deviceId: device_id,
-          });
+          const client = await initClient(
+            {
+              baseUrl: homeserverUrl,
+              accessToken: access_token,
+              userId: user_id,
+              deviceId: device_id,
+            },
+            guest
+          );
 
           localStorage.setItem(
             "matrix-auth-store",
-            JSON.stringify({ user_id, device_id, access_token })
+            JSON.stringify({ user_id, device_id, access_token, guest })
           );
 
           return client;
@@ -153,7 +157,7 @@ export function useClient(homeserverUrl) {
     }
   }, []);
 
-  const registerGuest = useCallback(async (displayName) => {
+  const registerGuest = useCallback(async () => {
     try {
       const registrationClient = matrix.createClient(homeserverUrl);
 
@@ -170,9 +174,13 @@ export function useClient(homeserverUrl) {
         true
       );
 
+      await client.setProfileInfo("displayname", {
+        displayname: `Guest ${client.getUserIdLocalpart()}`,
+      });
+
       localStorage.setItem(
         "matrix-auth-store",
-        JSON.stringify({ user_id, device_id, access_token })
+        JSON.stringify({ user_id, device_id, access_token, guest: true })
       );
 
       setState({ client, loading: false, authenticated: true });

src/ErrorModal.jsx

@@ -0,0 +1,30 @@
+import React, { useEffect } from "react";
+import { Center, Content, Modal } from "./Layout";
+import { Link } from "react-router-dom";
+import { ErrorMessage } from "./Input";
+import styles from "./ErrorModal.module.css";
+
+export function ErrorModal({ error }) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <Content>
+      <Center>
+        <Modal>
+          <h2>Error</h2>
+          <div className={styles.errorModalContent}>
+            <ErrorMessage>{error.message}</ErrorMessage>
+            <p>
+              <Link to="/login">Login</Link>
+            </p>
+            <p>
+              <Link to="/register">Register</Link>
+            </p>
+          </div>
+        </Modal>
+      </Center>
+    </Content>
+  );
+}

src/ErrorModal.module.css

@@ -0,0 +1,9 @@
+.errorModalContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.errorModalContent p {
+  margin-bottom: 0;
+}

src/GuestAuthPage.jsx

@@ -14,26 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useState, useRef, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import styles from "./GuestAuthPage.module.css";
-import { useLocation, useHistory, Link } from "react-router-dom";
+import { useLocation, useHistory } from "react-router-dom";
 import { Header, LeftNav } from "./Header";
-import { Button, FieldRow, InputField, ErrorMessage } from "./Input";
-import { Center, Content, Info, Modal } from "./Layout";
+import { Center, Content, Modal } from "./Layout";
+import { ErrorModal } from "./ErrorModal";
 
 export function GuestAuthPage({ onLoginAsGuest }) {
-  const displayNameRef = useRef();
   const history = useHistory();
   const location = useLocation();
   const [error, setError] = useState();
 
-  const onSubmitLoginForm = useCallback(
-    (e) => {
-      e.preventDefault();
-      onLoginAsGuest(displayNameRef.current.value).catch(setError);
-    },
-    [onLoginAsGuest, location, history]
-  );
+  useEffect(() => {
+    onLoginAsGuest("Guest " + Math.round(Math.random() * 999)).catch(setError);
+  }, [onLoginAsGuest, location, history]);
 
   return (
     <div className={styles.guestAuthPage}>
@@ -43,46 +38,7 @@ export function GuestAuthPage({ onLoginAsGuest }) {
       <Content>
         <Center>
           <Modal>
-            <h2>Login As Guest</h2>
-            <form onSubmit={onSubmitLoginForm}>
-              <FieldRow>
-                <InputField
-                  type="text"
-                  ref={displayNameRef}
-                  placeholder="Display Name"
-                  label="Display Name"
-                  autoCorrect="off"
-                  autoCapitalize="none"
-                />
-              </FieldRow>
-              {error && (
-                <FieldRow>
-                  <ErrorMessage>{error.message}</ErrorMessage>
-                </FieldRow>
-              )}
-              <FieldRow rightAlign>
-                <Button type="submit">Login as guest</Button>
-              </FieldRow>
-            </form>
-            <Info>
-              <Link
-                to={{
-                  pathname: "/login",
-                  state: location.state,
-                }}
-              >
-                Sign in
-              </Link>
-              {" or "}
-              <Link
-                to={{
-                  pathname: "/register",
-                  state: location.state,
-                }}
-              >
-                Create account
-              </Link>
-            </Info>
+            {error ? <ErrorModal error={error} /> : <div>Loading...</div>}
           </Modal>
         </Center>
       </Content>

src/Room.jsx

@@ -25,7 +25,7 @@ import {
   ScreenshareButton,
 } from "./RoomButton";
 import { Header, LeftNav, RightNav, CenterNav } from "./Header";
-import { Button, ErrorMessage } from "./Input";
+import { Button } from "./Input";
 import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 import VideoGrid, {
   useVideoGridLayout,
@@ -35,6 +35,7 @@ import { useGroupCall } from "matrix-react-sdk/src/hooks/useGroupCall";
 import { useCallFeed } from "matrix-react-sdk/src/hooks/useCallFeed";
 import { useMediaStream } from "matrix-react-sdk/src/hooks/useMediaStream";
 import { fetchGroupCall } from "./ConferenceCallManagerHooks";
+import { ErrorModal } from "./ErrorModal";
 
 function useLoadGroupCall(client, roomId) {
   const [state, setState] = useState({
@@ -70,7 +71,7 @@ export function Room({ client }) {
   if (error) {
     return (
       <div className={styles.room}>
-        <LoadingErrorView error={error} />
+        <ErrorModal error={error} />
       </div>
     );
   }
@@ -160,20 +161,6 @@ export function EnteringRoomView() {
   );
 }
 
-export function LoadingErrorView({ error }) {
-  useEffect(() => {
-    console.error(error);
-  }, [error]);
-
-  return (
-    <>
-      <div className={styles.centerMessage}>
-        <ErrorMessage>{error.message}</ErrorMessage>
-      </div>
-    </>
-  );
-}
-
 function RoomSetupView({
   roomName,
   state,

src/Room.module.css

@@ -80,10 +80,12 @@ limitations under the License.
   flex: 1;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
 }
 
 .centerMessage p {
   display: block;
+  margin-bottom: 0;
 }
 
 .roomContainer {