Skip to content

Commit 59339fb

Browse files
laurenpudzlaurenpudz
authored
Merge pull request #37 from codersforcauses/issue-6-Create_log_in_form
Issue 6 create log in form
2 parents bcf7b8d + ea18790 commit 59339fb

File tree

9 files changed

+265
-17
lines changed

9 files changed

+265
-17
lines changed

‎client/src/components/ui/Forms/login.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import Link from "next/link";
2+
3+
import { Button } from "../button";
4+
import { GoogleIcon } from "../google-icon";
5+
import { Separator } from "../separator";
6+
7+
const LoginForm = () => {
8+
return (
9+
<div className="flex min-h-screen flex-col items-center justify-center">
10+
<div className="mx-4 flex max-w-xs flex-col items-center justify-center py-16 sm:mx-0 sm:max-w-3xl sm:rounded-2xl sm:border sm:border-border sm:px-20">
11+
<div className="flex w-full flex-col gap-6 pb-10 text-center sm:pb-16">
12+
<h1 className="text-3xl font-bold text-primary">Login</h1>
13+
<p className="text-subtle">
14+
Welcome back! Please enter your account details.
15+
</p>
16+
</div>
17+
18+
<div className="flex w-full flex-col justify-center gap-6 pb-6 text-center sm:gap-9 sm:pb-9">
19+
<Button className="h-12" variant="oauth">
20+
<GoogleIcon />
21+
Continue with Google
22+
</Button>
23+
<Separator />
24+
</div>
25+
26+
<form className="flex w-full flex-col">
27+
<div className="flex flex-col gap-2.5 pb-5">
28+
<label htmlFor="email" className="font-medium text-primary">
29+
Email
30+
</label>
31+
<input
32+
id="email"
33+
type="email"
34+
name="email"
35+
placeholder="Enter Email"
36+
className="bg-input h-12 rounded-md border border-border px-4 py-3 text-base placeholder-border"
37+
required
38+
/>
39+
</div>
40+
41+
<div className="flex flex-1 flex-col gap-2.5 pb-5">
42+
<label htmlFor="password" className="font-medium text-primary">
43+
Password
44+
</label>
45+
<input
46+
id="password"
47+
type="password"
48+
name="password"
49+
placeholder="Enter Password"
50+
className="bg-input h-12 rounded-md border border-border px-4 py-3 placeholder-border"
51+
required
52+
/>
53+
</div>
54+
55+
<div className="pb-10 text-right sm:pb-11">
56+
<a
57+
href="/forgot-password"
58+
className="text-foreground text-sm underline"
59+
>
60+
Forgot Password?
61+
</a>
62+
</div>
63+
64+
<Button
65+
className="h-12 w-full text-lg"
66+
variant="gradient"
67+
type="submit"
68+
>
69+
Login
70+
</Button>
71+
</form>
72+
<p className="pt-5 text-sm">
73+
Don't have an account yet?{" "}
74+
<Link className="text-primary underline" href="/signup">
75+
Sign Up Now
76+
</Link>
77+
</p>
78+
</div>
79+
</div>
80+
);
81+
};
82+
83+
export default LoginForm;

‎client/src/components/ui/Forms/signup.tsx

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import Link from "next/link";
2+
3+
import { Button } from "../button";
4+
import { GoogleIcon } from "../google-icon";
5+
import { Separator } from "../separator";
6+
7+
const SignUpForm = () => {
8+
return (
9+
<div className="flex min-h-screen flex-col items-center justify-center">
10+
<div className="mx-4 flex max-w-xs flex-col items-center justify-center py-16 sm:mx-0 sm:max-w-3xl sm:rounded-2xl sm:border sm:border-border sm:px-20">
11+
<div className="flex w-full flex-col gap-6 pb-10 text-center sm:pb-16">
12+
<h1 className="text-3xl font-bold text-primary">Sign Up</h1>
13+
<p className="text-subtle">
14+
Please enter your details to get started.
15+
</p>
16+
</div>
17+
18+
<div className="flex w-full flex-col justify-center gap-6 pb-6 text-center sm:gap-9 sm:pb-9">
19+
<Button className="h-12" variant="oauth">
20+
<GoogleIcon />
21+
Continue with Google
22+
</Button>
23+
<Separator />
24+
<p className="text-subtle">Sign up with your email address</p>
25+
</div>
26+
27+
<form className="flex w-full flex-col">
28+
<div className="flex flex-col gap-2.5 pb-4 sm:pb-8">
29+
<label htmlFor="email" className="font-medium text-primary">
30+
Email
31+
</label>
32+
<input
33+
id="email"
34+
type="email"
35+
name="email"
36+
placeholder="Enter Email"
37+
className="bg-input h-12 rounded-md border border-border px-4 py-3 text-base placeholder-border"
38+
required
39+
/>
40+
</div>
41+
42+
<div className="flex flex-col gap-4 pb-10 md:flex-row md:gap-x-8 md:pb-12">
43+
<div className="flex flex-1 flex-col gap-2.5">
44+
<label htmlFor="password" className="font-medium text-primary">
45+
Password
46+
</label>
47+
<input
48+
id="password"
49+
type="password"
50+
name="password"
51+
placeholder="Enter Password"
52+
className="bg-input h-12 rounded-md border border-border px-4 py-3 placeholder-border"
53+
required
54+
/>
55+
</div>
56+
<div className="flex flex-1 flex-col gap-2.5">
57+
<label
58+
htmlFor="confirmPassword"
59+
className="font-medium text-primary"
60+
>
61+
Confirm Password
62+
</label>
63+
<input
64+
id="confirmPassword"
65+
type="password"
66+
name="confirmPassword"
67+
placeholder="Confirm Password"
68+
className="bg-input h-12 rounded-md border border-border px-4 py-3 placeholder-border"
69+
required
70+
/>
71+
</div>
72+
</div>
73+
74+
<Button
75+
className="h-12 w-full text-lg"
76+
variant="gradient"
77+
type="submit"
78+
>
79+
Sign Up
80+
</Button>
81+
</form>
82+
<p className="pt-5 text-sm">
83+
Already have an account?{" "}
84+
<Link className="text-primary underline" href="/login">
85+
Login
86+
</Link>
87+
</p>
88+
</div>
89+
</div>
90+
);
91+
};
92+
93+
export default SignUpForm;

