RocketChat · Sing-Li · Jul 14, 2022 · Jun 17, 2022 · Jul 3, 2022 · Jul 4, 2022
diff --git a/app/components/auth/dummy/hooks/useDummyAuth.js b/app/components/auth/dummy/hooks/useDummyAuth.js
@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+
+const createDummyUser = () => {
+  return {
+    id: 1,
+    name: "dummy.cat",
+    image:
+      "https://user-images.githubusercontent.com/25859075/29918905-88dcc646-8e5c-11e7-81ec-242bc58dce1b.jpg",
+    email: "dummyuser@rocket.chat",
+    emailVerified: false,
+    phoneNumber: null,
+    displayName: "dummy.cat",
+  };
+};
+
+export const useDummyAuth = () => {
+  const [user, setUser] = useState({});
+
+  useEffect(() => {
+    const isStoredInSession = JSON.parse(sessionStorage.getItem("dummy_user"));
+    if (isStoredInSession) {
+      setUser(isStoredInSession);
+    }
+  }, []);
+
+  const handleLogin = () => {
+    const dummy_user = createDummyUser();
+    setUser(dummy_user);
+    sessionStorage.setItem("dummy_user", JSON.stringify(dummy_user));
+  };
+
+  const handleLogout = () => {
+    setUser({});
+    sessionStorage.removeItem("dummy_user");
+  };
+
+  return {
+    user,
+    handleLogin,
+    handleLogout,
+  };
+};
diff --git a/app/components/auth/dummy/index.js b/app/components/auth/dummy/index.js
@@ -0,0 +1 @@
+export { default as DummyLoginButton } from './ui/DummyLoginButton';
diff --git a/app/components/auth/dummy/styles/DummyLoginButton.module.css b/app/components/auth/dummy/styles/DummyLoginButton.module.css
@@ -0,0 +1,54 @@
+.authDialogWrapper {
+    position: relative;
+}
+.authContainer {
+    display: block;
+    position: fixed;
+    right: 50%;
+    transform: translate(50%,0);
+    top: 62px;
+    width: 350px;
+    max-height: -webkit-calc(100vh - 62px - 100px);
+    max-height: calc(100vh - 62px - 100px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-radius: 8px;
+    margin-left: 12px;
+    z-index: 991;
+    line-height: normal;
+    background: #fff;
+    border: 1px solid #ccc;
+    border-color: rgba(0,0,0,.2);
+    color: #000;
+    -webkit-box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+    -webkit-user-select: text;
+    user-select: text;
+}
+@media(min-width: 570px) {
+    .authContainer {
+        position: absolute;
+        right: 8px;
+        top: 62px;
+        width: 354px;
+        transform: translateX(0);
+    }
+}
+.avatar {
+    background: var(--bs-gray-300);
+    border-radius: 50%;
+    width: 42px;
+    height: 42px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.avatarButton {
+    background: none;
+    border: none;
+}
+
+.avatarButton:focus {
+    outline: none;
+}
diff --git a/app/components/auth/dummy/ui/DummyLoginButton.js b/app/components/auth/dummy/ui/DummyLoginButton.js
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { NoUserAvatar } from "../../NoUserAvatar";
+import { Button } from "react-bootstrap";
+import styles from "../styles/DummyLoginButton.module.css";
+import { useDummyAuth } from "../hooks/useDummyAuth";
+
+export default function DummyLoginButton() {
+  const [isLoginUiOpen, setIsLoginUiOpen] = useState(false);
+  const { user, handleLogin, handleLogout } = useDummyAuth();
+
+  return (
+    <div className={styles.authDialogWrapper}>
+      <div className={styles.avatar}>
+        <button className={styles.avatarButton}>
+          <span
+            className="d-flex align-items-center"
+            onClick={() => setIsLoginUiOpen((prev) => !prev)}
+          >
+            {user?.image ? (
+              <img
+                src={user.image}
+                alt={user.name}
+                className="rounded-circle"
+                height="42px"
+                width="42px"
+              />
+            ) : (
+              <NoUserAvatar name={user?.name} size="42" />
+            )}
+          </span>
+        </button>
+      </div>
+      {isLoginUiOpen && (
+        <div className={styles.authContainer}>
+          {user.id ? (
+            <>
+              <div className="d-flex flex-column align-items-center mt-4 mb-3 ml-3 mr-3 border-bottom">
+                <div className="mb-1">
+                  {user.image ? (
+                    <img
+                      src={user.image}
+                      alt={user.name}
+                      style={{
+                        borderRadius: "50%",
+                      }}
+                      height="64px"
+                      width="64px"
+                    />
+                  ) : (
+                    <NoUserAvatar size="64" name={user.name} />
+                  )}
+                </div>
+                <div className="font-weight-bold mb-1">{user.name}</div>
+                <div className="mb-1" style={{ color: "var(--bs-gray-700)" }}>
+                  {user.email}
+                </div>
+              </div>
+              <div className="d-flex justify-content-center mb-4 mt-3 ml-3 mr-3">
+                <Button variant="secondary" onClick={handleLogout}>
+                  Sign Out
+                </Button>
+              </div>
+            </>
+          ) : (
+            <div className="d-flex flex-column align-items-center my-3">
+              <Button onClick={handleLogin}>Login</Button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/footer.js b/app/components/footer.js
@@ -4,7 +4,7 @@ function Footer() {
   return (
     <>
       <footer>
-        <a className="d-flex align-item-center justify-content-center text-decoration-none text-black">
+        <div className="d-flex align-item-center justify-content-center text-decoration-none text-black">
           <span className="d-flex">Powered by </span>
           <span className="d-flex ps-2">
             <BrandLogo
@@ -18,7 +18,7 @@ function Footer() {
               width={98}
             />
           </span>
-        </a>
+        </div>
       </footer>
     </>
   );

diff --git a/app/components/menubar.js b/app/components/menubar.js
@@ -1,18 +1,19 @@
-import React, {useState } from 'react';
-import { Navbar, Nav, NavDropdown, Container, Dropdown } from 'react-bootstrap';
-import styles from '../styles/Menubar.module.css';
-import {RocketChatAuthMenuButton} from './auth/rocketchat';
+import React, { useState } from "react";
+import { Navbar, Nav, NavDropdown, Container, Dropdown } from "react-bootstrap";
+import styles from "../styles/Menubar.module.css";
+import { RocketChatAuthMenuButton } from "./auth/rocketchat";
 import BrandLogo from "./brandlogo";
-import RocketChatLinkButton from './rocketchatlinkbutton';
-import Cookies from 'js-cookie';
-import Link from 'next/link'
+import RocketChatLinkButton from "./rocketchatlinkbutton";
+import Cookies from "js-cookie";
+import Link from "next/link";
+import { DummyLoginButton } from "./auth/dummy";
 
 const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
   <a
     className={styles.elipses}
     href=""
     ref={ref}
-    onClick={e => {
+    onClick={(e) => {
       e.preventDefault();
       onClick(e);
     }}
@@ -24,28 +25,36 @@ const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
 
 export default function Menubar(props) {
   const [collapsed, setCollapsed] = useState(true);
-
+  const userCookie = Cookies.get("user");
+  const hasAllRequiredCreds =
+    process.env.NEXTAUTH_URL &&
+    process.env.ROCKETCHAT_CLIENT_ID &&
+    process.env.ROCKETCHAT_CLIENT_SECRET &&
+    process.env.ROCKETCHAT_URL;
+  if (!hasAllRequiredCreds) console.log("RC4Community is now using a dummy Auth Component! If you wish to use a robust Auth component, provide all the credentials first (https://github.com/RocketChat/RC4Community/tree/master/app/components/auth)")
   return (
-    <Container fluid className='border-bottom '>
-      <Navbar expand='lg' className=' bg-white mx-4 my-2'>
-        <BrandLogo 
-          brandLink={'/'}
-          logoLink={'https://global-uploads.webflow.com/611a19b9853b7414a0f6b3f6/611bbb87319adfd903b90f24_logoRC.svg'}
-          imageTitle={'Rocket.Chat'}
-          brandName={'Rocket.Chat Community'}
+    <Container fluid className="border-bottom ">
+      <Navbar expand="lg" className=" bg-white mx-4 my-2">
+        <BrandLogo
+          brandLink={"/"}
+          logoLink={
+            "https://global-uploads.webflow.com/611a19b9853b7414a0f6b3f6/611bbb87319adfd903b90f24_logoRC.svg"
+          }
+          imageTitle={"Rocket.Chat"}
+          brandName={"Rocket.Chat Community"}
           height={21}
           width={124}
         />
         <Navbar.Toggle
-          aria-controls='basic-navbar-nav'
-          className={styles.default_toggler+" ms-auto"}
+          aria-controls="basic-navbar-nav"
+          className={styles.default_toggler + " ms-auto"}
+          onClick={() => {
+            setCollapsed(!collapsed);
+          }}
         >
           <button
             className={`${styles.navbar_toggler} navbar-toggler collapsed d-flex d-lg-none flex-column justify-content-around bg-white`}
-            type='button'
-            onClick={() => {
-              setCollapsed(!collapsed);
-            }}
+            type="button"
           >
             <span
               className={`${styles.toggler_icon} ${
@@ -54,16 +63,16 @@ export default function Menubar(props) {
             />
           </button>
         </Navbar.Toggle>
-        <Navbar.Collapse id='basic-navbar-nav'>
-          <Nav className='mx-auto'>
-            {props.menu?.data?.attributes?.body?.map((item,index) => {
+        <Navbar.Collapse id="basic-navbar-nav">
+          <Nav className="mx-auto">
+            {props.menu?.data?.attributes?.body?.map((item, index) => {
               return item.sub_menus && item?.sub_menus?.data?.length ? (
                 <NavDropdown
-                  key = {item.id || item._id || `NavDropDown_${index}`}
+                  key={`NavDropDown_${index}`}
                   title={item.label}
                   className={`ml-4 fw-normal ${styles.navbarItem}`}
                 >
-                  {item.sub_menus.data.map((sub,index) => (
+                  {item.sub_menus.data.map((sub, index) => (
                     <NavDropdown.Item
                       key={sub.id || sub._id || `NavDropDownItem_${index}`}
                       href={sub.attributes.url}
@@ -73,33 +82,43 @@ export default function Menubar(props) {
                   ))}
                 </NavDropdown>
               ) : (
-                <Nav.Link href={item.url} className='fw-normal' key={item.id || item._id || `NavLink_${index}`}>
+                <Nav.Link
+                  href={item.url}
+                  className="fw-normal"
+                  key={item.id || item._id || `NavLink_${index}`}
+                >
                   {item.label}
                 </Nav.Link>
               );
             })}
           </Nav>
-          <RocketChatLinkButton className={`bg-danger bg-gradient p-2 text-white ${styles.chat}`}>
+          <RocketChatLinkButton
+            className={`bg-danger bg-gradient p-2 text-white ${styles.chat}`}
+          >
             Click to Chat
           </RocketChatLinkButton>
         </Navbar.Collapse>
         <div className="mx-3">
-        {Cookies.get('user') ?
-        <Dropdown
-        align="end"
-        className={styles.dropdown_menu}>
-        <Dropdown.Toggle as={CustomToggle} />
-        <Dropdown.Menu size="sm" title="">
-          <Dropdown.Header>RC4Community Profile</Dropdown.Header>
-          <Dropdown.Item><Link href={`/profile/${Cookies.get('user')}`}><a className={styles.dropdown_menu_item}>Profile</a></Link></Dropdown.Item>
-        </Dropdown.Menu>
-      </Dropdown>
-      :
-      ""
-      }
-      </div>
+          {userCookie && (
+            <Dropdown align="end" className={styles.dropdown_menu}>
+              <Dropdown.Toggle as={CustomToggle} />
+              <Dropdown.Menu size="sm" title="">
+                <Dropdown.Header>RC4Community Profile</Dropdown.Header>
+                <Dropdown.Item>
+                  <Link href={`/profile/${userCookie}`}>
+                    <a className={styles.dropdown_menu_item}>Profile</a>
+                  </Link>
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          )}
+        </div>
         <div className="mx-2">
-          <RocketChatAuthMenuButton/>
+          {hasAllRequiredCreds ? (
+            <RocketChatAuthMenuButton />
+          ) : (
+            <DummyLoginButton />
+          )}
         </div>
       </Navbar>
     </Container>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as DummyLoginButton } from './ui/DummyLoginButton';