Skip to content

Commit

Permalink
Resolves #15, adds the ability to delete account, change password .etc.
Browse files Browse the repository at this point in the history
  • Loading branch information
CADawg committed Mar 16, 2024
1 parent 0f08b10 commit 8d90c5f
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 13 deletions.
6 changes: 3 additions & 3 deletions ui/src/components/navbar/NavAuthLinks.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -11,7 +11,7 @@ import NavBarDropdownLink, {
} from "./NavBarDropdownLink";

export default function NavAuthLinks() {
const authValid = useAuthValid();
const [authValid, model] = useAuthValidWithModel();

if (authValid) {
return <>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/helpers/URLS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}
Expand Down
7 changes: 4 additions & 3 deletions ui/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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([
{
Expand All @@ -41,7 +41,7 @@ const router = createBrowserRouter([
element: <ForgotPassword/>,
},
{
path: URLS.RESET_PASSWORD,
path: URLS.RESET_PASSWORD + "/:token" ,
element: <ResetPassword/>
},
{
Expand Down Expand Up @@ -85,8 +85,9 @@ const router = createBrowserRouter([
errorElement: <DashboardError/>,
},
{
path: "user",
path: "user/:id",
element: <User />,
loader: userLoader,
}
]
},
Expand Down
4 changes: 4 additions & 0 deletions ui/src/routes/Dashboards/Team.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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[] = [
{
Expand Down Expand Up @@ -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>}
Expand Down
47 changes: 41 additions & 6 deletions ui/src/routes/Dashboards/User.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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>
Expand All @@ -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}"`});
}
30 changes: 30 additions & 0 deletions ui/src/styles/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
}
}
}
}

Expand Down Expand Up @@ -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)
Expand Down

0 comments on commit 8d90c5f

Please sign in to comment.