132 lines
4.3 KiB
TypeScript
132 lines
4.3 KiB
TypeScript
import Head from "next/head";
|
|
import { useRef, useState } from "react";
|
|
import prisma from "../../lib/prisma";
|
|
import Modal from "../../components/Modal";
|
|
import Shell from "../../components/Shell";
|
|
import SettingsShell from "../../components/Settings";
|
|
import { useSession, getSession } from "next-auth/client";
|
|
import Loader from "@components/Loader";
|
|
|
|
export default function Settings() {
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const [session, loading] = useSession();
|
|
|
|
const [successModalOpen, setSuccessModalOpen] = useState(false);
|
|
const oldPasswordRef = useRef<HTMLInputElement>();
|
|
const newPasswordRef = useRef<HTMLInputElement>();
|
|
|
|
if (loading) {
|
|
return <Loader />;
|
|
}
|
|
|
|
const closeSuccessModal = () => {
|
|
setSuccessModalOpen(false);
|
|
};
|
|
|
|
async function changePasswordHandler(event) {
|
|
event.preventDefault();
|
|
|
|
const enteredOldPassword = oldPasswordRef.current.value;
|
|
const enteredNewPassword = newPasswordRef.current.value;
|
|
|
|
// TODO: Add validation
|
|
|
|
/*eslint-disable */
|
|
const response = await fetch("/api/auth/changepw", {
|
|
method: "PATCH",
|
|
body: JSON.stringify({ oldPassword: enteredOldPassword, newPassword: enteredNewPassword }),
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
});
|
|
/*eslint-enable */
|
|
|
|
setSuccessModalOpen(true);
|
|
}
|
|
|
|
return (
|
|
<Shell heading="Password" subtitle="Change the password that you use to sign in to your account.">
|
|
<Head>
|
|
<title>Change Password | Calendso</title>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<SettingsShell>
|
|
<form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={changePasswordHandler}>
|
|
<div className="py-6 lg:pb-8">
|
|
<div className="flex">
|
|
<div className="w-1/2 mr-2">
|
|
<label htmlFor="current_password" className="block text-sm font-medium text-gray-700">
|
|
Current Password
|
|
</label>
|
|
<div className="mt-1">
|
|
<input
|
|
ref={oldPasswordRef}
|
|
type="password"
|
|
name="current_password"
|
|
id="current_password"
|
|
required
|
|
className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-sm"
|
|
placeholder="Your old password"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-1/2 ml-2">
|
|
<label htmlFor="new_password" className="block text-sm font-medium text-gray-700">
|
|
New Password
|
|
</label>
|
|
<div className="mt-1">
|
|
<input
|
|
ref={newPasswordRef}
|
|
type="password"
|
|
name="new_password"
|
|
id="new_password"
|
|
required
|
|
className="shadow-sm focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-sm"
|
|
placeholder="Your super secure new password"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr className="mt-8" />
|
|
<div className="py-4 flex justify-end">
|
|
<button
|
|
type="submit"
|
|
className="ml-2 bg-neutral-900 border border-transparent rounded-sm shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<Modal
|
|
heading="Password updated successfully"
|
|
description="Your password has been successfully changed."
|
|
open={successModalOpen}
|
|
handleClose={closeSuccessModal}
|
|
/>
|
|
</SettingsShell>
|
|
</Shell>
|
|
);
|
|
}
|
|
|
|
export async function getServerSideProps(context) {
|
|
const session = await getSession(context);
|
|
if (!session) {
|
|
return { redirect: { permanent: false, destination: "/auth/login" } };
|
|
}
|
|
|
|
const user = await prisma.user.findFirst({
|
|
where: {
|
|
email: session.user.email,
|
|
},
|
|
select: {
|
|
id: true,
|
|
username: true,
|
|
name: true,
|
|
},
|
|
});
|
|
|
|
return {
|
|
props: { user }, // will be passed to the page component as props
|
|
};
|
|
}
|