From 8d90c5fc069545c48624db42f8934705f6b82f20 Mon Sep 17 00:00:00 2001 From: conor Date: Sat, 16 Mar 2024 19:34:45 +0000 Subject: [PATCH] Resolves #15, adds the ability to delete account, change password .etc. --- ui/src/components/navbar/NavAuthLinks.tsx | 6 +-- ui/src/helpers/URLS.ts | 2 +- ui/src/main.tsx | 7 ++-- ui/src/routes/Dashboards/Team.tsx | 4 ++ ui/src/routes/Dashboards/User.tsx | 47 ++++++++++++++++++++--- ui/src/styles/style.scss | 30 +++++++++++++++ 6 files changed, 83 insertions(+), 13 deletions(-) diff --git a/ui/src/components/navbar/NavAuthLinks.tsx b/ui/src/components/navbar/NavAuthLinks.tsx index ad4b6dc..f6c0a52 100644 --- a/ui/src/components/navbar/NavAuthLinks.tsx +++ b/ui/src/components/navbar/NavAuthLinks.tsx @@ -1,4 +1,4 @@ -import useAuthValid from "../../hooks/useAuthValid"; +import {useAuthValidWithModel} from "../../hooks/useAuthValid"; import URLS from "../../helpers/URLS"; import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {faUserCircle} from "@fortawesome/free-solid-svg-icons/faUserCircle"; @@ -11,7 +11,7 @@ import NavBarDropdownLink, { } from "./NavBarDropdownLink"; export default function NavAuthLinks() { - const authValid = useAuthValid(); + const [authValid, model] = useAuthValidWithModel(); if (authValid) { return <> @@ -23,7 +23,7 @@ export default function NavAuthLinks() { - Account + Account Logout diff --git a/ui/src/helpers/URLS.ts b/ui/src/helpers/URLS.ts index 0877aa7..48aca2f 100644 --- a/ui/src/helpers/URLS.ts +++ b/ui/src/helpers/URLS.ts @@ -6,7 +6,7 @@ const URLS: { [key: string]: string } = { LOGOUT: "/auth/logout", OAUTH2_REDIRECT: "/auth/oauth", FORGOT_PASSWORD: "/auth/forgot-password", - RESET_PASSWORD: "/auth/reset-password/:token", + RESET_PASSWORD: "/auth/reset-password", CHANGE_PASSWORD: "/auth/change-password", USER_SETTINGS: "/dashboard/user", } diff --git a/ui/src/main.tsx b/ui/src/main.tsx index dc44e97..9aa3137 100644 --- a/ui/src/main.tsx +++ b/ui/src/main.tsx @@ -18,7 +18,7 @@ import OAuth from "./routes/OAuth"; import ForgotPassword from "./routes/ForgotPassword"; import ResetPassword from "./routes/ResetPassword"; import ChangePassword from "./routes/ChangePassword"; -import User from "./routes/Dashboards/User"; +import User, {userLoader} from "./routes/Dashboards/User"; const router = createBrowserRouter([ { @@ -41,7 +41,7 @@ const router = createBrowserRouter([ element: , }, { - path: URLS.RESET_PASSWORD, + path: URLS.RESET_PASSWORD + "/:token" , element: }, { @@ -85,8 +85,9 @@ const router = createBrowserRouter([ errorElement: , }, { - path: "user", + path: "user/:id", element: , + loader: userLoader, } ] }, diff --git a/ui/src/routes/Dashboards/Team.tsx b/ui/src/routes/Dashboards/Team.tsx index 061c854..5f920d0 100644 --- a/ui/src/routes/Dashboards/Team.tsx +++ b/ui/src/routes/Dashboards/Team.tsx @@ -27,6 +27,7 @@ import SelectInput, {DashboardSelectItem} from "../../components/dashboard/Selec import DashboardObjectActions from "../../components/dashboard/DashboardObjectActions"; import DashboardObjectAction from "../../components/dashboard/DashboardObjectAction"; import {faTrash} from "@fortawesome/free-solid-svg-icons/faTrash"; +import DashboardObjectBody from "../../components/dashboard/DashboardObjectBody"; const userRoles: DashboardSelectItem[] = [ { @@ -404,6 +405,9 @@ export default function Team() { Add Member + +

