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.

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

add dynamic navbar dependding on user login session #97

Merged
merged 16 commits into from
Oct 5, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
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
4 changes: 3 additions & 1 deletion blotztask-ui/.env
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
# TODO : store secret somewhere safe
NEXTAUTH_SECRET=ofnU4GpkVHmySSuIX7BXJ48/UAI8GYjWmBiYFx/9cJs=
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_URL=http://localhost:3000
nets7snipper marked this conversation as resolved.
Show resolved Hide resolved
NEXT_PUBLIC_API_BASE_URL=https://localhost:7112
NEXT_PUBLIC_API_BASE_URL_WITH_API=https://localhost:7112/api
4 changes: 1 addition & 3 deletions blotztask-ui/.env.production
Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
NEXT_PUBLIC_API_BASE_URL=https://wapp-blotztaskapp.azurewebsites.net
NEXT_PUBLIC_API_BASE_URL_WITH_API=https://wapp-blotztaskapp.azurewebsites.net/api

nets7snipper marked this conversation as resolved.
Show resolved Hide resolved
NEXT_PUBLIC_API_BASE_URL=https://wapp-blotztaskapp.azurewebsites.net/api
15 changes: 15 additions & 0 deletions blotztask-ui/.vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
nets7snipper marked this conversation as resolved.
Show resolved Hide resolved
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "debug",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
503 changes: 503 additions & 0 deletions blotztask-ui/public/assets/images/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 4 additions & 3 deletions blotztask-ui/src/app/api/auth/[...nextauth]/options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,16 @@ export const authOptions: NextAuthOptions = {
},