‎client/src/components/ui/button.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,17 @@ const buttonVariants = cva(
99
{
1010
variants: {
1111
variant: {
12-
default: "bg-primary text-primary-foreground hover:bg-primary/90",
13-
destructive:
14-
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
12+
default: "bg-primary text-white hover:bg-primary/90",
13+
gradient:
14+
"bg-gradient-to-r from-primary to-accent text-white hover:bg-secondary",
15+
destructive: "bg-red-500 text-white hover:bg-red-500/90",
1516
outline:
16-
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17-
secondary:
18-
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
19-
ghost: "hover:bg-accent hover:text-accent-foreground",
17+
"border border-primary text-primary bg-background hover:bg-primary hover:text-white",
18+
secondary: "bg-secondary text-primary hover:bg-secondary/80",
19+
ghost: "text-text hover:bg-secondary hover:text-primary",
2020
link: "text-primary underline-offset-4 hover:underline",
21+
oauth:
22+
"bg-background text-subtle text-base font-normal border border-border w-full rounded-full h-12 px-4 gap-3",
2123
},
2224
size: {
2325
default: "h-10 px-4 py-2",

‎client/src/components/ui/google-icon.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import * as React from "react";
2+
import { SVGProps } from "react";
3+
4+
export const GoogleIcon = (props: SVGProps<SVGSVGElement>) => (
5+
<svg
6+
width="24"
7+
height="24"
8+
xmlns="http://www.w3.org/2000/svg"
9+
style={{
10+
display: "block",
11+
}}
12+
viewBox="0 0 48 48"
13+
{...props}
14+
>
15+
<path
16+
fill="#EA4335"
17+
d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
18+
/>
19+
<path
20+
fill="#4285F4"
21+
d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
22+
/>
23+
<path
24+
fill="#FBBC05"
25+
d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
26+
/>
27+
<path
28+
fill="#34A853"
29+
d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
30+
/>
31+
<path fill="none" d="M0 0h48v48H0z" />
32+
</svg>
33+
);

‎client/src/components/ui/separator.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const Separator = () => {
2+
return (
3+
<div className="flex items-center gap-6 sm:mx-3">
4+
<div className="flex-1 border border-border"></div>
5+
<div className="text-subtle">OR</div>
6+
<div className="flex-1 border border-border"></div>
7+
</div>
8+
);
9+
};
10+
11+
export { Separator };

‎client/src/pages/login.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import LoginForm from "@/components/ui/Forms/login";
2+
3+
export default function LoginPage() {
4+
return (
5+
<div>
6+
<LoginForm />
7+
</div>
8+
);
9+
}

‎client/src/pages/signup.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import SignUpForm from "@/components/ui/Forms/signup";
2+
3+
export default function SignupPage() {
4+
return (
5+
<div>
6+
<SignUpForm />
7+
</div>
8+
);
9+
}

‎client/src/styles/globals.css

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
1+
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
2+
13
@tailwind base;
24
@tailwind components;
35
@tailwind utilities;
46

57
@layer base {
68
:root {
7-
--text: #333333;
9+
--text: #515154;
10+
--subtle: #78777e;
11+
--border: #aea9b1;
812
--background: #ffffff;
13+
--footer: #f4f4f4;
914
--primary: #ab0169;
1015
--secondary: #ffeed1;
1116
--accent: #f67423;
12-
--footer: #f4f4f4;
13-
14-
--font-sans: Helvetica, sans-serif;
17+
--font-sans: "DM Sans", Helvetica, sans-serif;
18+
--radius: 0.5rem;
1519
}
1620
.dark {
1721
--text: #cccccc;
18-
--background: #000000;
19-
--primary: #fe52bc;
20-
--secondary: #2e1d00;
21-
--accent: #dc5a09;
22-
--footer: #0a0a0a;
22+
--subtle: #b3b3b3;
23+
--border: #404045;
24+
--background: #1c1c1f;
25+
--footer: #232326;
26+
--primary: #ef5da0;
27+
--secondary: #4e3a23;
28+
--accent: #ff8c47;
2329
}
2430
}
2531

2632
@layer base {
2733
body {
28-
@apply bg-background text-text;
34+
@apply bg-background font-sans text-text;
2935
}
3036
}

‎client/tailwind.config.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ const config = {
2525
},
2626
colors: {
2727
text: "var(--text)",
28+
subtle: "var(--subtle)",
29+
border: "var(--border)",
2830
background: "var(--background)",
2931
primary: "var(--primary)",
3032
secondary: "var(--secondary)",

0 commit comments

Comments
 (0)