allows deletion from owner

2 files changed, 28 insertions, 1 deletions

diff --git a/packages/demobank-ui/src/Routing.tsx b/packages/demobank-ui/src/Routing.tsx
index aa46f2b7d..f8a625621 100644
--- a/packages/demobank-ui/src/Routing.tsx
+++ b/packages/demobank-ui/src/Routing.tsx
@@ -193,6 +193,20 @@ export function Routing(): VNode {
         />
 
         <Route
+          path="/delete-my-account"
+          component={() => (
+            <RemoveAccount
+              account={username}
+              onUpdateSuccess={() => {
+                route("/")
+              }}
+              onCancel={() => {
+                route("/account")
+              }}
+            />
+          )}
+        />
+        <Route
           path="/my-profile"
           component={() => (
             <ShowAccountDetails
diff --git a/packages/demobank-ui/src/pages/ProfileNavigation.tsx b/packages/demobank-ui/src/pages/ProfileNavigation.tsx
index 5b0f09360..3596d0f11 100644
--- a/packages/demobank-ui/src/pages/ProfileNavigation.tsx
+++ b/packages/demobank-ui/src/pages/ProfileNavigation.tsx
@@ -4,7 +4,7 @@ import { useBankCoreApiContext } from "../context/config.js";
 import { assertUnreachable } from "./WithdrawalOperationPage.js";
 import { useBackendState } from "../hooks/backend.js";
 
-export function ProfileNavigation({ current }: { current: "details" | "credentials" | "cashouts" }): VNode {
+export function ProfileNavigation({ current }: { current: "details" | "delete" | "credentials" | "cashouts" }): VNode {
   const { i18n } = useTranslationContext()
   const { config } = useBankCoreApiContext()
   const { state: credentials } = useBackendState();
@@ -19,6 +19,10 @@ export function ProfileNavigation({ current }: { current: "details" | "credentia
             window.location.href = "#/my-profile";
             return;
           }
+          case "delete": {
+            window.location.href = "#/delete-my-account";
+            return;
+          }
           case "credentials": {
             window.location.href = "#/my-password";
             return;
@@ -31,6 +35,9 @@ export function ProfileNavigation({ current }: { current: "details" | "credentia
         }
       }}>
         <option value="details" selected={current == "details"}><i18n.Translate>Details</i18n.Translate></option>
+        {!config.allow_deletions ? undefined :
+          <option value="delete" selected={current == "delete"}><i18n.Translate>Delete</i18n.Translate></option>
+        }
         <option value="credentials" selected={current == "credentials"}><i18n.Translate>Credentials</i18n.Translate></option>
         {config.allow_conversion ?
           <option value="cashouts" selected={current == "cashouts"}><i18n.Translate>Cashouts</i18n.Translate></option>
@@ -43,6 +50,12 @@ export function ProfileNavigation({ current }: { current: "details" | "credentia
           <span><i18n.Translate>Details</i18n.Translate></span>
           <span aria-hidden="true" data-selected={current == "details"} class="bg-transparent data-[selected=true]:bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5"></span>
         </a>
+        {!config.allow_deletions ? undefined :
+          <a href="#/delete-my-account" data-selected={current == "delete"} aria-current="page" class="             text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10">
+            <span><i18n.Translate>Delete</i18n.Translate></span>
+            <span aria-hidden="true" data-selected={current == "delete"} class="bg-transparent data-[selected=true]:bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5"></span>
+          </a>
+        }
         <a href="#/my-password" data-selected={current == "credentials"} aria-current="page" class="             text-gray-500 hover:text-gray-700 data-[selected=true]:text-gray-900 group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10">
           <span><i18n.Translate>Credentials</i18n.Translate></span>
           <span aria-hidden="true" data-selected={current == "credentials"} class="bg-transparent data-[selected=true]:bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5"></span>