more ui

1 files changed, 45 insertions, 78 deletions

diff --git a/packages/demobank-ui/src/pages/ShowAccountDetails.tsx b/packages/demobank-ui/src/pages/ShowAccountDetails.tsx
index c65b90503..21724474a 100644
--- a/packages/demobank-ui/src/pages/ShowAccountDetails.tsx
+++ b/packages/demobank-ui/src/pages/ShowAccountDetails.tsx
@@ -1,25 +1,24 @@
-import { HttpStatusCode, TalerCorebankApi, TalerError, TranslatedString } from "@gnu-taler/taler-util";
-import { HttpResponsePaginated, RequestError, notify, notifyError, useTranslationContext } from "@gnu-taler/web-util/browser";
-import { VNode, h } from "preact";
+import { TalerCorebankApi, TalerError, TranslatedString } from "@gnu-taler/taler-util";
+import { notify, notifyInfo, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { ErrorLoading } from "../components/ErrorLoading.js";
 import { Loading } from "../components/Loading.js";
 import { useBankCoreApiContext } from "../context/config.js";
 import { useAccountDetails } from "../hooks/access.js";
 import { useBackendState } from "../hooks/backend.js";
-import { buildRequestErrorMessage, undefinedIfEmpty, withRuntimeErrorHandling } from "../utils.js";
+import { undefinedIfEmpty, withRuntimeErrorHandling } from "../utils.js";
 import { assertUnreachable } from "./HomePage.js";
 import { LoginForm } from "./LoginForm.js";
 import { AccountForm } from "./admin/AccountForm.js";
+import { ProfileNavigation } from "./ProfileNavigation.js";
 
 export function ShowAccountDetails({
   account,
   onClear,
   onUpdateSuccess,
-  onChangePassword,
 }: {
   onClear?: () => void;
-  onChangePassword: () => void;
   onUpdateSuccess: () => void;
   account: string;
 }): VNode {
@@ -27,6 +26,8 @@ export function ShowAccountDetails({
   const { state: credentials } = useBackendState();
   const creds = credentials.status !== "loggedIn" ? undefined : credentials
   const { api } = useBankCoreApiContext()
+  const accountIsTheCurrentUser = credentials.status === "loggedIn" ?
+    credentials.username === account : false
 
   const [update, setUpdate] = useState(false);
   const [submitAccount, setSubmitAccount] = useState<TalerCorebankApi.AccountData | undefined>();
@@ -47,11 +48,7 @@ export function ShowAccountDetails({
   }
 
   async function doUpdate() {
-    if (!update) {
-      setUpdate(true);
-      return;
-    }
-    if (!submitAccount || !creds) return;
+    if (!update || !submitAccount || !creds) return;
     await withRuntimeErrorHandling(i18n, async () => {
       const resp = await api.updateAccount(creds, {
         cashout_address: submitAccount.cashout_payto_uri,
@@ -62,8 +59,9 @@ export function ShowAccountDetails({
         is_exchange: false,
         name: submitAccount.name,
       });
-      
+
       if (resp.type === "ok") {
+        notifyInfo(i18n.str`Account updated`);
         onUpdateSuccess();
       } else {
         switch (resp.case) {
@@ -87,21 +85,23 @@ export function ShowAccountDetails({
   }
 
   return (
-    <div>
+    <Fragment>
+      {accountIsTheCurrentUser ?
+        <ProfileNavigation current="details" />
+        :
+        <h1 class="text-base font-semibold leading-6 text-gray-900">
+          <i18n.Translate>Account "{account}"</i18n.Translate>
+        </h1>
+
+      }
+
       <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
         <div class="px-4 sm:px-0">
           <h2 class="text-base font-semibold leading-7 text-gray-900">
-            {update ?
-              <i18n.Translate>Update account</i18n.Translate>
-              :
-              <i18n.Translate>Account details</i18n.Translate>
-            }
-          </h2>
-          <div class="mt-4">
             <div class="flex items-center justify-between">
               <span class="flex flex-grow flex-col">
-                <span class="text-sm text-black font-medium leading-6 " id="availability-label">
-                  <i18n.Translate>change the account details</i18n.Translate>
+                <span class="text-sm text-black font-semibold leading-6 " id="availability-label">
+                  <i18n.Translate>Change details</i18n.Translate>
                 </span>
               </span>
               <button type="button" data-enabled={!update} class="bg-indigo-600 data-[enabled=true]:bg-gray-200 relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer rounded-full ring-2 border-gray-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description"
@@ -111,69 +111,36 @@ export function ShowAccountDetails({
                 <span aria-hidden="true" data-enabled={!update} class="translate-x-5 data-[enabled=true]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
               </button>
             </div>
-          </div>
-
+          </h2>
         </div>
+
         <AccountForm
+          focus={update}
+          username={account}
           template={result.body}
           purpose={update ? "update" : "show"}
           onChange={(a) => setSubmitAccount(a)}
         >
-
-        </AccountForm>
-
-        <p class="buttons-account">
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              flexFlow: "wrap-reverse",
-            }}
-          >
-            <div>
-              {onClear ? (
-                <input
-                  class="pure-button"
-                  type="submit"
-                  value={i18n.str`Close`}
-                  onClick={async (e) => {
-                    e.preventDefault();
-                    onClear();
-                  }}
-                />
-              ) : undefined}
-            </div>
-            <div style={{ display: "flex" }}>
-              <div>
-                <input
-                  id="select-exchange"
-                  class="pure-button pure-button-primary content"
-                  disabled={update && !submitAccount}
-                  type="submit"
-                  value={i18n.str`Change password`}
-                  onClick={async (e) => {
-                    e.preventDefault();
-                    onChangePassword();
-                  }}
-                />
-              </div>
-              <div>
-                <input
-                  id="select-exchange"
-                  class="pure-button pure-button-primary content"
-                  disabled={update && !submitAccount}
-                  type="submit"
-                  value={update ? i18n.str`Confirm` : i18n.str`Update`}
-                  onClick={async (e) => {
-                    e.preventDefault();
-                    doUpdate()
-                  }}
-                />
-              </div>
-            </div>
+          <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
+            {onClear ?
+              <button type="button" class="text-sm font-semibold leading-6 text-gray-900"
+                onClick={onClear}
+              >
+                <i18n.Translate>Cancel</i18n.Translate>
+              </button>
+              : <div />
+            }
+            <button type="submit"
+              class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+              disabled={!update || !submitAccount}
+              onClick={doUpdate}
+            >
+              <i18n.Translate>Update</i18n.Translate>
+            </button>
           </div>
-        </p>
+        </AccountForm>
       </div>
-    </div>
+    </Fragment>
   );
 }
+