diff --git a/packages/frontend/components/layout/AuthLayout.tsx b/packages/frontend/components/layout/AuthLayout.tsx new file mode 100644 index 00000000..0dc2b32b --- /dev/null +++ b/packages/frontend/components/layout/AuthLayout.tsx @@ -0,0 +1,32 @@ +import { Box, Center, Container, useComputedColorScheme } from "@mantine/core"; +import { IconAnalyze } from "@tabler/icons-react"; + +export default function AuthLayout({ + children, +}: { + children: React.ReactNode; +}) { + const scheme = useComputedColorScheme(); + + return ( + + + + +
+ {children} +
+ + ); +} diff --git a/packages/frontend/pages/login.tsx b/packages/frontend/pages/login.tsx index 5f9c1c22..a8eec1d1 100644 --- a/packages/frontend/pages/login.tsx +++ b/packages/frontend/pages/login.tsx @@ -21,6 +21,7 @@ import { NextSeo } from "next-seo"; import { useAuth } from "@/utils/auth"; import { useRouter } from "next/router"; import { notifications } from "@mantine/notifications"; +import AuthLayout from "@/components/layout/AuthLayout"; function LoginPage() { const router = useRouter(); @@ -151,13 +152,10 @@ function LoginPage() { }, [router.query.email]); return ( - + - - - Welcome back! @@ -237,7 +235,7 @@ function LoginPage() { - + ); } export default LoginPage; diff --git a/packages/frontend/pages/request-password-reset.tsx b/packages/frontend/pages/request-password-reset.tsx index e4f6dda5..5f5836fc 100644 --- a/packages/frontend/pages/request-password-reset.tsx +++ b/packages/frontend/pages/request-password-reset.tsx @@ -1,18 +1,11 @@ -import { - Box, - Button, - Container, - Paper, - Stack, - Text, - TextInput, -} from "@mantine/core"; +import { Button, Paper, Stack, Text, TextInput } from "@mantine/core"; import { useForm } from "@mantine/form"; import { notifications } from "@mantine/notifications"; -import { IconAnalyze, IconAt, IconCheck } from "@tabler/icons-react"; +import { IconAt, IconCheck } from "@tabler/icons-react"; import { NextSeo } from "next-seo"; import { useState } from "react"; import errorHandler from "../utils/errors"; +import AuthLayout from "@/components/layout/AuthLayout"; export default function PasswordReset() { const [loading, setLoading] = useState(false); @@ -53,52 +46,45 @@ export default function PasswordReset() { } return ( - - - - - - - + + - - - Password Recovery - + + + Password Recovery + - - Enter your email address and if it is registered, we will send you - a link to reset your password. - + + Enter your email address and if it is registered, we will send you a + link to reset your password. + -
- - } - label="Email" - type="email" - value={form.values.email} - onChange={(event) => - form.setFieldValue("email", event.currentTarget.value) - } - error={form.errors.email && "Invalid email"} - placeholder="Your email" - /> + + + } + label="Email" + type="email" + value={form.values.email} + onChange={(event) => + form.setFieldValue("email", event.currentTarget.value) + } + error={form.errors.email && "Invalid email"} + placeholder="Your email" + /> - - - -
- - - + + + + + ); } diff --git a/packages/frontend/pages/reset-password.tsx b/packages/frontend/pages/reset-password.tsx index 59e5a049..5d02291c 100644 --- a/packages/frontend/pages/reset-password.tsx +++ b/packages/frontend/pages/reset-password.tsx @@ -1,15 +1,6 @@ -import { - Box, - Button, - Container, - Paper, - PasswordInput, - Stack, - Text, -} from "@mantine/core"; +import { Button, Paper, PasswordInput, Stack, Text } from "@mantine/core"; import { useForm } from "@mantine/form"; -import { IconAnalyze } from "@tabler/icons-react"; import { NextSeo } from "next-seo"; import { useRouter } from "next/router"; @@ -17,6 +8,7 @@ import { useState } from "react"; import { fetcher } from "@/utils/fetcher"; import { useAuth } from "@/utils/auth"; import analytics from "@/utils/analytics"; +import AuthLayout from "@/components/layout/AuthLayout"; export default function UpdatePassword() { const { setJwt } = useAuth(); @@ -61,46 +53,39 @@ export default function UpdatePassword() { }; return ( - - - - - - - - - - Reset your password - -
- - - form.setFieldValue("password", event.currentTarget.value) - } - error={form.errors.password && "Invalid password"} - placeholder="Your new password" - /> + + + + + Reset your password + + + + + form.setFieldValue("password", event.currentTarget.value) + } + error={form.errors.password && "Invalid password"} + placeholder="Your new password" + /> - - - - -
- - + + + + + ); } diff --git a/packages/frontend/pages/signup.tsx b/packages/frontend/pages/signup.tsx index 59f3a7d7..c9450a3d 100644 --- a/packages/frontend/pages/signup.tsx +++ b/packages/frontend/pages/signup.tsx @@ -19,6 +19,7 @@ import { TextInput, ThemeIcon, Title, + useComputedColorScheme, } from "@mantine/core"; import Confetti from "react-confetti"; @@ -26,7 +27,6 @@ import Confetti from "react-confetti"; import { useForm } from "@mantine/form"; import { notifications } from "@mantine/notifications"; import { - IconAnalyze, IconArrowRight, IconAt, IconBuildingStore, @@ -44,6 +44,7 @@ import { fetcher } from "@/utils/fetcher"; import { NextSeo } from "next-seo"; import { useAuth } from "@/utils/auth"; import config from "@/utils/config"; +import AuthLayout from "@/components/layout/AuthLayout"; function getRandomizedChoices() { const choices = [ @@ -203,113 +204,110 @@ function SignupPage() { const isBigCompany = form.values.employeeCount !== "1-5"; - return ( - - - - -
- - - - - {step < 3 && ( - <> - - - -
- - {step === 1 && ( - <> - - Get Started - - } - label="Email" - type="email" - autoComplete="email" - error={form.errors.email} - placeholder="Your email" - {...form.getInputProps("email")} - /> - - } - placeholder="Your full name" - error={form.errors.name} - {...form.getInputProps("name")} - onChange={(e) => { - form.setFieldValue("name", e.target.value); - form.setFieldValue( - "orgName", - e.target.value + "'s Org", - ); - }} - /> - - { - if (e.key === "Enter") { - nextStep(); - } - }} - error={form.errors.password} - placeholder="Pick a password" - {...form.getInputProps("password")} - /> - - + const scheme = useComputedColorScheme(); - - {`Already have an account? `} - Log In - - - )} - - {step === 2 && ( - <> - } - placeholder="Organization name" - error={ - form.errors.orgName && - "This field is required" - } - {...form.getInputProps("orgName")} - /> - - } - placeholder="Your project name" - error={ - form.errors.projectName && - "This field is required" + return ( + + + + + + {step < 3 && ( + <> + + + + + + {step === 1 && ( + <> + + Get Started + + } + label="Email" + type="email" + autoComplete="email" + error={form.errors.email} + placeholder="Your email" + {...form.getInputProps("email")} + /> + + } + placeholder="Your full name" + error={form.errors.name} + {...form.getInputProps("name")} + onChange={(e) => { + form.setFieldValue("name", e.target.value); + form.setFieldValue( + "orgName", + e.target.value + "'s Org", + ); + }} + /> + + { + if (e.key === "Enter") { + nextStep(); } - {...form.getInputProps("projectName")} - /> - - {/* + + + + + {`Already have an account? `} + Log In + + + )} + + {step === 2 && ( + <> + } + placeholder="Organization name" + error={ + form.errors.orgName && "This field is required" + } + {...form.getInputProps("orgName")} + /> + + } + placeholder="Your project name" + error={ + form.errors.projectName && + "This field is required" + } + {...form.getInputProps("projectName")} + /> + + {/* */} - + + + - {step === 1 && ( - - - - { + router.query.step = String(1); + router.push(router); + setStep(1); + }} + fullWidth + variant="transparent" + color="dimmed" > - - - } - > - - No credit card required. - - 1K free events per day. Forever. - - - - Collect data immediately - - 10+ integrations like LangChain and OpenAI. - - - - Improve your chatbot - - Get insights without a complicated setup. - - - - - + {`← Go back`} + + + + )} - - )} - - - )} - - {step === 3 && ( - <> - {typeof window !== "undefined" && !isBigCompany && ( - + +
+ + + {step === 1 && ( + + + + + + + } + > + + No credit card required. + + 1K free events per day. Forever. + + + + Collect data immediately + + 10+ integrations like LangChain and OpenAI. + + + + Improve your chatbot + + Get insights without a complicated setup. + + + + + + + )} - - - {/* */} - - - {`You're all set 🎉`} - - - } my="lg"> - - Check your emails for the confirmation link. + + + )} + + {step === 3 && ( + <> + {typeof window !== "undefined" && !isBigCompany && ( + + )} + + + {/* */} + + + {`You're all set 🎉`} + + + } my="lg"> + + Check your emails for the confirmation link. + + + + + + {!config.IS_SELF_HOSTED && ( + <> + + {`Want to say hi? We'd love to talk to you.`} - - - - - {!config.IS_SELF_HOSTED && ( - <> - - {`Want to say hi? We'd love to talk to you.`} - - - - - - - - - )} - - - )} - - - -
- + + + + + + + + )} + + + )} + + + + ); }