Also allows transfer of ownership.

+ } diff --git a/ui/src/routes/Dashboards/User.tsx b/ui/src/routes/Dashboards/User.tsx index bbcb275..ffa6caa 100644 --- a/ui/src/routes/Dashboards/User.tsx +++ b/ui/src/routes/Dashboards/User.tsx @@ -1,4 +1,4 @@ -import {Link, useNavigate} from "react-router-dom"; +import {Link, useLoaderData, useNavigate} from "react-router-dom"; import Content from "../../components/general/Content"; import DashboardSpacer from "../../components/dashboard/DashboardSpacer"; import SettingButtons from "../../components/dashboard/config/SettingButtons"; @@ -7,11 +7,36 @@ import DashboardNavbar from "../../components/navbar/DashboardNavbar"; import {useAuthValidWithModel} from "../../hooks/useAuthValid"; import useAuthRedirect from "../../hooks/useAuthRedirect"; import URLS from "../../helpers/URLS"; +import pocketbase from "../../libraries/Pocketbase"; +import {ListResult} from "pocketbase"; +import {TeamRecord} from "../../types/Structures"; +import {useState} from "preact/compat"; export default function User() { const [, model] = useAuthValidWithModel(); const navigate = useNavigate(); useAuthRedirect(URLS.LOGIN, false); + const [confirmDelete, setConfirmDelete] = useState(false); + const [message, setMessage] = useState(""); + + const teams = useLoaderData() as ListResult; + + const deleteAccount = () => { + if (!confirmDelete) { + setConfirmDelete(true); + setMessage("Are you sure you want to delete your account? This action is irreversible! Click the button again to confirm."); + return; + } + + console.log(model?.id) + + pocketbase.collection('users').delete(model?.id as string).then(() => { + pocketbase.authStore?.clear(); + navigate(URLS.HOME); + }).catch(() => { + setMessage("An error occurred while deleting your account. Please try again later.") + }); + } return <> @@ -35,20 +60,30 @@ export default function User() {

Delete account

-

If you want to, you can delete your ConfigDN account. This actions is irreversible! Any teams you are the owner of will also be deleted.

+

If you want to, you can delete your ConfigDN account. This actions is irreversible! All teams you are the owner of will also be deleted.

You currently own the following teams:

-
    -
  • Test
    • +
      + { + teams.items.map(v =>
    • {v.name}
      • ) + }
    +

    You can transfer them by clicking on the links above, choosing add member, then owner and set the owner to the new owner.

    + - navigate(URLS.CHANGE_PASSWORD)} - type={"Change Password"}/> + deleteAccount()} + type={"Delete Account"}/> + + ; +} + +export function userLoader({params}: { params: any }) { + return pocketbase.collection('team').getList(params.team, undefined, {expand: "owner", filter: `owner = "${params.id}"`}); } \ No newline at end of file diff --git a/ui/src/styles/style.scss b/ui/src/styles/style.scss index 460ab9e..287de7e 100644 --- a/ui/src/styles/style.scss +++ b/ui/src/styles/style.scss @@ -931,6 +931,19 @@ div.page-transition { background: mix(mix($celadon-blue, $oxford-blue, 40%), $white, 70%) } } + + &.button__delete-account { + // a dark mixed red + background-color: #900; + + &:hover { + background-color: mix(#900, #fff, 80%); + } + + &:active { + background-color: mix(#900, #fff, 70%); + } + } } } @@ -1239,6 +1252,23 @@ div.page-transition { margin-top: 20px; } } + + ul.owned-teams-list { + padding: 10px 15px; + + li { + list-style-type: disc; + text-decoration: underline; + } + } + + .delete-account-warning { + font-size: 1.5em; + margin-top: 20px; + margin-bottom: 10px; + + color: #900; + } } // Auth pages (login, register)