Skip to content

Commit 7e5d294

Browse files
Amanuel-AberaAmanuel-Abera
committed
Login and Registeration Form is created
1 parent b0c3998 commit 7e5d294

File tree

17 files changed

+418
-22
lines changed

17 files changed

+418
-22
lines changed

‎app/(auth)/login/page.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
'use client'
2+
3+
import Image from "next/image"
4+
import Link from "next/link";
5+
import { useState } from "react";
6+
import { FaEye } from "react-icons/fa";
7+
import { IoCheckbox } from "react-icons/io5";
8+
import { MdCheckBoxOutlineBlank } from "react-icons/md";
9+
10+
const Login = () => {
11+
const [isChecked, setIsChecked] = useState<boolean>(false);
12+
const [togglePassword, setTogglePassword] = useState<boolean>(false);
13+
14+
const handleCheckboxToggle = () => {
15+
setIsChecked((prev) => !prev);
16+
};
17+
18+
return (
19+
<div className="grid grid-cols-5 items-center gap-8 mx-5 md:gap-12 max-w-screen" style={{ height: 'calc(100vh - 4rem)' }}>
20+
<form action="" method='POST' className="col-span-4 mt-16 sm:col-span-3 md:col-span-2">
21+
<h1 className="heading text-2xl font-bold">Welcome!</h1>
22+
<p className="para mb-5 mt-2">Log In your account.</p>
23+
<div className="flex flex-col mb-5">
24+
<label className="label" htmlFor="email">Email <span className="asterik">*</span></label>
25+
<input type="email" className="input value w-full mt-2" id="email" placeholder="Your Email" required/>
26+
</div>
27+
<div className="flex flex-col mb-5 relative">
28+
<label className="label" htmlFor="password">Password <span className="asterik">*</span></label>
29+
<input type={togglePassword ?"text" :"password"} className="input value w-full mt-2 pr-8" id="password" placeholder="Password" required/>
30+
<FaEye className="value absolute top-1/2 right-2 translate-x-0 translate-y-1/2 cursor-pointer z-10" onClick={()=>setTogglePassword(!togglePassword)}/>
31+
</div>
32+
<div className="flex justify-between items-center">
33+
<label className="label flex justify-between items-center gap-2 w-full">
34+
<div className="label flex items-center gap-2">
35+
{isChecked ? (
36+
<IoCheckbox
37+
className="primary border-0 text-xl"
38+
onClick={handleCheckboxToggle}
39+
/>
40+
) : (
41+
<MdCheckBoxOutlineBlank
42+
className="primary border-0 text-xl"
43+
onClick={handleCheckboxToggle}
44+
/>
45+
)}
46+
<input type="checkbox" hidden />
47+
Remember me
48+
</div>
49+
<Link href={""} className="label">Forget Password?</Link>
50+
</label>
51+
</div>
52+
<button className="primaryBtn w-full mt-6">Login</button>
53+
<p className="para text-sm mt-4 text-center">Don't have any account? <Link href={'/register'} className="heading font-bold">SignUp</Link></p>
54+
</form>
55+
<div className="relative col-span-1 sm:col-span-2 md:col-span-3 h-full">
56+
<Image src="/images/sideImage1.jpg" fill className="w-full h-full object-cover" alt="Side Image" />
57+
{/* Text Overlay */}
58+
<div className="absolute inset-0 flex flex-col items-center justify-center bg-black/40 text-white px-4">
59+
<h2 className="hidden sm:flex text-xl font-bold sm:text-3xl md:text-4xl">Welcome Back!</h2>
60+
<p className="hidden sm:flex mt-4 text-center text-lg md:text-xl lg:text-2xl max-w-96">
61+
Join our community to share your stories and inspire others!
62+
</p>
63+
</div>
64+
</div>
65+
66+
</div>
67+
68+
)
69+
}
70+
71+
export default Login

