more ui

3 files changed, 59 insertions, 13 deletions

diff --git a/packages/demobank-ui/src/components/CopyButton.tsx b/packages/demobank-ui/src/components/CopyButton.tsx
index 97ccbf2bf..b36de770e 100644
--- a/packages/demobank-ui/src/components/CopyButton.tsx
+++ b/packages/demobank-ui/src/components/CopyButton.tsx
@@ -45,14 +45,14 @@ export function CopyButton({ getContent }: { getContent: () => string }): VNode
 
   if (!copied) {
     return (
-      <button class="text-white" onClick={copyText} style={{ width: 32, height: 32, fontSize: "initial" }}>
+      <button class="text-white" onClick={copyText} style={{ width: 16, height: 16, fontSize: "initial" }}>
         <CopyIcon />
       </button>
     );
   }
   return (
     <div class="text-white" content="Copied" style={{ display: "inline-block" }}>
-      <button disabled style={{ width: 32, height: 32, fontSize: "initial" }}>
+      <button disabled style={{ width: 16, height: 16, fontSize: "initial" }}>
         <CopiedIcon />
       </button>
     </div>
diff --git a/packages/demobank-ui/src/components/Routing.tsx b/packages/demobank-ui/src/components/Routing.tsx
index 2c532e863..890058a9b 100644
--- a/packages/demobank-ui/src/components/Routing.tsx
+++ b/packages/demobank-ui/src/components/Routing.tsx
@@ -24,12 +24,50 @@ import { HomePage, WithdrawalOperationPage } from "../pages/HomePage.js";
 import { PublicHistoriesPage } from "../pages/PublicHistoriesPage.js";
 import { RegistrationPage } from "../pages/RegistrationPage.js";
 import { Test } from "../pages/Test.js";
+import { useBackendContext } from "../context/backend.js";
+import { LoginForm } from "../pages/LoginForm.js";
+import { AdminPage } from "../pages/AdminPage.js";
 
 export function Routing(): VNode {
   const history = createHashHistory();
+  const backend = useBackendContext();
+
+  if (backend.state.status === "loggedOut") {
+    return <BankFrame
+      goToBusinessAccount={() => {
+        route("/business");
+      }}
+    >
+      <Router history={history}>
+        <Route
+          path="/login"
+          component={() => (
+            <LoginForm
+              onRegister={() => {
+                route("/register");
+              }}
+            />
+          )}
+        />
+        <Route
+          path="/register"
+          component={() => (
+            <RegistrationPage
+              onComplete={() => {
+                route("/account");
+              }}
+            />
+          )}
+        />
+        <Route default component={Redirect} to="/login" />
+      </Router>
+    </BankFrame>
+  }
+  const isAdmin = backend.state.isUserAdministrator
 
   return (
     <BankFrame
+      account={backend.state.username}
       goToBusinessAccount={() => {
         route("/business");
       }}
@@ -69,16 +107,24 @@ export function Routing(): VNode {
         />
         <Route
           path="/account"
-          component={() => (
-            <HomePage
-              onPendingOperationFound={(wopid) => {
-                route(`/operation/${wopid}`);
-              }}
-              onRegister={() => {
-                route("/register");
-              }}
-            />
-          )}
+          component={() => {
+            if (isAdmin) {
+              return <AdminPage
+                onRegister={() => {
+                  route("/register");
+                }}
+              />;
+            } else {
+              return <HomePage
+                onPendingOperationFound={(wopid) => {
+                  route(`/operation/${wopid}`);
+                }}
+                onRegister={() => {
+                  route("/register");
+                }}
+              />
+            }
+          }}
         />
         <Route
           path="/business"
diff --git a/packages/demobank-ui/src/components/Transactions/state.ts b/packages/demobank-ui/src/components/Transactions/state.ts
index 09c039055..d2a512b08 100644
--- a/packages/demobank-ui/src/components/Transactions/state.ts
+++ b/packages/demobank-ui/src/components/Transactions/state.ts
@@ -61,7 +61,7 @@ export function useComponentState({ account }: Props): State {
         return;
       }
 
-      const negative = anyItem.direction === "DBIT";
+      const negative = anyItem.direction === "DEBIT";
       const counterpart = negative ? anyItem.creditorIban : anyItem.debtorIban;
 
       let date = anyItem.date ? parseInt(anyItem.date, 10) : 0;