From d6dd76021226802adf5295b3243d6f2ae4fa5cc2 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sun, 10 Mar 2024 17:59:58 +0000
Subject: refactor: Move all components to the top level directory

---
 .../web/app/signin/components/CredentialsForm.tsx  | 222 ---------------------
 packages/web/app/signin/components/SignInForm.tsx  |  37 ----
 .../app/signin/components/SignInProviderButton.tsx |  21 --
 3 files changed, 280 deletions(-)
 delete mode 100644 packages/web/app/signin/components/CredentialsForm.tsx
 delete mode 100644 packages/web/app/signin/components/SignInForm.tsx
 delete mode 100644 packages/web/app/signin/components/SignInProviderButton.tsx

(limited to 'packages/web/app/signin/components')

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>
-  );
-}
diff --git a/packages/web/app/signin/components/SignInForm.tsx b/packages/web/app/signin/components/SignInForm.tsx
deleted file mode 100644
index 7c8f8936..00000000
--- a/packages/web/app/signin/components/SignInForm.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { getProviders } from "next-auth/react";
-import SignInProviderButton from "./SignInProviderButton";
-import CredentialsForm from "./CredentialsForm";
-
-export default async function SignInForm() {
-  const providers = await getProviders();
-  let providerValues;
-  if (providers) {
-    providerValues = Object.values(providers).filter(
-      // Credentials are handled manually by the sign in form
-      (p) => p.id != "credentials",
-    );
-  }
-
-  return (
-    <div className="flex flex-col items-center space-y-2">
-      <CredentialsForm />
-
-      {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={provider} />
-              </div>
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/packages/web/app/signin/components/SignInProviderButton.tsx b/packages/web/app/signin/components/SignInProviderButton.tsx
deleted file mode 100644
index 0831236c..00000000
--- a/packages/web/app/signin/components/SignInProviderButton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-"use client";
-import { Button } from "@/components/ui/button";
-import { ClientSafeProvider, signIn } from "next-auth/react";
-
-export default function SignInProviderButton({
-  provider,
-}: {
-  provider: ClientSafeProvider;
-}) {
-  return (
-    <Button
-      onClick={() =>
-        signIn(provider.id, {
-          callbackUrl: "/",
-        })
-      }
-    >
-      Sign in with {provider.name}
-    </Button>
-  );
-}
-- 
cgit v1.2.3-70-g09d2