user forms added

frontend/src/routes/(auth)/-components/ChangePassword.tsx

@@ -0,0 +1,90 @@
+import { useRouter } from "@tanstack/react-router";
+import { toast } from "sonner";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { authClient } from "@/lib/auth-client";
+import { useAppForm } from "@/lib/formSutff";
+
+export default function ChangePassword() {
+	const router = useRouter();
+	const form = useAppForm({
+		defaultValues: {
+			currentPassword: "",
+			newPassword: "",
+			confirmPassword: "",
+		},
+		onSubmit: async ({ value }) => {
+			if (value.newPassword !== value.confirmPassword) {
+				toast.error("Passwords do not match");
+				return;
+			}
+			const { data, error } = await authClient.changePassword({
+				newPassword: value.newPassword,
+				currentPassword: value.currentPassword,
+				revokeOtherSessions: true,
+			});
+
+			if (data) {
+				toast.success("Password has been updated");
+				form.reset();
+				router.invalidate();
+
+				//navigate({ to: "/login" });
+			}
+
+			if (error) {
+				toast.success(error.message);
+			}
+		},
+	});
+	return (
+		<div>
+			<Card className="p-6 w-96">
+				<CardHeader>
+					<CardTitle>Change password</CardTitle>
+				</CardHeader>
+
+				<CardContent>
+					<form
+						onSubmit={(e) => {
+							e.preventDefault();
+							form.handleSubmit();
+						}}
+					>
+						<form.AppField name="currentPassword">
+							{(field) => (
+								<field.InputPasswordField
+									label="Enter your current password"
+									required={true}
+								/>
+							)}
+						</form.AppField>
+
+						<form.AppField name="newPassword">
+							{(field) => (
+								<field.InputPasswordField
+									label="New password"
+									required={true}
+								/>
+							)}
+						</form.AppField>
+
+						<form.AppField name="confirmPassword">
+							{(field) => (
+								<field.InputPasswordField
+									label="Re-enter your password"
+									required={true}
+								/>
+							)}
+						</form.AppField>
+
+						<div className="flex justify-end mt-6">
+							<form.AppForm>
+								<form.SubmitButton>Update Profile</form.SubmitButton>
+							</form.AppForm>
+						</div>
+					</form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}