login login basics

apps/web/components/signup.tsx

@@ -0,0 +1,132 @@
+import { signIn } from "next-auth/react";
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
+
+import Logo from "./logo";
+
+type FormValues = {
+  username: string;
+  email: string;
+  password: string;
+  passwordcheck: string;
+  apiError: string;
+};
+
+export default function Signup() {
+  const methods = useForm<FormValues>({});
+  const {
+    register,
+    formState: { errors, isSubmitting },
+  } = methods;
+
+  const handleErrors = async (resp: Response) => {
+    if (!resp.ok) {
+      const err = await resp.json();
+      throw new Error(err.message);
+    }
+  };
+
+  const signUp: SubmitHandler<FormValues> = async (data) => {
+    await fetch("/api/auth/signup", {
+      body: JSON.stringify({
+        ...data,
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    })
+      .then(handleErrors)
+      .then(async () => {
+        await signIn<"credentials">("credentials", {
+          ...data,
+          callbackUrl: "http://localhost:3000/dashboard",
+        });
+      })
+      .catch((err) => {
+        methods.setError("apiError", { message: err.message });
+      });
+  };
+
+  return (
+    <>
+      <div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div className="w-full max-w-md space-y-8">
+          <div>
+            <Logo className="mx-auto h-12 w-auto"></Logo>
+            <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+              Create a shiny, new <br></br>Documenso Account{" "}
+              <svg
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="rgb(17 24 39 / var(--tw-text-opacity))"
+                className="w-8 h-8 inline mb-1"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
+                />
+              </svg>
+            </h2>
+            <p className="mt-2 text-center text-sm text-gray-600">
+              Create your account and start using state<br></br> of the art
+              document signing for free.
+            </p>
+          </div>
+          <FormProvider {...methods}>
+            <form
+              onSubmit={methods.handleSubmit(signUp)}
+              className="mt-8 space-y-6"
+            >
+              <input type="hidden" name="remember" defaultValue="true" />
+              <div className="-space-y-px rounded-md shadow-sm">
+                <div>
+                  <label htmlFor="email-address" className="sr-only">
+                    Email
+                  </label>
+                  <input
+                    {...register("email")}
+                    id="email-address"
+                    name="email"
+                    type="email"
+                    autoComplete="email"
+                    required
+                    className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                    placeholder="Email"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="password" className="sr-only">
+                    Password
+                  </label>
+                  <input
+                    {...register("password")}
+                    id="password"
+                    name="password"
+                    type="password"
+                    autoComplete="current-password"
+                    required
+                    className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                    placeholder="Password"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <button
+                  type="submit"
+                  value="submit"
+                  className="group relative flex w-full justify-center rounded-md border border-transparent bg-neon py-2 px-4 text-sm font-medium text-white hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                >
+                  <span className="absolute inset-y-0 left-0 flex items-center pl-3"></span>
+                  Create Account
+                </button>
+              </div>
+            </form>
+          </FormProvider>
+        </div>
+      </div>
+    </>
+  );
+}