Skip to content

Commit bc6921e

Browse files
Connor-SkudlarekConnor-Skudlarek
authored
Revert "27 login page is very verbose"
1 parent e8a5bd7 commit bc6921e

File tree

5 files changed

+215
-125
lines changed

5 files changed

+215
-125
lines changed

‎app/login/page.jsx

-11
This file was deleted.

‎app/login/page.tsx

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
"use client";
2+
3+
import { useRouter, useSearchParams } from "next/navigation";
4+
import React, { useState } from "react";
5+
import { SECRET_ROUTE } from "lib/routes";
6+
import { signIn, useUser } from "lib/auth";
7+
8+
export default function LoginPage() {
9+
const router = useRouter();
10+
const searchParams = useSearchParams();
11+
const user = useUser();
12+
13+
const continueTo = searchParams?.get("continueTo") ?? SECRET_ROUTE;
14+
15+
async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
16+
event.preventDefault();
17+
const form = event.currentTarget;
18+
const email = form.email.value;
19+
const password = form.password.value;
20+
const rememberMe = form.rememberMe.checked;
21+
22+
try {
23+
await signIn(email, password, rememberMe);
24+
router.replace(continueTo);
25+
} catch (error) {
26+
window.alert(error);
27+
}
28+
}
29+
30+
if (user) {
31+
router.replace(continueTo);
32+
return null;
33+
}
34+
35+
return (
36+
<main className="flex">
37+
<section className="flex flex-col py-12 px-16">
38+
<div className="text-xl tracking-wide mb-10">Sign In</div>
39+
40+
<div className="mt-5 mx-5">
41+
<form onSubmit={handleSubmit}>
42+
<div className="relative mt-6">
43+
<input
44+
type="email"
45+
name="email"
46+
id="email"
47+
placeholder="Email Address"
48+
className="peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none"
49+
autoComplete="email"
50+
/>
51+
<label
52+
htmlFor="email"
53+
className="pointer-events-none absolute top-0 left-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800"
54+
>
55+
Email Address
56+
</label>
57+
</div>
58+
<div className="relative mt-6">
59+
<input
60+
type="password"
61+
name="password"
62+
id="password"
63+
required
64+
autoComplete="current-password"
65+
placeholder="Password"
66+
className="peer peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none"
67+
/>
68+
<label
69+
htmlFor="password"
70+
className="pointer-events-none absolute top-0 left-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800"
71+
>
72+
Password
73+
</label>
74+
</div>
75+
<div className="text-sm my-12 font-semibold text-gray-700 hover:text-black underline">
76+
<a href="/#">Forgot password?</a>
77+
</div>
78+
<div className="flex items-center justify-between">
79+
<label
80+
htmlFor="remember_me"
81+
className="block text-sm text-gray-900"
82+
>
83+
Remember me
84+
</label>
85+
<input
86+
id="rememberMe"
87+
name="rememberMe"
88+
type="checkbox"
89+
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
90+
/>
91+
</div>
92+
<div className="my-12 flex justify-center">
93+
<button
94+
type="submit"
95+
className="w-11/12 bg-blue-800 rounded-full p-1.5 text-white hover:bg-blue-900"
96+
>
97+
Sign in
98+
</button>
99+
</div>
100+
<div className="flex text-center text-sm text-gray-500">
101+
<p>Don't have an account yet?</p>
102+
<a
103+
href="/signup"
104+
className="ml-1 font-semibold text-gray-600 hover:underline focus:text-gray-800 focus:outline-none"
105+
>
106+
Create Account
107+
</a>
108+
.
109+
</div>
110+
</form>
111+
</div>
112+
</section>
113+
</main>
114+
);
115+
}

‎components/LoginPage/LoginForm.jsx

-69
This file was deleted.

‎components/LoginPage/LoginPage.jsx

-45
This file was deleted.

‎components/LoginPage/ManualLogin.jsx

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
"use client";
2+
3+
import { useRef } from "react";
4+
5+
export default function ManualLogin() {
6+
const emailRef = useRef(null);
7+
const passwordRef = useRef(null);
8+
9+
const handleSubmit = (event) => {
10+
event.preventDefault();
11+
const email = emailRef.current.value;
12+
const password = passwordRef.current.value;
13+
const payload = JSON.stringify({
14+
email,
15+
password,
16+
});
17+
18+
// handle login endpoint request here
19+
20+
emailRef.current.value = "";
21+
passwordRef.current.value = "";
22+
};
23+
24+
return (
25+
<main className="flex">
26+
<section className="flex flex-col py-12 px-16">
27+
<div className="text-xl tracking-wide mb-10">Sign In</div>
28+
<div className="mt-5 mx-5">
29+
<form onSubmit={handleSubmit}>
30+
<div className="relative mt-6">
31+
<input
32+
type="email"
33+
name="email"
34+
id="email"
35+
placeholder="Email Address"
36+
ref={emailRef}
37+
className="peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none"
38+
autoComplete="NA"
39+
/>
40+
<label
41+
htmlFor="email"
42+
className="pointer-events-none absolute top-0 left-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800"
43+
>
44+
Email Address
45+
</label>
46+
</div>
47+
<div className="relative mt-6">
48+
<input
49+
type="password"
50+
name="password"
51+
id="password"
52+
ref={passwordRef}
53+
placeholder="Password"
54+
className="peer peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none"
55+
/>
56+
<label
57+
htmlFor="password"
58+
className="pointer-events-none absolute top-0 left-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800"
59+
>
60+
Password
61+
</label>
62+
</div>
63+
<div className="text-sm my-12 font-semibold text-gray-700 hover:text-black underline">
64+
<a href="/#">Forgot password?</a>
65+
</div>
66+
<div className="flex items-center justify-between">
67+
<label htmlFor="remember_me" className="block text-sm text-gray-900">
68+
Remember me
69+
</label>
70+
<input
71+
id="remember_me"
72+
name="remember_me"
73+
type="checkbox"
74+
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
75+
/>
76+
</div>
77+
<div className="my-12 flex justify-center">
78+
<button
79+
type="submit"
80+
className="w-11/12 bg-blue-800 rounded-full p-1.5 text-white hover:bg-blue-900"
81+
>
82+
Sign in
83+
</button>
84+
</div>
85+
<div className="flex text-center text-sm text-gray-500">
86+
<p>Don't have an account yet?</p>
87+
<a
88+
href="/#"
89+
className="ml-1 font-semibold text-gray-600 hover:underline focus:text-gray-800 focus:outline-none"
90+
>
91+
Create Account
92+
</a>
93+
.
94+
</div>
95+
</form>
96+
</div>
97+
</section>
98+
</main>
99+
);
100+
}

0 commit comments

Comments
 (0)