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

account settings actions, account deletion left

Browse Source
This commit is contained in:
m5r
2022-05-14 14:43:45 +02:00
parent 98b89ae0f7
commit 48b3604116
17 changed files with 314 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/features/auth/actions/register.ts
View File

@ -2,6 +2,7 @@ import { type ActionFunction, json } from "@remix-run/node";
import { GlobalRole, MembershipRole } from "@prisma/client";
import db from "~/utils/db.server";
import logger from "~/utils/logger.server";
import { authenticate, hashPassword } from "~/utils/auth.server";
import { type FormError, validate } from "~/utils/validation.server";
import { Register } from "../validations";
@ -17,7 +18,7 @@ const action: ActionFunction = async ({ request }) => {
return json<RegisterActionData>({ errors: validation.errors });
}
const { orgName, fullName, email, password } = validation.data;
const { fullName, email, password } = validation.data;
const hashedPassword = await hashPassword(password.trim());
try {
await db.user.create({
@ -30,13 +31,15 @@ const action: ActionFunction = async ({ request }) => {
create: {
role: MembershipRole.OWNER,
organization: {
create: { name: orgName },
create: {}
},
},
},
},
});
} catch (error: any) {
logger.error(error);
if (error.code === "P2002") {
if (error.meta.target[0] === "email") {
return json<RegisterActionData>({

16
app/features/auth/pages/register.tsx
View File

@ -37,21 +37,13 @@ export default function RegisterPage() {
</div>
) : null}
<LabeledTextField
name="orgName"
type="text"
label="Organization name"
disabled={isSubmitting}
error={actionData?.errors?.orgName}
tabIndex={1}
/>
<LabeledTextField
name="fullName"
type="text"
label="Full name"
disabled={isSubmitting}
error={actionData?.errors?.fullName}
tabIndex={2}
tabIndex={1}
/>
<LabeledTextField
name="email"
@ -59,7 +51,7 @@ export default function RegisterPage() {
label="Email"
disabled={isSubmitting}
error={actionData?.errors?.email}
tabIndex={3}
tabIndex={2}
/>
<LabeledTextField
name="password"
@ -67,13 +59,13 @@ export default function RegisterPage() {
label="Password"
disabled={isSubmitting}
error={actionData?.errors?.password}
tabIndex={4}
tabIndex={3}
/>
<Button
type="submit"
disabled={transition.state === "submitting"}
tabIndex={5}
tabIndex={4}
>
Register
</Button>

1
app/features/auth/validations.ts
View File

@ -3,7 +3,6 @@ import { z } from "zod";
export const password = z.string().min(10).max(100);
export const Register = z.object({
orgName: z.string().nonempty(),
fullName: z.string().nonempty(),
email: z.string().email(),
password,

8
app/features/core/components/labeled-text-field.tsx
View File

@ -7,7 +7,7 @@ type Props = {
sideLabel?: ReactNode;
type?: "text" | "password" | "email";
error?: string;
} & InputHTMLAttributes<HTMLInputElement>;
} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "type">;
const LabeledTextField: FunctionComponent<Props> = ({ name, label, sideLabel, type = "text", error, ...props }) => {
const hasSideLabel = !!sideLabel;
@ -19,6 +19,7 @@ const LabeledTextField: FunctionComponent<Props> = ({ name, label, sideLabel, ty
className={clsx("text-sm font-medium leading-5 text-gray-700", {
block: !hasSideLabel,
"flex justify-between": hasSideLabel,
// "text-red-600": !!error,
})}
>
{label}
@ -29,7 +30,10 @@ const LabeledTextField: FunctionComponent<Props> = ({ name, label, sideLabel, ty
id={name}
name={name}
type={type}
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"
className={clsx("appearance-none block w-full px-3 py-2 border 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", {
"border-gray-300": !error,
"border-red-300": error,
})}
required
{...props}
/>

126
app/features/settings/actions/account.ts Normal file
View File

@ -0,0 +1,126 @@
import { type ActionFunction, json, redirect } from "@remix-run/node";
import { badRequest } from "remix-utils";
import { z } from "zod";
import SecurePassword from "secure-password";
import db from "~/utils/db.server";
import logger from "~/utils/logger.server";
import { hashPassword, requireLoggedIn, verifyPassword } from "~/utils/auth.server";
import { type FormError, validate } from "~/utils/validation.server";
import { destroySession, getSession } from "~/utils/session.server";
import deleteUserQueue from "~/queues/delete-user-data.server";
const action: ActionFunction = async ({ request }) => {
const formData = Object.fromEntries(await request.formData());
if (!formData._action) {
const errorMessage = "POST /settings without any _action";
logger.error(errorMessage);
return badRequest({ errorMessage });
}
switch (formData._action as Action) {
case "deleteUser":
return deleteUser(request);
case "changePassword":
return changePassword(request, formData);
case "updateUser":
return updateUser(request, formData);
default:
const errorMessage = `POST /settings with an invalid _action=${formData._action}`;
logger.error(errorMessage);
return badRequest({ errorMessage });
}
};
export default action;
async function deleteUser(request: Request) {
const { id } = await requireLoggedIn(request);
await db.user.update({
where: { id },
data: { hashedPassword: "pending deletion" },
});
await deleteUserQueue.add(`delete user ${id}`, { userId: id });
return redirect("/", {
headers: {
"Set-Cookie": await destroySession(await getSession(request)),
},
});
}
type ChangePasswordFailureActionData = { errors: FormError<typeof validations.changePassword>; submitted?: never };
type ChangePasswordSuccessfulActionData = { errors?: never; submitted: true };
export type ChangePasswordActionData = {
changePassword: ChangePasswordFailureActionData | ChangePasswordSuccessfulActionData;
};
async function changePassword(request: Request, formData: unknown) {
const validation = validate(validations.changePassword, formData);
if (validation.errors) {
return json<ChangePasswordActionData>({
changePassword: { errors: validation.errors },
});
}
const { id } = await requireLoggedIn(request);
const user = await db.user.findUnique({ where: { id } });
const { currentPassword, newPassword } = validation.data;
const verificationResult = await verifyPassword(user!.hashedPassword!, currentPassword);
if ([SecurePassword.INVALID, SecurePassword.INVALID_UNRECOGNIZED_HASH, false].includes(verificationResult)) {
return json<ChangePasswordActionData>({
changePassword: { errors: { currentPassword: "Current password is incorrect" } },
});
}
const hashedPassword = await hashPassword(newPassword.trim());
await db.user.update({
where: { id: user!.id },
data: { hashedPassword },
});
return json<ChangePasswordActionData>({
changePassword: { submitted: true },
});
}
type UpdateUserFailureActionData = { errors: FormError<typeof validations.updateUser>; submitted?: never };
type UpdateUserSuccessfulActionData = { errors?: never; submitted: true };
export type UpdateUserActionData = {
updateUser: UpdateUserFailureActionData | UpdateUserSuccessfulActionData;
};
async function updateUser(request: Request, formData: unknown) {
const validation = validate(validations.updateUser, formData);
if (validation.errors) {
return json<UpdateUserActionData>({
updateUser: { errors: validation.errors },
});
}
const user = await requireLoggedIn(request);
const { email, fullName } = validation.data;
await db.user.update({
where: { id: user.id },
data: { email, fullName },
});
return json<UpdateUserActionData>({
updateUser: { submitted: true },
});
}
type Action = "deleteUser" | "updateUser" | "changePassword";
const validations = {
deleteUser: null,
changePassword: z.object({
currentPassword: z.string(),
newPassword: z.string().min(10).max(100),
}),
updateUser: z.object({
fullName: z.string(),
email: z.string(),
}),
} as const;

13
app/features/settings/components/account/danger-zone.tsx
View File

@ -1,4 +1,5 @@
import { useRef, useState } from "react";
import { useFetcher, useSubmit, useTransition } from "@remix-run/react";
import clsx from "clsx";
import Button from "../button";
@ -6,9 +7,14 @@ import SettingsSection from "../settings-section";
import Modal, { ModalTitle } from "~/features/core/components/modal";
export default function DangerZone() {
const [isDeletingUser, setIsDeletingUser] = useState(false);
const transition = useTransition();
const isCurrentFormTransition = transition.submission?.formData.get("_action") === "deleteUser";
const isDeletingUser = isCurrentFormTransition && transition.state === "submitting";
const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
const modalCancelButtonRef = useRef<HTMLButtonElement>(null);
const fetcher = useFetcher();
const submit = useSubmit();
// TODO
const closeModal = () => {
if (isDeletingUser) {
@ -17,10 +23,6 @@ export default function DangerZone() {
setIsConfirmationModalOpen(false);
};
const onConfirm = () => {
setIsDeletingUser(true);
// return deleteUserMutation(); // TODO
};
return (
<SettingsSection className="border border-red-300">
@ -63,7 +65,6 @@ export default function DangerZone() {
"bg-red-600 hover:bg-red-700": !isDeletingUser,
},
)}
onClick={onConfirm}
disabled={isDeletingUser}
>
Delete my account

39
app/features/settings/components/account/profile-informations.tsx
View File

@ -1,47 +1,48 @@
import type { FunctionComponent } from "react";
import { useActionData, useTransition } from "@remix-run/react";
import { Form, useActionData, useTransition } from "@remix-run/react";
import Alert from "../../../core/components/alert";
import type { UpdateUserActionData } from "~/features/settings/actions/account";
import useSession from "~/features/core/hooks/use-session";
import Alert from "~/features/core/components/alert";
import Button from "../button";
import SettingsSection from "../settings-section";
import useSession from "~/features/core/hooks/use-session";
const ProfileInformations: FunctionComponent = () => {
const user = useSession();
const transition = useTransition();
const actionData = useActionData();
const actionData = useActionData<UpdateUserActionData>()?.updateUser;
const isSubmitting = transition.state === "submitting";
const isSuccess = actionData?.submitted === true;
const error = actionData?.error;
const isError = !!error;
const onSubmit = async () => {
// await updateUserMutation({ email, fullName }); // TODO
};
const errors = actionData?.errors;
const topErrorMessage = errors?.general;
const isError = typeof topErrorMessage !== "undefined";
const isSuccess = actionData?.submitted;
const isCurrentFormTransition = transition.submission?.formData.get("_action") === "updateUser";
const isSubmitting = isCurrentFormTransition && transition.state === "submitting";
console.log("isSuccess", isSuccess, actionData);
return (
<form onSubmit={onSubmit}>
<Form method="post">
<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"}
Save
</Button>
</div>
}
>
{isError ? (
<div className="mb-8">
<Alert title="Oops, there was an issue" message={error} variant="error" />
<Alert title="Oops, there was an issue" message={topErrorMessage} variant="error" />
</div>
) : null}
{isSuccess ? (
{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
@ -75,8 +76,10 @@ const ProfileInformations: FunctionComponent = () => {
/>
</div>
</div>
<input type="hidden" name="_action" value="updateUser" />
</SettingsSection>
</form>
</Form>
);
};

82
app/features/settings/components/account/update-password.tsx
View File

@ -1,37 +1,36 @@
import type { FunctionComponent } from "react";
import { Form, useActionData, useTransition } from "@remix-run/react";
import type { ChangePasswordActionData } from "~/features/settings/actions/account";
import Alert from "~/features/core/components/alert";
import LabeledTextField from "~/features/core/components/labeled-text-field";
import Button from "../button";
import SettingsSection from "../settings-section";
import { useActionData, useTransition } from "@remix-run/react";
const UpdatePassword: FunctionComponent = () => {
const transition = useTransition();
const actionData = useActionData();
const actionData = useActionData<ChangePasswordActionData>()?.changePassword;
const isSubmitting = transition.state === "submitting";
const isSuccess = actionData?.submitted === true;
const error = actionData?.error;
const isError = !!error;
const onSubmit = async () => {
// await changePasswordMutation({ currentPassword, newPassword }); // TODO
};
const topErrorMessage = actionData?.errors?.general;
const isError = typeof topErrorMessage !== "undefined";
const isSuccess = actionData?.submitted;
const isCurrentFormTransition = transition.submission?.formData.get("_action") === "changePassword";
const isSubmitting = isCurrentFormTransition && transition.state === "submitting";
return (
<form onSubmit={onSubmit}>
<Form method="post">
<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"}
Save
</Button>
</div>
}
>
{isError ? (
<div className="mb-8">
<Alert title="Oops, there was an issue" message={error} variant="error" />
<Alert title="Oops, there was an issue" message={topErrorMessage} variant="error" />
</div>
) : null}
@ -40,45 +39,28 @@ const UpdatePassword: FunctionComponent = () => {
<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"
name="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"
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"
name="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"
required
/>
</div>
</div>
<LabeledTextField
name="currentPassword"
label="Current password"
type="password"
tabIndex={3}
error={actionData?.errors?.currentPassword}
disabled={isSubmitting}
/>
<LabeledTextField
name="newPassword"
label="New password"
type="password"
tabIndex={4}
error={actionData?.errors?.newPassword}
disabled={isSubmitting}
/>
<input type="hidden" name="_action" value="changePassword" />
</SettingsSection>
</form>
</Form>
);
};

3
app/features/settings/components/button.tsx
View File

@ -5,8 +5,7 @@ type Props = {
variant: Variant;
onClick?: MouseEventHandler;
isDisabled?: boolean;
type: ButtonHTMLAttributes<HTMLButtonElement>["type"];
};
} & ButtonHTMLAttributes<HTMLButtonElement>;
const Button: FunctionComponent<PropsWithChildren<Props>> = ({ children, type, variant, onClick, isDisabled }) => {
return (

2
app/routes/__app.tsx
View File

@ -12,7 +12,7 @@ export default function __App() {
const hideFooter = false;
const matches = useMatches();
// matches[0].handle
console.log("matches", matches);
// console.log("matches", matches);
return (
<div className="h-full w-full overflow-hidden fixed bg-gray-100">

3
app/routes/__app/settings/account.tsx
View File

@ -1,7 +1,10 @@
import accountAction from "~/features/settings/actions/account";
import ProfileInformations from "~/features/settings/components/account/profile-informations";
import UpdatePassword from "~/features/settings/components/account/update-password";
import DangerZone from "~/features/settings/components/account/danger-zone";
export const action = accountAction;
export default function Account() {
return (
<div className="flex flex-col space-y-6">

6
app/utils/auth.server.ts
View File

@ -9,7 +9,7 @@ import authenticator from "./authenticator.server";
import { AuthenticationError } from "./errors";
import { commitSession, destroySession, getSession } from "./session.server";
export type SessionOrganization = Pick<Organization, "name" | "id"> & { role: MembershipRole };
export type SessionOrganization = Pick<Organization, "id"> & { role: MembershipRole };
export type SessionUser = Omit<User, "hashedPassword"> & {
organizations: SessionOrganization[];
};
@ -38,7 +38,7 @@ export async function login({ form }: FormStrategyVerifyParams): Promise<Session
memberships: {
select: {
organization: {
select: { name: true, id: true },
select: { id: true },
},
role: true,
},
@ -150,7 +150,7 @@ export async function refreshSessionData(request: Request) {
memberships: {
select: {
organization: {
select: { name: true, id: true },
select: { id: true },
},
role: true,
},