Skip to content

Commit

Permalink
Add dummy auth model (RocketChat#171)
Browse files Browse the repository at this point in the history
  • Loading branch information
sidmohanty11 authored and Dnouv committed Nov 3, 2022
1 parent 576e437 commit 0e5eda8
Show file tree
Hide file tree
Showing 10 changed files with 288 additions and 91 deletions.
42 changes: 42 additions & 0 deletions app/components/auth/dummy/hooks/useDummyAuth.js
Original file line number Diff line number Diff line change
@@ -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: "[email protected]",
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,
};
};
1 change: 1 addition & 0 deletions app/components/auth/dummy/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as DummyLoginButton } from './ui/DummyLoginButton';
54 changes: 54 additions & 0 deletions app/components/auth/dummy/styles/DummyLoginButton.module.css
Original file line number Diff line number Diff line change
@@ -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;
}
73 changes: 73 additions & 0 deletions app/components/auth/dummy/ui/DummyLoginButton.js
Original file line number Diff line number Diff line change
@@ -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>
);
}
4 changes: 2 additions & 2 deletions app/components/footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -18,7 +18,7 @@ function Footer() {
width={98}
/>
</span>
</a>
</div>
</footer>
</>
);
Expand Down
107 changes: 63 additions & 44 deletions app/components/menubar.js
Original file line number Diff line number Diff line change
@@ -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);
}}
Expand All @@ -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} ${
Expand All @@ -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}
Expand All @@ -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>
Expand Down
Loading

0 comments on commit 0e5eda8

Please sign in to comment.