Skip to content

Commit 474dc5e

Browse files
deepraj21deepraj21
committed
Refactor login and signup pages
1 parent 19e977f commit 474dc5e

File tree

4 files changed

+73
-81
lines changed

4 files changed

+73
-81
lines changed

‎client/src/components/Auth/user-auth-form-login.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function UserAuthForm({ className, onLoginSuccess, ...props }: UserAuthFo
3535
}
3636
navigate('/home');
3737
}
38-
} catch (err: any) {
38+
} catch (err:any) {
3939
if (err.response && err.response.data && err.response.data.message) {
4040
toast.error(err.response.data.message, {
4141
description: "Please check your details and try again.",

‎client/src/pages/Landing.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,15 @@ import React from 'react';
22
import { HoverBorderGradient } from "@/components/ui/hover-border-gradient";
33
import { Features } from '@/components/Features/Features';
44
import Footer from '@/components/Footer/Footer';
5-
import { Navbar } from '@/components/Navbar/Navbar';
5+
import { Navbar } from "@/components/Navbar/navbar";
66
import { Hero } from '@/components/Hero/Hero';
77

88
const Landing: React.FC = () => {
99
return (
1010
<>
1111
<div className="rounded-md md:items-center md:justify-center antialiased bg-grid-white/[0.02] relative overflow-hidden w-full dark:bg-zinc-900 bg-white dark:bg-dot-white/[0.2] bg-dot-black/[0.2] items-center justify-center bg-fixed">
1212
<div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_bottom,transparent_20%,black)]"></div>
13-
1413
<Navbar />
15-
1614
<div id="top" className="mt-[2rem] p-4 max-w-7xl mx-auto relative z-20 w-full pt-20 md:pt-0 flex flex-col items-center">
1715
<button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6 text-white inline-block mb-8">
1816
<span className="absolute inset-0 overflow-hidden rounded-full">

‎client/src/pages/Login.tsx‎

Lines changed: 57 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -10,80 +10,68 @@ interface LoginProps {
1010

1111
const Login: React.FC<LoginProps> = ({ onLoginSuccess }) => {
1212
return (
13-
<>
14-
<div className="md:hidden">
15-
<img
16-
src="/examples/authentication-light.png"
17-
width={1280}
18-
height={843}
19-
alt="Authentication"
20-
className="block dark:hidden"
21-
/>
22-
<img
23-
src="/examples/authentication-dark.png"
24-
width={1280}
25-
height={843}
26-
alt="Authentication"
27-
className="hidden dark:block"
28-
/>
29-
</div>
30-
<div className="container relative hidden h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
31-
<Link
32-
to="/signup"
33-
className={cn(
34-
buttonVariants({ variant: "ghost" }),
35-
"absolute right-4 top-4 md:right-8 md:top-8"
36-
)}
37-
>
38-
Signup
39-
</Link>
40-
<div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1590212151175-e58edd96185b?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')", backgroundSize: 'cover' }}>
41-
<div className="relative z-20 flex items-center text-lg font-medium">
42-
<Link to="/" className="text-white">
43-
<span style={{fontSize:'4rem'}}>dh</span>
44-
</Link>
45-
</div>
46-
<div className="relative z-20 mt-auto">
47-
<blockquote className="space-y-2">
48-
<p className="text-lg">
49-
Contributing to community feels like we are useful to others.
50-
</p>
51-
<footer className="text-sm">DevHub</footer>
52-
</blockquote>
53-
</div>
13+
<div className="container relative h-screen flex flex-col items-center justify-center lg:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
14+
<Link
15+
to="/signup"
16+
className={cn(
17+
buttonVariants({ variant: "ghost" }),
18+
"absolute right-4 top-4 md:right-8 md:top-8"
19+
)}
20+
>
21+
Signup
22+
</Link>
23+
<div className="relative hidden lg:flex h-full flex-col bg-muted p-10 text-white"
24+
style={{
25+
backgroundImage: "url('https://images.unsplash.com/photo-1590212151175-e58edd96185b?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')",
26+
backgroundSize: 'cover'
27+
}}>
28+
<div className="relative z-20 flex items-center text-lg font-medium">
29+
<Link to="/" className="text-white">
30+
<span style={{ fontSize: '4rem' }}>dh</span>
31+
</Link>
32+
</div>
33+
<div className="relative z-20 mt-auto">
34+
<blockquote className="space-y-2">
35+
<p className="text-lg">
36+
Contributing to community feels like we are useful to others.
37+
</p>
38+
<footer className="text-sm">DevHub</footer>
39+
</blockquote>
5440
</div>
55-
<div className="lg:p-8">
56-
<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
57-
<div className="flex flex-col space-y-2 text-center">
58-
<h1 className="text-2xl font-semibold tracking-tight">
59-
Login to DevHub
60-
</h1>
61-
<p className="text-sm text-muted-foreground">
62-
Enter your details below to Login to your account
63-
</p>
64-
</div>
65-
<UserAuthForm onLoginSuccess={(username: string) => onLoginSuccess(username)} />
66-
<p className="px-8 text-center text-sm text-muted-foreground">
67-
By clicking continue, you agree to our{" "}
68-
<Link
69-
to="/terms"
70-
className="underline underline-offset-4 hover:text-primary"
71-
>
72-
Terms of Service
73-
</Link>{" "}
74-
and{" "}
75-
<Link
76-
to="/privacy"
77-
className="underline underline-offset-4 hover:text-primary"
78-
>
79-
Privacy Policy
80-
</Link>
81-
.
41+
</div>
42+
43+
<div className="flex items-center justify-center w-full lg:p-8">
44+
<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
45+
<div className="flex flex-col space-y-2 text-center">
46+
<h1 className="text-2xl font-semibold tracking-tight">
47+
Login to DevHub
48+
</h1>
49+
<p className="text-sm text-muted-foreground">
50+
Enter your details below to Login to your account
8251
</p>
8352
</div>
53+
<UserAuthForm onLoginSuccess={(username: string) => onLoginSuccess(username)} />
54+
<p className="px-8 text-center text-sm text-muted-foreground">
55+
By clicking continue, you agree to our{" "}
56+
<Link
57+
to="/terms"
58+
className="underline underline-offset-4 hover:text-primary"
59+
>
60+
Terms of Service
61+
</Link>{" "}
62+
and{" "}
63+
<Link
64+
to="/privacy"
65+
className="underline underline-offset-4 hover:text-primary"
66+
>
67+
Privacy Policy
68+
</Link>
69+
.
70+
</p>
8471
</div>
8572
</div>
86-
</>
73+
</div>
74+
8775
);
8876
};
8977

‎client/src/pages/Signup.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Link } from 'react-router-dom';
2-
import { cn } from "@/lib/utils"
3-
import { buttonVariants } from "@/components/ui/button"
4-
import { UserAuthForm } from "@/components/Auth/user-auth-form-signup"
2+
import { cn } from "@/lib/utils";
3+
import { buttonVariants } from "@/components/ui/button";
4+
import { UserAuthForm } from "@/components/Auth/user-auth-form-signup";
55

66
export default function AuthenticationPage() {
77
return (
88
<>
9-
<div className="container relative hidden h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
9+
<div className="container relative h-screen flex flex-col items-center justify-center lg:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
1010
<Link
1111
to="/login"
1212
className={cn(
@@ -16,7 +16,13 @@ export default function AuthenticationPage() {
1616
>
1717
Login
1818
</Link>
19-
<div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1590212151175-e58edd96185b?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')", backgroundSize: 'cover' }}>
19+
<div
20+
className="relative hidden lg:flex h-full flex-col bg-muted p-10 text-white"
21+
style={{
22+
backgroundImage: "url('https://images.unsplash.com/photo-1590212151175-e58edd96185b?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')",
23+
backgroundSize: 'cover',
24+
}}
25+
>
2026
<div className="relative z-20 flex items-center text-lg font-medium">
2127
<Link to="/" className="text-white">
2228
<span style={{ fontSize: '4rem' }}>dh</span>
@@ -31,7 +37,7 @@ export default function AuthenticationPage() {
3137
</blockquote>
3238
</div>
3339
</div>
34-
<div className="lg:p-8">
40+
<div className="flex items-center justify-center w-full lg:p-8">
3541
<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
3642
<div className="flex flex-col space-y-2 text-center">
3743
<h1 className="text-2xl font-semibold tracking-tight">
@@ -63,5 +69,5 @@ export default function AuthenticationPage() {
6369
</div>
6470
</div>
6571
</>
66-
)
67-
}
72+
);
73+
}

0 commit comments

Comments
 (0)