-
@@ -226,7 +255,7 @@ export function LoginPage() {
"rounded-full",
"relative z-10",
"before:absolute before:w-[100px] before:h-px before:bg-border before:left-[-110px] before:top-1/2",
- "after:absolute after:w-[100px] after:h-px after:bg-border after:right-[-110px] after:top-1/2"
+ "after:absolute after:w-[100px] after:h-px after:bg-border after:right-[-110px] after:top-1/2",
)}
>
{t("auth:common.orContinue")}
diff --git a/apps/main/src/pages/signup-v2.tsx b/apps/main/src/pages/signup-v2.tsx
new file mode 100644
index 0000000..a56e68d
--- /dev/null
+++ b/apps/main/src/pages/signup-v2.tsx
@@ -0,0 +1,384 @@
+import { AnimatedBackground } from "@ui/components/AnimatedBackground";
+import { LoginWithGoogle } from "@ui/components/BrandButtons/LoginWithGoogle";
+import { useTheme } from "@xtablo/shared/contexts/ThemeContext";
+import { Button } from "@xtablo/ui/components/button";
+import { FieldError } from "@xtablo/ui/components/field";
+import { Input } from "@xtablo/ui/components/input";
+import { Label } from "@xtablo/ui/components/label";
+import {
+ ArrowLeftIcon,
+ MonitorIcon,
+ MoonIcon,
+ SparklesIcon,
+ SunIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { useSignUp } from "../hooks/auth";
+
+export function SignUpV2Page() {
+ const { t } = useTranslation(["auth", "common"]);
+ const redirectUrl = localStorage.getItem("redirectUrl");
+ const { mutate: signUp, isPending } = useSignUp({
+ redirectUrl: redirectUrl ?? null,
+ });
+ const [errors, setErrors] = useState
>({});
+
+ const [formData, setFormData] = useState({
+ email: "",
+ password: "",
+ confirmPassword: "",
+ username: "",
+ first_name: "",
+ last_name: "",
+ business_name: "",
+ });
+ const [termsAccepted, setTermsAccepted] = useState(false);
+
+ const { theme, setTheme } = useTheme();
+
+ const toggleTheme = () => {
+ if (theme === "light") {
+ setTheme("dark");
+ } else if (theme === "dark") {
+ setTheme("system");
+ } else {
+ setTheme("light");
+ }
+ };
+
+ const getThemeIcon = () => {
+ switch (theme) {
+ case "light":
+ return ;
+ case "dark":
+ return ;
+ case "system":
+ return ;
+ default:
+ return ;
+ }
+ };
+
+ const validateForm = () => {
+ const nextErrors: Record = {};
+
+ if (formData.password.length < 8) {
+ nextErrors.password = t("auth:signup.errors.passwordLength");
+ }
+
+ if (formData.password !== formData.confirmPassword) {
+ nextErrors.confirmPassword = t("auth:signup.errors.passwordMatch");
+ }
+
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (!emailRegex.test(formData.email)) {
+ nextErrors.email = t("auth:signup.errors.invalidEmail");
+ }
+
+ if (!termsAccepted) {
+ nextErrors.terms = t("auth:signup.errors.termsRequired");
+ }
+
+ return Object.keys(nextErrors).length === 0 ? null : nextErrors;
+ };
+
+ const onSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+
+ const validationErrors = validateForm();
+ if (validationErrors) {
+ setErrors(validationErrors);
+ return;
+ }
+
+ setErrors({});
+ signUp({
+ email: formData.email,
+ password: formData.password,
+ first_name: formData.first_name,
+ last_name: formData.last_name,
+ confirm_password: formData.confirmPassword,
+ business_name: formData.business_name,
+ });
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t("auth:signup.title")}
+
+
+ {t("auth:signup.alreadyAccount")}{" "}
+
+ {t("auth:signup.loginLink")}
+
+
+
+
+
+
+
+
+
+ {t("auth:common.orContinue")}
+
+
+
+
+
+
+
+
+
+