keypad and settings pages
This commit is contained in:
97
app/settings/components/alert.tsx
Normal file
97
app/settings/components/alert.tsx
Normal file
@ -0,0 +1,97 @@
|
||||
import type { ReactElement } from "react";
|
||||
|
||||
type AlertVariant = "error" | "success" | "info" | "warning";
|
||||
|
||||
type AlertVariantProps = {
|
||||
backgroundColor: string;
|
||||
icon: ReactElement;
|
||||
titleTextColor: string;
|
||||
messageTextColor: string;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
message: string;
|
||||
variant: AlertVariant;
|
||||
};
|
||||
|
||||
const ALERT_VARIANTS: Record<AlertVariant, AlertVariantProps> = {
|
||||
error: {
|
||||
backgroundColor: "bg-red-50",
|
||||
icon: (
|
||||
<svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
titleTextColor: "text-red-800",
|
||||
messageTextColor: "text-red-700",
|
||||
},
|
||||
success: {
|
||||
backgroundColor: "bg-green-50",
|
||||
icon: (
|
||||
<svg className="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
titleTextColor: "text-green-800",
|
||||
messageTextColor: "text-green-700",
|
||||
},
|
||||
info: {
|
||||
backgroundColor: "bg-primary-50",
|
||||
icon: (
|
||||
<svg className="h-5 w-5 text-primary-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
titleTextColor: "text-primary-800",
|
||||
messageTextColor: "text-primary-700",
|
||||
},
|
||||
warning: {
|
||||
backgroundColor: "bg-yellow-50",
|
||||
icon: (
|
||||
<svg className="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
titleTextColor: "text-yellow-800",
|
||||
messageTextColor: "text-yellow-700",
|
||||
},
|
||||
};
|
||||
|
||||
export default function Alert({ title, message, variant }: Props) {
|
||||
const variantProperties = ALERT_VARIANTS[variant];
|
||||
|
||||
return (
|
||||
<div className={`rounded-md p-4 ${variantProperties.backgroundColor}`}>
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">{variantProperties.icon}</div>
|
||||
<div className="ml-3">
|
||||
<h3
|
||||
className={`text-sm leading-5 font-medium ${variantProperties.titleTextColor}`}
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
<div className={`mt-2 text-sm leading-5 ${variantProperties.messageTextColor}`}>
|
||||
{message}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
48
app/settings/components/button.tsx
Normal file
48
app/settings/components/button.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import type { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler } from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
type Props = {
|
||||
variant: Variant;
|
||||
onClick?: MouseEventHandler;
|
||||
isDisabled?: boolean;
|
||||
type: ButtonHTMLAttributes<HTMLButtonElement>["type"];
|
||||
};
|
||||
|
||||
const Button: FunctionComponent<Props> = ({ children, type, variant, onClick, isDisabled }) => {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
type={type}
|
||||
className={clsx(
|
||||
"inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2",
|
||||
{
|
||||
[VARIANTS_STYLES[variant].base]: !isDisabled,
|
||||
[VARIANTS_STYLES[variant].disabled]: isDisabled,
|
||||
}
|
||||
)}
|
||||
disabled={isDisabled}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
|
||||
type Variant = "error" | "default";
|
||||
|
||||
type VariantStyle = {
|
||||
base: string;
|
||||
disabled: string;
|
||||
};
|
||||
|
||||
const VARIANTS_STYLES: Record<Variant, VariantStyle> = {
|
||||
error: {
|
||||
base: "bg-red-600 hover:bg-red-700 focus:ring-red-500",
|
||||
disabled: "bg-red-400 cursor-not-allowed focus:ring-red-500",
|
||||
},
|
||||
default: {
|
||||
base: "bg-primary-600 hover:bg-primary-700 focus:ring-primary-500",
|
||||
disabled: "bg-primary-400 cursor-not-allowed focus:ring-primary-500",
|
||||
},
|
||||
};
|
101
app/settings/components/danger-zone.tsx
Normal file
101
app/settings/components/danger-zone.tsx
Normal file
@ -0,0 +1,101 @@
|
||||
import { useRef, useState } from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
import Button from "./button";
|
||||
import SettingsSection from "./settings-section";
|
||||
import Modal, { ModalTitle } from "./modal";
|
||||
import useCurrentCustomer from "../../core/hooks/use-current-customer";
|
||||
|
||||
export default function DangerZone() {
|
||||
const customer = useCurrentCustomer();
|
||||
const [isDeletingUser, setIsDeletingUser] = useState(false);
|
||||
const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
|
||||
const modalCancelButtonRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const closeModal = () => {
|
||||
if (isDeletingUser) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsConfirmationModalOpen(false);
|
||||
};
|
||||
const onConfirm = () => {
|
||||
setIsDeletingUser(true);
|
||||
// user.deleteUser();
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
<span className="text-base font-medium">
|
||||
<Button
|
||||
variant="error"
|
||||
type="button"
|
||||
onClick={() => setIsConfirmationModalOpen(true)}
|
||||
>
|
||||
Delete my account
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
initialFocus={modalCancelButtonRef}
|
||||
isOpen={isConfirmationModalOpen}
|
||||
onClose={closeModal}
|
||||
>
|
||||
<div className="md:flex md:items-start">
|
||||
<div className="mt-3 text-center md:mt-0 md:ml-4 md:text-left">
|
||||
<ModalTitle>Delete my account</ModalTitle>
|
||||
<div className="mt-2 text-sm text-gray-500">
|
||||
<p>
|
||||
Are you sure you want to delete your account? Your subscription will
|
||||
be cancelled and your data permanently deleted.
|
||||
</p>
|
||||
<p>
|
||||
You are free to create a new account with the same email address if
|
||||
you ever wish to come back.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 md:mt-4 md:flex md:flex-row-reverse">
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(
|
||||
"transition-colors duration-150 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 md:ml-3 md:w-auto md:text-sm",
|
||||
{
|
||||
"bg-red-400 cursor-not-allowed": isDeletingUser,
|
||||
"bg-red-600 hover:bg-red-700": !isDeletingUser,
|
||||
}
|
||||
)}
|
||||
onClick={onConfirm}
|
||||
disabled={isDeletingUser}
|
||||
>
|
||||
Delete my account
|
||||
</button>
|
||||
<button
|
||||
ref={modalCancelButtonRef}
|
||||
type="button"
|
||||
className={clsx(
|
||||
"transition-colors duration-150 mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 md:mt-0 md:w-auto md:text-sm",
|
||||
{
|
||||
"bg-gray-50 cursor-not-allowed": isDeletingUser,
|
||||
"hover:bg-gray-50": !isDeletingUser,
|
||||
}
|
||||
)}
|
||||
onClick={closeModal}
|
||||
disabled={isDeletingUser}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
</SettingsSection>
|
||||
);
|
||||
}
|
9
app/settings/components/divider.tsx
Normal file
9
app/settings/components/divider.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
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>
|
||||
);
|
||||
}
|
63
app/settings/components/modal.tsx
Normal file
63
app/settings/components/modal.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import type { FunctionComponent, MutableRefObject } from "react";
|
||||
import { Fragment } from "react";
|
||||
import { Transition, Dialog } from "@headlessui/react";
|
||||
|
||||
type Props = {
|
||||
initialFocus?: MutableRefObject<HTMLElement | null> | undefined;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const Modal: FunctionComponent<Props> = ({ children, initialFocus, isOpen, onClose }) => {
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Dialog
|
||||
className="fixed z-30 inset-0 overflow-y-auto"
|
||||
initialFocus={initialFocus}
|
||||
onClose={onClose}
|
||||
open={isOpen}
|
||||
static
|
||||
>
|
||||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center md:block md:p-0">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
{/* This element is to trick the browser into centering the modal contents. */}
|
||||
<span className="hidden md:inline-block md:align-middle md:h-screen">
|
||||
​
|
||||
</span>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 md:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 md:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
|
||||
>
|
||||
<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all md:my-8 md:align-middle md:max-w-lg md:w-full md:p-6">
|
||||
{children}
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
|
||||
export const ModalTitle: FunctionComponent = ({ children }) => (
|
||||
<Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
|
||||
{children}
|
||||
</Dialog.Title>
|
||||
);
|
||||
|
||||
export default Modal;
|
134
app/settings/components/profile-informations.tsx
Normal file
134
app/settings/components/profile-informations.tsx
Normal file
@ -0,0 +1,134 @@
|
||||
import type { FunctionComponent } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "blitz";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
import Alert from "./alert";
|
||||
import Button from "./button";
|
||||
import SettingsSection from "./settings-section";
|
||||
import useCurrentCustomer from "../../core/hooks/use-current-customer";
|
||||
|
||||
import appLogger from "../../../integrations/logger";
|
||||
|
||||
type Form = {
|
||||
name: string;
|
||||
email: string;
|
||||
};
|
||||
|
||||
const logger = appLogger.child({ module: "profile-settings" });
|
||||
|
||||
const ProfileInformations: FunctionComponent = () => {
|
||||
const { customer } = useCurrentCustomer();
|
||||
const router = useRouter();
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { isSubmitting, isSubmitSuccessful },
|
||||
} = useForm<Form>();
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
setValue("name", customer?.user.name ?? "");
|
||||
setValue("email", customer?.user.email ?? "");
|
||||
}, [setValue, customer]);
|
||||
|
||||
const onSubmit = handleSubmit(async ({ name, email }) => {
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// TODO
|
||||
// await customer.updateUser({ email, data: { name } });
|
||||
} catch (error) {
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
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="name"
|
||||
className="block text-sm font-medium leading-5 text-gray-700"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<div className="mt-1 rounded-md shadow-sm">
|
||||
<input
|
||||
id="name"
|
||||
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("name")}
|
||||
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;
|
28
app/settings/components/settings-layout.tsx
Normal file
28
app/settings/components/settings-layout.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import type { FunctionComponent } from "react";
|
||||
import { useRouter } from "blitz";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faChevronLeft } from "@fortawesome/pro-regular-svg-icons";
|
||||
|
||||
import Layout from "../../core/layouts/layout";
|
||||
|
||||
const pageTitle = "User Settings";
|
||||
|
||||
const SettingsLayout: FunctionComponent = ({ children }) => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<Layout title={pageTitle}>
|
||||
<header className="px-4 sm:px-6 md:px-0">
|
||||
<header className="flex">
|
||||
<span className="flex items-center cursor-pointer" onClick={router.back}>
|
||||
<FontAwesomeIcon className="h-8 w-8 mr-2" icon={faChevronLeft} /> Back
|
||||
</span>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<main>{children}</main>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsLayout;
|
18
app/settings/components/settings-section.tsx
Normal file
18
app/settings/components/settings-section.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import type { FunctionComponent, ReactNode } from "react";
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
description?: ReactNode;
|
||||
};
|
||||
|
||||
const SettingsSection: FunctionComponent<Props> = ({ children, title, description }) => (
|
||||
<div className="px-4 sm:px-6 md: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>
|
||||
);
|
||||
|
||||
export default SettingsSection;
|
133
app/settings/components/update-password.tsx
Normal file
133
app/settings/components/update-password.tsx
Normal file
@ -0,0 +1,133 @@
|
||||
import type { FunctionComponent } from "react";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "blitz";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
import Alert from "./alert";
|
||||
import Button from "./button";
|
||||
import SettingsSection from "./settings-section";
|
||||
import useCurrentCustomer from "../../core/hooks/use-current-customer";
|
||||
|
||||
import appLogger from "../../../integrations/logger";
|
||||
|
||||
const logger = appLogger.child({ module: "update-password" });
|
||||
|
||||
type Form = {
|
||||
newPassword: string;
|
||||
newPasswordConfirmation: string;
|
||||
};
|
||||
|
||||
const UpdatePassword: FunctionComponent = () => {
|
||||
const customer = useCurrentCustomer();
|
||||
const router = useRouter();
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting, isSubmitSuccessful },
|
||||
} = useForm<Form>();
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
|
||||
const onSubmit = handleSubmit(async ({ newPassword, newPasswordConfirmation }) => {
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword !== newPasswordConfirmation) {
|
||||
setErrorMessage("New passwords don't match");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// TODO
|
||||
// await customer.updateUser({ password: newPassword });
|
||||
} catch (error) {
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
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}
|
||||
|
||||
{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>
|
||||
<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={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")}
|
||||
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