first
This commit is contained in:
Илья Шалонин
commit
8538ab969a
434 changed files with 44051 additions and 0 deletions
135
apps/web/modules/saas/auth/components/ForgotPasswordForm.tsx
Normal file
135
apps/web/modules/saas/auth/components/ForgotPasswordForm.tsx
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@ui/components/alert";
|
||||
import { Button } from "@ui/components/button";
|
||||
import { Input } from "@ui/components/input";
|
||||
import { AlertTriangleIcon, ArrowLeftIcon, MailboxIcon } from "lucide-react";
|
||||
|
||||
import { authClient } from "@repo/auth/client";
|
||||
import { useAuthErrorMessages } from "@saas/auth/hooks/errors-messages";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@ui/components/form";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
import { useForm } from "react-hook-form";
|
||||
import * as z from "zod";
|
||||
|
||||
const formSchema = z.object({
|
||||
email: z.string().email(),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export function ForgotPasswordForm() {
|
||||
const t = useTranslations();
|
||||
const { getAuthErrorMessage } = useAuthErrorMessages();
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
email: "",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = form.handleSubmit(async ({ email }) => {
|
||||
try {
|
||||
const redirectTo = new URL(
|
||||
"/auth/reset-password",
|
||||
window.location.origin,
|
||||
).toString();
|
||||
|
||||
const { error } = await authClient.forgetPassword({
|
||||
email,
|
||||
redirectTo,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
} catch (e) {
|
||||
form.setError("root", {
|
||||
message: getAuthErrorMessage(
|
||||
e && typeof e === "object" && "code" in e
|
||||
? (e.code as string)
|
||||
: undefined,
|
||||
),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="font-bold text-xl md:text-2xl">
|
||||
{t("auth.forgotPassword.title")}
|
||||
</h1>
|
||||
<p className="mt-1 mb-6 text-foreground/60">
|
||||
{t("auth.forgotPassword.message")}{" "}
|
||||
</p>
|
||||
|
||||
{form.formState.isSubmitSuccessful ? (
|
||||
<Alert variant="success">
|
||||
<MailboxIcon />
|
||||
<AlertTitle>
|
||||
{t("auth.forgotPassword.hints.linkSent.title")}
|
||||
</AlertTitle>
|
||||
<AlertDescription>
|
||||
{t("auth.forgotPassword.hints.linkSent.message")}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : (
|
||||
<Form {...form}>
|
||||
<form
|
||||
className="flex flex-col items-stretch gap-4"
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
{form.formState.errors.root && (
|
||||
<Alert variant="error">
|
||||
<AlertTriangleIcon />
|
||||
<AlertTitle>
|
||||
{form.formState.errors.root.message}
|
||||
</AlertTitle>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("auth.forgotPassword.email")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
autoComplete="email"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button loading={form.formState.isSubmitting}>
|
||||
{t("auth.forgotPassword.submit")}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
<div className="mt-6 text-center text-sm">
|
||||
<Link href="/auth/login">
|
||||
<ArrowLeftIcon className="mr-1 inline size-4 align-middle" />
|
||||
{t("auth.forgotPassword.backToSignin")}
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
357
apps/web/modules/saas/auth/components/LoginForm.tsx
Normal file
357
apps/web/modules/saas/auth/components/LoginForm.tsx
Normal file
|
|
@ -0,0 +1,357 @@
|
|||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { authClient } from "@repo/auth/client";
|
||||
import { config } from "@repo/config";
|
||||
import { useAuthErrorMessages } from "@saas/auth/hooks/errors-messages";
|
||||
import { sessionQueryKey } from "@saas/auth/lib/api";
|
||||
import { OrganizationInvitationAlert } from "@saas/organizations/components/OrganizationInvitationAlert";
|
||||
import { useRouter } from "@shared/hooks/router";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@ui/components/alert";
|
||||
import { Button } from "@ui/components/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
} from "@ui/components/form";
|
||||
import { Input } from "@ui/components/input";
|
||||
import {
|
||||
AlertTriangleIcon,
|
||||
ArrowRightIcon,
|
||||
EyeIcon,
|
||||
EyeOffIcon,
|
||||
KeyIcon,
|
||||
MailboxIcon,
|
||||
} from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import type { SubmitHandler } from "react-hook-form";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { withQuery } from "ufo";
|
||||
import { z } from "zod";
|
||||
import {
|
||||
type OAuthProvider,
|
||||
oAuthProviders,
|
||||
} from "../constants/oauth-providers";
|
||||
import { useSession } from "../hooks/use-session";
|
||||
import { LoginModeSwitch } from "./LoginModeSwitch";
|
||||
import { SocialSigninButton } from "./SocialSigninButton";
|
||||
|
||||
const formSchema = z.union([
|
||||
z.object({
|
||||
mode: z.literal("magic-link"),
|
||||
email: z.string().email(),
|
||||
}),
|
||||
z.object({
|
||||
mode: z.literal("password"),
|
||||
email: z.string().email(),
|
||||
password: z.string().min(1),
|
||||
}),
|
||||
]);
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export function LoginForm() {
|
||||
const t = useTranslations();
|
||||
const { getAuthErrorMessage } = useAuthErrorMessages();
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const searchParams = useSearchParams();
|
||||
const { user, loaded: sessionLoaded } = useSession();
|
||||
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const invitationId = searchParams.get("invitationId");
|
||||
const email = searchParams.get("email");
|
||||
const redirectTo = searchParams.get("redirectTo");
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
email: email ?? "",
|
||||
password: "",
|
||||
mode: config.auth.enablePasswordLogin ? "password" : "magic-link",
|
||||
},
|
||||
});
|
||||
|
||||
const redirectPath = invitationId
|
||||
? `/app/organization-invitation/${invitationId}`
|
||||
: (redirectTo ?? config.auth.redirectAfterSignIn);
|
||||
|
||||
useEffect(() => {
|
||||
if (sessionLoaded && user) {
|
||||
router.replace(redirectPath);
|
||||
}
|
||||
}, [user, sessionLoaded]);
|
||||
|
||||
const onSubmit: SubmitHandler<FormValues> = async (values) => {
|
||||
try {
|
||||
if (values.mode === "password") {
|
||||
const { data, error } = await authClient.signIn.email({
|
||||
...values,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
if ((data as any).twoFactorRedirect) {
|
||||
router.replace(
|
||||
withQuery(
|
||||
"/auth/verify",
|
||||
Object.fromEntries(searchParams.entries()),
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: sessionQueryKey,
|
||||
});
|
||||
|
||||
router.replace(redirectPath);
|
||||
} else {
|
||||
const { error } = await authClient.signIn.magicLink({
|
||||
...values,
|
||||
callbackURL: redirectPath,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
form.setError("root", {
|
||||
message: getAuthErrorMessage(
|
||||
e && typeof e === "object" && "code" in e
|
||||
? (e.code as string)
|
||||
: undefined,
|
||||
),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const signInWithPasskey = async () => {
|
||||
try {
|
||||
await authClient.signIn.passkey();
|
||||
|
||||
router.replace(redirectPath);
|
||||
} catch (e) {
|
||||
form.setError("root", {
|
||||
message: getAuthErrorMessage(
|
||||
e && typeof e === "object" && "code" in e
|
||||
? (e.code as string)
|
||||
: undefined,
|
||||
),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const signinMode = form.watch("mode");
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="font-bold text-xl md:text-2xl">
|
||||
{t("auth.login.title")}
|
||||
</h1>
|
||||
<p className="mt-1 mb-6 text-foreground/60">
|
||||
{t("auth.login.subtitle")}
|
||||
</p>
|
||||
|
||||
{form.formState.isSubmitSuccessful &&
|
||||
signinMode === "magic-link" ? (
|
||||
<Alert variant="success">
|
||||
<MailboxIcon />
|
||||
<AlertTitle>
|
||||
{t("auth.login.hints.linkSent.title")}
|
||||
</AlertTitle>
|
||||
<AlertDescription>
|
||||
{t("auth.login.hints.linkSent.message")}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : (
|
||||
<>
|
||||
{invitationId && (
|
||||
<OrganizationInvitationAlert className="mb-6" />
|
||||
)}
|
||||
|
||||
<Form {...form}>
|
||||
<form
|
||||
className="space-y-4"
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
>
|
||||
{config.auth.enableMagicLink &&
|
||||
config.auth.enablePasswordLogin && (
|
||||
<LoginModeSwitch
|
||||
activeMode={signinMode}
|
||||
onChange={(mode) =>
|
||||
form.setValue(
|
||||
"mode",
|
||||
mode as typeof signinMode,
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{form.formState.isSubmitted &&
|
||||
form.formState.errors.root?.message && (
|
||||
<Alert variant="error">
|
||||
<AlertTriangleIcon />
|
||||
<AlertTitle>
|
||||
{form.formState.errors.root.message}
|
||||
</AlertTitle>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("auth.signup.email")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
autoComplete="email"
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{config.auth.enablePasswordLogin &&
|
||||
signinMode === "password" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<div className="flex justify-between gap-4">
|
||||
<FormLabel>
|
||||
{t(
|
||||
"auth.signup.password",
|
||||
)}
|
||||
</FormLabel>
|
||||
|
||||
<Link
|
||||
href="/auth/forgot-password"
|
||||
className="text-foreground/60 text-xs"
|
||||
>
|
||||
{t(
|
||||
"auth.login.forgotPassword",
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
<FormControl>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={
|
||||
showPassword
|
||||
? "text"
|
||||
: "password"
|
||||
}
|
||||
className="pr-10"
|
||||
{...field}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setShowPassword(
|
||||
!showPassword,
|
||||
)
|
||||
}
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-4 text-primary text-xl"
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOffIcon className="size-4" />
|
||||
) : (
|
||||
<EyeIcon className="size-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Button
|
||||
className="w-full"
|
||||
type="submit"
|
||||
variant="secondary"
|
||||
loading={form.formState.isSubmitting}
|
||||
>
|
||||
{signinMode === "magic-link"
|
||||
? t("auth.login.sendMagicLink")
|
||||
: t("auth.login.submit")}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
{(config.auth.enablePasskeys ||
|
||||
(config.auth.enableSignup &&
|
||||
config.auth.enableSocialLogin)) && (
|
||||
<>
|
||||
<div className="relative my-6 h-4">
|
||||
<hr className="relative top-2" />
|
||||
<p className="-translate-x-1/2 absolute top-0 left-1/2 mx-auto inline-block h-4 bg-card px-2 text-center font-medium text-foreground/60 text-sm leading-tight">
|
||||
{t("auth.login.continueWith")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 items-stretch gap-2 sm:grid-cols-2">
|
||||
{config.auth.enableSignup &&
|
||||
config.auth.enableSocialLogin &&
|
||||
Object.keys(oAuthProviders).map(
|
||||
(providerId) => (
|
||||
<SocialSigninButton
|
||||
key={providerId}
|
||||
provider={
|
||||
providerId as OAuthProvider
|
||||
}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
|
||||
{config.auth.enablePasskeys && (
|
||||
<Button
|
||||
variant="light"
|
||||
className="w-full sm:col-span-2"
|
||||
onClick={() => signInWithPasskey()}
|
||||
>
|
||||
<KeyIcon className="mr-1.5 size-4 text-primary" />
|
||||
{t("auth.login.loginWithPasskey")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{config.auth.enableSignup && (
|
||||
<div className="mt-6 text-center text-sm">
|
||||
<span className="text-foreground/60">
|
||||
{t("auth.login.dontHaveAnAccount")}{" "}
|
||||
</span>
|
||||
<Link
|
||||
href={withQuery(
|
||||
"/auth/signup",
|
||||
Object.fromEntries(searchParams.entries()),
|
||||
)}
|
||||
>
|
||||
{t("auth.login.createAnAccount")}
|
||||
<ArrowRightIcon className="ml-1 inline size-4 align-middle" />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
28
apps/web/modules/saas/auth/components/LoginModeSwitch.tsx
Normal file
28
apps/web/modules/saas/auth/components/LoginModeSwitch.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
"use client";
|
||||
|
||||
import { Tabs, TabsList, TabsTrigger } from "@ui/components/tabs";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export function LoginModeSwitch({
|
||||
activeMode,
|
||||
onChange,
|
||||
className,
|
||||
}: {
|
||||
activeMode: "password" | "magic-link";
|
||||
onChange: (mode: string) => void;
|
||||
className?: string;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Tabs value={activeMode} onValueChange={onChange} className={className}>
|
||||
<TabsList className="w-full">
|
||||
<TabsTrigger value="password" className="flex-1">
|
||||
{t("auth.login.modes.password")}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="magic-link" className="flex-1">
|
||||
{t("auth.login.modes.magicLink")}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
169
apps/web/modules/saas/auth/components/OtpForm.tsx
Normal file
169
apps/web/modules/saas/auth/components/OtpForm.tsx
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Alert, AlertTitle } from "@ui/components/alert";
|
||||
import { Button } from "@ui/components/button";
|
||||
import { AlertTriangleIcon, ArrowLeftIcon } from "lucide-react";
|
||||
|
||||
import { authClient } from "@repo/auth/client";
|
||||
import { config } from "@repo/config";
|
||||
import { useAuthErrorMessages } from "@saas/auth/hooks/errors-messages";
|
||||
import { useRouter } from "@shared/hooks/router";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@ui/components/form";
|
||||
import {
|
||||
InputOTP,
|
||||
InputOTPGroup,
|
||||
InputOTPSeparator,
|
||||
InputOTPSlot,
|
||||
} from "@ui/components/input-otp";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useForm } from "react-hook-form";
|
||||
import * as z from "zod";
|
||||
|
||||
const formSchema = z.object({
|
||||
code: z.string().min(6).max(6),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export function OtpForm() {
|
||||
const t = useTranslations();
|
||||
const router = useRouter();
|
||||
const { getAuthErrorMessage } = useAuthErrorMessages();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const invitationId = searchParams.get("invitationId");
|
||||
const redirectTo = searchParams.get("redirectTo");
|
||||
|
||||
const redirectPath = invitationId
|
||||
? `/app/organization-invitation/${invitationId}`
|
||||
: (redirectTo ?? config.auth.redirectAfterSignIn);
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
code: "",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = form.handleSubmit(async ({ code }) => {
|
||||
try {
|
||||
const { error } = await authClient.twoFactor.verifyTotp({
|
||||
code,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
router.replace(redirectPath);
|
||||
} catch (e) {
|
||||
form.setError("root", {
|
||||
message: getAuthErrorMessage(
|
||||
e && typeof e === "object" && "code" in e
|
||||
? (e.code as string)
|
||||
: undefined,
|
||||
),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="font-bold text-xl md:text-2xl">
|
||||
{t("auth.verify.title")}
|
||||
</h1>
|
||||
<p className="mt-1 mb-4 text-foreground/60">
|
||||
{t("auth.verify.message")}
|
||||
</p>
|
||||
|
||||
<Form {...form}>
|
||||
<form
|
||||
className="flex flex-col items-stretch gap-4"
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
{form.formState.errors.root && (
|
||||
<Alert variant="error">
|
||||
<AlertTriangleIcon />
|
||||
<AlertTitle>
|
||||
{form.formState.errors.root.message}
|
||||
</AlertTitle>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="code"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t("auth.verify.code")}</FormLabel>
|
||||
<FormControl>
|
||||
<InputOTP
|
||||
maxLength={6}
|
||||
{...field}
|
||||
autoComplete="one-time-code"
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
onSubmit();
|
||||
}}
|
||||
>
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot
|
||||
className="size-10 text-lg"
|
||||
index={0}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
className="size-10 text-lg"
|
||||
index={1}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
className="size-10 text-lg"
|
||||
index={2}
|
||||
/>
|
||||
</InputOTPGroup>
|
||||
<InputOTPSeparator className="opacity-40" />
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot
|
||||
className="size-10 text-lg"
|
||||
index={3}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
className="size-10 text-lg"
|
||||
index={4}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
className="size-10 text-lg"
|
||||
index={5}
|
||||
/>
|
||||
</InputOTPGroup>
|
||||
</InputOTP>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button loading={form.formState.isSubmitting}>
|
||||
{t("auth.verify.submit")}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
<div className="mt-6 text-center text-sm">
|
||||
<Link href="/auth/login">
|
||||
<ArrowLeftIcon className="mr-1 inline size-4 align-middle" />
|
||||
{t("auth.verify.backToSignin")}
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
139
apps/web/modules/saas/auth/components/ResetPasswordForm.tsx
Normal file
139
apps/web/modules/saas/auth/components/ResetPasswordForm.tsx
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Alert, AlertTitle } from "@ui/components/alert";
|
||||
import { Button } from "@ui/components/button";
|
||||
import { AlertTriangleIcon, ArrowLeftIcon, MailboxIcon } from "lucide-react";
|
||||
|
||||
import { authClient } from "@repo/auth/client";
|
||||
import { config } from "@repo/config";
|
||||
import { useAuthErrorMessages } from "@saas/auth/hooks/errors-messages";
|
||||
import { useSession } from "@saas/auth/hooks/use-session";
|
||||
import { useRouter } from "@shared/hooks/router";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@ui/components/form";
|
||||
import { PasswordInput } from "@ui/components/password-input";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useForm } from "react-hook-form";
|
||||
import * as z from "zod";
|
||||
|
||||
const formSchema = z.object({
|
||||
password: z.string().min(8),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export function ResetPasswordForm() {
|
||||
const t = useTranslations();
|
||||
const { user } = useSession();
|
||||
const router = useRouter();
|
||||
const { getAuthErrorMessage } = useAuthErrorMessages();
|
||||
const searchParams = useSearchParams();
|
||||
const token = searchParams.get("token");
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
password: "",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = form.handleSubmit(async ({ password }) => {
|
||||
try {
|
||||
const { error } = await authClient.resetPassword({
|
||||
token: token ?? undefined,
|
||||
newPassword: password,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
if (user) {
|
||||
router.push(config.auth.redirectAfterSignIn);
|
||||
}
|
||||
} catch (e) {
|
||||
form.setError("root", {
|
||||
message: getAuthErrorMessage(
|
||||
e && typeof e === "object" && "code" in e
|
||||
? (e.code as string)
|
||||
: undefined,
|
||||
),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="font-bold text-xl md:text-2xl">
|
||||
{t("auth.resetPassword.title")}
|
||||
</h1>
|
||||
<p className="mt-1 mb-6 text-foreground/60">
|
||||
{t("auth.resetPassword.message")}{" "}
|
||||
</p>
|
||||
|
||||
{form.formState.isSubmitSuccessful ? (
|
||||
<Alert variant="success">
|
||||
<MailboxIcon />
|
||||
<AlertTitle>
|
||||
{t("auth.resetPassword.hints.success")}
|
||||
</AlertTitle>
|
||||
</Alert>
|
||||
) : (
|
||||
<Form {...form}>
|
||||
<form
|
||||
className="flex flex-col items-stretch gap-4"
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
{form.formState.errors.root && (
|
||||
<Alert variant="error">
|
||||
<AlertTriangleIcon />
|
||||
<AlertTitle>
|
||||
{form.formState.errors.root.message}
|
||||
</AlertTitle>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("auth.resetPassword.newPassword")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<PasswordInput
|
||||
autoComplete="new-password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button loading={form.formState.isSubmitting}>
|
||||
{t("auth.resetPassword.submit")}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
<div className="mt-6 text-center text-sm">
|
||||
<Link href="/auth/login">
|
||||
<ArrowLeftIcon className="mr-1 inline size-4 align-middle" />
|
||||
{t("auth.resetPassword.backToSignin")}
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
51
apps/web/modules/saas/auth/components/SessionProvider.tsx
Normal file
51
apps/web/modules/saas/auth/components/SessionProvider.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
"use client";
|
||||
import { authClient } from "@repo/auth/client";
|
||||
import { sessionQueryKey, useSessionQuery } from "@saas/auth/lib/api";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { type ReactNode, useEffect, useState } from "react";
|
||||
import { SessionContext } from "../lib/session-context";
|
||||
|
||||
export function SessionProvider({
|
||||
children,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: session } = useSessionQuery();
|
||||
const [loaded, setLoaded] = useState(!!session);
|
||||
|
||||
useEffect(() => {
|
||||
if (session && !loaded) {
|
||||
setLoaded(true);
|
||||
}
|
||||
}, [session]);
|
||||
|
||||
return (
|
||||
<SessionContext.Provider
|
||||
value={{
|
||||
loaded,
|
||||
session: session?.session ?? null,
|
||||
user: session?.user ?? null,
|
||||
reloadSession: async () => {
|
||||
const { data: newSession, error } =
|
||||
await authClient.getSession({
|
||||
query: {
|
||||
disableCookieCache: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw new Error(
|
||||
error.message || "Failed to fetch session",
|
||||
);
|
||||
}
|
||||
|
||||
queryClient.setQueryData(sessionQueryKey, () => newSession);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</SessionContext.Provider>
|
||||
);
|
||||
}
|
||||
282
apps/web/modules/saas/auth/components/SignupForm.tsx
Normal file
282
apps/web/modules/saas/auth/components/SignupForm.tsx
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { authClient } from "@repo/auth/client";
|
||||
import { config } from "@repo/config";
|
||||
import { useAuthErrorMessages } from "@saas/auth/hooks/errors-messages";
|
||||
import { OrganizationInvitationAlert } from "@saas/organizations/components/OrganizationInvitationAlert";
|
||||
import { useFormErrors } from "@shared/hooks/form-errors";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@ui/components/alert";
|
||||
import { Button } from "@ui/components/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@ui/components/form";
|
||||
import { Input } from "@ui/components/input";
|
||||
import {
|
||||
AlertTriangleIcon,
|
||||
ArrowRightIcon,
|
||||
EyeIcon,
|
||||
EyeOffIcon,
|
||||
MailboxIcon,
|
||||
} from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import type { SubmitHandler } from "react-hook-form";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { withQuery } from "ufo";
|
||||
import { z } from "zod";
|
||||
import {
|
||||
type OAuthProvider,
|
||||
oAuthProviders,
|
||||
} from "../constants/oauth-providers";
|
||||
import { SocialSigninButton } from "./SocialSigninButton";
|
||||
|
||||
const formSchema = z.object({
|
||||
email: z.string().email(),
|
||||
password: z.string().min(1),
|
||||
name: z.string().min(1),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export function SignupForm({ prefillEmail }: { prefillEmail?: string }) {
|
||||
const t = useTranslations();
|
||||
const router = useRouter();
|
||||
const { zodErrorMap } = useFormErrors();
|
||||
const { getAuthErrorMessage } = useAuthErrorMessages();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const invitationId = searchParams.get("invitationId");
|
||||
const email = searchParams.get("email");
|
||||
const redirectTo = searchParams.get("redirectTo");
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema, {
|
||||
errorMap: zodErrorMap,
|
||||
}),
|
||||
values: {
|
||||
name: "",
|
||||
email: prefillEmail ?? email ?? "",
|
||||
password: "",
|
||||
},
|
||||
});
|
||||
|
||||
const invitationOnlyMode = !config.auth.enableSignup && invitationId;
|
||||
|
||||
const redirectPath = invitationId
|
||||
? `/app/organization-invitation/${invitationId}`
|
||||
: (redirectTo ?? config.auth.redirectAfterSignIn);
|
||||
|
||||
const onSubmit: SubmitHandler<FormValues> = async ({
|
||||
email,
|
||||
password,
|
||||
name,
|
||||
}) => {
|
||||
try {
|
||||
const { error } = await authClient.signUp.email({
|
||||
email,
|
||||
password,
|
||||
name,
|
||||
callbackURL: redirectPath,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
if (invitationOnlyMode) {
|
||||
const { error } =
|
||||
await authClient.organization.acceptInvitation({
|
||||
invitationId,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
router.push(config.auth.redirectAfterSignIn);
|
||||
}
|
||||
} catch (e) {
|
||||
form.setError("root", {
|
||||
message: getAuthErrorMessage(
|
||||
e && typeof e === "object" && "code" in e
|
||||
? (e.code as string)
|
||||
: undefined,
|
||||
),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="font-bold text-xl md:text-2xl">
|
||||
{t("auth.signup.title")}
|
||||
</h1>
|
||||
<p className="mt-1 mb-6 text-foreground/60">
|
||||
{t("auth.signup.message")}
|
||||
</p>
|
||||
|
||||
{form.formState.isSubmitSuccessful && !invitationOnlyMode ? (
|
||||
<Alert variant="success">
|
||||
<MailboxIcon />
|
||||
<AlertTitle>
|
||||
{t("auth.signup.hints.verifyEmail")}
|
||||
</AlertTitle>
|
||||
</Alert>
|
||||
) : (
|
||||
<>
|
||||
{invitationId && (
|
||||
<OrganizationInvitationAlert className="mb-6" />
|
||||
)}
|
||||
|
||||
<Form {...form}>
|
||||
<form
|
||||
className="flex flex-col items-stretch gap-4"
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
>
|
||||
{form.formState.isSubmitted &&
|
||||
form.formState.errors.root && (
|
||||
<Alert variant="error">
|
||||
<AlertTriangleIcon />
|
||||
<AlertDescription>
|
||||
{form.formState.errors.root.message}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("auth.signup.name")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("auth.signup.email")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
autoComplete="email"
|
||||
readOnly={!!prefillEmail}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("auth.signup.password")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={
|
||||
showPassword
|
||||
? "text"
|
||||
: "password"
|
||||
}
|
||||
className="pr-10"
|
||||
{...field}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setShowPassword(
|
||||
!showPassword,
|
||||
)
|
||||
}
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-4 text-primary text-xl"
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOffIcon className="size-4" />
|
||||
) : (
|
||||
<EyeIcon className="size-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button loading={form.formState.isSubmitting}>
|
||||
{t("auth.signup.submit")}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
{config.auth.enableSignup &&
|
||||
config.auth.enableSocialLogin && (
|
||||
<>
|
||||
<div className="relative my-6 h-4">
|
||||
<hr className="relative top-2" />
|
||||
<p className="-translate-x-1/2 absolute top-0 left-1/2 mx-auto inline-block h-4 bg-card px-2 text-center font-medium text-foreground/60 text-sm leading-tight">
|
||||
{t("auth.login.continueWith")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 items-stretch gap-2 sm:grid-cols-2">
|
||||
{Object.keys(oAuthProviders).map(
|
||||
(providerId) => (
|
||||
<SocialSigninButton
|
||||
key={providerId}
|
||||
provider={
|
||||
providerId as OAuthProvider
|
||||
}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="mt-6 text-center text-sm">
|
||||
<span className="text-foreground/60">
|
||||
{t("auth.signup.alreadyHaveAccount")}{" "}
|
||||
</span>
|
||||
<Link
|
||||
href={withQuery(
|
||||
"/auth/login",
|
||||
Object.fromEntries(searchParams.entries()),
|
||||
)}
|
||||
>
|
||||
{t("auth.signup.signIn")}
|
||||
<ArrowRightIcon className="ml-1 inline size-4 align-middle" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
47
apps/web/modules/saas/auth/components/SocialSigninButton.tsx
Normal file
47
apps/web/modules/saas/auth/components/SocialSigninButton.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
"use client";
|
||||
|
||||
import { authClient } from "@repo/auth/client";
|
||||
import { config } from "@repo/config";
|
||||
import { Button } from "@ui/components/button";
|
||||
import { useQueryState } from "nuqs";
|
||||
import { parseAsString } from "nuqs";
|
||||
import { oAuthProviders } from "../constants/oauth-providers";
|
||||
|
||||
export function SocialSigninButton({
|
||||
provider,
|
||||
className,
|
||||
}: {
|
||||
provider: keyof typeof oAuthProviders;
|
||||
className?: string;
|
||||
}) {
|
||||
const [invitationId] = useQueryState("invitationId", parseAsString);
|
||||
const providerData = oAuthProviders[provider];
|
||||
|
||||
const redirectPath = invitationId
|
||||
? `/app/organization-invitation/${invitationId}`
|
||||
: config.auth.redirectAfterSignIn;
|
||||
|
||||
const onSignin = () => {
|
||||
const callbackURL = new URL(redirectPath, window.location.origin);
|
||||
authClient.signIn.social({
|
||||
provider,
|
||||
callbackURL: callbackURL.toString(),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
onClick={() => onSignin()}
|
||||
variant="light"
|
||||
type="button"
|
||||
className={className}
|
||||
>
|
||||
{providerData.icon && (
|
||||
<i className="mr-2 text-primary">
|
||||
<providerData.icon className="size-4" />
|
||||
</i>
|
||||
)}
|
||||
{providerData.name}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue