Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[NEW] dummy auth model #171

Merged
merged 4 commits into from
Jul 14, 2022
Merged

[NEW] dummy auth model #171

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c09a95e
new: dummy auth model with some other fixes
sidmohanty11 Jun 17, 2022
6525635
fix: firebase err and slideCount err
sidmohanty11 Jul 3, 2022
f96a1d5
improving dummyuserauth
sidmohanty11 Jul 4, 2022
fdfcf4c
useDummyAuth hook and moving entire dummyUI to dummyUIBtn
sidmohanty11 Jul 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/components/auth/dummy/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as DummyLoginButton } from './ui/DummyLoginButton';
21 changes: 21 additions & 0 deletions app/components/auth/dummy/lib/function.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: "[email protected]",
emailVerified: false,
phoneNumber: null,
displayName: "dummy.cat",
};
};

export const dummyUserLogin = () => {
let user = JSON.parse(sessionStorage.getItem("dummy_user"));
debdutdeb marked this conversation as resolved.
Show resolved Hide resolved
if (user) {
return user;
} else {
return createDummyUser();
}
};
54 changes: 54 additions & 0 deletions app/components/auth/dummy/styles/DummyLoginButton.module.css
View file
Open in desktop
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;
}
46 changes: 46 additions & 0 deletions app/components/auth/dummy/ui/DummyLoginButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
debdutdeb marked this conversation as resolved.
Show resolved Hide resolved
const [user, setUser] = useState({});

useEffect(() => {
const isStoredInSession = JSON.parse(sessionStorage.getItem("dummy_user"));
if (isStoredInSession) {
setUser(isStoredInSession);
}
},[])

return (
<div className={styles.authDialogWrapper}>
<div className={styles.avatar}>
<button className={styles.avatarButton}>
<span
className="d-flex align-items-center"
onClick={() => setOpen((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>
{isOpen && (
<div className={styles.authContainer}>
<DummyLoginUI setUser={setUser} user={user} />
</div>
)}
</div>
);
}
46 changes: 46 additions & 0 deletions app/components/auth/dummy/ui/DummyLoginUI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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");
}
Copy link
Member

@debdutdeb debdutdeb Jul 3, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move these to DummyLoginButton and just pass the user state. Pass these as handleLogin and handleLogout.

return (
!user.id ? <div className="d-flex flex-column align-items-center my-3">
debdutdeb marked this conversation as resolved.
Show resolved Hide resolved
<Button onClick={login}>Login</Button>
</div> :
<>
<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={logout}>Sign Out</Button>
</div>
</>
);
}
4 changes: 2 additions & 2 deletions app/components/footer.js
View file
Open in desktop
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
108 changes: 64 additions & 44 deletions app/components/menubar.js
View file
Open in desktop
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,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 (
<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 +62,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 +81,45 @@ 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>
{Cookies.get("user") ? (
debdutdeb marked this conversation as resolved.
Show resolved Hide resolved
<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")}`}>
debdutdeb marked this conversation as resolved.
Show resolved Hide resolved
<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