diff --git a/app/components/auth/dummy/hooks/useDummyAuth.js b/app/components/auth/dummy/hooks/useDummyAuth.js new file mode 100644 index 00000000..e2ef3858 --- /dev/null +++ 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 new file mode 100644 index 00000000..5609b705 --- /dev/null +++ b/app/components/auth/dummy/index.js @@ -0,0 +1 @@ +export { default as DummyLoginButton } from './ui/DummyLoginButton'; \ No newline at end of file diff --git a/app/components/auth/dummy/styles/DummyLoginButton.module.css b/app/components/auth/dummy/styles/DummyLoginButton.module.css new file mode 100644 index 00000000..f529c26f --- /dev/null +++ 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 new file mode 100644 index 00000000..c63845ef --- /dev/null +++ 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 ( +
+
+ +
+ {isLoginUiOpen && ( +
+ {user.id ? ( + <> +
+
+ {user.image ? ( + {user.name} + ) : ( + + )} +
+
{user.name}
+
+ {user.email} +
+
+
+ +
+ + ) : ( +
+ +
+ )} +
+ )} +
+ ); +} diff --git a/app/components/footer.js b/app/components/footer.js index feb14364..f8e10eeb 100644 --- a/app/components/footer.js +++ b/app/components/footer.js @@ -4,7 +4,7 @@ function Footer() { return ( <> ); diff --git a/app/components/menubar.js b/app/components/menubar.js index d0553f4f..eb33342d 100644 --- 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) => ( { + 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 ( - - - + + { + setCollapsed(!collapsed); + }} > - -