better looking SettingsSection
This commit is contained in:
m5r
@ -2,10 +2,10 @@ 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";
|
||||
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];
|
||||
@ -26,20 +26,18 @@ export default function DangerZone() {
|
||||
};
|
||||
|
||||
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 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>
|
||||
<SettingsSection className="border border-red-300">
|
||||
<div className="flex justify-between items-center flex-row space-x-2">
|
||||
<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)}>
|
||||
Delete my account
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-base font-medium">
|
||||
<Button variant="error" type="button" onClick={() => setIsConfirmationModalOpen(true)}>
|
||||
Delete my account
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Modal initialFocus={modalCancelButtonRef} isOpen={isConfirmationModalOpen} onClose={closeModal}>
|
||||
115
app/settings/components/account/profile-informations.tsx
Normal file
115
app/settings/components/account/profile-informations.tsx
Normal file
@ -0,0 +1,115 @@
|
||||
import type { FunctionComponent } from "react";
|
||||
import { useEffect } from "react";
|
||||
import { useMutation } from "blitz";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
import updateUser from "../../mutations/update-user";
|
||||
import Alert from "../../../core/components/alert";
|
||||
import Button from "../button";
|
||||
import SettingsSection from "../settings-section";
|
||||
import useCurrentUser from "../../../core/hooks/use-current-user";
|
||||
|
||||
import appLogger from "../../../../integrations/logger";
|
||||
|
||||
type Form = {
|
||||
fullName: string;
|
||||
email: string;
|
||||
};
|
||||
|
||||
const logger = appLogger.child({ module: "profile-settings" });
|
||||
|
||||
const ProfileInformations: FunctionComponent = () => {
|
||||
const { user } = useCurrentUser();
|
||||
const [updateUserMutation, { error, isError, isSuccess }] = useMutation(updateUser);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<Form>();
|
||||
|
||||
useEffect(() => {
|
||||
setValue("fullName", user?.fullName ?? "");
|
||||
setValue("email", user?.email ?? "");
|
||||
}, [setValue, user]);
|
||||
|
||||
const onSubmit = handleSubmit(async ({ fullName, email }) => {
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
await updateUserMutation({ email, fullName });
|
||||
});
|
||||
const errorMessage = parseErrorMessage(error as Error | null);
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit}>
|
||||
<SettingsSection
|
||||
footer={
|
||||
<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
|
||||
<Button variant="default" type="submit" isDisabled={isSubmitting}>
|
||||
{isSubmitting ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{isError ? (
|
||||
<div className="mb-8">
|
||||
<Alert title="Oops, there was an issue" message={errorMessage} variant="error" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{isSuccess ? (
|
||||
<div className="mb-8">
|
||||
<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
|
||||
</div>
|
||||
) : null}
|
||||
<div className="col-span-3 sm:col-span-2">
|
||||
<label htmlFor="fullName" className="block text-sm font-medium leading-5 text-gray-700">
|
||||
Full name
|
||||
</label>
|
||||
<div className="mt-1 rounded-md shadow-sm">
|
||||
<input
|
||||
id="fullName"
|
||||
type="text"
|
||||
tabIndex={1}
|
||||
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("fullName")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium leading-5 text-gray-700">
|
||||
Email address
|
||||
</label>
|
||||
<div className="mt-1 rounded-md shadow-sm">
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
tabIndex={2}
|
||||
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("email")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileInformations;
|
||||
|
||||
function parseErrorMessage(error: Error | null): string {
|
||||
if (!error) {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (error.name === "ZodError") {
|
||||
return JSON.parse(error.message)[0].message;
|
||||
}
|
||||
|
||||
return error.message;
|
||||
}
|
||||
112
app/settings/components/account/update-password.tsx
Normal file
112
app/settings/components/account/update-password.tsx
Normal file
@ -0,0 +1,112 @@
|
||||
import type { FunctionComponent } from "react";
|
||||
import { useMutation } from "blitz";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
import Alert from "../../../core/components/alert";
|
||||
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;
|
||||
};
|
||||
|
||||
const UpdatePassword: FunctionComponent = () => {
|
||||
const [changePasswordMutation, { error, isError, isSuccess }] = useMutation(changePassword);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<Form>();
|
||||
|
||||
const onSubmit = handleSubmit(async ({ currentPassword, newPassword }) => {
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
await changePasswordMutation({ currentPassword, newPassword });
|
||||
});
|
||||
const errorMessage = parseErrorMessage(error as Error | null);
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit}>
|
||||
<SettingsSection
|
||||
footer={
|
||||
<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
|
||||
<Button variant="default" type="submit" isDisabled={isSubmitting}>
|
||||
{isSubmitting ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{isError ? (
|
||||
<div className="mb-8">
|
||||
<Alert title="Oops, there was an issue" message={errorMessage} variant="error" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{isSuccess ? (
|
||||
<div className="mb-8">
|
||||
<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
|
||||
</div>
|
||||
) : null}
|
||||
<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"
|
||||
className="flex justify-between text-sm font-medium leading-5 text-gray-700"
|
||||
>
|
||||
<div>New password</div>
|
||||
</label>
|
||||
<div className="mt-1 rounded-md shadow-sm">
|
||||
<input
|
||||
id="newPassword"
|
||||
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("newPassword")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdatePassword;
|
||||
|
||||
function parseErrorMessage(error: Error | null): string {
|
||||
if (!error) {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (error.name === "ZodError") {
|
||||
return JSON.parse(error.message)[0].message;
|
||||
}
|
||||
|
||||
return error.message;
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
export default function Divider() {
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-gray-300" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,114 +0,0 @@
|
||||
import type { FunctionComponent } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useMutation } from "blitz";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
import updateUser from "../mutations/update-user";
|
||||
import Alert from "../../core/components/alert";
|
||||
import Button from "./button";
|
||||
import SettingsSection from "./settings-section";
|
||||
import useCurrentUser from "../../core/hooks/use-current-user";
|
||||
|
||||
import appLogger from "../../../integrations/logger";
|
||||
|
||||
type Form = {
|
||||
fullName: string;
|
||||
email: string;
|
||||
};
|
||||
|
||||
const logger = appLogger.child({ module: "profile-settings" });
|
||||
|
||||
const ProfileInformations: FunctionComponent = () => {
|
||||
const { user } = useCurrentUser();
|
||||
const updateUserMutation = useMutation(updateUser)[0];
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { isSubmitting, isSubmitSuccessful },
|
||||
} = useForm<Form>();
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
setValue("fullName", user?.fullName ?? "");
|
||||
setValue("email", user?.email ?? "");
|
||||
}, [setValue, user]);
|
||||
|
||||
const onSubmit = handleSubmit(async ({ fullName, email }) => {
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await updateUserMutation({ email, fullName });
|
||||
} catch (error: any) {
|
||||
logger.error(error.response, "error updating user infos");
|
||||
setErrorMessage(error.response.data.errorMessage);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<SettingsSection
|
||||
title="Profile Information"
|
||||
description="Update your account's profile information and email address."
|
||||
>
|
||||
<form onSubmit={onSubmit}>
|
||||
{errorMessage ? (
|
||||
<div className="mb-8">
|
||||
<Alert title="Oops, there was an issue" message={errorMessage} variant="error" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{isSubmitSuccessful ? (
|
||||
<div className="mb-8">
|
||||
<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div className="px-4 py-5 bg-white space-y-6 sm:p-6">
|
||||
<div className="col-span-3 sm:col-span-2">
|
||||
<label htmlFor="fullName" className="block text-sm font-medium leading-5 text-gray-700">
|
||||
Full name
|
||||
</label>
|
||||
<div className="mt-1 rounded-md shadow-sm">
|
||||
<input
|
||||
id="fullName"
|
||||
type="text"
|
||||
tabIndex={1}
|
||||
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("fullName")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium leading-5 text-gray-700">
|
||||
Email address
|
||||
</label>
|
||||
<div className="mt-1 rounded-md shadow-sm">
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
tabIndex={2}
|
||||
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("email")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
|
||||
<Button variant="default" type="submit" isDisabled={isSubmitting}>
|
||||
{isSubmitting ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</SettingsSection>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileInformations;
|
||||
@ -1,18 +1,16 @@
|
||||
import type { FunctionComponent, ReactNode } from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
description?: ReactNode;
|
||||
className?: string;
|
||||
footer?: ReactNode;
|
||||
};
|
||||
|
||||
const SettingsSection: FunctionComponent<Props> = ({ children, title, description }) => (
|
||||
<div className="px-4 sm:px-6 lg:px-0 lg:grid lg:grid-cols-4 lg:gap-6">
|
||||
<div className="lg:col-span-1">
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900">{title}</h3>
|
||||
{description ? <p className="mt-1 text-sm text-gray-600">{description}</p> : null}
|
||||
</div>
|
||||
<div className="mt-5 lg:mt-0 lg:col-span-3">{children}</div>
|
||||
</div>
|
||||
const SettingsSection: FunctionComponent<Props> = ({ children, footer, className }) => (
|
||||
<section className={clsx(className, "shadow sm:rounded-md sm:overflow-hidden")}>
|
||||
<div className="bg-white space-y-6 py-6 px-4 sm:p-6">{children}</div>
|
||||
{footer ?? null}
|
||||
</section>
|
||||
);
|
||||
|
||||
export default SettingsSection;
|
||||
|
||||
@ -1,114 +0,0 @@
|
||||
import type { FunctionComponent } from "react";
|
||||
import { useState } from "react";
|
||||
import { useMutation } from "blitz";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
import Alert from "../../core/components/alert";
|
||||
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;
|
||||
};
|
||||
|
||||
const UpdatePassword: FunctionComponent = () => {
|
||||
const changePasswordMutation = useMutation(changePassword)[0];
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting, isSubmitSuccessful },
|
||||
} = useForm<Form>();
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
|
||||
const onSubmit = handleSubmit(async ({ currentPassword, newPassword }) => {
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
setErrorMessage("");
|
||||
|
||||
try {
|
||||
await changePasswordMutation({ currentPassword, newPassword });
|
||||
} catch (error: any) {
|
||||
logger.error(error, "error updating user infos");
|
||||
setErrorMessage(error.message);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<SettingsSection
|
||||
title="Update Password"
|
||||
description="Make sure you are using a long, random password to stay secure."
|
||||
>
|
||||
<form onSubmit={onSubmit}>
|
||||
{errorMessage ? (
|
||||
<div className="mb-8">
|
||||
<Alert title="Oops, there was an issue" message={errorMessage} variant="error" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!isSubmitting && isSubmitSuccessful && !errorMessage ? (
|
||||
<div className="mb-8">
|
||||
<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<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"
|
||||
className="flex justify-between text-sm font-medium leading-5 text-gray-700"
|
||||
>
|
||||
<div>New password</div>
|
||||
</label>
|
||||
<div className="mt-1 rounded-md shadow-sm">
|
||||
<input
|
||||
id="newPassword"
|
||||
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("newPassword")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
|
||||
<Button variant="default" type="submit" isDisabled={isSubmitting}>
|
||||
{isSubmitting ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</SettingsSection>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdatePassword;
|
||||
Reference in New Issue
Block a user