258 lines
9.2 KiB
TypeScript
258 lines
9.2 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Mail, Lock, User, Phone } from "lucide-react";
|
|
import { Link, useLocation } from "react-router";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
import { useCallback, useState } from "react";
|
|
import { useForm, type SubmitHandler } from "react-hook-form";
|
|
|
|
interface RegisterForm {
|
|
fullName: string;
|
|
email: string;
|
|
phoneNumber: string;
|
|
password: string;
|
|
repeatPassword: string;
|
|
}
|
|
|
|
export default function RegisterPage() {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors },
|
|
} = useForm<RegisterForm>();
|
|
|
|
const location = useLocation();
|
|
|
|
const [isLoading, setLoading] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [success, setSuccess] = useState("");
|
|
|
|
const onSubmit: SubmitHandler<RegisterForm> = useCallback(
|
|
async (data) => {
|
|
console.log({ data });
|
|
|
|
setLoading(true);
|
|
setError("");
|
|
setSuccess("");
|
|
|
|
try {
|
|
const response = await fetch("/api/v1/register", {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
full_name: data.fullName,
|
|
email: data.email,
|
|
...(data.phoneNumber ? { phone_number: data.phoneNumber } : {}),
|
|
password: data.password,
|
|
}),
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
});
|
|
if (response.status != 200) {
|
|
const json = await response.json();
|
|
const text = json.error || "Unexpected error happened";
|
|
setError(
|
|
`Failed to create an account. ${
|
|
text[0].toUpperCase() + text.slice(1)
|
|
}`,
|
|
);
|
|
} else {
|
|
setSuccess(
|
|
"Account has been created. You can now log into your new account",
|
|
);
|
|
reset();
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
setError("Failed to create account. Unexpected error happened");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
},
|
|
[reset],
|
|
);
|
|
|
|
return (
|
|
<div className="relative z-10 flex items-center justify-center min-h-screen">
|
|
<Card className="sm:w-96 sm:min-w-96 sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/65 backdrop-blur-md">
|
|
<div className="flex flex-col items-center pt-16 sm:pt-0">
|
|
<img
|
|
src="/icon.png"
|
|
alt="icon"
|
|
className="w-16 h-16 mb-4 mt-2 sm:mt-6"
|
|
/>
|
|
|
|
<div className="px-4 sm:mt-4 mt-8">
|
|
<h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200 text-left w-full">
|
|
Sign Up
|
|
</h2>
|
|
<h4 className="text-base mb-3 text-gray-400 dark:text-gray-600 text-left">
|
|
Fill up this form to start using homelab services and tools.
|
|
</h4>
|
|
</div>
|
|
|
|
<CardContent className="w-full space-y-4">
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<div className="mb-4">
|
|
<div className="relative">
|
|
<User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
|
<Input
|
|
id="full_name"
|
|
type="text"
|
|
placeholder="Full Name"
|
|
className="pl-10"
|
|
{...register("fullName", { required: true })}
|
|
aria-invalid={errors.fullName ? "true" : "false"}
|
|
/>
|
|
</div>
|
|
{!!errors.fullName && (
|
|
<p className="text-red-600 opacity-70 text-sm">
|
|
{errors.fullName.message ?? "Full Name is required"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="Email Address"
|
|
className="pl-10"
|
|
{...register("email", {
|
|
required: true,
|
|
pattern: {
|
|
value: /\S+@\S+\.\S+/,
|
|
message: "Invalid email",
|
|
},
|
|
})}
|
|
aria-invalid={errors.email ? "true" : "false"}
|
|
/>
|
|
</div>
|
|
{!!errors.email && (
|
|
<p className="text-red-600 opacity-70 text-sm">
|
|
{errors.email.message ?? "Email is required"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<div className="relative">
|
|
<Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
|
<Input
|
|
id="phone_number"
|
|
type="tel"
|
|
placeholder="Phone Number"
|
|
className="pl-10"
|
|
{...register("phoneNumber", {
|
|
required: false,
|
|
})}
|
|
aria-invalid={errors.phoneNumber ? "true" : "false"}
|
|
/>
|
|
</div>
|
|
{!!errors.phoneNumber && (
|
|
<p className="text-red-600 opacity-70 text-sm">
|
|
{errors.phoneNumber.message ?? "Phone Number is required"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
placeholder="Password"
|
|
className="pl-10"
|
|
{...register("password", {
|
|
required: true,
|
|
validate: (password) => {
|
|
if (password.length < 8) {
|
|
return "Password must be at least 8 characters long";
|
|
}
|
|
if (!password.match(/[a-zA-Z]+/gi)) {
|
|
return "Password must contain characters";
|
|
}
|
|
if (
|
|
password.split("").every((c) => c.toLowerCase() == c)
|
|
) {
|
|
return "Password should contain at least 1 uppercase character";
|
|
}
|
|
if (!password.match(/\d+/gi)) {
|
|
return "Password should contain at least 1 digit";
|
|
}
|
|
},
|
|
})}
|
|
aria-invalid={errors.password ? "true" : "false"}
|
|
/>
|
|
</div>
|
|
{!!errors.password && (
|
|
<p className="text-red-600 opacity-70 text-sm">
|
|
{errors.password.message ?? "Password is required"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
|
<Input
|
|
id="repeat_password"
|
|
type="password"
|
|
placeholder="Repeat Password"
|
|
className="pl-10"
|
|
{...register("repeatPassword", {
|
|
required: true,
|
|
validate: (repeatPassword, { password }) => {
|
|
if (repeatPassword != password) {
|
|
return "Password does not match";
|
|
}
|
|
},
|
|
})}
|
|
aria-invalid={errors.repeatPassword ? "true" : "false"}
|
|
/>
|
|
</div>
|
|
{!!errors.repeatPassword && (
|
|
<p className="text-red-600 opacity-70 text-sm">
|
|
{errors.repeatPassword.message ?? "Password is required"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{success.length > 0 && (
|
|
<div className="border border-green-400 p-2 rounded bg-green-200 text-sm">
|
|
{success}
|
|
</div>
|
|
)}
|
|
|
|
{error.length > 0 && (
|
|
<div className="border border-red-400 p-2 rounded bg-red-200 dark:border-red-600 dark:bg-red-400 text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<Button className="w-full mt-2 mb-4" loading={isLoading}>
|
|
Register
|
|
</Button>
|
|
<div className="text-sm text-center text-gray-600">
|
|
Already have an account?{" "}
|
|
<Link
|
|
to="/login"
|
|
state={location.state}
|
|
className="text-blue-600 hover:underline"
|
|
>
|
|
Login
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|