wind-explorer/ecoconnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added archiving

Browse Source
This commit is contained in:
Adam C
2024-06-26 00:20:29 +08:00
parent 9f4983d859
commit 161fa3dd1d
4 changed files with 184 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
client/src/components/UpdateAccountModule.tsx
View File

@@ -3,7 +3,7 @@ import * as Yup from "yup";
import config from "../config"; import config from "../config";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { retrieveUserInformation } from "../security/users"; import { retrieveUserInformation } from "../security/users";
import { Button } from "@nextui-org/react"; import { Accordion, AccordionItem, Button } from "@nextui-org/react";
import { Form, Formik } from "formik"; import { Form, Formik } from "formik";
import NextUIFormikInput from "./NextUIFormikInput"; import NextUIFormikInput from "./NextUIFormikInput";
import { PencilSquareIcon } from "../icons"; import { PencilSquareIcon } from "../icons";
@@ -83,89 +83,153 @@ export default function UpdateAccountModule({
phoneNumber: "", phoneNumber: "",
}; };
const archiveAccount = () => {
axios
.put(
config.serverAddress + "/users/archive/" + userInformation.id,
null,
{
headers: {
Authorization: `Bearer ${accessToken}`,
},
}
)
.then(() => {
navigate("/login");
})
.catch((err) => {
console.log("Archive failed: " + err);
});
};
return ( return (
<div> <div>
{userInformation && ( {userInformation && (
<div> <div className="flex flex-col gap-16">
<Formik <div>
initialValues={initialValues} <Formik
validationSchema={validationSchema} initialValues={initialValues}
onSubmit={handleSubmit} validationSchema={validationSchema}
enableReinitialize onSubmit={handleSubmit}
> enableReinitialize
{({ isValid, dirty }) => ( >
<Form className="flex flex-col gap-16"> {({ isValid, dirty }) => (
<div className="flex flex-row justify-between"> <Form className="flex flex-col gap-16">
<p className="text-4xl font-bold">Update your information</p> <div className="flex flex-row justify-between">
<div className="flex flex-row gap-4"> <p className="text-4xl font-bold">
<Button Update your information
variant="light" </p>
onPress={() => { <div className="flex flex-row gap-4">
navigate("/springboard/" + accessToken); <Button
}} variant="light"
> onPress={() => {
Cancel navigate("/springboard/" + accessToken);
</Button> }}
<Button >
type="submit" Cancel
color="primary" </Button>
isDisabled={!isValid || !dirty} <Button
> type="submit"
Save color="primary"
</Button> isDisabled={!isValid || !dirty}
</div> >
</div> Save
<div className="flex flex-row gap-8"> </Button>
<div className="flex-grow flex sm:flex-row flex-col gap-4 *:w-full *:flex *:flex-col *:gap-4">
<div>
<NextUIFormikInput
label="First Name"
name="firstName"
type="text"
placeholder="John"
labelPlacement="outside"
/>
<NextUIFormikInput
label="Last Name"
name="lastName"
type="text"
placeholder="Doe"
labelPlacement="outside"
/>
</div>
<div>
<NextUIFormikInput
label="Email"
name="email"
type="email"
placeholder="johndoe@email.com"
labelPlacement="outside"
/>
<NextUIFormikInput
label="Phone number"
name="phoneNumber"
type="text"
placeholder="XXXXXXXX"
labelPlacement="outside"
startContent={
<p className="text-sm pr-2 border-r-2 border-neutral-300 dark:border-neutral-700">
+65
</p>
}
/>
</div> </div>
</div> </div>
<div className="w-40 h-40 bg-red-500 hover:bg-red-700 transition-colors rounded-full relative"> <div className="flex flex-row gap-8">
<div className="transition-opacity opacity-0 hover:opacity-100 absolute w-full h-full text-white flex flex-col justify-center rounded-full"> <div className="flex-grow flex sm:flex-row flex-col gap-4 *:w-full *:flex *:flex-col *:gap-4">
<div className=" w-min h-min mx-auto scale-150"> <div>
<PencilSquareIcon /> <NextUIFormikInput
label="First Name"
name="firstName"
type="text"
placeholder="John"
labelPlacement="outside"
/>
<NextUIFormikInput
label="Last Name"
name="lastName"
type="text"
placeholder="Doe"
labelPlacement="outside"
/>
</div>
<div>
<NextUIFormikInput
label="Email"
name="email"
type="email"
placeholder="johndoe@email.com"
labelPlacement="outside"
/>
<NextUIFormikInput
label="Phone number"
name="phoneNumber"
type="text"
placeholder="XXXXXXXX"
labelPlacement="outside"
startContent={
<p className="text-sm pr-2 border-r-2 border-neutral-300 dark:border-neutral-700">
+65
</p>
}
/>
</div>
</div>
<div className="w-40 h-40 bg-red-500 hover:bg-red-700 transition-colors rounded-full relative">
<div className="transition-opacity opacity-0 hover:opacity-100 absolute w-full h-full text-white flex flex-col justify-center rounded-full">
<div className=" w-min h-min mx-auto scale-150">
<PencilSquareIcon />
</div>
</div> </div>
</div> </div>
</div> </div>
</Form>
)}
</Formik>
</div>
<div>
<Accordion>
<AccordionItem
key="1"
aria-label="Account danger zone"
title={
<div className="flex flex-col -my-2">
<p className="text-lg">More actions</p>
<p className="opacity-50">
Click to show more options collapsed for security
purposes.
</p>
</div>
}
className="rounded-xl -m-2 px-4 py-2 bg-neutral-100 dark:bg-neutral-800 border-2 border-transparent hover:border-neutral-200 dark:hover:border-neutral-700 transition-colors"
>
<div className="flex flex-row justify-between *:my-auto bg-red-100 dark:bg-red-950 p-4 rounded-xl">
<div className="flex flex-col">
<p className="text-lg">Danger zone</p>
<p className="opacity-50">
These actions may be destructive. Proceed with caution.
</p>
</div>
<div className="flex flex-row gap-4">
<Button color="danger" variant="light">
Reset your password
</Button>
<Button
color="danger"
variant="flat"
onPress={() => {
archiveAccount();
}}
>
Archive this account
</Button>
</div>
</div> </div>
</Form> </AccordionItem>
)} </Accordion>
</Formik> </div>
</div> </div>
)} )}
</div> </div>

26
client/src/pages/ManageUserAccountPage.tsx
View File

@@ -1,7 +1,6 @@
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import DefaultLayout from "../layouts/default"; import DefaultLayout from "../layouts/default";
import UpdateAccountModule from "../components/UpdateAccountModule"; import UpdateAccountModule from "../components/UpdateAccountModule";
import { Accordion, AccordionItem, Button } from "@nextui-org/react";
export default function ManageUserAccountPage() { export default function ManageUserAccountPage() {
let { accessToken } = useParams<string>(); // TODO: Replace AT from props with AT from localstorage let { accessToken } = useParams<string>(); // TODO: Replace AT from props with AT from localstorage
@@ -11,31 +10,6 @@ export default function ManageUserAccountPage() {
<div> <div>
<div className="p-8 flex flex-col gap-8"> <div className="p-8 flex flex-col gap-8">
<UpdateAccountModule accessToken={accessToken!} /> <UpdateAccountModule accessToken={accessToken!} />
<Accordion>
<AccordionItem
key="1"
aria-label="Account danger zone"
title="More actions"
className="rounded-xl -m-2 px-4 py-2 bg-neutral-100 dark:bg-neutral-800 border-2 border-transparent hover:border-neutral-200 dark:hover:border-neutral-700 transition-colors"
>
<div className="flex flex-row justify-between *:my-auto bg-red-100 dark:bg-red-950 p-4 rounded-xl">
<div className="flex flex-col">
<p className="text-lg">Danger zone</p>
<p className="opacity-70">
These actions may be destructive. Proceed with caution.
</p>
</div>
<div className="flex flex-row gap-4">
<Button color="danger" variant="light">
Reset your password
</Button>
<Button color="danger" variant="flat">
Archive this account
</Button>
</div>
</div>
</AccordionItem>
</Accordion>
</div> </div>
</div> </div>
</DefaultLayout> </DefaultLayout>

4
server/models/User.js
View File

@@ -27,6 +27,10 @@ module.exports = (sequelize, DataTypes) => {
type: DataTypes.STRING(100), type: DataTypes.STRING(100),
allowNull: false, allowNull: false,
}, },
isArchived: {
type: DataTypes.BOOLEAN(),
allowNull: false,
},
}, },
{ {
tableName: "users", tableName: "users",

45
server/routes/users.js
View File

@@ -39,11 +39,16 @@ let optionalValidationSchema = yup.object({
router.post("/register", async (req, res) => { router.post("/register", async (req, res) => {
let data = req.body; let data = req.body;
let user = await User.findOne({
let userByEmail = await User.findOne({
where: { email: data.email }, where: { email: data.email },
}); });
if (user) { let userByNumber = await User.findOne({
res.status(400).json({ message: "Email already exists." }); where: { phoneNumber: data.phoneNumber },
});
if (userByEmail || userByNumber) {
res.status(400).json({ message: "Email or phone number already exists." });
return; return;
} }
try { try {
@@ -83,11 +88,19 @@ router.get("/all", async (req, res) => {
router.get("/individual/:id", validateToken, async (req, res) => { router.get("/individual/:id", validateToken, async (req, res) => {
let id = req.params.id; let id = req.params.id;
let user = await User.findByPk(id); let user = await User.findByPk(id);
if (!user) { if (!user) {
res.sendStatus(404); res.sendStatus(404);
return; return;
} }
res.json(user);
if (user.isArchived) {
res.status(400).json({
message: `Account ${id} is archived.`,
});
} else {
res.json(user);
}
}); });
router.put("/individual/:id", validateToken, async (req, res) => { router.put("/individual/:id", validateToken, async (req, res) => {
@@ -188,4 +201,28 @@ router.get("/auth", validateToken, (req, res) => {
}); });
}); });
router.put("/archive/:id", validateToken, async (req, res) => {
let id = req.params.id;
let user = await User.findByPk(id);
if (!user) {
res.sendStatus(404);
return;
}
try {
await User.update(
{ isArchived: true },
{
where: { id: id },
}
);
res.json({
message: "User archived successfully.",
});
} catch (err) {
res.status(400).json({ errors: err.errors });
}
});
module.exports = router; module.exports = router;