diff options
| author | MohamedBassem <me@mbassem.com> | 2024-03-10 17:59:58 +0000 |
|---|---|---|
| committer | MohamedBassem <me@mbassem.com> | 2024-03-10 17:59:58 +0000 |
| commit | d6dd76021226802adf5295b3243d6f2ae4fa5cc2 (patch) | |
| tree | 7a25423d46db9e0e224b5f58b73cec5768953b44 /packages/web/app/signin/components/CredentialsForm.tsx | |
| parent | 8ab868d3f94cc6609d278dc952432f1a244c3f84 (diff) | |
| download | karakeep-d6dd76021226802adf5295b3243d6f2ae4fa5cc2.tar.zst | |
refactor: Move all components to the top level directory
Diffstat (limited to 'packages/web/app/signin/components/CredentialsForm.tsx')
| -rw-r--r-- | packages/web/app/signin/components/CredentialsForm.tsx | 222 |
1 files changed, 0 insertions, 222 deletions
diff --git a/packages/web/app/signin/components/CredentialsForm.tsx b/packages/web/app/signin/components/CredentialsForm.tsx deleted file mode 100644 index 5296e163..00000000 --- a/packages/web/app/signin/components/CredentialsForm.tsx +++ /dev/null @@ -1,222 +0,0 @@ -"use client"; -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { useForm } from "react-hook-form"; -import { z } from "zod"; -import { - Form, - FormControl, - FormField, - FormItem, - FormLabel, - FormMessage, -} from "@/components/ui/form"; -import { Input } from "@/components/ui/input"; -import { ActionButton } from "@/components/ui/action-button"; -import { zSignUpSchema } from "@hoarder/trpc/types/users"; -import { signIn } from "next-auth/react"; -import { useState } from "react"; -import { api } from "@/lib/trpc"; -import { useRouter } from "next/navigation"; -import { TRPCClientError } from "@trpc/client"; - -const signInSchema = z.object({ - email: z.string().email(), - password: z.string(), -}); - -function SignIn() { - const [signinError, setSigninError] = useState(false); - const router = useRouter(); - const form = useForm<z.infer<typeof signInSchema>>({ - resolver: zodResolver(signInSchema), - }); - - return ( - <Form {...form}> - <form - onSubmit={form.handleSubmit(async (value) => { - const resp = await signIn("credentials", { - redirect: false, - email: value.email, - password: value.password, - }); - if (!resp || !resp?.ok) { - setSigninError(true); - return; - } - router.replace("/"); - })} - > - <div className="flex w-full flex-col space-y-2"> - {signinError && ( - <p className="w-full text-center text-red-500"> - Incorrect username or password - </p> - )} - <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> - ); - }} - /> - <ActionButton type="submit" loading={form.formState.isSubmitting}> - 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, - password: value.password, - }); - if (!resp || !resp.ok) { - setErrorMessage("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-red-500">{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() { - 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"> - <SignUp /> - </TabsContent> - </Tabs> - ); -} |
