Fix som Bugs #33

apps/hub/app/(app)/events/_components/modalBtn.tsx

@@ -96,6 +96,7 @@ const ModalBtn = ({
 					eventCompleted(event, participant) && "btn-success",
 				)}
 				onClick={openModal}
+				disabled={eventCompleted(event, participant)}
 			>
 				{participant && !eventCompleted(event, participant) && (
 					<>
@@ -234,6 +235,7 @@ const ModalBtn = ({
 									router.refresh();
 									closeModal();
 								}}
+								disabled={!selectAppointmentForm.watch("eventAppointmentId")}
 							>
 								<EnterIcon /> Anmelden
 							</button>

apps/hub/app/(app)/layout.tsx

@@ -5,6 +5,7 @@ import { Toaster } from "react-hot-toast";
 import { redirect } from "next/navigation";
 import { getServerSession } from "../api/auth/[...nextauth]/auth";
 import { Error } from "_components/Error";
+import { EmailVerification } from "_components/EmailVerification";
 
 export const metadata: Metadata = {
 	title: "VAR: Hub",
@@ -47,6 +48,11 @@ export default async function RootLayout({
 
 						{/* Scrollbarer Content-Bereich */}
 						<div className="flex-grow bg-base-100 px-6 rounded-lg shadow-md ml-4 overflow-auto h-full max-w-full w-full">
+							{!session?.user.emailVerified && (
+								<div className="mb-4">
+									<EmailVerification />
+								</div>
+							)}
 							{children}
 						</div>
 					</div>

apps/hub/app/(app)/page.tsx

@@ -1,8 +1,6 @@
 import Events from "./_components/Events";
 import { Stats } from "./_components/Stats";
 import { Badges } from "./_components/Badges";
-import { getServerSession } from "api/auth/[...nextauth]/auth";
-import { EmailVerification } from "_components/EmailVerification";
 import { RecentFlights } from "(app)/_components/RecentFlights";
 
 export default async function Home({
@@ -10,12 +8,10 @@ export default async function Home({
 }: {
 	searchParams: Promise<{ stats?: "pilot" | "dispo" }>;
 }) {
-	const session = await getServerSession();
 	const { stats } = await searchParams;
 	const view = stats || "pilot";
 	return (
 		<div>
-			{!session?.user.emailVerified && <EmailVerification />}
 			<Stats stats={view} />
 			<div className="grid grid-cols-6 gap-4">
 				<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">

apps/hub/app/(app)/settings/_components/forms.tsx

@@ -289,7 +289,7 @@ export const PasswordForm = (): React.JSX.Element => {
 					</span>
 					<input
 						{...form.register("password")}
-						type="text"
+						type="password"
 						className="input input-bordered w-full"
 						defaultValue={""}
 					/>
@@ -303,7 +303,7 @@ export const PasswordForm = (): React.JSX.Element => {
 					</span>
 					<input
 						{...form.register("newPassword")}
-						type="text"
+						type="password"
 						className="input input-bordered w-full"
 						defaultValue={""}
 					/>
@@ -317,7 +317,7 @@ export const PasswordForm = (): React.JSX.Element => {
 					</span>
 					<input
 						{...form.register("newPasswordConfirm")}
-						type="text"
+						type="password"
 						className="input input-bordered w-full"
 						defaultValue={""}
 					/>

apps/hub/app/_components/ui/DateInput.tsx

@@ -1,11 +1,5 @@
 import DatePicker, { DatePickerProps, registerLocale } from "react-datepicker";
-import {
-	Control,
-	Controller,
-	FieldValues,
-	Path,
-	PathValue,
-} from "react-hook-form";
+import { Control, Controller, FieldValues, Path } from "react-hook-form";
 import { de } from "date-fns/locale";
 registerLocale("de", de);
 
@@ -26,6 +20,7 @@ export const DateInput = <T extends FieldValues>({
 			name={name}
 			render={({ field }) => (
 				<DatePicker
+					className="input input-bordered mt-2"
 					locale={"de"}
 					onChange={(date) => field.onChange(date)}
 					selected={field.value}

apps/hub/app/_components/ui/PageAlert.tsx

@@ -15,19 +15,19 @@ export const WarningAlert = async () => {
 	let msgColor;
 	switch (mainMessage?.color) {
 		case "WARNING":
-			msgColor = "alert alert-warning ml-3";
+			msgColor = "alert alert-soft alert-warning ml-3 py-2";
 			break;
 		case "INFO":
-			msgColor = "alert alert-info ml-3";
+			msgColor = "alert alert-soft alert-info ml-3 py-2";
 			break;
 		case "SUCCESS":
-			msgColor = "alert alert-success ml-3";
+			msgColor = "alert alert-soft alert-success ml-3 py-2";
 			break;
 		case "ERROR":
-			msgColor = "alert alert-error ml-3";
+			msgColor = "alert alert-error ml-3 py-2";
 			break;
 		default:
-			msgColor = "alert ml-3";
+			msgColor = "alert alert-soft ml-3 py-2";
 	}
 
 	if (mainMessage?.message == "" || !mainMessage) {
@@ -36,7 +36,7 @@ export const WarningAlert = async () => {
 		return (
 			<div role="alert" className={msgColor}>
 				<MessageCircleWarning />
-				<span className="font-bold">{mainMessage?.message}</span>
+				<span className="font-bold m-0">{mainMessage?.message}</span>
 			</div>
 		);
 	}

apps/hub/app/globals.css

@@ -19,6 +19,14 @@
 	}
 }
 
+:root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
+	scrollbar-gutter: unset;
+}
+
+.react-datepicker-popper {
+	z-index: 9999 !important;
+}
+
 :root {
 	--background: #ffffff;
 	--foreground: #171717;