-
Password reset successfully requested
-
- Check your email for a link to reset your password. If it doesn't appear within a few minutes,
- check your spam folder.
-
-
-
+
+
+
Password reset successfully requested
+
+ Check your email for a link to reset your password. If it doesn't appear within a few minutes,
+ check your spam folder.
+
+
+
+
);
};
diff --git a/apps/web/app/auth/forgot-password/page.tsx b/apps/web/app/auth/forgot-password/page.tsx
index 97899f3bbb..bf5dbf377a 100644
--- a/apps/web/app/auth/forgot-password/page.tsx
+++ b/apps/web/app/auth/forgot-password/page.tsx
@@ -1,7 +1,12 @@
import { PasswordResetForm } from "../../../components/auth/PasswordResetForm";
+import FormWrapper from "@/components/auth/FormWrapper";
const ForgotPasswordPage: React.FC = () => {
- return
;
+ return (
+
+
+ );
};
export default ForgotPasswordPage;
diff --git a/apps/web/app/auth/forgot-password/reset/page.tsx b/apps/web/app/auth/forgot-password/reset/page.tsx
index 3d9cd660ca..cf78557b3e 100644
--- a/apps/web/app/auth/forgot-password/reset/page.tsx
+++ b/apps/web/app/auth/forgot-password/reset/page.tsx
@@ -1,7 +1,12 @@
import { ResetPasswordForm } from "@/components/auth/ResetPasswordForm";
+import FormWrapper from "@/components/auth/FormWrapper";
const ResetPasswordPage: React.FC = () => {
- return
;
+ return (
+
+
+ );
};
export default ResetPasswordPage;
diff --git a/apps/web/app/auth/forgot-password/reset/success/page.tsx b/apps/web/app/auth/forgot-password/reset/success/page.tsx
index 9a2cfe6d39..30ad409272 100644
--- a/apps/web/app/auth/forgot-password/reset/success/page.tsx
+++ b/apps/web/app/auth/forgot-password/reset/success/page.tsx
@@ -1,13 +1,16 @@
import BackToLoginButton from "@/components/auth/BackToLoginButton";
+import FormWrapper from "@/components/auth/FormWrapper";
export default function ResetPasswordSuccessPage() {
return (
-
-
Password successfully reset
-
You can now log in with your new password
-
-
+
+
+
Password successfully reset
+
You can now log in with your new password
+
+
+
);
}
diff --git a/apps/web/app/auth/layout.tsx b/apps/web/app/auth/layout.tsx
index f52693015b..a5d03b3a45 100644
--- a/apps/web/app/auth/layout.tsx
+++ b/apps/web/app/auth/layout.tsx
@@ -1,4 +1,3 @@
-import { Logo } from "@/components/Logo";
import { getServerSession } from "next-auth";
import { redirect } from "next/navigation";
import { PosthogClientWrapper } from "../PosthogClientWrapper";
@@ -12,16 +11,7 @@ export default async function AuthLayout({ children }: { children: React.ReactNo
diff --git a/apps/web/app/auth/login/page.tsx b/apps/web/app/auth/login/page.tsx
index 7bec506c80..013b8e30ca 100644
--- a/apps/web/app/auth/login/page.tsx
+++ b/apps/web/app/auth/login/page.tsx
@@ -1,19 +1,16 @@
import { SigninForm } from "@/components/auth/SigninForm";
-import Link from "next/link";
+import Testimonial from "@/components/auth/Testimonial";
+import FormWrapper from "@/components/auth/FormWrapper";
export default function SignInPage() {
return (
-
-
- {process.env.NEXT_PUBLIC_SIGNUP_DISABLED !== "1" && (
-
-
- )}
+
);
}
diff --git a/apps/web/app/auth/signup-without-verification-success/page.tsx b/apps/web/app/auth/signup-without-verification-success/page.tsx
index bf28e0b18d..fccd170fa7 100644
--- a/apps/web/app/auth/signup-without-verification-success/page.tsx
+++ b/apps/web/app/auth/signup-without-verification-success/page.tsx
@@ -1,8 +1,9 @@
import BackToLoginButton from "@/components/auth/BackToLoginButton";
+import FormWrapper from "@/components/auth/FormWrapper";
export default function SignupWithoutVerificationSuccess() {
return (
-
+
User successfully created
Your new user has been created successfully. Please click the button below and sign in to your
@@ -10,6 +11,6 @@ export default function SignupWithoutVerificationSuccess() {
+
);
}
diff --git a/apps/web/app/auth/signup/page.tsx b/apps/web/app/auth/signup/page.tsx
index ac94ffb72e..136464c09b 100644
--- a/apps/web/app/auth/signup/page.tsx
+++ b/apps/web/app/auth/signup/page.tsx
@@ -1,26 +1,33 @@
import Link from "next/link";
import { SignupForm } from "@/components/auth/SignupForm";
+import FormWrapper from "@/components/auth/FormWrapper";
+import Testimonial from "@/components/auth/Testimonial";
export default function SignUpPage() {
return (
-
- {process.env.NEXT_PUBLIC_SIGNUP_DISABLED === "1" ? (
- <>
-
Sign up disabled
-
- The account creation is disabled in this instance. Please contact the site administrator to create
- an account.
-
-
-
- Login
-
-
- ) : (
-
- )}
+
+
+
+
+ {process.env.NEXT_PUBLIC_SIGNUP_DISABLED === "1" ? (
+ <>
+ Sign up disabled
+
+ The account creation is disabled in this instance. Please contact the site administrator to
+ create an account.
+
+
);
}
diff --git a/apps/web/app/auth/verification-requested/page.tsx b/apps/web/app/auth/verification-requested/page.tsx
index 740fa48c01..82264adfb9 100644
--- a/apps/web/app/auth/verification-requested/page.tsx
+++ b/apps/web/app/auth/verification-requested/page.tsx
@@ -2,11 +2,12 @@
import { RequestVerificationEmail } from "@/components/auth/RequestVerificationEmail";
import { useSearchParams } from "next/navigation";
+import FormWrapper from "@/components/auth/FormWrapper";
export default function VerficationPage() {
const searchParams = useSearchParams();
return (
-
+
{searchParams && searchParams?.get("email") ? (
<>
@@ -27,6 +28,6 @@ export default function VerficationPage() {
) : (
No E-Mail Address provided
)}
-
+
);
}
diff --git a/apps/web/app/auth/verify/page.tsx b/apps/web/app/auth/verify/page.tsx
index 4d9bf8add4..50ba78739d 100644
--- a/apps/web/app/auth/verify/page.tsx
+++ b/apps/web/app/auth/verify/page.tsx
@@ -2,14 +2,15 @@
import { SignIn } from "@/components/auth/SignIn";
import { useSearchParams } from "next/navigation";
+import FormWrapper from "@/components/auth/FormWrapper";
export default function Verify() {
const searchParams = useSearchParams();
return searchParams && searchParams?.get("token") ? (
-
+
) : (
No Token provided
);
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx
index 7be3bf8c4b..c784819a08 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx
@@ -135,7 +135,7 @@ export default function WhenToSendCard({ environmentId, localSurvey, setLocalSur
setTriggerEvent(idx, eventClassId)}>
-
+
diff --git a/apps/web/components/auth/FormWrapper.tsx b/apps/web/components/auth/FormWrapper.tsx
new file mode 100644
index 0000000000..8e8df26540
--- /dev/null
+++ b/apps/web/components/auth/FormWrapper.tsx
@@ -0,0 +1,14 @@
+import { Logo } from "@/components/Logo";
+
+export default function FormWrapper({ children }: { children: React.ReactNode }) {
+ return (
+
+ );
+}
diff --git a/apps/web/components/auth/GithubButton.tsx b/apps/web/components/auth/GithubButton.tsx
index 27bcfd1777..0234923dd8 100644
--- a/apps/web/components/auth/GithubButton.tsx
+++ b/apps/web/components/auth/GithubButton.tsx
@@ -4,7 +4,7 @@ import { Button } from "@formbricks/ui";
import { signIn } from "next-auth/react";
import { FaGithub } from "react-icons/fa";
-export const GithubButton = ({ text = "Login with Github" }) => {
+export const GithubButton = ({ text = "Continue with Github" }) => {
const handleLogin = async () => {
await signIn("github", {
redirect: true,
@@ -15,8 +15,8 @@ export const GithubButton = ({ text = "Login with Github" }) => {
return (
diff --git a/apps/web/components/auth/GoogleButton.tsx b/apps/web/components/auth/GoogleButton.tsx
new file mode 100644
index 0000000000..c9b6348c02
--- /dev/null
+++ b/apps/web/components/auth/GoogleButton.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { Button } from "@formbricks/ui";
+import { signIn } from "next-auth/react";
+import { FaGoogle } from "react-icons/fa";
+
+export const GoogleButton = ({ text = "Continue with Google" }) => {
+ const handleLogin = async () => {
+ await signIn("google", {
+ redirect: true,
+ callbackUrl: "/", // redirect after login to /
+ });
+ };
+
+ return (
+
+ {text}
+
+ );
+};
diff --git a/apps/web/components/auth/SigninForm.tsx b/apps/web/components/auth/SigninForm.tsx
index f5c2025a24..b264ef0e48 100644
--- a/apps/web/components/auth/SigninForm.tsx
+++ b/apps/web/components/auth/SigninForm.tsx
@@ -1,11 +1,12 @@
"use client";
+import { GoogleButton } from "@/components/auth/GoogleButton";
import { Button } from "@formbricks/ui";
import { XCircleIcon } from "@heroicons/react/24/solid";
import { signIn } from "next-auth/react";
import Link from "next/dist/client/link";
import { useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { useRef, useState } from "react";
import { GithubButton } from "./GithubButton";
export const SigninForm = () => {
@@ -22,9 +23,105 @@ export const SigninForm = () => {
};
const [loggingIn, setLoggingIn] = useState(false);
+ const [showLogin, setShowLogin] = useState(false);
+ const [isButtonEnabled, setButtonEnabled] = useState(true);
+ const [isPasswordFocused, setIsPasswordFocused] = useState(false);
+ const formRef = useRef(null);
+
+ const checkFormValidity = () => {
+ // If both fields are filled, enable the button
+ if (formRef.current) {
+ setButtonEnabled(formRef.current.checkValidity());
+ }
+ };
return (
<>
+
+
Log in to your account
+
+
+
+ {process.env.NEXT_PUBLIC_GOOGLE_AUTH_ENABLED === "1" && (
+ <>
+
+
+ )}
+ {process.env.NEXT_PUBLIC_GITHUB_AUTH_ENABLED === "1" && (
+ <>
+
+
+ )}
+
+ {process.env.NEXT_PUBLIC_SIGNUP_DISABLED !== "1" && (
+
+ Need an account?{" "}
+
+ )}
+
@@ -40,67 +137,6 @@ export const SigninForm = () => {
)}
-
);
};
diff --git a/apps/web/components/auth/SignupForm.tsx b/apps/web/components/auth/SignupForm.tsx
index 4cab816213..6454988b94 100644
--- a/apps/web/components/auth/SignupForm.tsx
+++ b/apps/web/components/auth/SignupForm.tsx
@@ -5,8 +5,9 @@ import { createUser } from "@/lib/users/users";
import { XCircleIcon } from "@heroicons/react/24/solid";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { useRef, useState } from "react";
import { GithubButton } from "./GithubButton";
+import { GoogleButton } from "@/components/auth/GoogleButton";
export const SignupForm = () => {
const searchParams = useSearchParams();
@@ -36,6 +37,18 @@ export const SignupForm = () => {
}
};
+ const [showLogin, setShowLogin] = useState(false);
+ const [isButtonEnabled, setButtonEnabled] = useState(true);
+ const [isPasswordFocused, setIsPasswordFocused] = useState(false);
+ const formRef = useRef(null);
+
+ const checkFormValidity = () => {
+ // If all fields are filled, enable the button
+ if (formRef.current) {
+ setButtonEnabled(formRef.current.checkValidity());
+ }
+ };
+
return (
<>
{error && (
@@ -53,106 +66,136 @@ export const SignupForm = () => {
)}
-