From ba89880f8ab174c47c9521720cce9824dd312534 Mon Sep 17 00:00:00 2001
From: LandaMm <qwer.009771@gmail.com>
Date: Wed, 21 May 2025 19:27:03 +0200
Subject: [PATCH] feat: finished register page

---
 web/src/pages/Register/index.tsx | 259 +++++++++++++++++++++++++++++++
 1 file changed, 259 insertions(+)
 create mode 100644 web/src/pages/Register/index.tsx

diff --git a/web/src/pages/Register/index.tsx b/web/src/pages/Register/index.tsx
new file mode 100644
index 0000000..d0710f9
--- /dev/null
+++ b/web/src/pages/Register/index.tsx
@@ -0,0 +1,259 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Mail, Lock, User, Phone } from "lucide-react";
+import { Link } from "react-router-dom";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+import overlay from "@/assets/overlay.jpg";
+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 [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 min-h-screen bg-cover bg-center bg-white"
+      style={{ backgroundImage: `url(${overlay})` }}
+    >
+      <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/90 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 text-left w-full">
+                Sign Up
+              </h2>
+              <h4 className="text-base mb-3 text-gray-400 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 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" className="text-blue-600 hover:underline">
+                    Login
+                  </Link>
+                </div>
+              </form>
+            </CardContent>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}