From 30b0caf19ffa402ed72a8dd76c75ade8433dc4e3 Mon Sep 17 00:00:00 2001
From: PxlLoewe <72106766+PxlLoewe@users.noreply.github.com>
Date: Tue, 11 Mar 2025 22:49:54 -0700
Subject: [PATCH] Added Loading Button to hub auth

---
 .../app/(auth)/login/_components/Login.tsx    | 196 ++++-----
 .../(auth)/register/_components/Register.tsx  | 398 +++++++++---------
 2 files changed, 297 insertions(+), 297 deletions(-)

diff --git a/apps/hub/app/(auth)/login/_components/Login.tsx b/apps/hub/app/(auth)/login/_components/Login.tsx
index 7acc39eb..804f5299 100644
--- a/apps/hub/app/(auth)/login/_components/Login.tsx
+++ b/apps/hub/app/(auth)/login/_components/Login.tsx
@@ -1,111 +1,113 @@
 "use client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { signIn } from "next-auth/react";
+import { signIn, useSession } from "next-auth/react";
 import Link from "next/link";
 import { redirect, useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { Toaster, toast } from "react-hot-toast";
 import { z } from "zod";
+import { Button } from "../../../_components/ui/Button";
 
 export const Login = () => {
-  const [isLoading, setIsLoading] = useState(false);
-  const searchParams = useSearchParams();
-  const schema = z.object({
-    email: z.string().email(),
-    password: z.string(),
-  });
+	const [isLoading, setIsLoading] = useState(false);
+	const searchParams = useSearchParams();
+	const schema = z.object({
+		email: z.string().email(),
+		password: z.string(),
+	});
 
-  type schemaType = z.infer<typeof schema>;
+	type schemaType = z.infer<typeof schema>;
 
-  const form = useForm<schemaType>({
-    resolver: zodResolver(schema),
-  });
+	const form = useForm<schemaType>({
+		resolver: zodResolver(schema),
+	});
 
-  return (
-    <form
-      className="card-body"
-      onSubmit={form.handleSubmit(async () => {
-        setIsLoading(true);
-        const data = await signIn("credentials", {
-          redirect: false,
-          email: form.getValues("email"),
-          password: form.getValues("password"),
-        });
-        setIsLoading(false);
-        if (!data || data.error) {
-          toast.error("E-Mail / Passwort ist falsch!", {
-            style: {
-              background: "var(--color-base-100)",
-              color: "var(--color-base-content)",
-            },
-          });
-          return;
-        }
-        redirect(searchParams.get("redirect") || "/");
-      })}
-    >
-      <div>
-        <Toaster position="top-center" reverseOrder={false} />
-      </div>
-      <h1 className="text-3xl font-bold">Login</h1>
-      <span className="text-sm font-medium">
-        Noch keinen Account? Zur{" "}
-        <Link href="/register" className="link link-accent link-hover">
-          Registrierung
-        </Link>
-      </span>
-      <label className="input input-bordered flex items-center gap-2 w-full">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 16 16"
-          fill="currentColor"
-          className="h-4 w-4 opacity-70"
-        >
-          <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
-          <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
-        </svg>
-        <input
-          type="text"
-          className="grow"
-          {...form.register("email")}
-          placeholder="Email"
-        />
-      </label>
-      <p className="text-error">
-        {typeof form.formState.errors.email?.message === "string"
-          ? form.formState.errors.email.message
-          : ""}
-      </p>
-      <label className="input input-bordered flex items-center gap-2 mt-2 w-full">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 16 16"
-          fill="currentColor"
-          className="h-4 w-4 opacity-70"
-        >
-          <path
-            fillRule="evenodd"
-            d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
-            clipRule="evenodd"
-          />
-        </svg>
-        <input
-          autoComplete="current-password"
-          type="password"
-          {...form.register("password")}
-          placeholder="Passwort"
-          className="grow"
-        />
-      </label>
-      <div className="card-actions mt-6">
-        <button className="btn btn-primary btn-block" disabled={isLoading}>
-          {isLoading && (
-            <span className="loading loading-spinner loading-sm"></span>
-          )}
-          Login{isLoading && "..."}
-        </button>
-      </div>
-    </form>
-  );
+	return (
+		<form
+			className="card-body"
+			onSubmit={form.handleSubmit(async () => {
+				setIsLoading(true);
+				const data = await signIn("credentials", {
+					redirect: false,
+					email: form.getValues("email"),
+					password: form.getValues("password"),
+				});
+				setIsLoading(false);
+				if (!data || data.error) {
+					toast.error("E-Mail / Passwort ist falsch!", {
+						style: {
+							background: "var(--color-base-100)",
+							color: "var(--color-base-content)",
+						},
+					});
+					return;
+				}
+				redirect(searchParams.get("redirect") || "/");
+			})}
+		>
+			<div>
+				<Toaster position="top-center" reverseOrder={false} />
+			</div>
+			<h1 className="text-3xl font-bold">Login</h1>
+			<span className="text-sm font-medium">
+				Noch keinen Account? Zur{" "}
+				<Link href="/register" className="link link-accent link-hover">
+					Registrierung
+				</Link>
+			</span>
+			<label className="input input-bordered flex items-center gap-2 w-full">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 16 16"
+					fill="currentColor"
+					className="h-4 w-4 opacity-70"
+				>
+					<path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+					<path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+				</svg>
+				<input
+					type="text"
+					className="grow"
+					{...form.register("email")}
+					placeholder="Email"
+				/>
+			</label>
+			<p className="text-error">
+				{typeof form.formState.errors.email?.message === "string"
+					? form.formState.errors.email.message
+					: ""}
+			</p>
+			<label className="input input-bordered flex items-center gap-2 mt-2 w-full">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 16 16"
+					fill="currentColor"
+					className="h-4 w-4 opacity-70"
+				>
+					<path
+						fillRule="evenodd"
+						d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+						clipRule="evenodd"
+					/>
+				</svg>
+				<input
+					autoComplete="current-password"
+					type="password"
+					{...form.register("password")}
+					placeholder="Passwort"
+					className="grow"
+				/>
+			</label>
+			<div className="card-actions mt-6">
+				<Button
+					disabled={isLoading}
+					isLoading={isLoading}
+					className="btn btn-primary btn-block"
+				>
+					Login
+				</Button>
+			</div>
+		</form>
+	);
 };
diff --git a/apps/hub/app/(auth)/register/_components/Register.tsx b/apps/hub/app/(auth)/register/_components/Register.tsx
index 27d7721c..3aba1b7a 100644
--- a/apps/hub/app/(auth)/register/_components/Register.tsx
+++ b/apps/hub/app/(auth)/register/_components/Register.tsx
@@ -1,207 +1,205 @@
-'use client';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { register } from '../action';
-import { signIn } from 'next-auth/react';
-import Link from 'next/link';
-import { useState } from 'react';
-import clsx, { ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { register } from "../action";
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+import { useState } from "react";
+import clsx, { ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Button } from "../../../_components/ui/Button";
 
 export const Register = () => {
-  const schema = z
-    .object({
-      email: z.string().email({
-        message: 'Please enter a valid email',
-      }),
-      firstname: z.string().min(2).max(30),
-      lastname: z.string().min(2).max(30),
-      password: z.string(),
-      passwordConfirm: z.string(),
-    })
-    .superRefine(({ password, passwordConfirm }, ctx) => {
-      if (password !== passwordConfirm) {
-        ctx.addIssue({
-          code: 'custom',
-          message: 'Die Passwörter stimmen nicht überein',
-          path: ['confirmPassword'],
-        });
-      }
-    });
+	const schema = z
+		.object({
+			email: z.string().email({
+				message: "Please enter a valid email",
+			}),
+			firstname: z.string().min(2).max(30),
+			lastname: z.string().min(2).max(30),
+			password: z.string(),
+			passwordConfirm: z.string(),
+		})
+		.superRefine(({ password, passwordConfirm }, ctx) => {
+			if (password !== passwordConfirm) {
+				ctx.addIssue({
+					code: "custom",
+					message: "Die Passwörter stimmen nicht überein",
+					path: ["confirmPassword"],
+				});
+			}
+		});
 
-  type IFormInput = z.infer<typeof schema>;
+	type IFormInput = z.infer<typeof schema>;
 
-  const [isLoading, setIsLoading] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
 
-  const form = useForm<IFormInput>({
-    resolver: zodResolver(schema),
-    defaultValues: {
-      email: '',
-      password: '',
-      passwordConfirm: '',
-    },
-  });
-  console.log(form.formState.errors);
-  return (
-    <form
-      className="card-body"
-      onSubmit={form.handleSubmit(async () => {
-        setIsLoading(true);
-        const values = form.getValues();
-        const user = await register({
-          email: form.getValues('email'),
-          password: form.getValues('password'),
-          firstname: form.getValues('firstname'),
-          lastname: form.getValues('lastname'),
-        });
-        await signIn('credentials', {
-          callbackUrl: '/',
-          email: user.email,
-          password: values.password,
-        });
-        setIsLoading(false);
-      })}
-    >
-      <h1 className="text-3xl font-bold">Registrierung</h1>
-      <span className="text-sm font-medium">
-        Zurück zum{' '}
-        <Link href="/login" className="link link-accent link-hover">
-          Login
-        </Link>
-      </span>
-      <div className="mt-5 mb-2">
-        <label className="input input-bordered flex items-center gap-2 mt-2 w-full">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 16 16"
-            fill="currentColor"
-            className="h-4 w-4 opacity-70"
-          >
-            <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
-          </svg>
-          <input
-            type="text"
-            className="grow"
-            {...form.register('firstname')}
-            placeholder="Vorname"
-          />
-        </label>
-        <p className="text-error">
-          {typeof form.formState.errors.firstname?.message === 'string'
-            ? form.formState.errors.firstname.message
-            : ''}
-        </p>
-        <label className="input input-bordered flex items-center gap-2 mt-2 w-full">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 16 16"
-            fill="currentColor"
-            className="h-4 w-4 opacity-70"
-          >
-            <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
-          </svg>
-          <input
-            type="text"
-            className="grow"
-            {...form.register('lastname')}
-            placeholder="Nachname"
-          />
-        </label>
-        <p className="text-error">
-          {typeof form.formState.errors.lastname?.message === 'string'
-            ? form.formState.errors.lastname.message
-            : ''}
-        </p>
-        <div className="divider">Account</div>
-        <label className="input input-bordered flex items-center gap-2 w-full">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 16 16"
-            fill="currentColor"
-            className="h-4 w-4 opacity-70"
-          >
-            <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
-            <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
-          </svg>
-          <input
-            type="text"
-            className="grow"
-            {...form.register('email')}
-            placeholder="Email"
-          />
-        </label>
+	const form = useForm<IFormInput>({
+		resolver: zodResolver(schema),
+		defaultValues: {
+			email: "",
+			password: "",
+			passwordConfirm: "",
+		},
+	});
+	console.log(form.formState.errors);
+	return (
+		<form
+			className="card-body"
+			onSubmit={form.handleSubmit(async () => {
+				setIsLoading(true);
+				const values = form.getValues();
+				const user = await register({
+					email: form.getValues("email"),
+					password: form.getValues("password"),
+					firstname: form.getValues("firstname"),
+					lastname: form.getValues("lastname"),
+				});
+				await signIn("credentials", {
+					callbackUrl: "/",
+					email: user.email,
+					password: values.password,
+				});
+				setIsLoading(false);
+			})}
+		>
+			<h1 className="text-3xl font-bold">Registrierung</h1>
+			<span className="text-sm font-medium">
+				Zurück zum{" "}
+				<Link href="/login" className="link link-accent link-hover">
+					Login
+				</Link>
+			</span>
+			<div className="mt-5 mb-2">
+				<label className="input input-bordered flex items-center gap-2 mt-2 w-full">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						className="h-4 w-4 opacity-70"
+					>
+						<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
+					</svg>
+					<input
+						type="text"
+						className="grow"
+						{...form.register("firstname")}
+						placeholder="Vorname"
+					/>
+				</label>
+				<p className="text-error">
+					{typeof form.formState.errors.firstname?.message === "string"
+						? form.formState.errors.firstname.message
+						: ""}
+				</p>
+				<label className="input input-bordered flex items-center gap-2 mt-2 w-full">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						className="h-4 w-4 opacity-70"
+					>
+						<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
+					</svg>
+					<input
+						type="text"
+						className="grow"
+						{...form.register("lastname")}
+						placeholder="Nachname"
+					/>
+				</label>
+				<p className="text-error">
+					{typeof form.formState.errors.lastname?.message === "string"
+						? form.formState.errors.lastname.message
+						: ""}
+				</p>
+				<div className="divider">Account</div>
+				<label className="input input-bordered flex items-center gap-2 w-full">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						className="h-4 w-4 opacity-70"
+					>
+						<path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+						<path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+					</svg>
+					<input
+						type="text"
+						className="grow"
+						{...form.register("email")}
+						placeholder="Email"
+					/>
+				</label>
 
-        <p className="text-error">
-          {typeof form.formState.errors.email?.message === 'string'
-            ? form.formState.errors.email.message
-            : ''}
-        </p>
-        <label className="input input-bordered flex items-center gap-2 mt-2 w-full">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 16 16"
-            fill="currentColor"
-            className="h-4 w-4 opacity-70"
-          >
-            <path
-              fillRule="evenodd"
-              d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
-              clipRule="evenodd"
-            />
-          </svg>
-          <input
-            type="password"
-            autoComplete="new-password"
-            {...form.register('password')}
-            placeholder="Passwort"
-            className="grow"
-          />
-        </label>
-        <p className="text-error">
-          {typeof form.formState.errors.password?.message === 'string'
-            ? form.formState.errors.password.message
-            : ''}
-        </p>
-        <label className="input input-bordered flex items-center gap-2 mt-2 w-full">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 16 16"
-            fill="currentColor"
-            className="h-4 w-4 opacity-70"
-          >
-            <path
-              fillRule="evenodd"
-              d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
-              clipRule="evenodd"
-            />
-          </svg>
-          <input
-            type="password"
-            autoComplete="new-password"
-            {...form.register('passwordConfirm')}
-            placeholder="Passwort bestätigen"
-            className="grow"
-          />
-        </label>
-        <p className="text-error">
-          {typeof form.formState.errors.passwordConfirm?.message === 'string'
-            ? form.formState.errors.passwordConfirm.message
-            : ''}
-        </p>
-        <div className="card-actions mt-6">
-          <button
-            className="btn btn-primary btn-block"
-            name="registerBtn"
-            disabled={isLoading}
-          >
-            {isLoading && (
-              <span className="loading loading-spinner loading-sm"></span>
-            )}
-            Registrieren{isLoading && '...'}
-          </button>
-        </div>
-      </div>
-    </form>
-  );
+				<p className="text-error">
+					{typeof form.formState.errors.email?.message === "string"
+						? form.formState.errors.email.message
+						: ""}
+				</p>
+				<label className="input input-bordered flex items-center gap-2 mt-2 w-full">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						className="h-4 w-4 opacity-70"
+					>
+						<path
+							fillRule="evenodd"
+							d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+							clipRule="evenodd"
+						/>
+					</svg>
+					<input
+						type="password"
+						autoComplete="new-password"
+						{...form.register("password")}
+						placeholder="Passwort"
+						className="grow"
+					/>
+				</label>
+				<p className="text-error">
+					{typeof form.formState.errors.password?.message === "string"
+						? form.formState.errors.password.message
+						: ""}
+				</p>
+				<label className="input input-bordered flex items-center gap-2 mt-2 w-full">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						className="h-4 w-4 opacity-70"
+					>
+						<path
+							fillRule="evenodd"
+							d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+							clipRule="evenodd"
+						/>
+					</svg>
+					<input
+						type="password"
+						autoComplete="new-password"
+						{...form.register("passwordConfirm")}
+						placeholder="Passwort bestätigen"
+						className="grow"
+					/>
+				</label>
+				<p className="text-error">
+					{typeof form.formState.errors.passwordConfirm?.message === "string"
+						? form.formState.errors.passwordConfirm.message
+						: ""}
+				</p>
+				<div className="card-actions mt-6">
+					<Button
+						disabled={isLoading}
+						isLoading={isLoading}
+						className="btn btn-primary btn-block"
+					>
+						Registrieren
+					</Button>
+				</div>
+			</div>
+		</form>
+	);
 };