diff --git a/convex/chats.ts b/convex/chats.ts
index de3567b0..c81f40aa 100644
--- a/convex/chats.ts
+++ b/convex/chats.ts
@@ -79,6 +79,7 @@ export const initialConvexSetup = mutation({
username: identity.nickname,
clerkId: identity.tokenIdentifier,
firstName: identity.givenName,
+ email: identity.email,
lastName: identity.familyName,
})
.get();
diff --git a/convex/messages.ts b/convex/messages.ts
index 7ebfcbca..b2f1fd0c 100644
--- a/convex/messages.ts
+++ b/convex/messages.ts
@@ -39,6 +39,56 @@ export const getMessages = query({
},
});
+export const createDeleteRequest = mutation({
+ args: { chatId: v.string() },
+ handler: async (ctx, args) => {
+ const identity = await ctx.auth.getUserIdentity();
+
+ if (identity === null) {
+ console.error("Unauthenticated call to mutation");
+ return null;
+ }
+
+ const convexUser = await ctx
+ .table("users")
+ .get("clerkId", identity.tokenIdentifier);
+
+ const parsedChatId = ctx.table("privateChats").normalizeId(args.chatId);
+
+ if (!parsedChatId) {
+ throw new ConvexError("chatId was invalid");
+ }
+
+ if (!convexUser) {
+ throw new ConvexError(
+ "Mismatch between Clerk and Convex. This is an error by us.",
+ );
+ }
+
+ const usersInChat = await ctx
+ .table("privateChats")
+ .getX(parsedChatId)
+ .edge("users");
+
+ if (
+ !usersInChat.some((user) => user.clerkId === identity.tokenIdentifier)
+ ) {
+ throw new ConvexError(
+ "UNAUTHORIZED REQUEST: User tried to send a message in a chat in which he is not in.",
+ );
+ }
+
+ await ctx.table("messages").insert({
+ userId: convexUser._id,
+ privateChatId: parsedChatId,
+ content: "",
+ type: "request",
+ deleted: false,
+ readBy: [convexUser._id],
+ });
+ },
+});
+
export const createMessage = mutation({
args: { chatId: v.string(), content: v.string() },
handler: async (ctx, args) => {
@@ -84,12 +134,62 @@ export const createMessage = mutation({
userId: convexUser._id,
privateChatId: parsedChatId,
content: args.content.trim(),
+ type: "message",
deleted: false,
readBy: [convexUser._id],
});
},
});
+export const deleteAllMessagesInChat = mutation({
+ args: { chatId: v.string() },
+ handler: async (ctx, args) => {
+ const identity = await ctx.auth.getUserIdentity();
+
+ if (identity === null) {
+ console.error("Unauthenticated call to mutation");
+ return null;
+ }
+
+ const parsedChatId = ctx.table("privateChats").normalizeId(args.chatId);
+
+ if (!parsedChatId) {
+ throw new ConvexError("chatId was invalid");
+ }
+
+ const chat = ctx.table("privateChats").getX(parsedChatId);
+ const messagesInChat = await chat.edge("messages");
+
+ for (const message of messagesInChat) {
+ await message.delete();
+ }
+ },
+});
+
+export const rejectRequest = mutation({
+ args: { messageId: v.string(), chatId: v.string() },
+ handler: async (ctx, args) => {
+ const identity = await ctx.auth.getUserIdentity();
+
+ if (identity === null) {
+ console.error("Unauthenticated call to mutation");
+ return null;
+ }
+
+ const parsedMessageId = ctx.table("messages").normalizeId(args.messageId);
+
+ if (!parsedMessageId) {
+ throw new ConvexError("chatId was invalid");
+ }
+
+ const message = await ctx.table("messages").getX(parsedMessageId);
+
+ await message.patch({
+ type: "rejected",
+ });
+ },
+});
+
export const deleteMessage = mutation({
args: { messageId: v.string(), chatId: v.string() },
handler: async (ctx, args) => {
@@ -145,6 +245,12 @@ export const markMessageRead = mutation({
);
}
+ const message = await ctx.table("messages").get(args.messageId);
+
+ if (!message) {
+ return null;
+ }
+
await ctx
.table("messages")
.getX(args.messageId)
@@ -153,5 +259,7 @@ export const markMessageRead = mutation({
add: [convexUser._id],
},
});
+
+ return { success: true };
},
});
diff --git a/convex/schema.ts b/convex/schema.ts
index dfa02208..7afe133b 100644
--- a/convex/schema.ts
+++ b/convex/schema.ts
@@ -11,6 +11,7 @@ const schema = defineEntSchema({
.field("clerkId", v.string(), { unique: true })
.field("username", v.string(), { unique: true })
.field("firstName", v.optional(v.string()))
+ .field("email", v.optional(v.string()))
.field("lastName", v.optional(v.string()))
.edges("privateChats")
.edges("messages", { ref: true })
@@ -22,6 +23,7 @@ const schema = defineEntSchema({
messages: defineEnt({})
.field("content", v.string())
+ .field("type", v.string(), { default: "message" })
.field("deleted", v.boolean(), { default: false })
.edge("privateChat")
.edge("user")
diff --git a/convex/users.ts b/convex/users.ts
index 756e7a14..121be44b 100644
--- a/convex/users.ts
+++ b/convex/users.ts
@@ -1,5 +1,5 @@
-import { query } from "./lib/functions";
-import { ConvexError } from "convex/values";
+import { mutation, query } from "./lib/functions";
+import { v } from "convex/values";
export const getUserData = query({
handler: async (ctx) => {
@@ -13,3 +13,41 @@ export const getUserData = query({
return ctx.table("users").getX("clerkId", identity.tokenIdentifier);
},
});
+
+export const updateUserData = mutation({
+ args: {
+ data: v.object({
+ firstName: v.optional(v.string()),
+ lastName: v.optional(v.string()),
+ email: v.optional(v.string()),
+ }),
+ },
+ handler: async (ctx, args) => {
+ const identity = await ctx.auth.getUserIdentity();
+
+ if (identity === null) {
+ console.error("Unauthenticated call to mutation");
+ return null;
+ }
+
+ const user = ctx.table("users").getX("clerkId", identity.tokenIdentifier);
+
+ if (args.data.email) {
+ await user.patch({
+ email: args.data.email,
+ });
+ }
+
+ if (args.data.lastName) {
+ await user.patch({
+ lastName: args.data.lastName,
+ });
+ }
+
+ if (args.data.firstName) {
+ await user.patch({
+ firstName: args.data.firstName,
+ });
+ }
+ },
+});
diff --git a/src/app/(auth)/sign-up/signup-form.tsx b/src/app/(auth)/sign-up/signup-form.tsx
index 9fb5c42b..e6e3946b 100644
--- a/src/app/(auth)/sign-up/signup-form.tsx
+++ b/src/app/(auth)/sign-up/signup-form.tsx
@@ -16,7 +16,7 @@ import {
} from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import React, { useEffect } from "react";
-import { formSchema } from "~/lib/validators";
+import { formSchemaSignUp } from "~/lib/validators";
import { useSignIn } from "@clerk/nextjs";
import { useRouter } from "next/navigation";
import { cn } from "~/lib/utils";
@@ -38,8 +38,8 @@ export function SignUpForm() {
const { isLoading, isAuthenticated } = useConvexAuth();
const router = useRouter();
- const form = useForm<z.infer<typeof formSchema>>({
- resolver: zodResolver(formSchema),
+ const form = useForm<z.infer<typeof formSchemaSignUp>>({
+ resolver: zodResolver(formSchemaSignUp),
defaultValues: {
username: "",
usernameId: "",
@@ -62,7 +62,7 @@ export function SignUpForm() {
}
}, [initialConvexSetup, isAuthenticated, router, signUpComplete]);
- async function onSubmit(values: z.infer<typeof formSchema>) {
+ async function onSubmit(values: z.infer<typeof formSchemaSignUp>) {
if (isAuthenticated || isLoading) {
// TODO: Make a toast or something to tell the user has to sign out first
return;
@@ -89,6 +89,15 @@ export function SignUpForm() {
return;
}
+ if (parsedResponseBody.data?.statusText === "email_is_taken") {
+ form.setError("email", {
+ message: "Email is already taken. Please choose another.",
+ });
+
+ setFormIsLoading(false);
+ return;
+ }
+
if (parsedResponseBody.data?.statusText === "form_password_pwned") {
form.setError("password", {
message:
@@ -244,6 +253,23 @@ export function SignUpForm() {
>
This is optional, so you can stay anonymous.
</span>
+ <FormField
+ control={form.control}
+ name="email"
+ render={({ field }) => (
+ <FormItem className="flex-2">
+ <FormLabel>Email</FormLabel>
+ <FormControl>
+ <Input placeholder="email" type="text" {...field} />
+ </FormControl>
+ <FormDescription>
+ This is optional, but if you forgot your password, we can send
+ you an email.
+ </FormDescription>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
<FormField
control={form.control}
name="password"
diff --git a/src/app/(internal-sites)/chats/[chatId]/page.tsx b/src/app/(internal-sites)/chats/[chatId]/page.tsx
index 842ee69a..612e17de 100644
--- a/src/app/(internal-sites)/chats/[chatId]/page.tsx
+++ b/src/app/(internal-sites)/chats/[chatId]/page.tsx
@@ -104,6 +104,7 @@ export default function Page({ params }: { params: { chatId: string } }) {
_creationTime: now,
content,
deleted: false,
+ type: "message",
privateChatId: chatId,
from: userInfo.data,
readBy: [userInfo.data],
@@ -203,6 +204,13 @@ export default function Page({ params }: { params: { chatId: string } }) {
setInputValue("");
scrollToBottom(true);
}
+
+ const createDeleteRequest = useMutation(api.messages.createDeleteRequest);
+
+ const createMessageRequestHandler = (chatId: string) => async () => {
+ await createDeleteRequest({ chatId });
+ };
+
const [menuActive, setMenuActive] = useState(false);
const menuClick = () => {
@@ -234,7 +242,10 @@ export default function Page({ params }: { params: { chatId: string } }) {
className="relative flex flex-col"
>
<DevMode className="top-20 z-10">
- chatId: {params.chatId}
+ <button onClick={createMessageRequestHandler(params.chatId)}>
+ Delete Chat Request
+ </button>
+ <p>chatId: {params.chatId}</p>
<div onClick={() => devMode$.set(false)}>Disable dev mode</div>
</DevMode>
<div className="flex h-20 w-full items-center justify-between bg-primary py-6">
diff --git a/src/app/(internal-sites)/profile/chats/page.tsx b/src/app/(internal-sites)/profile/chats/page.tsx
new file mode 100644
index 00000000..f4c884ba
--- /dev/null
+++ b/src/app/(internal-sites)/profile/chats/page.tsx
@@ -0,0 +1,5 @@
+const ChatsPage = () => {
+ return <div className="ml-24">Chats</div>;
+};
+
+export default ChatsPage;
diff --git a/src/app/(internal-sites)/profile/notification/page.tsx b/src/app/(internal-sites)/profile/notification/page.tsx
new file mode 100644
index 00000000..03d71219
--- /dev/null
+++ b/src/app/(internal-sites)/profile/notification/page.tsx
@@ -0,0 +1,5 @@
+const NotificationPage = () => {
+ return <div className="ml-24">Notification</div>;
+};
+
+export default NotificationPage;
diff --git a/src/app/(internal-sites)/profile/page.tsx b/src/app/(internal-sites)/profile/page.tsx
index 4ba8b616..4484f2b9 100644
--- a/src/app/(internal-sites)/profile/page.tsx
+++ b/src/app/(internal-sites)/profile/page.tsx
@@ -1,73 +1,114 @@
+"use client";
import { Avatar, AvatarFallback } from "~/components/ui/avatar";
-import { Lock } from "lucide-react";
-
+import {ArrowRight, Lock} from "lucide-react";
import { Bell } from "lucide-react";
import Link from "next/link";
import { SendHorizontal } from "lucide-react";
import { Settings } from "lucide-react";
import { UsersRound } from "lucide-react";
-import { currentUser } from "@clerk/nextjs/server";
+import { useUser } from "@clerk/nextjs";
+import {cn} from "~/lib/utils";
interface settingsCard {
title: string;
- icon: JSX.Element;
+ icon?: JSX.Element;
}
-const settings: settingsCard[] = [
- { title: "Account", icon: <Lock /> },
- { title: "Chats", icon: <SendHorizontal /> },
- { title: "Notification", icon: <Bell /> },
- { title: "Settings", icon: <Settings /> },
- { title: "Contributors", icon: <UsersRound /> },
-];
+export default function Profile() {
+ const clerkUser = useUser();
+ const username = clerkUser.user ? clerkUser.user.username || "" : "";
-export default async function Profile() {
- const user = await currentUser();
- const username = user?.username;
+ const settings: settingsCard[] = [
+ { title: username },
+ { title: "Settings", icon: <Settings /> },
+ { title: "Notification", icon: <Bell /> },
+ { title: "Privacy", icon: <Lock /> },
+ { title: "Chats", icon: <SendHorizontal /> },
+ { title: "Contributors", icon: <UsersRound /> },
+ ];
return (
- <main className="flex h-full flex-col items-center justify-around lg:pl-24">
+ <main className="mt-7 flex h-screen flex-col items-center lg:mt-0 lg:justify-around lg:pl-24">
<div className="flex flex-col items-center">
- <p className="my-10 mt-16 text-xl font-bold sm:text-2xl xl:hidden">
- Profile
- </p>
-
- <div className="flex xl:mt-14">
- <div className="text-sm">
- <Avatar className="h-12 w-12 text-white">
- <AvatarFallback>
- {username ? username.substring(0, 2).toUpperCase() : "Y"}
- </AvatarFallback>
- </Avatar>
- </div>
- <div className="ml-4 text-sm xl:mt-2 xl:text-lg">
- {user?.lastName && user.firstName ? (
- <div>
- {user.firstName} {user?.lastName} / <br className="xl:hidden" />{" "}
- {user.username}
- </div>
- ) : (
- <div className="xl:mt-4">{user?.username}</div>
- )}
+ <p className="my-10 text-xl font-bold sm:text-2xl">Profile</p>
+ </div>
+ <div className="flex w-full flex-col items-center justify-center">
+ <div className="mb-8 flex w-11/12 flex-col items-center justify-center rounded-xl border-2 border-secondary lg:w-2/3 xl:w-1/3">
+ {settings.map((item) => {
+ if (item.title == username) {
+ return (
+ <div className="flex w-full cursor-pointer rounded-lg bg-primary p-6 text-xl sm:text-2xl xl:text-lg">
+ <div className="mr-5 flex h-10 w-10 items-center justify-center rounded-3xl bg-background text-sm font-medium text-destructive-foreground">
+ {item.title.slice(0, 2).toUpperCase()}
+ </div>
+ <p className="pt-2 font-semibold text-destructive-foreground">
+ {item.title}
+ </p>
+ </div>
+ );
+ }
+ })}
+ </div>
+ <div className="flex w-11/12 flex-col items-center justify-center rounded-xl border-2 border-secondary lg:w-2/3 xl:w-1/3">
+ {settings.map((item) => {
+ if (item.title == username || item.title == "Contributors") {
+ return;
+ }
+ return (
+ <Link
+ key={item.title}
+ href={`/profile/${item.title.toLowerCase()}`}
+ className={cn(
+ "flex w-full cursor-pointer justify-between border-t-2 border-secondary bg-primary p-6 text-xl sm:text-2xl xl:text-lg",
+ {
+ "rounded-t-lg border-t-0": item.title == "Settings",
+ "rounded-b-lg": item.title == "Chats",
+ },
+ )}
+ >
+ <div className="flex">
+ <div className="mr-5 flex h-10 w-10 items-center justify-center rounded-3xl bg-secondary text-sm font-medium text-destructive-foreground">
+ {item.icon}
+ </div>
+ <p className="flex items-center font-semibold text-destructive-foreground">
+ {item.title}
+ </p>
+ </div>
+ <div className="flex items-center">
+ <ArrowRight className="ml-3 flex text-secondary-foreground" />
+ </div>
+ </Link>
+ );
+ })}
+ </div>
+ <div className="mb-4 mt-8 flex w-full flex-col items-center justify-center rounded-xl pb-[30%] lg:pb-0">
+ <div className="w-11/12 rounded-xl border-2 border-secondary lg:w-2/3 xl:w-1/3">
+ {settings.map((item) => {
+ if (item.title == "Contributors") {
+ return (
+ <Link
+ href={`/profile/${item.title.toLowerCase()}`}
+ key={item.title}
+ className="flex w-full cursor-pointer justify-between rounded-lg bg-primary p-6 text-xl sm:text-2xl lg:border-0 xl:text-lg"
+ >
+ <div className="flex">
+ <div className="mr-5 flex h-10 w-10 items-center justify-center rounded-3xl bg-secondary text-sm font-medium text-destructive-foreground">
+ {item.icon}
+ </div>
+ <p className="flex items-center font-semibold text-destructive-foreground">
+ {item.title}
+ </p>
+ </div>
+ <div className="flex items-center">
+ <ArrowRight className="ml-3 flex text-secondary-foreground" />
+ </div>
+ </Link>
+ );
+ }
+ })}
</div>
</div>
</div>
- <div className="mb-20 mt-10 w-full pb-24 sm:mb-32 lg:w-2/3 xl:w-1/3">
- {settings.map((item) => {
- return (
- <Link
- key={item.title}
- href={`/profile/${item.title.toLowerCase()}`}
- className="flex w-full cursor-pointer border-t-2 border-input p-7 text-xl sm:text-2xl lg:mt-6 lg:rounded-xl lg:border-0 lg:bg-input xl:text-xl"
- >
- <p className="mr-5 rounded-3xl bg-accent p-3 text-white">
- {item.icon}
- </p>
- <p className="pt-3">{item.title}</p>
- </Link>
- );
- })}
- </div>
</main>
);
}
diff --git a/src/app/(internal-sites)/profile/privacy/page.tsx b/src/app/(internal-sites)/profile/privacy/page.tsx
new file mode 100644
index 00000000..6e2c6197
--- /dev/null
+++ b/src/app/(internal-sites)/profile/privacy/page.tsx
@@ -0,0 +1,5 @@
+const PrivacyPage = () => {
+ return <div className="ml-24">Privacy</div>;
+};
+
+export default PrivacyPage;
diff --git a/src/app/(internal-sites)/profile/settings/page.tsx b/src/app/(internal-sites)/profile/settings/page.tsx
index ed5ae367..057bed0c 100644
--- a/src/app/(internal-sites)/profile/settings/page.tsx
+++ b/src/app/(internal-sites)/profile/settings/page.tsx
@@ -1,5 +1,517 @@
+"use client";
+
+import { Input } from "~/components/ui/input";
+import { useUser } from "@clerk/nextjs";
+import { useEffect, useState } from "react";
+import { isClerkAPIResponseError } from "@clerk/shared";
+import {
+ ChevronLeft,
+ CircleCheck,
+ CircleX,
+ HardDriveUpload,
+ MailCheck,
+ MailX,
+} from "lucide-react";
+import { z, ZodError } from "zod";
+import { useRouter } from "next/navigation";
+import { Button } from "~/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "~/components/ui/dialog";
+import { Label } from "~/components/ui/label";
+import { Toaster } from "~/components/ui/sonner";
+import { toast } from "sonner";
+import { FormSchemaUserUpdate, formSchemaUserUpdate } from "~/lib/validators";
+import { useMutation } from "convex/react";
+import { api } from "../../../../../convex/_generated/api";
+
+const SettingValidator = z.object({
+ email: z.string().email(),
+ password: z
+ .string()
+ .min(8, {
+ message: "Password must be at least 8 characters.",
+ })
+ .max(20, {
+ message: "Password must be at most 20 characters.",
+ }),
+ firstName: z
+ .string()
+ .min(2, {
+ message: "Name must be at least 2 characters.",
+ })
+ .max(20, {
+ message: "Name must be at most 20 characters.",
+ }),
+ lastName: z
+ .string()
+ .min(2, {
+ message: "Name must be at least 2 characters.",
+ })
+ .max(20, {
+ message: "Name must be at most 20 characters.",
+ }),
+});
+
+const signUpResponseSchema = z.object({
+ message: z.string(),
+ statusText: z.string().optional(),
+});
+
const SettingsPage = () => {
- return <main>Settings</main>;
+ const clerkUser = useUser();
+ const [lastName, setLastName] = useState(clerkUser.user?.lastName || "");
+ const [firstName, setFirstName] = useState(clerkUser.user?.firstName || "");
+ const [currentPassword, setCurrentPassword] = useState("");
+ const [newPassword, setNewPassword] = useState("");
+ const [dialogOpen, setDialogOpen] = useState(false);
+ const [currentPasswordErrorMessage, setCurrentPasswordErrorMessage] =
+ useState("");
+ const [newPasswordErrorMessage, setNewPasswordErrorMessage] = useState("");
+ const [emailValue, setEmailValue] = useState(
+ clerkUser.user?.primaryEmailAddress?.emailAddress || "",
+ );
+ const [emailError, setEmailError] = useState(false);
+ const [firstNameError, setFirstNameError] = useState("");
+ const [lastNameError, setLastNameError] = useState("");
+
+ const updateConvexUserData = useMutation(api.users.updateUserData);
+
+ async function test() {
+ const valuesObject: z.infer<typeof formSchemaUserUpdate> = {
+ email: emailValue,
+ firstName: firstName,
+ lastName: lastName,
+ };
+
+ const response = await fetch("/api/sign-up", {
+ method: "OPTIONS",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(valuesObject),
+ });
+
+ const responseBody = await response.text(); // Get the response body as text
+ if (!responseBody) {
+ return;
+ }
+
+ const parsedResponseBody = signUpResponseSchema.safeParse(
+ JSON.parse(responseBody),
+ );
+
+ if (parsedResponseBody.data?.message) {
+ const parsedJson = JSON.parse(parsedResponseBody.data.message) as
+ | any[]
+ | { [key: string]: any };
+
+ parsedJson.forEach((error: any) => {
+ if (error.path[0] == "email") {
+ setEmailError(true);
+ }
+ if (error.path[0] == "firstName") {
+ setFirstNameError(error.message);
+ }
+ if (error.path[0] == "lastName") {
+ setLastNameError(error.message);
+ }
+ });
+ }
+ }
+
+ useEffect(() => {
+ if (clerkUser.user?.firstName) {
+ setFirstName(clerkUser.user.firstName);
+ }
+
+ if (clerkUser.user?.lastName) {
+ setLastName(clerkUser.user.lastName);
+ }
+
+ if (clerkUser.user?.emailAddresses.map((email) => email.emailAddress)) {
+ setEmailValue(clerkUser.user?.primaryEmailAddress?.emailAddress ?? "");
+ }
+ }, [
+ clerkUser.user?.firstName,
+ clerkUser.user?.lastName,
+ clerkUser.user?.emailAddresses,
+ ]);
+
+ const router = useRouter();
+
+ const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ setEmailValue(e.target.value);
+
+ try {
+ SettingValidator.parse({ email: e.target.value });
+ setEmailError(false);
+ } catch (error) {
+ setEmailError(true);
+ if (error instanceof ZodError) {
+ const errorFound = error.errors.find(
+ (error) => error.path[0] == "email",
+ );
+ if (errorFound) {
+ setEmailError(true);
+ } else {
+ setEmailError(false);
+ }
+ }
+ }
+ };
+
+ const handleFirstNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ setFirstName(e.target.value);
+
+ try {
+ SettingValidator.parse({ firstName: e.target.value });
+ setFirstNameError("");
+ } catch (error) {
+ if (error instanceof ZodError) {
+ const errorFound = error.errors.find(
+ (error) => error.path[0] == "firstName",
+ );
+ if (errorFound) {
+ setFirstNameError(errorFound.message);
+ } else {
+ setFirstNameError("");
+ }
+ }
+ }
+ };
+
+ const handleLastNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ setLastName(e.target.value);
+
+ try {
+ SettingValidator.parse({ lastName: e.target.value });
+ setLastNameError("");
+ } catch (error) {
+ if (error instanceof ZodError) {
+ const errorFound = error.errors.find(
+ (error) => error.path[0] == "lastName",
+ );
+ if (errorFound) {
+ setLastNameError(errorFound.message);
+ } else {
+ setLastNameError("");
+ }
+ }
+ }
+ };
+
+ const handleCurrentPassword = (e: React.ChangeEvent<HTMLInputElement>) => {
+ setCurrentPassword(e.target.value);
+ setCurrentPasswordErrorMessage("");
+ };
+
+ const handleNewPassword = (e: React.ChangeEvent<HTMLInputElement>) => {
+ setNewPassword(e.target.value);
+ setNewPasswordErrorMessage("");
+
+ try {
+ SettingValidator.parse({ password: e.target.value });
+ setNewPasswordErrorMessage("");
+ } catch (e) {
+ if (e instanceof ZodError) {
+ const errorFound = e.errors.find((e) => e.path[0] == "password");
+ if (errorFound) {
+ setNewPasswordErrorMessage(errorFound.message);
+ } else {
+ setNewPasswordErrorMessage("");
+ }
+ }
+ }
+ };
+
+ useEffect(() => {
+ if (emailValue != "" || firstName != "" || lastName != "") {
+ test();
+ }
+ }, [handleLastNameChange, handleFirstNameChange, handleEmailChange]);
+
+ async function checkPasswordAgainstClerkRules(
+ currentPassword: string,
+ newPassword: string,
+ ) {
+ try {
+ try {
+ SettingValidator.parse({ password: newPassword });
+ setNewPasswordErrorMessage("");
+ } catch (e) {
+ if (e instanceof ZodError) {
+ const errorFound = e.errors.find((e) => e.path[0] == "password");
+ if (errorFound) {
+ setNewPasswordErrorMessage(errorFound.message);
+ return;
+ } else {
+ setNewPasswordErrorMessage("");
+ }
+ }
+ }
+
+ await clerkUser.user?.updatePassword({
+ currentPassword: currentPassword,
+ newPassword: newPassword,
+ });
+ setDialogOpen(false);
+ toast.success("Password changed successfully");
+
+ console.log("Password changed successfully");
+ } catch (e) {
+ if (isClerkAPIResponseError(e)) {
+ if (e.errors.some((error) => error.code === "form_password_pwned")) {
+ setNewPasswordErrorMessage(
+ "Password has been found in an online data breach.",
+ );
+ }
+ if (
+ e.errors.some(
+ (error) => error.code === "form_password_validation_failed",
+ )
+ ) {
+ setCurrentPasswordErrorMessage("Invalid Current Password");
+ }
+ }
+ }
+ }
+
+ const firstNameSuccess =
+ firstName != clerkUser.user?.firstName &&
+ firstName.length != 0 &&
+ firstNameError == "";
+ const lastNameSuccess =
+ lastName != clerkUser.user?.lastName &&
+ lastName.length != 0 &&
+ lastNameError == "";
+ const emailSuccess =
+ emailValue != clerkUser.user?.primaryEmailAddress?.emailAddress &&
+ emailValue.length != 0 &&
+ !emailError;
+
+ const userDataHandler = async (data: FormSchemaUserUpdate) => {
+ await updateConvexUserData({
+ data: data,
+ });
+ };
+
+ const submitHandler = async () => {
+ const successList = [];
+ const userDataToUpdate: FormSchemaUserUpdate = {};
+ if (firstNameSuccess) {
+ clerkUser.user?.update({ firstName: firstName });
+ successList.push(" First Name");
+ userDataToUpdate.firstName = firstName;
+ }
+ if (lastNameSuccess) {
+ clerkUser.user?.update({ lastName: lastName });
+ successList.push(" Last Name");
+ userDataToUpdate.lastName = lastName;
+ }
+
+ if (emailSuccess) {
+ userDataToUpdate.email = emailValue;
+ setEmailValue(clerkUser.user?.primaryEmailAddress?.emailAddress || "");
+ }
+
+ await userDataHandler(userDataToUpdate);
+ toast.success(
+ successList.map((update) => {
+ return update;
+ }) + " updated successfully",
+ );
+ };
+
+ return (
+ <>
+ <Toaster />
+ <div className="flex justify-center text-destructive-foreground lg:hidden">
+ <p className="absolute top-12 text-xl font-semibold">Settings</p>
+ <ChevronLeft
+ className="absolute left-10 top-11 h-8 w-8"
+ onClick={() => {
+ router.back();
+ }}
+ />
+ </div>
+ <main className="flex h-screen flex-col items-center justify-center lg:ml-24">
+ <div className="flex h-2/3 w-full flex-col items-center justify-center sm:h-1/2">
+ <div className="mb-4 w-11/12 lg:w-1/3">
+ <div className="relative w-full">
+ <Input
+ placeholder="First name"
+ value={firstName}
+ onChange={handleFirstNameChange}
+ className="border-2 border-secondary"
+ />
+ {firstName != "" ? (
+ firstNameError == "" ? (
+ <CircleCheck
+ className="absolute right-3 top-1/2 -translate-y-1/2 transform"
+ color="#3DC726"
+ />
+ ) : (
+ <CircleX className="absolute right-3 top-1/2 -translate-y-1/2 transform text-accent" />
+ )
+ ) : (
+ ""
+ )}
+ </div>
+ <div className="ml-2 mt-0.5 text-[85%] text-secondary-foreground">
+ {firstNameError != "" && firstName != "" ? (
+ <p className="text-accent">{firstNameError}</p>
+ ) : (
+ "First Name"
+ )}
+ </div>
+ </div>
+ <div className="mb-4 w-11/12 lg:w-1/3">
+ <div className="relative w-full">
+ <Input
+ placeholder="Last name"
+ value={lastName}
+ onChange={handleLastNameChange}
+ className="border-2 border-secondary"
+ />
+ {lastName != "" ? (
+ lastNameError == "" ? (
+ <CircleCheck
+ className="absolute right-3 top-1/2 -translate-y-1/2 transform"
+ color="#3DC726"
+ />
+ ) : (
+ <CircleX className="absolute right-3 top-1/2 -translate-y-1/2 transform text-accent" />
+ )
+ ) : (
+ ""
+ )}
+ </div>
+ <div className="ml-2 mt-0.5 text-[85%] text-secondary-foreground">
+ {lastNameError != "" && lastName != "" ? (
+ <p className="text-accent">{lastNameError}</p>
+ ) : (
+ "Last Name"
+ )}
+ </div>
+ </div>
+ <div className="mb-4 w-11/12 lg:w-1/3">
+ <div className="relative w-full">
+ <Input
+ value={emailValue}
+ onChange={handleEmailChange}
+ placeholder="Email"
+ className="w-full border-2 border-secondary"
+ />
+ {emailValue != "" ? (
+ !emailError ? (
+ <MailCheck
+ className="absolute right-3 top-1/2 -translate-y-1/2 transform"
+ color="#3DC726"
+ />
+ ) : (
+ <MailX className="absolute right-3 top-1/2 -translate-y-1/2 transform text-accent" />
+ )
+ ) : (
+ ""
+ )}
+ </div>
+ <p className="ml-2 mt-0.5 text-[85%] text-secondary-foreground">
+ If you forgott your password we can send you a Email
+ </p>
+ </div>
+ <Dialog
+ open={dialogOpen}
+ onOpenChange={() => setDialogOpen((prevState) => !prevState)}
+ >
+ <DialogTrigger asChild>
+ <div className="mt-4 flex cursor-pointer rounded-sm border-2 border-secondary bg-primary p-2 px-3 text-[100%] text-destructive-foreground">
+ <HardDriveUpload className="mr-1 h-5 w-5" />
+ <p>Update Password</p>
+ </div>
+ </DialogTrigger>
+ <DialogContent className="sm:max-w-[425px]">
+ <DialogHeader>
+ <DialogTitle>Change Password</DialogTitle>
+ <DialogDescription>
+ If you want to change your password, you can do it here.
+ </DialogDescription>
+ </DialogHeader>
+ <div className="gap-4 py-4">
+ <div className="flex-col items-center gap-4">
+ <Label htmlFor="name" className="text-right">
+ Current password
+ </Label>
+ <Input
+ value={currentPassword}
+ type="password"
+ onChange={handleCurrentPassword}
+ className="col-span-3 mt-1"
+ />
+ <Label
+ htmlFor="username"
+ className="text-right text-[80%] text-accent"
+ >
+ {currentPasswordErrorMessage}
+ </Label>
+ </div>
+ <div className="mt-4 flex-col items-center gap-4">
+ <Label htmlFor="username" className="text-right">
+ New password
+ </Label>
+ <Input
+ value={newPassword}
+ type="password"
+ onChange={handleNewPassword}
+ className="col-span-3 mt-1"
+ />
+ <Label
+ htmlFor="username"
+ className="text-right text-[80%] text-accent"
+ >
+ {newPasswordErrorMessage}
+ </Label>
+ </div>
+ </div>
+ <DialogFooter>
+ <Button
+ type="submit"
+ onClick={() => {
+ checkPasswordAgainstClerkRules(
+ currentPassword,
+ newPassword,
+ );
+ }}
+ >
+ Change
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ {lastNameSuccess ||
+ firstNameSuccess ||
+ (emailValue.length != 0 &&
+ !emailError &&
+ emailValue.toString() !=
+ clerkUser.user?.emailAddresses
+ .map((email) => email.emailAddress)
+ .toString()) ||
+ "" ? (
+ <div className="mt-4 flex cursor-pointer rounded-sm border-2 border-secondary bg-primary p-2 px-3 text-[100%] text-destructive-foreground">
+ <CircleCheck className="mr-2 h-5 w-5" />
+ <p onClick={submitHandler}>Save Changes</p>
+ </div>
+ ) : null}
+ </div>
+ </main>
+ </>
+ );
};
export default SettingsPage;
diff --git a/src/app/api/sign-up/route.ts b/src/app/api/sign-up/route.ts
index 9129f55f..5ccfe5e0 100644
--- a/src/app/api/sign-up/route.ts
+++ b/src/app/api/sign-up/route.ts
@@ -1,11 +1,30 @@
-import { type FormSchema, formSchema } from "~/lib/validators";
+import { type FormSchemaSignUp, formSchemaSignUp } from "~/lib/validators";
import { clerkClient } from "@clerk/nextjs/server";
import { isClerkAPIResponseError } from "@clerk/shared";
+import { formSchemaUserUpdate, FormSchemaUserUpdate } from "~/lib/validators";
+
+export async function OPTIONS(request: Request) {
+ const unparsedSignUpHeaders = (await request.json()) as FormSchemaUserUpdate;
+ const parsedSignUpHeaders = formSchemaUserUpdate.safeParse(
+ unparsedSignUpHeaders,
+ );
+ if (!parsedSignUpHeaders.success) {
+ return Response.json(
+ { message: parsedSignUpHeaders.error.message },
+ { status: 400 },
+ );
+ } else {
+ return Response.json(
+ { message: parsedSignUpHeaders.error },
+ { status: 200 },
+ );
+ }
+}
// TODO: This probably deserves a rate limiter + a check for not creating a bunch of trash users to spam us.
export async function POST(request: Request) {
- const unparsedSignUpHeaders = (await request.json()) as FormSchema;
- const parsedSignUpHeaders = formSchema.safeParse(unparsedSignUpHeaders);
+ const unparsedSignUpHeaders = (await request.json()) as FormSchemaSignUp;
+ const parsedSignUpHeaders = formSchemaSignUp.safeParse(unparsedSignUpHeaders);
if (!parsedSignUpHeaders.success) {
return Response.json(
{ message: parsedSignUpHeaders.error.message },
@@ -19,18 +38,35 @@ export async function POST(request: Request) {
parsedSignUpHeaders.data.username + parsedSignUpHeaders.data.usernameId,
firstName: parsedSignUpHeaders.data.firstName,
lastName: parsedSignUpHeaders.data.lastName,
+ emailAddress: parsedSignUpHeaders.data.email
+ ? [parsedSignUpHeaders.data.email]
+ : undefined,
password: parsedSignUpHeaders.data.password,
});
} catch (e) {
if (isClerkAPIResponseError(e)) {
if (e.errors.some((error) => error.code === "form_identifier_exists")) {
- return Response.json(
- {
- message: "Failed to create an account. Username already exists.",
- statusText: "username_is_taken",
- },
- { status: 400 },
- );
+ if (
+ e.errors.some((error) => error.meta?.paramName === "email_address")
+ ) {
+ return Response.json(
+ {
+ message: "Failed to create an account. Email already exists.",
+ statusText: "email_is_taken",
+ },
+ { status: 400 },
+ );
+ }
+
+ if (e.errors.some((error) => error.meta?.paramName === "username")) {
+ return Response.json(
+ {
+ message: "Failed to create an account. Username already exists.",
+ statusText: "username_is_taken",
+ },
+ { status: 400 },
+ );
+ }
}
if (e.errors.some((error) => error.code === "form_password_pwned")) {
return Response.json(
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6e2627aa..ac6d2e94 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -9,7 +9,7 @@ import ConvexClientProvider from "~/app/convex-client-provider";
const APP_NAME = "Chat.io";
const APP_DEFAULT_TITLE = "Chat.io";
-const APP_TITLE_TEMPLATE = "%s - PWA App";
+const APP_TITLE_TEMPLATE = "%s - Chat.io";
const APP_DESCRIPTION = "Best PWA app in the world!";
export const metadata: Metadata = {
diff --git a/src/components/chat-overview.tsx b/src/components/chat-overview.tsx
index 0f64a6e2..5ed5f9cf 100644
--- a/src/components/chat-overview.tsx
+++ b/src/components/chat-overview.tsx
@@ -13,6 +13,7 @@ import { ArrowRight } from "lucide-react";
import Badge from "~/components/ui/badge";
import Link from "next/link";
import { cn } from "~/lib/utils";
+import type { Viewport } from "next";
type Chats = FunctionReturnType<typeof api.chats.getChats>;
diff --git a/src/components/message.tsx b/src/components/message.tsx
index 44662fe5..6cb46fe1 100644
--- a/src/components/message.tsx
+++ b/src/components/message.tsx
@@ -1,7 +1,15 @@
import { useUser } from "@clerk/nextjs";
import { useMutation } from "convex/react";
import { api } from "../../convex/_generated/api";
-import { Ban, CopyCheck, Forward, Info, Trash2 } from "lucide-react";
+import {
+ Ban,
+ CircleCheck,
+ CircleX,
+ CopyCheck,
+ Forward,
+ Info,
+ Trash2,
+} from "lucide-react";
import { FunctionReturnType } from "convex/server";
import { useInView } from "react-intersection-observer";
import { useEffect, useState } from "react";
@@ -12,6 +20,7 @@ import { useFloating } from "@floating-ui/react";
import { Toaster } from "~/components/ui/sonner";
import { toast } from "sonner";
import { Id } from "../../convex/_generated/dataModel";
+import { useQueryWithStatus } from "~/app/convex-client-provider";
dayjs.extend(relativeTime);
@@ -118,27 +127,69 @@ export const Message = ({
const [isModalOpen, setIsModalOpen] = useState(false);
const markRead = useMutation(api.messages.markMessageRead);
+ const deleteAllMessagesInChat = useMutation(
+ api.messages.deleteAllMessagesInChat,
+ );
+
+ const chatInfo = useQueryWithStatus(api.chats.getChatInfoFromId, {
+ chatId: message.privateChatId,
+ });
+
+ const rejectRequest = useMutation(api.messages.rejectRequest);
+
+ const rejectRequestHandler =
+ (chatId: string, messageId: string) => async () => {
+ await rejectRequest({ chatId, messageId });
+ };
+
+ const deleteAllMessagesinChat = (chatId: string) => async () => {
+ await deleteAllMessagesInChat({ chatId });
+ };
+
useEffect(() => {
if (inView && message.sent) {
markRead({ messageId: message._id });
}
}, [inView, message._id, message.deleted, deleteMessage]);
+ const sentInfo = () => {
+ return (
+ <>
+ Sent at {dayjs(message._creationTime).hour()}:
+ {dayjs(message._creationTime).minute() < 10
+ ? "0" + dayjs(message._creationTime).minute()
+ : dayjs(message._creationTime).minute()}
+ {", "}
+ {dayjs(message._creationTime).date() < 10
+ ? "0" + dayjs(message._creationTime).date()
+ : dayjs(message._creationTime).date()}
+ .
+ {dayjs(message._creationTime).month() + 1 < 10
+ ? "0" + (dayjs(message._creationTime).month() + 1).toString()
+ : dayjs(message._creationTime).month() + 1}
+ .{dayjs(message._creationTime).year()}
+ </>
+ );
+ };
+
return (
<>
<Toaster />
- {isModalOpen && (
+ {isModalOpen && message.type == "message" ? (
<div
onClick={() => setIsModalOpen(!isModalOpen)}
className="fixed inset-0 z-10 bg-black opacity-75"
></div>
- )}
+ ) : null}
<div className="flex" ref={ref}>
{message.from.username == clerkUser.user?.username ? (
<div
ref={refs.setReference}
- className="my-1 mr-4 flex w-full flex-col items-end"
+ className={cn("my-1 mr-4 flex w-full flex-col items-end", {
+ "mr-0 items-center":
+ message.type == "request" || message.type == "rejected",
+ })}
>
<div
onContextMenu={(e) => {
@@ -161,6 +212,8 @@ export const Message = ({
"max-w-[66.6667%] cursor-default break-words rounded-sm bg-accent p-3",
{
"sticky z-50 opacity-100": message._id === selectedMessageId,
+ "my-2 max-w-[80%] border-2 border-secondary bg-primary":
+ message.type == "request" || message.type == "rejected",
},
)}
>
@@ -170,11 +223,22 @@ export const Message = ({
<p className="ml-2.5">This message was deleted</p>
</div>
) : (
- <div>{message.content}</div>
+ <div>
+ {message.type != "message" ? (
+ <div className="font-semibold text-destructive-foreground">
+ {message.type == "request"
+ ? "You`ve send a request"
+ : chatInfo.data?.otherUser[0]?.username +
+ " has rejected the request"}
+ </div>
+ ) : (
+ <div>{message.content}</div>
+ )}
+ </div>
)}
</div>
<div className="mr-2 text-[75%] font-bold text-secondary-foreground">
- {!message.deleted
+ {!message.deleted && message.type == "message"
? message.readBy
? message.readBy.map((user) => {
if (user.username != clerkUser.user?.username) {
@@ -192,7 +256,9 @@ export const Message = ({
: null
: null}
</div>
- {message._id == selectedMessageId && isModalOpen ? (
+ {message._id == selectedMessageId &&
+ isModalOpen &&
+ message.type == "message" ? (
<div
ref={refs.setFloating}
style={floatingStyles}
@@ -230,12 +296,7 @@ export const Message = ({
</button>{" "}
<div className="flex border-t-2 border-secondary-foreground p-2 pr-8 text-secondary-foreground">
<Info />
- <p className="ml-1">
- Sent at {dayjs(message._creationTime).hour()}:
- {dayjs(message._creationTime).minute() < 10
- ? "0" + dayjs(message._creationTime).minute()
- : dayjs(message._creationTime).minute()}
- </p>
+ <p className="ml-1">{sentInfo()}</p>
</div>
</div>
</div>
@@ -243,7 +304,12 @@ export const Message = ({
) : null}
</div>
) : (
- <div className="my-1 ml-4 flex w-full justify-start">
+ <div
+ className={cn("my-1 ml-4 flex w-full justify-start", {
+ "ml-0 justify-center":
+ message.type == "request" || message.type == "rejected",
+ })}
+ >
<div
ref={refs.setReference}
onContextMenu={(e) => {
@@ -266,6 +332,8 @@ export const Message = ({
"max-w-[66.6667%] cursor-default break-words rounded-sm bg-secondary p-3",
{
"sticky z-50 opacity-100": message._id == selectedMessageId,
+ "my-2 max-w-[80%] border-2 border-secondary bg-primary":
+ message.type == "request" || message.type == "rejected",
},
)}
>
@@ -274,11 +342,47 @@ export const Message = ({
<Ban />
<p className="ml-2.5">This message was deleted</p>
</div>
+ ) : message.type != "message" ? (
+ <div className="font-semibold text-destructive-foreground">
+ <p>
+ {message.type == "request"
+ ? chatInfo.data?.otherUser[0]?.username +
+ " has send a delete Chat request"
+ : "You has rejected the request"}
+ </p>
+ <div className="flex justify-between">
+ {message.type == "request" ? (
+ <>
+ <button
+ onClick={deleteAllMessagesinChat(
+ message.privateChatId,
+ )}
+ className="mt-4 flex rounded-sm bg-accept p-2 px-4"
+ >
+ <CircleCheck className="mr-1 p-0.5" />
+ <p>Accept</p>
+ </button>
+ <button
+ onClick={rejectRequestHandler(
+ message.privateChatId,
+ message._id,
+ )}
+ className="ml-4 mt-4 flex rounded-sm bg-accent p-2 px-4 lg:ml-0"
+ >
+ <CircleX className="mr-1 p-0.5" />
+ <p>Reject</p>{" "}
+ </button>{" "}
+ </>
+ ) : null}
+ </div>
+ </div>
) : (
message.content
)}
</div>
- {message._id == selectedMessageId && isModalOpen ? (
+ {message._id == selectedMessageId &&
+ isModalOpen &&
+ message.type == "message" ? (
<div
ref={refs.setFloating}
style={floatingStyles}
@@ -306,12 +410,7 @@ export const Message = ({
</div>
<div className="flex p-2 pr-8 text-secondary-foreground">
<Info />
- <p className="ml-1">
- Sent at {dayjs(message._creationTime).hour()}:
- {dayjs(message._creationTime).minute() < 10
- ? "0" + dayjs(message._creationTime).minute()
- : dayjs(message._creationTime).minute()}
- </p>
+ <p className="ml-1">{sentInfo()}</p>
</div>
</div>
</div>
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 9d312c66..1a66a336 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
- "flex h-14 w-full rounded-sm bg-input px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-secondary-foreground focus-visible:outline-none focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+ "flex h-14 w-full rounded-sm bg-input px-3 py-2 text-destructive-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-secondary-foreground focus-visible:outline-none focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
ref={ref}
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 452f4d9f..a3428fc7 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,12 +1,12 @@
-"use client"
+"use client";
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
-type ToasterProps = React.ComponentProps<typeof Sonner>
+type ToasterProps = React.ComponentProps<typeof Sonner>;
const Toaster = ({ ...props }: ToasterProps) => {
- const { theme = "system" } = useTheme()
+ const { theme = "system" } = useTheme();
return (
<Sonner
@@ -15,7 +15,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
toastOptions={{
classNames: {
toast:
- "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+ "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-secondary group-[.toaster]:shadow-lg",
description: "group-[.toast]:text-muted-foreground",
actionButton:
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
@@ -25,7 +25,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
}}
{...props}
/>
- )
-}
+ );
+};
-export { Toaster }
+export { Toaster };
diff --git a/src/lib/validators.ts b/src/lib/validators.ts
index 23161c79..5fb4d5b7 100644
--- a/src/lib/validators.ts
+++ b/src/lib/validators.ts
@@ -1,6 +1,6 @@
import { z } from "zod";
-export const formSchema = z.object({
+export const formSchemaSignUp = z.object({
username: z
.string()
.min(7, {
@@ -42,6 +42,7 @@ export const formSchema = z.object({
message: "Name must be at most 20 characters.",
})
.optional(),
+ email: z.string().email().optional(),
password: z
.string()
.min(8, {
@@ -52,4 +53,28 @@ export const formSchema = z.object({
}),
});
-export type FormSchema = z.infer<typeof formSchema>;
+export type FormSchemaSignUp = z.infer<typeof formSchemaSignUp>;
+
+export const formSchemaUserUpdate = z.object({
+ firstName: z
+ .string()
+ .min(2, {
+ message: "Name must be at least 2 characters.",
+ })
+ .max(20, {
+ message: "Name must be at most 20 characters.",
+ })
+ .optional(),
+ lastName: z
+ .string()
+ .min(2, {
+ message: "Name must be at least 2 characters.",
+ })
+ .max(20, {
+ message: "Name must be at most 20 characters.",
+ })
+ .optional(),
+ email: z.string().email().optional(),
+});
+
+export type FormSchemaUserUpdate = z.infer<typeof formSchemaUserUpdate>;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 67de08d3..6d253a93 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -25,6 +25,7 @@ const config = {
dark: "#005C8F",
white: "#009BFA",
},
+ accept: "#00834C",
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",