keypad and settings pages

This commit is contained in:
m5r
2021-08-01 01:22:48 +08:00
parent 079241ddb0
commit cd83f0c78e
23 changed files with 1081 additions and 15 deletions

View 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>
);
}

View 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",
},
};

View 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>
);
}

View 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>
);
}

View 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">
&#8203;
</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;

View 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;

View 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;

View 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;

View 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;