Skip to content

Commit

Permalink
auth flow fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
Chifez committed Jul 2, 2024
1 parent a81ec5a commit ea43726
Show file tree
Hide file tree
Showing 11 changed files with 1,103 additions and 332 deletions.
8 changes: 7 additions & 1 deletion app/dashboard/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import DashboardLayout from '@/components/Shared/DashboardLayout';
import { Suspense } from 'react';
import Loading from './loading';

// This is a Server Component
export default function Layout({ children }: { children: any }) {
return <DashboardLayout>{children}</DashboardLayout>;
return (
<DashboardLayout>
<Suspense fallback={<Loading />}>{children}</Suspense>
</DashboardLayout>
);
}
17 changes: 17 additions & 0 deletions app/dashboard/loading.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export default function Loading() {
return (
// <div className="w-full h-full space-y-4">
// <div className="w-[200px] h-10 flex flex-col gap-2">
// <Skeleton className="h-4 w-3/5 rounded-lg" />
// <Skeleton className="h-4 w-4/5 rounded-lg bg-slate-200 animate-in" />
// </div>

// <div className="w-full h-full">
// <Skeleton className="flex rounded-lg w-full h-full bg-slate-200" />
// </div>
// </div>
<div className="w-full h-full flex items-center justify-center">
<p>Loading...</p>
</div>
);
}
15 changes: 10 additions & 5 deletions components/Shared/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,29 @@
import React, { ReactNode } from 'react';
import React, { ButtonHTMLAttributes, ReactNode } from 'react';
import { useFormStatus } from 'react-dom';

const Button = ({
type,
children,
className,
isLoading,
handleClick,
}: {
type?: any | string;
children: string | ReactNode;
className?: string;
isLoading?: boolean;
handleClick?: () => void;
}) => {
const { pending } = useFormStatus();
return (
<div
role="button"
<button
type={type ? type : 'button'}
disabled={isLoading || pending}
onClick={handleClick}
className={`bg-[#551FFF] text-white text-center text-xl font-semibold rounded-lg w-full p-2 ${className} cursor-pointer`}
>
{isLoading ? <h1>Loading ...</h1> : <div>{children}</div>}
</div>
{isLoading || pending ? <h1>Loading...</h1> : <div>{children}</div>}
</button>
);
};

