Skip to content

Commit

Permalink
fix: improved login/signup page
Browse files Browse the repository at this point in the history
  • Loading branch information
@rflihxyz
rflihxyz committed Dec 23, 2024
1 parent 8fbb048 commit 4a8efcf
Show file tree
Hide file tree
Showing 4 changed files with 189 additions and 126 deletions.
127 changes: 55 additions & 72 deletions apps/webapp/src/app/b2c/login/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
'use client';

import CreateUserForm from "@/components/Auth/CustomLoginComponent/CreateUserForm";
import LoginUserForm from "@/components/Auth/CustomLoginComponent/LoginUserForm";
import {
Expand Down Expand Up @@ -26,10 +27,24 @@ export default function Page() {

useEffect(() => {
setMounted(true);
// Get the hash from URL and set the active tab accordingly
const hash = window.location.hash.replace('#', '');
if (hash === 'signup') {
setActiveTab('create');
} else if (hash === 'login') {
setActiveTab('login');
}
}, []);

const currentTheme = theme === 'system' ? systemTheme : theme;

// Handle tab changes and update URL
const handleTabChange = (value: string) => {
setActiveTab(value);
const hash = value === 'create' ? 'signup' : 'login';
window.history.replaceState(null, '', `#${hash}`);
};

useEffect(() => {
if(profile)
{
Expand All @@ -52,88 +67,56 @@ export default function Page() {
})
}

// if(profile)
// {
// router.replace('/connections');
// }

},[])

if (!mounted) {
return (
<div className='min-h-screen flex justify-center items-center'>
<div className='w-[450px] min-h-[500px] p-8 rounded-lg border bg-card'>
<div className="flex justify-center mb-8">
<img
src="/logo-panora-black.png"
className='w-32'
alt="Panora"
/>
</div>
<div className="text-center space-y-2 mb-8">
<h1 className="text-2xl font-semibold tracking-tight">Welcome</h1>
<p className="text-sm text-muted-foreground">Sign in to your account or create one</p>
</div>
<Tabs defaultValue="login" className="space-y-6">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="login">Login</TabsTrigger>
<TabsTrigger value="create">Create Account</TabsTrigger>
</TabsList>
<TabsContent value="login">
<LoginUserForm/>
</TabsContent>
<TabsContent value="create">
<CreateUserForm/>
</TabsContent>
</Tabs>

{activeTab === 'forgot-password' && (
<Button variant="link" onClick={() => setActiveTab('login')}>
Back to Login
</Button>
)}
</div>
</div>
);
return null;
}

return (
<>

{!userInitialized ?
(
<div className='min-h-screen flex justify-center items-center'>
<div className='w-[450px] min-h-[500px] p-8 rounded-lg border bg-card'>
<div className="flex justify-center mb-8">
<img
src={currentTheme === "dark" ? "/logo-panora-white-hq.png" : "/logo-panora-black.png"}
className='w-32'
alt="Panora"
/>
</div>
<div className="text-center space-y-2 mb-8">
<h1 className="text-2xl font-semibold tracking-tight">Welcome</h1>
<p className="text-sm text-muted-foreground">Sign in to your account or create one</p>
<div className='min-h-screen flex items-center'>
<div className='w-full max-w-[1200px] px-4 mx-auto'>
<div className='flex items-start justify-between gap-8'>
<div className='w-[450px] h-[600px]'>
<Tabs value={activeTab} onValueChange={handleTabChange} className="h-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="login">Login</TabsTrigger>
<TabsTrigger value="create">Create Account</TabsTrigger>
</TabsList>
<div className="mt-6">
<TabsContent value="login" className="mt-0 h-[calc(100%-48px)]">
<LoginUserForm/>
</TabsContent>
<TabsContent value="create" className="mt-0 h-[calc(100%-48px)]">
<CreateUserForm/>
</TabsContent>
</div>
</Tabs>
</div>

<div className='w-[450px] space-y-8'>
<div>
<img
src={currentTheme === "dark" ? "/logo-panora-white-hq.png" : "/logo-panora-black.png"}
className='w-48'
alt="Panora"
/>
</div>
<div className="space-y-4">
<p className="text-muted-foreground">
Connect your warehouse to any e-commerce platform and let AI automate data entry into your WMS & ERPs. Add revenue, not complexity to your operations.
</p>
<p className="text-muted-foreground">
Use one unified API to manage orders across Shopify, Amazon, and more. Let AI handle your inventory updates while you focus on growth.
</p>
<p className="text-muted-foreground">You'll wonder how you ever managed without it.</p>
</div>
</div>
</div>
<Tabs defaultValue="login" className="space-y-6">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="login">Login</TabsTrigger>
<TabsTrigger value="create">Create Account</TabsTrigger>
</TabsList>
<TabsContent value="login">
<LoginUserForm/>
</TabsContent>
<TabsContent value="create">
<CreateUserForm/>
</TabsContent>
</Tabs>

{activeTab === 'forgot-password' && (
<Button variant="link" onClick={() => setActiveTab('login')}>
Back to Login
</Button>
)}
</div>
</div>
</div>
) :
(
Expand Down
1 change: 0 additions & 1 deletion apps/webapp/src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export const metadata: Metadata = {
icon: [
{
url: '/logo.png',
href: '/logo.png',
type: 'image/png',
}
]
Expand Down
Loading

0 comments on commit 4a8efcf

Please sign in to comment.