Skip to content

feat(authentication): Added login, routes and navigation #1

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

Open
crsstha wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

feat(authentication): Added login, routes and navigation #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
73 changes: 73 additions & 0 deletions app/components/Navbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React, {
use,
useCallback,
} from 'react';
import { useNavigate } from 'react-router';
import {
Button,
DropdownMenu,
Heading,
} from '@ifrc-go/ui';
import { gql } from 'urql';

import UserContext from '#contexts/UserContext';
import { useLogoutMutation } from '#generated/types/graphql';

Check failure on line 14 in app/components/Navbar/index.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unable to resolve path to module '#generated/types/graphql'

import styles from './styles.module.css';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const LOGOUT = gql`
mutation Logout {
logout
}
`;

function Navbar() {
const { user, setUser } = use(UserContext);
const navigate = useNavigate();

const [{ fetching }, triggerLogout] = useLogoutMutation();

const handleLogout = useCallback(async () => {
const res = await triggerLogout({});
const logoutResponse = res.data?.logout;
if (logoutResponse) {
setUser(undefined);
navigate('/login');
}
}, [navigate, triggerLogout, setUser]);

return (
<nav className={styles.navbar}>
<Heading className={styles.title}>NRCS</Heading>
<DropdownMenu
variant="tertiary"
label={(
<div className={styles.userInfo}>
<Heading level={5}>
{user?.firstName}
{' '}
{user?.lastName}
</Heading>
<Heading level={6}>
Admin
</Heading>
</div>
)}
>
<React.Fragment key=".0">
<Button
name="logout"
variant="tertiary"
className={styles.dropdownOption}
onClick={handleLogout}
>
{fetching ? 'Logging out' : 'Logout'}
</Button>
</React.Fragment>
</DropdownMenu>
</nav>
);
}

export default Navbar;
42 changes: 42 additions & 0 deletions app/components/Navbar/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
.navbar {
display: flex;
justify-content: space-between;
padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
border-bottom: var(--go-ui-width-separator-thin) solid
var(--go-ui-color-primary-red);
background-color: var(--go-ui-color-white);
flex-shrink: 0;
animation: slide-down var(--go-ui-duration-animation-medium) ease-in
forwards;
.title {
font-size: var(--go-ui-font-size-3xl);
color: var(--go-ui-color-red);
}
.userInfo {
display: flex;
align-items: start;
flex-direction: column;
}
}
.dropdown-option {
padding: var(--go-ui-spacing-xs);
margin-left: var(--go-ui-spacing-md);
cursor: pointer;
&:hover {
color: var(--go-ui-color-primary-red);
}
}
.test {
width: 150px;
}