‎app/(auth)/register/page.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
'use client'
2+
3+
import Image from "next/image"
4+
import Link from "next/link";
5+
import { useState } from "react";
6+
import { FaEye } from "react-icons/fa";
7+
import { IoCheckbox } from "react-icons/io5";
8+
import { MdCheckBoxOutlineBlank } from "react-icons/md";
9+
10+
const Register = () => {
11+
const [isChecked, setIsChecked] = useState<boolean>(false);
12+
const [togglePassword, setTogglePassword] = useState<boolean>(false);
13+
const [toggleConfirmPassword, setToggleConfirmPasword] = useState<boolean>(false);
14+
15+
16+
const handleCheckboxToggle = () => {
17+
setIsChecked((prev) => !prev);
18+
};
19+
20+
return (
21+
<div className="grid grid-cols-5 gap-8 mx-5 md:gap-12 max-w-screen h-screen">
22+
<form action="" method='POST' className="col-span-4 mt-16 sm:col-span-3 md:col-span-2">
23+
<h1 className="heading text-2xl font-bold">Register!</h1>
24+
<p className="para mb-5 mt-2">Create a new account.</p>
25+
<div className="flex flex-col mb-5">
26+
<label className="label" htmlFor="firstName">First Name <span className="asterik">*</span></label>
27+
<input type="text" className="input value w-full mt-2" id="firstName" placeholder="First Name" required/>
28+
</div>
29+
<div className="flex flex-col mb-5">
30+
<label className="label" htmlFor="lastName">Last Name <span className="asterik">*</span></label>
31+
<input type="text" className="input value w-full mt-2" id="lastName" placeholder="Last Name" required/>
32+
</div>
33+
<div className="flex flex-col mb-5">
34+
<label className="label" htmlFor="email">Email <span className="asterik">*</span></label>
35+
<input type="email" className="input value w-full mt-2" id="email" placeholder="Your Email" required/>
36+
</div>
37+
<div className="flex flex-col mb-5 relative">
38+
<label className="label" htmlFor="password">Password <span className="asterik">*</span></label>
39+
<input type={togglePassword ?"text" :"password"} className="input value w-full mt-2 pr-8" id="password" placeholder="Password" required/>
40+
<FaEye className="value absolute top-1/2 right-2 translate-x-0 translate-y-1/2 cursor-pointer z-10" onClick={()=>setTogglePassword(!togglePassword)}/>
41+
</div>
42+
<div className="flex flex-col mb-5 relative">
43+
<label className="label" htmlFor="confirmPassword">Confirm Password <span className="asterik">*</span></label>
44+
<input type={toggleConfirmPassword ?"text" :"password"} className="input value w-full mt-2 pr-8" id="confirmPassword" placeholder="Confirm Password" required/>
45+
<FaEye className="value absolute top-1/2 right-2 translate-x-0 translate-y-1/2 cursor-pointer z-10" onClick={()=>setToggleConfirmPasword(!toggleConfirmPassword)}/>
46+
</div>
47+
<div>
48+
<label className="label flex items-center gap-2">
49+
{isChecked ? (
50+
<IoCheckbox
51+
className="primary border-0 text-xl"
52+
onClick={handleCheckboxToggle}
53+
/>
54+
) : (
55+
<MdCheckBoxOutlineBlank
56+
className="primary border-0 text-xl"
57+
onClick={handleCheckboxToggle}
58+
/>
59+
)}
60+
<input type="checkbox" hidden />
61+
Remember me
62+
</label>
63+
</div>
64+
<button className="primaryBtn w-full mt-6">Register</button>
65+
<p className="para text-sm mt-4 text-center">Do you have an account? <Link href={'/login'} className="heading font-bold">SignIn</Link></p>
66+
</form>
67+
<div className="relative col-span-1 sm:col-span-2 md:col-span-3 h-full">
68+
<Image src="/images/sideImage1.jpg" fill className="w-full h-full object-cover" alt="Side Image" />
69+
{/* Text Overlay */}
70+
<div className="absolute inset-0 flex flex-col items-center justify-center bg-black/40 text-white px-4">
71+
<h2 className="hidden sm:flex text-xl font-bold sm:text-3xl md:text-4xl">Welcome Back!</h2>
72+
<p className="hidden sm:flex mt-4 text-center text-lg md:text-xl lg:text-2xl max-w-96">
73+
Join our community to share your stories and inspire others!
74+
</p>
75+
</div>
76+
</div>
77+
78+
</div>
79+
)
80+
}
81+
82+
export default Register

‎app/globals.css‎

Lines changed: 135 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,143 @@
33
@tailwind utilities;
44

55
:root {
6-
--background: #ffffff;
7-
--foreground: #171717;
6+
--color-primary: #161618;
7+
--color-background: #ffffff;
8+
--color-primaryButtonText: #ffffff;
9+
--color-secondaryButtonText: #161618;
10+
--color-heading: #161618;
11+
--color-section-bg: #fafafa;
12+
--color-active-status: #54f3ad;
13+
--color-draft-status: #ff4747;
14+
--color-input-label: #646464;
15+
--color-input-value: #5a6082;
16+
--color-input-border: #b5b5b5;
17+
--color-secondary: #f1f1f1;
18+
--color-paragraph: #3e3e3e;
819
}
920

