Added Loading Button to hub auth

apps/hub/app/(auth)/login/_components/Login.tsx

@@ -1,12 +1,13 @@
 "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);
@@ -99,12 +100,13 @@ export const Login = () => {
 				/>
 			</label>
 			<div className="card-actions mt-6">
-        <button className="btn btn-primary btn-block" disabled={isLoading}>
+				<Button
-          {isLoading && (
+					disabled={isLoading}
-            <span className="loading loading-spinner loading-sm"></span>
+					isLoading={isLoading}
-          )}
+					className="btn btn-primary btn-block"
-          Login{isLoading && "..."}
+				>
-        </button>
+					Login
+				</Button>
 			</div>
 		</form>
 	);

apps/hub/app/(auth)/register/_components/Register.tsx

@@ -1,19 +1,20 @@
-'use client';
+"use client";
-import { zodResolver } from '@hookform/resolvers/zod';
+import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from 'react-hook-form';
+import { useForm } from "react-hook-form";
-import { z } from 'zod';
+import { z } from "zod";
-import { register } from '../action';
+import { register } from "../action";
-import { signIn } from 'next-auth/react';
+import { signIn } from "next-auth/react";
-import Link from 'next/link';
+import Link from "next/link";
-import { useState } from 'react';
+import { useState } from "react";
-import clsx, { ClassValue } from 'clsx';
+import clsx, { ClassValue } from "clsx";
-import { twMerge } from 'tailwind-merge';
+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',
+				message: "Please enter a valid email",
 			}),
 			firstname: z.string().min(2).max(30),
 			lastname: z.string().min(2).max(30),
@@ -23,9 +24,9 @@ export const Register = () => {
 		.superRefine(({ password, passwordConfirm }, ctx) => {
 			if (password !== passwordConfirm) {
 				ctx.addIssue({
-          code: 'custom',
+					code: "custom",
-          message: 'Die Passwörter stimmen nicht überein',
+					message: "Die Passwörter stimmen nicht überein",
-          path: ['confirmPassword'],
+					path: ["confirmPassword"],
 				});
 			}
 		});
@@ -37,9 +38,9 @@ export const Register = () => {
 	const form = useForm<IFormInput>({
 		resolver: zodResolver(schema),
 		defaultValues: {
-      email: '',
+			email: "",
-      password: '',
+			password: "",
-      passwordConfirm: '',
+			passwordConfirm: "",
 		},
 	});
 	console.log(form.formState.errors);
@@ -50,13 +51,13 @@ export const Register = () => {
 				setIsLoading(true);
 				const values = form.getValues();
 				const user = await register({
-          email: form.getValues('email'),
+					email: form.getValues("email"),
-          password: form.getValues('password'),
+					password: form.getValues("password"),
-          firstname: form.getValues('firstname'),
+					firstname: form.getValues("firstname"),
-          lastname: form.getValues('lastname'),
+					lastname: form.getValues("lastname"),
 				});
-        await signIn('credentials', {
+				await signIn("credentials", {
-          callbackUrl: '/',
+					callbackUrl: "/",
 					email: user.email,
 					password: values.password,
 				});
@@ -65,7 +66,7 @@ export const Register = () => {
 		>
 			<h1 className="text-3xl font-bold">Registrierung</h1>
 			<span className="text-sm font-medium">
-        Zurück zum{' '}
+				Zurück zum{" "}
 				<Link href="/login" className="link link-accent link-hover">
 					Login
 				</Link>
@@ -83,14 +84,14 @@ export const Register = () => {
 					<input
 						type="text"
 						className="grow"
-            {...form.register('firstname')}
+						{...form.register("firstname")}
 						placeholder="Vorname"
 					/>
 				</label>
 				<p className="text-error">
-          {typeof form.formState.errors.firstname?.message === 'string'
+					{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
@@ -104,14 +105,14 @@ export const Register = () => {
 					<input
 						type="text"
 						className="grow"
-            {...form.register('lastname')}
+						{...form.register("lastname")}
 						placeholder="Nachname"
 					/>
 				</label>
 				<p className="text-error">
-          {typeof form.formState.errors.lastname?.message === 'string'
+					{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">
@@ -127,15 +128,15 @@ export const Register = () => {
 					<input
 						type="text"
 						className="grow"
-            {...form.register('email')}
+						{...form.register("email")}
 						placeholder="Email"
 					/>
 				</label>
 
 				<p className="text-error">
-          {typeof form.formState.errors.email?.message === 'string'
+					{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
@@ -153,15 +154,15 @@ export const Register = () => {
 					<input
 						type="password"
 						autoComplete="new-password"
-            {...form.register('password')}
+						{...form.register("password")}
 						placeholder="Passwort"
 						className="grow"
 					/>
 				</label>
 				<p className="text-error">
-          {typeof form.formState.errors.password?.message === 'string'
+					{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
@@ -179,27 +180,24 @@ export const Register = () => {
 					<input
 						type="password"
 						autoComplete="new-password"
-            {...form.register('passwordConfirm')}
+						{...form.register("passwordConfirm")}
 						placeholder="Passwort bestätigen"
 						className="grow"
 					/>
 				</label>
 				<p className="text-error">
-          {typeof form.formState.errors.passwordConfirm?.message === 'string'
+					{typeof form.formState.errors.passwordConfirm?.message === "string"
 						? form.formState.errors.passwordConfirm.message
-            : ''}
+						: ""}
 				</p>
 				<div className="card-actions mt-6">
-          <button
+					<Button
-            className="btn btn-primary btn-block"
-            name="registerBtn"
 						disabled={isLoading}
+						isLoading={isLoading}
+						className="btn btn-primary btn-block"
 					>
-            {isLoading && (
+						Registrieren
-              <span className="loading loading-spinner loading-sm"></span>
+					</Button>
-            )}
-            Registrieren{isLoading && '...'}
-          </button>
 				</div>
 			</div>
 		</form>