aboutsummaryrefslogtreecommitdiffstats
path: root/apps
diff options
context:
space:
mode:
Diffstat (limited to 'apps')
-rw-r--r--apps/web/app/signin/page.tsx11
-rw-r--r--apps/web/app/signup/page.tsx22
-rw-r--r--apps/web/components/signin/CredentialsForm.tsx295
-rw-r--r--apps/web/components/signin/SignInForm.tsx74
-rw-r--r--apps/web/components/signin/SignInProviderButton.tsx1
-rw-r--r--apps/web/components/signup/SignUpForm.tsx228
6 files changed, 393 insertions, 238 deletions
diff --git a/apps/web/app/signin/page.tsx b/apps/web/app/signin/page.tsx
index 372429e8..a784dd7e 100644
--- a/apps/web/app/signin/page.tsx
+++ b/apps/web/app/signin/page.tsx
@@ -10,12 +10,11 @@ export default async function SignInPage() {
}
return (
- <div className="grid min-h-screen grid-rows-6 justify-center">
- <span className="row-span-1" />
- <div className="row-span-1 flex w-96 items-center justify-center space-x-2">
- <KarakeepLogo height={100} />
- </div>
- <div className="row-span-4 px-3">
+ <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+ <div className="w-full max-w-md space-y-8">
+ <div className="flex items-center justify-center">
+ <KarakeepLogo height={80} />
+ </div>
<SignInForm />
</div>
</div>
diff --git a/apps/web/app/signup/page.tsx b/apps/web/app/signup/page.tsx
new file mode 100644
index 00000000..841c07a8
--- /dev/null
+++ b/apps/web/app/signup/page.tsx
@@ -0,0 +1,22 @@
+import { redirect } from "next/dist/client/components/navigation";
+import KarakeepLogo from "@/components/KarakeepIcon";
+import SignUpForm from "@/components/signup/SignUpForm";
+import { getServerAuthSession } from "@/server/auth";
+
+export default async function SignUpPage() {
+ const session = await getServerAuthSession();
+ if (session) {
+ redirect("/");
+ }
+
+ return (
+ <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+ <div className="w-full max-w-md space-y-8">
+ <div className="flex items-center justify-center">
+ <KarakeepLogo height={80} />
+ </div>
+ <SignUpForm />
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/components/signin/CredentialsForm.tsx b/apps/web/components/signin/CredentialsForm.tsx
index 05aa1cef..1ad240a7 100644
--- a/apps/web/components/signin/CredentialsForm.tsx
+++ b/apps/web/components/signin/CredentialsForm.tsx
@@ -1,8 +1,10 @@
"use client";
import { useState } from "react";
+import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { ActionButton } from "@/components/ui/action-button";
+import { Alert, AlertTitle } from "@/components/ui/alert";
import {
Form,
FormControl,
@@ -12,17 +14,13 @@ import {
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useClientConfig } from "@/lib/clientConfig";
-import { api } from "@/lib/trpc";
import { zodResolver } from "@hookform/resolvers/zod";
-import { TRPCClientError } from "@trpc/client";
+import { AlertCircle, Lock } from "lucide-react";
import { signIn } from "next-auth/react";
import { useForm } from "react-hook-form";
import { z } from "zod";
-import { zSignUpSchema } from "@karakeep/shared/types/users";
-
const signInSchema = z.object({
email: z.string().email(),
password: z.string(),
@@ -33,7 +31,7 @@ const OAUTH_FAILED = "OAuth login failed: ";
const VERIFY_EMAIL_ERROR = "Please verify your email address before signing in";
-function SignIn() {
+export default function CredentialsForm() {
const [signinError, setSigninError] = useState("");
const router = useRouter();
const searchParams = useSearchParams();
@@ -50,229 +48,114 @@ function SignIn() {
if (clientConfig.auth.disablePasswordAuth) {
return (
- <>
+ <div className="space-y-4">
{signinError && (
- <p className="w-full text-center text-destructive">{signinError}</p>
+ <Alert variant="destructive">
+ <AlertCircle className="h-4 w-4" />
+ <AlertTitle>{signinError}</AlertTitle>
+ </Alert>
)}
- <p className="text-center">
- Password authentication is currently disabled.
- </p>
- </>
+ <Alert>
+ <Lock className="h-4 w-4" />
+ <AlertTitle>
+ Password authentication is currently disabled.
+ </AlertTitle>
+ </Alert>
+ </div>
);
}
return (
- <Form {...form}>
- <form
- onSubmit={form.handleSubmit(async (value) => {
- const resp = await signIn("credentials", {
- redirect: false,
- email: value.email.trim(),
- password: value.password,
- });
- if (!resp || !resp?.ok || resp.error) {
- if (resp?.error === "CredentialsSignin") {
- setSigninError(SIGNIN_FAILED);
- } else if (resp?.error === VERIFY_EMAIL_ERROR) {
- router.replace(
- `/check-email?email=${encodeURIComponent(value.email.trim())}`,
- );
- } else {
- setSigninError(resp?.error ?? SIGNIN_FAILED);
+ <div className="space-y-6">
+ <Form {...form}>
+ <form
+ onSubmit={form.handleSubmit(async (value) => {
+ const resp = await signIn("credentials", {
+ redirect: false,
+ email: value.email.trim(),
+ password: value.password,
+ });
+ if (!resp || !resp?.ok || resp.error) {
+ if (resp?.error === "CredentialsSignin") {
+ setSigninError(SIGNIN_FAILED);
+ } else if (resp?.error === VERIFY_EMAIL_ERROR) {
+ router.replace(
+ `/check-email?email=${encodeURIComponent(value.email.trim())}`,
+ );
+ } else {
+ setSigninError(resp?.error ?? SIGNIN_FAILED);
+ }
+ return;
}
- return;
- }
- router.replace("/");
- })}
- >
- <div className="flex w-full flex-col space-y-2">
+ router.replace("/");
+ })}
+ className="space-y-4"
+ >
{signinError && (
- <p className="w-full text-center text-destructive">{signinError}</p>
+ <Alert variant="destructive">
+ <AlertCircle className="h-4 w-4" />
+ <AlertTitle>{signinError}</AlertTitle>
+ </Alert>
)}
+
<FormField
control={form.control}
name="email"
- render={({ field }) => {
- return (
- <FormItem>
- <FormLabel>Email</FormLabel>
- <FormControl>
- <Input type="text" placeholder="Email" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- );
- }}
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Email</FormLabel>
+ <FormControl>
+ <Input
+ type="email"
+ placeholder="Enter your email"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
/>
+
<FormField
control={form.control}
name="password"
- render={({ field }) => {
- return (
- <FormItem>
- <FormLabel>Password</FormLabel>
- <FormControl>
- <Input type="password" placeholder="Password" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- );
- }}
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Password</FormLabel>
+ <FormControl>
+ <Input
+ type="password"
+ placeholder="Enter your password"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
/>
+
<ActionButton
ignoreDemoMode
type="submit"
loading={form.formState.isSubmitting}
+ className="w-full"
>
Sign In
</ActionButton>
- </div>
- </form>
- </Form>
- );
-}
-
-function SignUp() {
- const form = useForm<z.infer<typeof zSignUpSchema>>({
- resolver: zodResolver(zSignUpSchema),
- });
- const [errorMessage, setErrorMessage] = useState("");
-
- const router = useRouter();
-
- const createUserMutation = api.users.create.useMutation();
-
- return (
- <Form {...form}>
- <form
- onSubmit={form.handleSubmit(async (value) => {
- try {
- await createUserMutation.mutateAsync(value);
- } catch (e) {
- if (e instanceof TRPCClientError) {
- setErrorMessage(e.message);
- }
- return;
- }
- const resp = await signIn("credentials", {
- redirect: false,
- email: value.email.trim(),
- password: value.password,
- });
- if (!resp || !resp.ok || resp.error) {
- if (resp?.error === VERIFY_EMAIL_ERROR) {
- router.replace(
- `/check-email?email=${encodeURIComponent(value.email.trim())}`,
- );
- } else {
- setErrorMessage(
- resp?.error ?? "Hit an unexpected error while signing in",
- );
- }
- return;
- }
- router.replace("/");
- })}
- >
- <div className="flex w-full flex-col space-y-2">
- {errorMessage && (
- <p className="w-full text-center text-destructive">
- {errorMessage}
- </p>
- )}
- <FormField
- control={form.control}
- name="name"
- render={({ field }) => {
- return (
- <FormItem>
- <FormLabel>Name</FormLabel>
- <FormControl>
- <Input type="text" placeholder="Name" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- );
- }}
- />
- <FormField
- control={form.control}
- name="email"
- render={({ field }) => {
- return (
- <FormItem>
- <FormLabel>Email</FormLabel>
- <FormControl>
- <Input type="text" placeholder="Email" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- );
- }}
- />
- <FormField
- control={form.control}
- name="password"
- render={({ field }) => {
- return (
- <FormItem>
- <FormLabel>Password</FormLabel>
- <FormControl>
- <Input type="password" placeholder="Password" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- );
- }}
- />
- <FormField
- control={form.control}
- name="confirmPassword"
- render={({ field }) => {
- return (
- <FormItem>
- <FormLabel>Confirm Password</FormLabel>
- <FormControl>
- <Input
- type="password"
- placeholder="Confirm Password"
- {...field}
- />
- </FormControl>
- <FormMessage />
- </FormItem>
- );
- }}
- />
- <ActionButton type="submit" loading={form.formState.isSubmitting}>
- Sign Up
- </ActionButton>
- </div>
- </form>
- </Form>
- );
-}
-
-export default function CredentialsForm() {
- const clientConfig = useClientConfig();
-
- return (
- <Tabs defaultValue="signin" className="w-full">
- <TabsList className="grid w-full grid-cols-2">
- <TabsTrigger value="signin">Sign In</TabsTrigger>
- <TabsTrigger value="signup">Sign Up</TabsTrigger>
- </TabsList>
- <TabsContent value="signin">
- <SignIn />
- </TabsContent>
- <TabsContent value="signup">
- {clientConfig.auth.disableSignups ||
- clientConfig.auth.disablePasswordAuth ? (
- <p className="text-center">Signups are currently disabled.</p>
- ) : (
- <SignUp />
- )}
- </TabsContent>
- </Tabs>
+ </form>
+ </Form>
+
+ <div className="text-center">
+ <p className="text-sm text-gray-600">
+ Don&apos;t have an account?{" "}
+ <Link
+ href="/signup"
+ className="font-medium text-blue-600 hover:text-blue-500"
+ >
+ Sign up
+ </Link>
+ </p>
+ </div>
+ </div>
);
}
diff --git a/apps/web/components/signin/SignInForm.tsx b/apps/web/components/signin/SignInForm.tsx
index ca8f3137..8ad39f8f 100644
--- a/apps/web/components/signin/SignInForm.tsx
+++ b/apps/web/components/signin/SignInForm.tsx
@@ -1,4 +1,13 @@
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
import { authOptions } from "@/server/auth";
+import { Info } from "lucide-react";
import serverConfig from "@karakeep/shared/config";
@@ -16,34 +25,47 @@ export default async function SignInForm() {
}
return (
- <div className="flex flex-col items-center space-y-2">
- {serverConfig.demoMode && (
- <div className="mb-1 w-full items-start space-y-1 rounded bg-accent p-3">
- <p className="text-center font-bold">Demo Mode</p>
- <p>Email: {serverConfig.demoMode.email} </p>
- <p>Password: {serverConfig.demoMode.password} </p>
- </div>
- )}
- <CredentialsForm />
+ <div className="w-full">
+ <Card className="w-full">
+ <CardHeader className="text-center">
+ <CardTitle className="text-2xl font-bold">Welcome Back</CardTitle>
+ <CardDescription>Sign in to your Karakeep account</CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-6">
+ {serverConfig.demoMode && (
+ <Alert>
+ <Info className="h-4 w-4" />
+ <AlertDescription>
+ <div className="space-y-1">
+ <p className="font-semibold">Demo Mode</p>
+ <p>Email: {serverConfig.demoMode.email}</p>
+ <p>Password: {serverConfig.demoMode.password}</p>
+ </div>
+ </AlertDescription>
+ </Alert>
+ )}
- {providerValues && providerValues.length > 0 && (
- <>
- <div className="flex w-full items-center">
- <div className="flex-1 grow border-t-2 border-gray-200"></div>
- <span className="bg-white px-3 text-gray-500">Or</span>
- <div className="flex-1 grow border-t-2 border-gray-200"></div>
- </div>
- <div className="space-y-2">
- {providerValues.map((provider) => (
- <div key={provider.id}>
- <SignInProviderButton
- provider={{ id: provider.id, name: provider.name }}
- />
+ <CredentialsForm />
+
+ {providerValues && providerValues.length > 0 && (
+ <>
+ <div className="flex w-full items-center">
+ <div className="flex-1 grow border-t border-gray-200"></div>
+ <span className="bg-white px-3 text-sm text-gray-500">Or</span>
+ <div className="flex-1 grow border-t border-gray-200"></div>
+ </div>
+ <div className="space-y-2">
+ {providerValues.map((provider) => (
+ <SignInProviderButton
+ key={provider.id}
+ provider={{ id: provider.id, name: provider.name }}
+ />
+ ))}
</div>
- ))}
- </div>
- </>
- )}
+ </>
+ )}
+ </CardContent>
+ </Card>
</div>
);
}
diff --git a/apps/web/components/signin/SignInProviderButton.tsx b/apps/web/components/signin/SignInProviderButton.tsx
index e866c878..edb411e6 100644
--- a/apps/web/components/signin/SignInProviderButton.tsx
+++ b/apps/web/components/signin/SignInProviderButton.tsx
@@ -18,6 +18,7 @@ export default function SignInProviderButton({
callbackUrl: "/",
})
}
+ className="w-full"
>
Sign in with {provider.name}
</Button>
diff --git a/apps/web/components/signup/SignUpForm.tsx b/apps/web/components/signup/SignUpForm.tsx
new file mode 100644
index 00000000..85346f98
--- /dev/null
+++ b/apps/web/components/signup/SignUpForm.tsx
@@ -0,0 +1,228 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { ActionButton } from "@/components/ui/action-button";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useClientConfig } from "@/lib/clientConfig";
+import { api } from "@/lib/trpc";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { TRPCClientError } from "@trpc/client";
+import { AlertCircle, UserX } from "lucide-react";
+import { signIn } from "next-auth/react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { zSignUpSchema } from "@karakeep/shared/types/users";
+
+const VERIFY_EMAIL_ERROR = "Please verify your email address before signing in";
+
+export default function SignUpForm() {
+ const form = useForm<z.infer<typeof zSignUpSchema>>({
+ resolver: zodResolver(zSignUpSchema),
+ });
+ const [errorMessage, setErrorMessage] = useState("");
+ const router = useRouter();
+ const clientConfig = useClientConfig();
+
+ const createUserMutation = api.users.create.useMutation();
+
+ if (
+ clientConfig.auth.disableSignups ||
+ clientConfig.auth.disablePasswordAuth
+ ) {
+ return (
+ <Card className="w-full">
+ <CardHeader className="text-center">
+ <CardTitle className="text-2xl font-bold">
+ Sign Up Unavailable
+ </CardTitle>
+ <CardDescription>
+ Account registration is currently disabled
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-6">
+ <div className="space-y-4">
+ <Alert>
+ <UserX className="h-4 w-4" />
+ <AlertDescription>
+ Signups are currently disabled. Please contact an administrator
+ for access.
+ </AlertDescription>
+ </Alert>
+ <Button asChild className="w-full">
+ <Link href="/signin">Back to Sign In</Link>
+ </Button>
+ </div>
+ </CardContent>
+ </Card>
+ );
+ }
+
+ return (
+ <Card className="w-full">
+ <CardHeader className="text-center">
+ <CardTitle className="text-2xl font-bold">
+ Create Your Account
+ </CardTitle>
+ <CardDescription>
+ Join Karakeep to start organizing your bookmarks
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="space-y-6">
+ <Form {...form}>
+ <form
+ onSubmit={form.handleSubmit(async (value) => {
+ try {
+ await createUserMutation.mutateAsync(value);
+ } catch (e) {
+ if (e instanceof TRPCClientError) {
+ setErrorMessage(e.message);
+ }
+ return;
+ }
+ const resp = await signIn("credentials", {
+ redirect: false,
+ email: value.email.trim(),
+ password: value.password,
+ });
+ if (!resp || !resp.ok || resp.error) {
+ if (resp?.error === VERIFY_EMAIL_ERROR) {
+ router.replace(
+ `/check-email?email=${encodeURIComponent(value.email.trim())}`,
+ );
+ } else {
+ setErrorMessage(
+ resp?.error ?? "Hit an unexpected error while signing in",
+ );
+ }
+ return;
+ }
+ router.replace("/");
+ })}
+ className="space-y-4"
+ >
+ {errorMessage && (
+ <Alert variant="destructive">
+ <AlertCircle className="h-4 w-4" />
+ <AlertDescription>{errorMessage}</AlertDescription>
+ </Alert>
+ )}
+
+ <FormField
+ control={form.control}
+ name="name"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Full Name</FormLabel>
+ <FormControl>
+ <Input
+ type="text"
+ placeholder="Enter your full name"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="email"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Email</FormLabel>
+ <FormControl>
+ <Input
+ type="email"
+ placeholder="Enter your email"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="password"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Password</FormLabel>
+ <FormControl>
+ <Input
+ type="password"
+ placeholder="Create a password"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="confirmPassword"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Confirm Password</FormLabel>
+ <FormControl>
+ <Input
+ type="password"
+ placeholder="Confirm your password"
+ {...field}
+ />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <ActionButton
+ type="submit"
+ loading={
+ form.formState.isSubmitting || createUserMutation.isPending
+ }
+ className="w-full"
+ >
+ Create Account
+ </ActionButton>
+ </form>
+ </Form>
+
+ <div className="text-center">
+ <p className="text-sm text-gray-600">
+ Already have an account?{" "}
+ <Link
+ href="/signin"
+ className="font-medium text-blue-600 hover:text-blue-500"
+ >
+ Sign in
+ </Link>
+ </p>
+ </div>
+ </CardContent>
+ </Card>
+ );
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-29 15:15:32 +0000