10-
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #0a0a0a;
13-
--foreground: #ededed;
14-
}
21+
22+
/* @media (prefers-color-scheme: dark) {
23+
24+
} */
25+
26+
:root.dark {
27+
--color-primary: #f1f1f1; /* Dark Mode */
28+
--color-background: #161618;
29+
--color-primaryButtonText: #161618;
30+
--color-secondaryButtonText: #ffffff;
31+
--color-heading: #f1f1f1;
32+
--color-section-bg: #2c2c2e;
33+
--color-active-status: #36b889;
34+
--color-draft-status: #e05050;
35+
--color-input-label: #b5b5b5;
36+
--color-input-value: #a6a6d3;
37+
--color-input-border: #646464;
38+
--color-secondary: #3e3e3e;
39+
--color-paragraph: #e1e1e1;
1540
}
1641

17-
body {
18-
color: var(--foreground);
19-
background: var(--background);
20-
font-family: Arial, Helvetica, sans-serif;
42+
body{
43+
background-color: var(--color-background);
2144
}
45+
46+
@layer utilities{
47+
.background{}
48+
.primary{
49+
color: var(--color-primary);
50+
}
51+
52+
.primaryBg{
53+
background-color: var(--color-primary);
54+
}
55+
56+
.heading{
57+
color: var(--color-heading);
58+
}
59+
60+
.active{
61+
color: var(--color-active-status);
62+
}
63+
64+
.activeBorder{
65+
border: 1px solid var(--color-active-status);
66+
}
67+
68+
.draft{
69+
color: var(--color-draft-status);
70+
}
71+
72+
.draftBorder{
73+
border: 1px solid var(--color-draft-status);
74+
}
75+
76+
.label{
77+
color: var(--color-input-label);
78+
}
79+
80+
.value{
81+
color: var(--color-input-value);
82+
}
83+
84+
.myBorder{
85+
border: 1px solid var(--color-input-border);
86+
}
87+
88+
.myBorder-2{
89+
border: 2px solid var(--color-input-border);
90+
}
91+
92+
.inputFocus{
93+
border: 1px solid var(--color-primary);
94+
}
95+
96+
.secondaryBg{
97+
background-color: var(--color-secondary);
98+
}
99+
100+
.para{
101+
color: var(--color-paragraph);
102+
}
103+
104+
.sectionBg{
105+
background-color : var(--color-section-bg);
106+
}
107+
108+
.primaryBtnText{
109+
color: var(--color-primaryButtonText)
110+
}
111+
112+
.secondaryBtnText{
113+
color: var(--color-secondaryButtonText)
114+
}
115+
116+
.asterik{
117+
color: red;
118+
font-weight: bold;
119+
}
120+
}
121+
122+
@layer components {
123+
.primaryBtn {
124+
@apply primaryBg primaryBtnText text-base font-medium rounded-lg py-2 px-3 hover:bg-opacity-80 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-200;
125+
}
126+
.secondaryBtn {
127+
@apply secondaryBg secondaryBtnText text-base font-medium rounded-lg py-2 px-3 hover:bg-opacity-80 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-200;
128+
}
129+
.transparentBtn {
130+
@apply bg-transparent secondaryBtnText myBorder text-base font-medium rounded-lg py-2 px-3 hover:bg-opacity-80 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-200;
131+
}
132+
.input{
133+
@apply myBorder bg-transparent p-2 rounded-md value outline-none focus:inputFocus
134+
}
135+
.tags{
136+
@apply flex gap-1
137+
}
138+
139+
.tag{
140+
@apply myBorder-2 py-1 px-4 rounded-lg font-semibold
141+
}
142+
.tagSelected{
143+
@apply primaryBg primaryBtnText border-0
144+
}
145+
}

‎app/layout.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Metadata } from "next";
22
import localFont from "next/font/local";
33
import "./globals.css";
4+
import Header from "@/components/Header";
45

56
const geistSans = localFont({
67
src: "./fonts/GeistVF.woff",
@@ -28,7 +29,10 @@ export default function RootLayout({
2829
<body
2930
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
3031
>
32+
<Header/>
33+
<main className="mx-auto">
3134
{children}
35+
</main>
3236
</body>
3337
</html>
3438
);

‎app/page.tsx‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,27 @@
1+
import { PrimaryButton } from "@/components/PrimaryButton";
2+
import { SecondaryButton } from "@/components/SecondaryButton";
3+
import Tags from "@/components/Tags";
14

25
const Home = () => {
6+
37
return (
4-
<h1>Home</h1>
5-
)
6-
}
8+
<>
9+
10+
<h1>Home</h1>
11+
<p className="para-color">Me</p>
12+
<PrimaryButton/>
13+
<SecondaryButton/>
14+
<button type="submit" className="transparentBtn">
15+
Cancel
16+
</button>
17+
<br/>
18+
<input type="text" placeholder="Enter your email" className="input"/>
19+
<Tags/>
20+
21+
22+
23+
</>
24+
);
25+
};
726

8-
export default Home
27+
export default Home;

0 commit comments

Comments
 (0)