aboutsummaryrefslogtreecommitdiffstats
path: root/packages/web/app/signin/components/CredentialsForm.tsx
diff options
context:
space:
mode:
authorMohamedBassem <me@mbassem.com>2024-03-10 17:59:58 +0000
committerMohamedBassem <me@mbassem.com>2024-03-10 17:59:58 +0000
commitd6dd76021226802adf5295b3243d6f2ae4fa5cc2 (patch)
tree7a25423d46db9e0e224b5f58b73cec5768953b44 /packages/web/app/signin/components/CredentialsForm.tsx
parent8ab868d3f94cc6609d278dc952432f1a244c3f84 (diff)
downloadkarakeep-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.tsx222
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>
- );
-}