handle auth correctly and added change password

apps/web/src/components/Content.tsx

@@ -20,7 +20,7 @@ export function ContentHeader({ title, text, children }: ContentHeaderProps) {
 
 type ContentSectionProps = {
   title: string;
-  text: string;
+  text?: string | React.ReactNode;
   children: React.ReactNode;
   asCol?: boolean;
 };
@@ -41,7 +41,7 @@ export function ContentSection({
       {title && (
         <div className="max-w-[50%]">
           <h4 className="h4">{title}</h4>
-          <p className="text-sm text-muted-foreground">{text}</p>
+          {text && <p className="text-sm text-muted-foreground">{text}</p>}
         </div>
       )}
       <div>{children}</div>

apps/web/src/components/forms/InputError.tsx

@@ -0,0 +1,9 @@
+type InputErrorProps = { message?: string };
+
+export function InputError({ message }: InputErrorProps) {
+  if (!message) {
+    return null;
+  }
+
+  return <div className="mt-1 text-sm text-red-600">{message}</div>;
+}

apps/web/src/components/user/ChangePassword.tsx

@@ -0,0 +1,85 @@
+import { api, handleError } from "@/utils/api";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ContentHeader, ContentSection } from "@/components/Content";
+import { useForm } from "react-hook-form";
+import { toast } from "@/components/ui/use-toast";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { InputError } from "../forms/InputError";
+
+const validator = z
+  .object({
+    oldPassword: z.string().min(1),
+    password: z.string().min(8),
+    confirmPassword: z.string().min(8),
+  })
+  .superRefine(({ confirmPassword, password }, ctx) => {
+    if (confirmPassword !== password) {
+      ctx.addIssue({
+        path: ["confirmPassword"],
+        code: "custom",
+        message: "The passwords did not match",
+      });
+    }
+  });
+
+type IForm = z.infer<typeof validator>;
+
+export function ChangePassword() {
+  const mutation = api.user.changePassword.useMutation({
+    onSuccess() {
+      toast({
+        title: "Success",
+        description: "You have updated your password",
+      });
+    },
+    onError: handleError,
+  });
+
+  const { register, handleSubmit, formState } = useForm<IForm>({
+    resolver: zodResolver(validator),
+    defaultValues: {
+      oldPassword: "",
+      password: "",
+      confirmPassword: "",
+    },
+  });
+
+  return (
+    <form
+      onSubmit={handleSubmit((values) => {
+        mutation.mutate(values)
+      })}
+      className="flex flex-col divide-y divide-border"
+    >
+      <ContentHeader
+        title="Change password"
+        text="Need to change your password?"
+      >
+        <Button type="submit" disabled={!formState.isDirty}>Change it!</Button>
+      </ContentHeader>
+      <ContentSection title="Old password" text={<InputError {...formState.errors.oldPassword}/>}>
+        <Input
+          type="password"
+          {...register("oldPassword")}
+          placeholder="Old password"
+        />
+      </ContentSection>
+      <ContentSection title="New password" text={<InputError {...formState.errors.password}/>}>
+        <Input
+          type="password"
+          {...register("password")}
+          placeholder="New password"
+        />
+      </ContentSection>
+      <ContentSection title="Confirm password" text={<InputError {...formState.errors.confirmPassword}/>}>
+        <Input
+          type="password"
+          {...register("confirmPassword")}
+          placeholder="Confirm password"
+        />
+      </ContentSection>
+    </form>
+  );
+}