async authorize(credentials: Credentials) {

const { email, password } = credentials;
// console.log(email, password,req);


try {
//TODO : Remove reject unauthorized set to false
if (process.env.NODE_ENV !== 'production') {
process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
}
//TODO :Also fix the fetch url for login in prod
console.log(`${process.env.NEXT_PUBLIC_API_BASE_URL}/login/`)
nets7snipper marked this conversation as resolved.
Show resolved Hide resolved
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/login/`, {
method: 'POST',
headers: {
Expand All @@ -49,7 +49,7 @@ export const authOptions: NextAuthOptions = {
});

if (!response.ok) {
console.error('Failed to authenticate:', response);
console.error('Failed to authenticate:', response, email, password);
nets7snipper marked this conversation as resolved.
Show resolved Hide resolved
return null;
}

Expand Down Expand Up @@ -83,6 +83,7 @@ export const authOptions: NextAuthOptions = {
secret: process.env.NEXTAUTH_SECRET,
callbacks: {
async signIn({ user, account }) {
console.log("USER"+user)
nets7snipper marked this conversation as resolved.
Show resolved Hide resolved
if (user?.access_token) {
account.access_token = user?.access_token as string

Expand Down
22 changes: 8 additions & 14 deletions blotztask-ui/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@

import { cn } from '@/lib/utils';
import type { Metadata } from 'next';
import { ThemeProvider } from 'next-themes';
import { Inter as FontSans } from 'next/font/google';
import '../styles/globals.css';
import { cn } from '@/lib/utils';
import { ThemeProvider } from 'next-themes';
import SessionProvider from './provider';
import { getServerSession } from 'next-auth';
import { authOptions } from './api/auth/[...nextauth]/options';
import { MainNav } from './navbar/main-nav';
import Provider from './provider';

const fontSans = FontSans({
subsets: ['latin'],
Expand All @@ -19,14 +16,11 @@ export const metadata: Metadata = {
description: 'Efficiently organize and track users tasks',
};

export default async function RootLayout({
children,
export default function RootLayout({
children
}: Readonly<{
children: React.ReactNode;
}>) {

const session = await getServerSession(authOptions);

return (
<html lang="en">
<body
Expand All @@ -35,18 +29,18 @@ export default async function RootLayout({
fontSans.variable
)}
>
<SessionProvider session={session}>
<Provider>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<MainNav/>
<MainNav />
{/* <Navbar /> TODO: Implement navbar to navigate between pages*/}
<section className="container mx-auto px-4">{children}</section>
</ThemeProvider>
</SessionProvider>
</Provider>
</body>
</html>
);
Expand Down
103 changes: 61 additions & 42 deletions blotztask-ui/src/app/navbar/main-nav.tsx
Original file line number Diff line number Diff line change
@@ -1,55 +1,74 @@
import { authOptions } from "@/app/api/auth/[...nextauth]/options";
import { getServerSession } from "next-auth";
import { cn } from "@/lib/utils"
"use client"

import { getProviders, signOut, useSession } from 'next-auth/react';
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from 'react';

export async function MainNav({
export function MainNav({
className,
...props
}: React.HTMLAttributes<HTMLElement>) {

const session = await getServerSession(authOptions);
const{data: session} = useSession();
const [providers, setProviders] = useState(null);
const [toggleDropdown, setToggleDropdown] = useState(false)

useEffect( () => {
(async () => {
nets7snipper marked this conversation as resolved.
Show resolved Hide resolved
const res = await getProviders();
setProviders(res)
})();
},[])

return (
<div className="flex-col md:flex">
<div className="border-b">
<div className="flex h-16 items-center px-4">
<nav
className={cn("flex items-center space-x-4 lg:space-x-6", className)}
{...props}
>
<Link
href="/"
className="text-sm font-medium transition-colors hover:text-primary"
>
Home
</Link>
<Link
href="/examples/dashboard"
className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
>
Task List
</Link>
<Link
href="/examples/dashboard"
className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
>
Profile
className='flex-between w-full mb-116 pt-3'
>
<Link href="/" className='flex gap-2 flex-center'>
<Image
src='/assets/images/logo.svg'
alt='logo'
width={50}
height={50}
/>
</Link>
<Link
href="/examples/dashboard"
className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
>
Test Connection
</Link>
<ul>
<li>
{session ? (<>logined</>):(<>not logined</>)}
</li>
</ul>

<div className='sm:flex hidden'>
{ session?.user ?(
nets7snipper marked this conversation as resolved.
Show resolved Hide resolved
<div className='flex gap-3 md:gap-5'>
<Link href="/task-dayview" className='gradient_green_blue_btn gradient_green_blue_btn:hover'>
<span>Day View</span>
</Link>
<Link href="/task-list" className='gradient_green_blue_btn gradient_green_blue_btn:hover'>
<span>Task List</span>
</Link>
<Link href="/tasks" className='gradient_green_blue_btn gradient_green_blue_btn:hover'>
<span>New Task List</span>
</Link>
<Link href="/test-connection" className='gradient_green_blue_btn gradient_green_blue_btn:hover'>
<span>Test Connection</span>
</Link>
<Link href="/profile" className='gradient_green_blue_btn gradient_green_blue_btn:hover'>
<span>My Profile</span>
</Link>
<button type='button' onClick={signOut} className='inverse_gradient_green_blue_btn inverse_gradient_green_blue_btn:hover'>
Sign Out
</button>
</div>

) : (
<div>
{providers &&
Object.values(providers).map((provider) => (
<Link href="/signin?callbackUrl=%2F" className='gradient_green_blue_btn gradient_green_blue_btn:hover'>
<span>Sign in</span>
</Link>
))}
</div>
)}

</div>
</nav>
</div>
</div>
</div>
)
}
43 changes: 7 additions & 36 deletions blotztask-ui/src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,50 +1,21 @@
"use client"
import { Button } from '@/components/ui/button';
import { H1, H3 } from '@/components/ui/heading-with-anchor';
import { signOut } from 'next-auth/react';
import Link from 'next/link';

export default function Home() {
return (

<main className="flex flex-col gap-5 p-12 md:items-center md:p-28">
<H1>Blotz Task</H1>
<H1 className='green_gradient'>Blotz
<span className='blue_gradient text-center'>
Task
</span>
</H1>

<H3 className="text-lg font-light text-muted-foreground sm:text-xl">
Designed to help users efficiently organize and track their tasks
providing functionality for task creation, management, and completion
tracking.
</H3>
<div className="mt-16 flex flex-col gap-3 md:flex-row">
<Link href="/task-dayview">
<Button asChild>
<span>Day View</span>
</Button>
</Link>
<Link href="/task-list">
<Button asChild>
<span>Task List</span>
</Button>
</Link>
<Link href="/tasks">
<Button asChild>
<span>New Task List</span>
</Button>
</Link>
<Link href="coming-soon">
<Button variant="outline" asChild>
<span>My Profile</span>
</Button>
</Link>
<Link href="/coming-soon">
<Button variant="outline" asChild onClick={()=> signOut()}>
<span>Log out</span>
</Button>
</Link>
<Link href="/test-connection">
<Button asChild>
<span>Test Server Connection</span>
</Button>
</Link>
</div>
</main>
);
}
15 changes: 14 additions & 1 deletion blotztask-ui/src/app/provider.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,17 @@
"use client";

import { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
export default SessionProvider;

interface ProviderProps {
children: React.ReactNode;
session?: Session | null;
}

const Provider: React.FC<ProviderProps> = ({ children, session }) => (
<SessionProvider session={session}>
{children}
</SessionProvider>
);

export default Provider;
Loading
Loading