From c09a95e526c8037275d1eeb46bf27a86673bc624 Mon Sep 17 00:00:00 2001 From: sidmohanty11 Date: Fri, 17 Jun 2022 22:52:59 +0530 Subject: [PATCH 1/4] new: dummy auth model with some other fixes --- app/components/auth/dummy/index.js | 1 + app/components/auth/dummy/lib/function.js | 21 ++++ .../dummy/styles/DummyLoginButton.module.css | 54 +++++++++ .../auth/dummy/ui/DummyLoginButton.js | 46 ++++++++ app/components/auth/dummy/ui/DummyLoginUI.js | 46 ++++++++ app/components/footer.js | 4 +- app/components/menubar.js | 108 +++++++++++------- app/lib/auth/RocketChatOAuthProvider.js | 2 +- app/pages/_app.js | 1 - app/pages/api/auth/[...nextauth].js | 6 +- 10 files changed, 238 insertions(+), 51 deletions(-) create mode 100644 app/components/auth/dummy/index.js create mode 100644 app/components/auth/dummy/lib/function.js create mode 100644 app/components/auth/dummy/styles/DummyLoginButton.module.css create mode 100644 app/components/auth/dummy/ui/DummyLoginButton.js create mode 100644 app/components/auth/dummy/ui/DummyLoginUI.js 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/lib/function.js b/app/components/auth/dummy/lib/function.js new file mode 100644 index 00000000..2d2edf4e --- /dev/null +++ b/app/components/auth/dummy/lib/function.js @@ -0,0 +1,21 @@ +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 dummyUserLogin = () => { + let user = JSON.parse(sessionStorage.getItem("dummy_user")); + if (user) { + return user; + } else { + return createDummyUser(); + } +}; 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..a9f8b969 --- /dev/null +++ b/app/components/auth/dummy/ui/DummyLoginButton.js @@ -0,0 +1,46 @@ +import { useEffect, useState } from "react"; +import { NoUserAvatar } from "../../NoUserAvatar"; +import DummyLoginUI from "./DummyLoginUI"; +import styles from "../styles/DummyLoginButton.module.css"; + +export default function DummyLoginButton() { + const [isOpen, setOpen] = useState(false); + const [user, setUser] = useState({}); + + useEffect(() => { + const isStoredInSession = JSON.parse(sessionStorage.getItem("dummy_user")); + if (isStoredInSession) { + setUser(isStoredInSession); + } + },[]) + + return ( +
+
+ +
+ {isOpen && ( +
+ +
+ )} +
+ ); +} diff --git a/app/components/auth/dummy/ui/DummyLoginUI.js b/app/components/auth/dummy/ui/DummyLoginUI.js new file mode 100644 index 00000000..4cbb5e45 --- /dev/null +++ b/app/components/auth/dummy/ui/DummyLoginUI.js @@ -0,0 +1,46 @@ +import { Button } from "react-bootstrap"; +import { NoUserAvatar } from "../../NoUserAvatar"; +import { dummyUserLogin } from "../lib/function"; + +export default function DummyLoginUI({ user, setUser }) { + const login = () => { + const dummy_user = dummyUserLogin(); + setUser(dummy_user); + sessionStorage.setItem("dummy_user", JSON.stringify(dummy_user)); + } + const logout = () => { + setUser({}); + sessionStorage.removeItem("dummy_user"); + } + return ( + !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..6715208f 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,35 @@ const CustomToggle = React.forwardRef(({ children, onClick }, ref) => ( export default function Menubar(props) { const [collapsed, setCollapsed] = useState(true); - + 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); + }} > - -