Expand Down
5 changes: 0 additions & 5 deletions components/Shared/DashboardLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,6 @@ const Layout = (props: { children: JSX.Element }) => {
</Head>

<div className="flex md:h-screen w-screen overflow-hidden bg-[#EAEAEA] dark:bg-[#41395b] p-2">
{/* {isUser ? (
<div className="w-full h-full bg-black/20">
<p> Loading</p>
</div>
) : null} */}
<SideBar />
<div className="flex-1 dark:text-black px-2 md:px-5 py-2 h-full overflow-y-scroll ">
{props.children}
Expand Down
2 changes: 1 addition & 1 deletion components/Shared/PricingCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const PricingCard = (props: Props) => {
</h1>
)
) : (
<h1 className="text-4xl font-semibold">Let's Talk</h1>
<h1 className="text-4xl font-semibold">Let&pos;s Talk</h1>
)}
</div>
<div className="py-6 h-[15rem] border-b">
Expand Down
60 changes: 31 additions & 29 deletions components/Shared/SideBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -81,15 +81,17 @@ const SideBar = () => {
}, []);
return (
<div
className={`fixed bg-white w-[50vw] h-[100dvh] z-50 md:h-full md:z-0 md:relative px-2 py-5 rounded-l-xl flex flex-col items-center gap-8 dark:bg-[#0c0c0d] transition-all duration-600 ${
className={`fixed bg-white w-[50vw] h-[100dvh] z-50 md:h-full md:z-0 md:relative px-4 py-5 rounded-l-xl flex flex-col items-start gap-8 dark:bg-[#0c0c0d] transition-all duration-600 ${
isOpen
? '-translate-x-[100%] md:translate-x-0 md:w-[6vw]'
: 'translate-x-0 md:w-[15vw]'
? 'items-center -translate-x-[100%] md:translate-x-0 md:w-[6vw]'
: 'items-start translate-x-0 md:w-[15vw]'
} `}
>
<div className="flex items-center text-lg py-3 text-[#551fff]">
<div className="flex items-center gap-1 py-3 text-[#551fff]">
<BiAtom className="w-6 h-6" />
<h1 className={`${isOpen && 'md:hidden'}`}>Nucleus</h1>
<h1 className={`${isOpen && 'md:hidden'} font-semibold text-base`}>
Nucleus
</h1>
</div>

<div
Expand All @@ -102,45 +104,45 @@ const SideBar = () => {
<TbSquareRoundedChevronsLeftFilled className="w-10 h-10 md:w-6 md:h-6" />
)}
</div>
<div className="h-full flex flex-col justify-between">
<div className="w-full h-fit pb-4 border-b gap-1 flex flex-col justify-between">
{links.map((item, idx) => (
<Link
href={item.links}
key={idx}
className={`flex items-center justify-center ${
isOpen ? ' rounded-full' : 'rounded-3xl'
} p-3 gap-2 cursor-pointer hover:text-[#551FFF] hover:bg-[#F3F0FF] ${
className={`flex w-full items-center ${
isOpen
? 'justify-center rounded-full'
: 'justify-start rounded-lg'
} p-3 cursor-pointer hover:text-[#551FFF] hover:bg-[#F3F0FF] ${
currentPath == item.links
? 'bg-[#F3F0FF] text-[#551FFF]'
: 'text-[#D0D2DA]'
: 'text-[#9e9fa1]'
}`}
title={isOpen ? item.name : ''}
>
<span
className={`flex items-center
${isOpen ? ' justify-center' : 'justify-start w-20 gap-2'}
className={`flex items-center
${isOpen ? '' : ' w-20 gap-2'}
`}
>
<div>{item.icon}</div>
<div>
{!isOpen && (
<h1 className={`leading-none w-full text-sm capitalize `}>
{item.name}
</h1>
)}
</div>
{!isOpen && (
<h1 className={`leading-none w-full text-sm capitalize `}>
{item.name}
</h1>
)}
</span>
</Link>
))}
<button
className={`flex items-center justify-center ${
isOpen ? 'rounded-full' : 'rounded-3xl'
} p-3 gap-2 cursor-pointer hover:text-[#551FFF] text-[#D0D2DA] hover:bg-[#F3F0FF] `}
className={`flex w-full items-center ${
isOpen ? 'justify-center rounded-full' : ' justify-start rounded-lg'
} p-3 cursor-pointer hover:text-[#551FFF] text-[#9e9fa1] hover:bg-[#F3F0FF] `}
title={isOpen ? 'LogOut' : ''}
onClick={() => handleLogout()}
>
<span
className={`flex items-center
className={`flex items-center
${isOpen ? ' justify-center' : 'justify-start w-20 gap-2 '}
`}
>
Expand All @@ -157,7 +159,9 @@ const SideBar = () => {
</span>
</button>
</div>
<ToggleTheme />
<div className="w-full flex items-center justify-center">
<ToggleTheme />
</div>

<div
className={`"line-clamp-1 flex items-center justify-start gap-2 text-lg py-1 ${
Expand All @@ -166,18 +170,16 @@ const SideBar = () => {
>
<div className="relative w-6 h-6 rounded-full overflow-hidden">
<Image
src={
userDetails.avatar == '' ? '/corporate.jpg' : userDetails.avatar
}
src={userDetails.avatar ?? '/corporate.jpg'}
layout="fill"
alt="user"
/>
</div>
<div className={`${isOpen && 'md:hidden'}`}>
<h1 className="text-sm font-semibold line-clamp-1 capitalize">
{userDetails.fullName}
{userDetails.fullName ?? 'John Doe'}
</h1>
<p className="text-xs">{userDetails.email}</p>
<p className="text-xs">{userDetails.email ?? '[email protected]'}</p>
</div>
</div>
</div>
Expand Down
101 changes: 33 additions & 68 deletions components/page/Authentication/Login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
import useUserState from '@/store/user';
import { FaGithub } from 'react-icons/fa';
import { createClient } from '@/utils/supabase/client';
import { useFormStatus } from 'react-dom';

const SignIn = () => {
const [formData, setFormData] = useState({
Expand All @@ -36,43 +37,6 @@ const SignIn = () => {
}));
};

// const handleSignInWithGithub = async () => {
// const supabase = createClient();

// const { data, error } = await supabase.auth.signInWithOAuth({
// provider: 'github',
// options: {
// redirectTo: `${location.origin}/dashboard`,
// queryParams: {
// access_type: 'offline',
// prompt: 'consent',
// },
// },
// });
// // if (data.url) {
// // redirect('/dashboard');
// // router.push('/dashboard');
// // }
// };

// const handleSignInWithGoogle = async () => {
// const supabase = createClient();
// const { data, error } = await supabase.auth.signInWithOAuth({
// provider: 'google',
// options: {
// redirectTo: `${location.origin}/dashboard`,
// queryParams: {
// access_type: 'offline',
// prompt: 'consent',
// },
// },
// });
// // if (data.url) {
// // // redirect('/dashboard');
// // router.push('/dashboard');
// // }
// };

return (
<div className="w-full h-screen py-8 flex items-center justify-center bg-[#EAEAEA]">
<div className="w-fit md:w-[30vw] min-h-[40vh] flex flex-col bg-white rounded-lg px-2 py-4 ">
Expand All @@ -83,37 +47,38 @@ const SignIn = () => {
<header className="w-full flex justify-center pb-4">
<h1 className="font-semibold text-xl">Login into your account</h1>
</header>
<form className="flex-1 px-4">
<div className="flex flex-col gap-4 py-2">
<UserInput
label="Email"
placeholder="Your Email"
value={email}
name="email"
inputChange={onInputChange}
className="rounded-lg w-full"
/>
<UserInput
label="Password"
placeholder="Your Password"
value={password}
name="password"
inputChange={onInputChange}
type="password"
className=" rounded-lg w-full"
/>
</div>
<Link href="#" className=" font-medium">
forget password?
</Link>
<div className="my-2">
<div
className="flex items-center justify-center w-full py-2"
onClick={() => login(formData)}
>
<Button>Login</Button>
<div className="flex-1 px-4">
<form action={() => login(formData)}>
<div className="flex flex-col gap-4 py-2">
<UserInput
label="Email"
placeholder="Your Email"
value={email}
name="email"
inputChange={onInputChange}
className="rounded-lg w-full"
/>
<UserInput
label="Password"
placeholder="Your Password"
value={password}
name="password"
inputChange={onInputChange}
type="password"
className=" rounded-lg w-full"
/>
</div>
<div className="text-center flex justify-center items-center my-1">
<div className="my-2">
<Link href="#" className=" font-medium">
forget password?
</Link>
<div className="flex items-center justify-center w-full py-2">
<Button type="submit">Login</Button>
</div>
</div>
</form>
<div className="my-2">
<div className="text-center flex justify-center items-center my-2">
<div className="w-full bg-black h-[1px] mx-1" />
<p className="font-semibold"> OR</p>
<div className="w-full bg-black h-[1px] mx-1" />
Expand Down Expand Up @@ -146,7 +111,7 @@ const SignIn = () => {
</Link>
</div>
</div>
</form>
</div>
</div>
</div>
);
Expand Down
Loading

0 comments on commit ea43726

Please sign in to comment.