mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement update user, update password and delete account

Browse Source
This commit is contained in:
m5r
2021-09-25 07:09:20 +08:00
parent 12983316f5
commit c9b657e44c
11 changed files with 220 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/settings/components/danger-zone.tsx
View File

@ -1,11 +1,14 @@
import { useRef, useState } from "react";
import { useMutation } from "blitz";
import clsx from "clsx";
import Button from "./button";
import SettingsSection from "./settings-section";
import Modal, { ModalTitle } from "./modal";
import deleteUser from "../mutations/delete-user";
export default function DangerZone() {
const deleteUserMutation = useMutation(deleteUser)[0];
const [isDeletingUser, setIsDeletingUser] = useState(false);
const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
const modalCancelButtonRef = useRef<HTMLButtonElement>(null);
@ -19,14 +22,17 @@ export default function DangerZone() {
};
const onConfirm = () => {
setIsDeletingUser(true);
// user.deleteUser();
return deleteUserMutation();
};
return (
<SettingsSection title="Danger Zone" description="Highway to the Danger Zone 𝅘𝅥𝅮">
<div className="shadow border border-red-300 sm:rounded-md sm:overflow-hidden">
<div className="flex justify-between items-center flex-row px-4 py-5 bg-white sm:p-6">
<p>Once you delete your account, all of its data will be permanently deleted.</p>
<div className="flex justify-between items-center flex-row px-4 py-5 space-x-2 bg-white sm:p-6">
<p>
Once you delete your account, all of its data will be permanently deleted and any ongoing
subscription will be cancelled.
</p>
<span className="text-base font-medium">
<Button variant="error" type="button" onClick={() => setIsConfirmationModalOpen(true)}>

14
app/settings/components/profile-informations.tsx
View File

@ -1,8 +1,9 @@
import type { FunctionComponent } from "react";
import { useEffect, useState } from "react";
import { useRouter } from "blitz";
import { useMutation } from "blitz";
import { useForm } from "react-hook-form";
import updateUser from "../mutations/update-user";
import Alert from "./alert";
import Button from "./button";
import SettingsSection from "./settings-section";
@ -19,7 +20,7 @@ const logger = appLogger.child({ module: "profile-settings" });
const ProfileInformations: FunctionComponent = () => {
const { user } = useCurrentUser();
const router = useRouter();
const updateUserMutation = useMutation(updateUser)[0];
const {
register,
handleSubmit,
@ -39,16 +40,9 @@ const ProfileInformations: FunctionComponent = () => {
}
try {
// TODO
// await updateUser({ email, data: { name } });
await updateUserMutation({ email, name });
} catch (error: any) {
logger.error(error.response, "error updating user infos");
if (error.response.status === 401) {
logger.error("session expired, redirecting to sign in page");
return router.push("/auth/sign-in");
}
setErrorMessage(error.response.data.errorMessage);
}
});

69
app/settings/components/update-password.tsx
View File

@ -1,6 +1,6 @@
import type { FunctionComponent } from "react";
import { useState } from "react";
import { useRouter } from "blitz";
import { useMutation } from "blitz";
import { useForm } from "react-hook-form";
import Alert from "./alert";
@ -8,16 +8,17 @@ import Button from "./button";
import SettingsSection from "./settings-section";
import appLogger from "../../../integrations/logger";
import changePassword from "../mutations/change-password";
const logger = appLogger.child({ module: "update-password" });
type Form = {
currentPassword: string;
newPassword: string;
newPasswordConfirmation: string;
};
const UpdatePassword: FunctionComponent = () => {
const router = useRouter();
const changePasswordMutation = useMutation(changePassword)[0];
const {
register,
handleSubmit,
@ -25,28 +26,18 @@ const UpdatePassword: FunctionComponent = () => {
} = useForm<Form>();
const [errorMessage, setErrorMessage] = useState("");
const onSubmit = handleSubmit(async ({ newPassword, newPasswordConfirmation }) => {
const onSubmit = handleSubmit(async ({ currentPassword, newPassword }) => {
if (isSubmitting) {
return;
}
if (newPassword !== newPasswordConfirmation) {
setErrorMessage("New passwords don't match");
return;
}
setErrorMessage("");
try {
// TODO
// await customer.updateUser({ password: newPassword });
await changePasswordMutation({ currentPassword, newPassword });
} catch (error: any) {
logger.error(error.response, "error updating user infos");
if (error.response.status === 401) {
logger.error("session expired, redirecting to sign in page");
return router.push("/auth/sign-in");
}
setErrorMessage(error.response.data.errorMessage);
logger.error(error, "error updating user infos");
setErrorMessage(error.message);
}
});
@ -62,7 +53,7 @@ const UpdatePassword: FunctionComponent = () => {
</div>
) : null}
{isSubmitSuccessful ? (
{!isSubmitting && isSubmitSuccessful && !errorMessage ? (
<div className="mb-8">
<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
</div>
@ -70,6 +61,25 @@ const UpdatePassword: FunctionComponent = () => {
<div className="shadow sm:rounded-md sm:overflow-hidden">
<div className="px-4 py-5 bg-white space-y-6 sm:p-6">
<div>
<label
htmlFor="currentPassword"
className="flex justify-between text-sm font-medium leading-5 text-gray-700"
>
<div>Current password</div>
</label>
<div className="mt-1 rounded-md shadow-sm">
<input
id="currentPassword"
type="password"
tabIndex={3}
className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
{...register("currentPassword")}
required
/>
</div>
</div>
<div>
<label
htmlFor="newPassword"
@ -81,28 +91,9 @@ const UpdatePassword: FunctionComponent = () => {
<input
id="newPassword"
type="password"
tabIndex={3}
className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
{...register("newPassword")}
required
/>
</div>
</div>
<div>
<label
htmlFor="newPasswordConfirmation"
className="flex justify-between text-sm font-medium leading-5 text-gray-700"
>
<div>Confirm new password</div>
</label>
<div className="mt-1 rounded-md shadow-sm">
<input
id="newPasswordConfirmation"
type="password"
tabIndex={4}
className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
{...register("newPasswordConfirmation")}
{...register("newPassword")}
required
/>
</div>