Resolves #15, adds the ability to delete account, change password .etc.

Author: CADawg

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() {
             </NavBarDropdownLinkText>
             <NavBarDropdownItemContainer>
                 <NavBarDropdownItem>
-                    <NavBarLink href={URLS.USER_SETTINGS}>Account</NavBarLink>
+                    <NavBarLink href={URLS.USER_SETTINGS + "/" + model?.id}>Account</NavBarLink>
                 </NavBarDropdownItem>
                 <NavBarDropdownItem>
                     <NavBarLink href={URLS.LOGOUT}>Logout</NavBarLink>

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

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: <ForgotPassword/>,
     },
     {
-        path: URLS.RESET_PASSWORD,
+        path: URLS.RESET_PASSWORD + "/:token" ,
         element: <ResetPassword/>
     },
     {
@@ -85,8 +85,9 @@ const router = createBrowserRouter([
                 errorElement: <DashboardError/>,
             },
             {
-                path: "user",
+                path: "user/:id",
                 element: <User />,
+                loader: userLoader,
             }
         ]
     },

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() {
                             </DashboardObjectHeaderIcon>
                             <DashboardObjectHeaderName>Add Member</DashboardObjectHeaderName>
                         </DashboardObjectHeader>
+                        <DashboardObjectBody>
+                            <p>Also allows transfer of ownership.</p>
+                        </DashboardObjectBody>
                     </DashboardObject>
                 </DashboardObjectsList>
             </DashboardObjects>}

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<TeamRecord>;
+
+    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 <>
         <DashboardNavbar>
@@ -35,20 +60,30 @@ export default function User() {
 
            <h1 className="action-header">Delete account</h1>
 
-           <p>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.</p>
+           <p>If you want to, you can delete your ConfigDN account. This actions is <strong>irreversible</strong>! <strong>All teams</strong> you are the owner of will also be deleted.</p>
 
            <p>You currently own the following teams:</p>
 
-           <ul>
-               <li>Test</li>
+           <ul class="owned-teams-list">
+               {
+                   teams.items.map(v => <li><a href={URLS.DASHBOARD + "/" + v.id}>{v.name}</a></li>)
+               }
            </ul>
 
+           <p>You can transfer them by clicking on the links above, choosing add member, then owner and set the owner to the new owner.</p>
+
            <SettingButtons>
-               <SettingButton onClick={() => navigate(URLS.CHANGE_PASSWORD)}
-                              type={"Change Password"}/>
+               <SettingButton onClick={() => deleteAccount()}
+                              type={"Delete Account"}/>
            </SettingButtons>
 
+           <p class="delete-account-warning">{message}</p>
+
            <DashboardSpacer/>
        </Content>
    </>;
+}
+
+export function userLoader({params}: { params: any }) {
+    return pocketbase.collection('team').getList(params.team, undefined, {expand: "owner", filter: `owner = "${params.id}"`});
 }

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)