From ed8487e0a94baf5e17a989c950d36101e0120c05 Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <bernt.christian.egeland@gmail.com>
Date: Mon, 2 Sep 2024 17:23:56 +0000
Subject: [PATCH] tooltip

---
 src/components/elements/inputField.tsx    | 64 +++++++++++++++++++++--
 src/pages/user-settings/account/index.tsx | 10 ++--
 src/server/callbacks/jwt.ts               | 13 +++--
 3 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/src/components/elements/inputField.tsx b/src/components/elements/inputField.tsx
index d61e5fc2..8fa21993 100644
--- a/src/components/elements/inputField.tsx
+++ b/src/components/elements/inputField.tsx
@@ -51,6 +51,12 @@ interface FormProps {
 		color: string;
 		onClick?: () => void;
 	};
+	toolTip?: {
+		text: string;
+		className?: string;
+		isVerified?: boolean;
+		onClick?: () => void;
+	};
 }
 
 const InputField = ({
@@ -63,6 +69,7 @@ const InputField = ({
 	submitHandler,
 	badge,
 	headerBadge,
+	toolTip,
 	isLoading,
 	size = "md",
 	buttonClassName,
@@ -163,11 +170,11 @@ const InputField = ({
 
 		return (
 			<span
-				className={`badge badge-outline badge-${badgeProps.color} ml-2 ${
+				className={`badge badge-outline badge-${badgeProps.color} sm:ml-2 ${
 					badgeProps.onClick ? "cursor-pointer" : ""
 				}`}
 				onClick={(e) => {
-					e.stopPropagation(); // Prevent event from bubbling up
+					e.stopPropagation();
 					if (badgeProps.onClick) {
 						badgeProps.onClick();
 					}
@@ -177,6 +184,56 @@ const InputField = ({
 			</span>
 		);
 	};
+
+	const renderToolTip = (toolTip: FormProps["toolTip"]) => {
+		if (!toolTip) return null;
+
+		return (
+			<div
+				className={cn("tooltip tooltip-right", toolTip.className)}
+				data-tip={toolTip.text}
+			>
+				<button
+					className="btn btn-circle btn-ghost btn-xs"
+					onClick={(e) => {
+						e.stopPropagation();
+						if (toolTip.onClick) {
+							toolTip.onClick();
+						}
+					}}
+				>
+					{toolTip.isVerified ? (
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							className="text-green-500 h-4 w-4"
+						>
+							<path
+								fillRule="evenodd"
+								d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+								clipRule="evenodd"
+							/>
+						</svg>
+					) : (
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							className="w-4 h-4 stroke-current text-primary"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth="2"
+								d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							></path>
+						</svg>
+					)}
+				</button>
+			</div>
+		);
+	};
 	return (
 		<>
 			{!showInputs ? (
@@ -191,9 +248,10 @@ const InputField = ({
 								<p className="m-0 p-0 text-xs text-gray-500">{description}</p>
 							) : null}
 						</div>
-						<div className="flex items-center text-gray-500">
+						<div className="sm:flex items-center text-gray-500">
 							<span>{placeholder ?? fields[0].placeholder}</span>
 							{renderBadge(badge)}
+							{renderToolTip(toolTip)}
 						</div>
 					</div>
 					<div>
diff --git a/src/pages/user-settings/account/index.tsx b/src/pages/user-settings/account/index.tsx
index 4c08237c..8e9ed524 100644
--- a/src/pages/user-settings/account/index.tsx
+++ b/src/pages/user-settings/account/index.tsx
@@ -104,27 +104,27 @@ const Account = () => {
 					isLoading={!session?.user}
 					rootFormClassName="space-y-3 w-6/6 sm:w-3/6"
 					size="sm"
-					badge={
+					toolTip={
 						meLoading || sendMailLoading
 							? {
 									text: "loading",
-									color: "ghost",
 							  }
 							: me?.emailVerified
 							  ? {
 										text: t("userSettings.account.accountSettings.verifiedBadge"),
-										color: "success",
+										className: "tooltip-success",
+										isVerified: true,
 								  }
 							  : {
 										text: "Not verified, click to resend",
-										color: "warning",
+										className: "tooltip-primary",
 										onClick: sendVerificationEmail,
 								  }
 					}
 					fields={[
 						{
 							name: "email",
-							type: "text",
+							type: "email",
 							placeholder: session?.user?.email,
 							value: session?.user?.email,
 						},
diff --git a/src/server/callbacks/jwt.ts b/src/server/callbacks/jwt.ts
index 91dd589d..5d990508 100644
--- a/src/server/callbacks/jwt.ts
+++ b/src/server/callbacks/jwt.ts
@@ -25,7 +25,7 @@ export function jwtCallback(res) {
 				// session update => https://github.com/nextauthjs/next-auth/discussions/3941
 				// verify that name has at least one character
 				if (typeof session.update.name === "string") {
-					// TODO throwing error will logout user.
+					// !TODO throwing error will logout user.
 					// if (session.update.name.length < 1) {
 					//   throw new Error("Name must be at least one character long.");
 					// }
@@ -35,14 +35,21 @@ export function jwtCallback(res) {
 
 				// verify that email is valid
 				if (typeof session.update.email === "string") {
-					// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+					const existingUser = await prisma.user.findUnique({
+						where: { email: session.update.email },
+					});
+
+					// if the email is already in use by another user, return the token.
+					// !TODO need to find a way to show error message to user.
+					if (existingUser && existingUser.id !== token.id) {
+						return token;
+					}
 
 					token.email = session.update.email;
 					updateObject.email = session.update.email;
 					updateObject.emailVerified =
 						user?.email === session.update.email ? user.emailVerified : null;
 				}
-
 				// update user with new values
 				await prisma.user.update({
 					where: {