@keyframes slide-down {
0% {
transform: translateY(-0.25rem);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
98 changes: 98 additions & 0 deletions app/components/Navigation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import {
ReactNode,
useState,
} from 'react';
import {
IoChevronDownOutline,
IoChevronUpOutline,
} from 'react-icons/io5';
import { NavLink } from 'react-router';
import { Button } from '@ifrc-go/ui';
import { _cs } from '@togglecorp/fujs';

import styles from './styles.module.css';

export interface NavigationItem {
title: string;
to?: string;
icon?: ReactNode;
variant: 'root' | 'group' | 'leaf';
children?: NavigationItem[];

}
function Navigation({ navigationItem }: { navigationItem: NavigationItem[] }) {
const [openIndexes, setOpenIndexes] = useState(
navigationItem.map((_, i) => i),
);

const toggleAccordion = (index: number) => {
setOpenIndexes((prev) => (prev.includes(index)
? prev.filter((i) => i !== index)
: [...prev, index]));
};

return (
<nav className={styles.nav}>
{navigationItem.map((item, index) => {
const isOpen = openIndexes.includes(index);
return (
<div
key={item.title}
className={_cs(
styles[item.variant ?? 'leaf'],
)}
>
<Button
name={item.title}
type="button"
className={styles.navHeaderContainer}
childrenContainerClassName={styles.navHeader}
onClick={() => toggleAccordion(index)}
variant="tertiary"
icons={item.icon}
>
{item.title}
{isOpen ? <IoChevronUpOutline /> : <IoChevronDownOutline />}
</Button>
{isOpen && (
<div
className={_cs(
styles.navContent,
styles[item.variant ?? 'leaf'],
)}
>
{item.children && item.children.map((child) => {
if (!child.to && child.children) {
return (
<Navigation
key={child.title}
navigationItem={[child]}
/>
);
}
return (
<NavLink
key={child.to}
to={child.to ?? ''}
className={({ isActive }) => _cs(
styles.routeLink,
isActive && styles.activeRoute,
styles[child.variant ?? 'leaf'],

)}
>
{child.title}
</NavLink>
);
})}

</div>
)}
</div>
);
})}
</nav>
);
}

export default Navigation;
42 changes: 42 additions & 0 deletions app/components/Navigation/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
.nav {
height: 100%;
.nav {
border: none;
}
border-right: 2px solid var(--go-ui-color-gray-20);
.navHeaderContainer {
background-color: var(--go-ui-color-gray-10);
padding: var(--go-ui-spacing-lg) var(--go-ui-spacing-2xl);
width: 100%;
border-bottom: 2px solid var(--go-ui-color-gray-20);
.navHeader {
display: flex;
justify-content: space-between;
}
}
.navContent {
display: flex;
flex-direction: column;
.routeLink {
border-bottom: 2px solid var(--go-ui-color-gray-20);
&:hover {
color: var(--go-ui-color-primary-red);
}
padding: var(--go-ui-spacing-lg) var(--go-ui-spacing-2xl);
}

.activeRoute {
color: var(--go-ui-color-primary-red);
text-decoration: underline;
}
}
.group {
.navHeaderContainer {
background: none;
font-weight: var(--go-ui-font-weight-normal);
}
.leaf {
padding-left: var(--go-ui-spacing-3xl);
}
}
}
34 changes: 34 additions & 0 deletions app/components/Page/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { RefObject } from 'react';
import { _cs } from '@togglecorp/fujs';

import styles from './styles.module.css';

interface Props {
className?: string;
children?: React.ReactNode;
elementRef?: RefObject<HTMLDivElement>
leftPaneContent?: React.ReactNode;
leftPaneContainerClassName?: string;
}
function Page(props: Props) {
const {
className,
children,
elementRef,
leftPaneContent,
leftPaneContainerClassName,
} = props;

return (
<div className={_cs(className, styles.page)} ref={elementRef}>
{leftPaneContent && (
<div className={_cs(leftPaneContainerClassName, styles.leftPane)}>
{leftPaneContent}
</div>
)}
{children}
</div>
);
}

export default Page;
14 changes: 14 additions & 0 deletions app/components/Page/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.page {
display: flex;
flex-direction: row;
flex-grow: 1;
overflow: hidden;

.leftPane {
display: flex;
flex-direction: column;
box-shadow: 0px 4px 4px 0px rgba(227, 227, 227, 0.25);
background-color: var(--go-ui-color-white);
gap: var(--go-ui-spacing-md);
}
}
17 changes: 17 additions & 0 deletions app/components/PreloadMessage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import styles from './styles.module.css';

interface Props {
children?: React.ReactNode;
}

function PreloadMessage(props: Props) {
const { children } = props;

return (
<div className={styles.preloadMessage}>
{children}
</div>
);
}

export default PreloadMessage;
11 changes: 11 additions & 0 deletions app/components/PreloadMessage/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.preload-message {
display: flex;
align-items: center;
flex-direction: column;
flex-grow: 1;
justify-content: center;
background-color: var(--color-background);
height: 100vh;
text-align: center;
font-size: var(--font-size-lg);
}
Loading
Loading