Remove register link
This commit is contained in:
parent
64143e3bae
commit
00ee3f450a
@ -1,166 +0,0 @@
|
||||
import type { ActionArgs, LoaderArgs, V2_MetaFunction } from "@remix-run/node";
|
||||
import { json, redirect } from "@remix-run/node";
|
||||
import { Form, Link, useActionData, useSearchParams } from "@remix-run/react";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
import { createUser, getUserByEmail } from "~/models/user.server";
|
||||
import { createUserSession, getUserId } from "~/session.server";
|
||||
import { safeRedirect, validateEmail } from "~/utils";
|
||||
|
||||
export const loader = async ({ request }: LoaderArgs) => {
|
||||
const userId = await getUserId(request);
|
||||
if (userId) return redirect("/");
|
||||
return json({});
|
||||
};
|
||||
|
||||
export const action = async ({ request }: ActionArgs) => {
|
||||
const formData = await request.formData();
|
||||
const email = formData.get("email");
|
||||
const password = formData.get("password");
|
||||
const redirectTo = safeRedirect(formData.get("redirectTo"), "/");
|
||||
|
||||
if (!validateEmail(email)) {
|
||||
return json(
|
||||
{ errors: { email: "Email is invalid", password: null } },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
if (typeof password !== "string" || password.length === 0) {
|
||||
return json(
|
||||
{ errors: { email: null, password: "Password is required" } },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
return json(
|
||||
{ errors: { email: null, password: "Password is too short" } },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const existingUser = await getUserByEmail(email);
|
||||
if (existingUser) {
|
||||
return json(
|
||||
{
|
||||
errors: {
|
||||
email: "A user already exists with this email",
|
||||
password: null,
|
||||
},
|
||||
},
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const user = await createUser(email, password);
|
||||
|
||||
return createUserSession({
|
||||
redirectTo,
|
||||
remember: false,
|
||||
request,
|
||||
userId: user.id,
|
||||
});
|
||||
};
|
||||
|
||||
export const meta: V2_MetaFunction = () => [{ title: "Sign Up" }];
|
||||
|
||||
export default function Join() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const redirectTo = searchParams.get("redirectTo") ?? undefined;
|
||||
const actionData = useActionData<typeof action>();
|
||||
const emailRef = useRef<HTMLInputElement>(null);
|
||||
const passwordRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (actionData?.errors?.email) {
|
||||
emailRef.current?.focus();
|
||||
} else if (actionData?.errors?.password) {
|
||||
passwordRef.current?.focus();
|
||||
}
|
||||
}, [actionData]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-full flex-col justify-center">
|
||||
<div className="mx-auto w-full max-w-md px-8">
|
||||
<Form method="post" className="space-y-6">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Email address
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
ref={emailRef}
|
||||
id="email"
|
||||
required
|
||||
autoFocus={true}
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
aria-invalid={actionData?.errors?.email ? true : undefined}
|
||||
aria-describedby="email-error"
|
||||
className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
|
||||
/>
|
||||
{actionData?.errors?.email ? (
|
||||
<div className="pt-1 text-red-700" id="email-error">
|
||||
{actionData.errors.email}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
id="password"
|
||||
ref={passwordRef}
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
aria-invalid={actionData?.errors?.password ? true : undefined}
|
||||
aria-describedby="password-error"
|
||||
className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
|
||||
/>
|
||||
{actionData?.errors?.password ? (
|
||||
<div className="pt-1 text-red-700" id="password-error">
|
||||
{actionData.errors.password}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="redirectTo" value={redirectTo} />
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
|
||||
>
|
||||
Create Account
|
||||
</button>
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="text-center text-sm text-gray-500">
|
||||
Already have an account?{" "}
|
||||
<Link
|
||||
className="text-blue-500 underline"
|
||||
to={{
|
||||
pathname: "/login",
|
||||
search: searchParams.toString(),
|
||||
}}
|
||||
>
|
||||
Log in
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
import type { ActionArgs, LoaderArgs, V2_MetaFunction } from "@remix-run/node";
|
||||
import { json, redirect } from "@remix-run/node";
|
||||
import { Form, Link, useActionData, useSearchParams } from "@remix-run/react";
|
||||
import { Form, useActionData, useSearchParams } from "@remix-run/react";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
import { verifyLogin } from "~/models/user.server";
|
||||
@ -150,23 +150,12 @@ export default function LoginPage() {
|
||||
/>
|
||||
<label
|
||||
htmlFor="remember"
|
||||
className="ml-2 block text-sm text-gray-900"
|
||||
className="ml-2 block text-sm text-secondary"
|
||||
>
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
<div className="text-center text-sm text-gray-500">
|
||||
Don't have an account?{" "}
|
||||
<Link
|
||||
className="text-blue-500 underline"
|
||||
to={{
|
||||
pathname: "/join",
|
||||
search: searchParams.toString()
|
||||
}}
|
||||
>
|
||||
Sign up
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user