Skip to content

Commit b9672d8

Browse files
tjementumtjementum
committed
Convert account settings from dialog to page and improve UI responsiveness
1 parent a231365 commit b9672d8

File tree

8 files changed

+124
-118
lines changed

8 files changed

+124
-118
lines changed

application/account-management/WebApp/shared/components/accountModals/DeleteAccountConfirmation.tsx renamed to application/account-management/WebApp/routes/admin/account/-components/DeleteAccountConfirmation.tsx

File renamed without changes.

‎application/account-management/WebApp/routes/admin/account/index.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import logoWrap from "@/shared/images/logo-wrap.svg";
2+
import { Button } from "@repo/ui/components/Button";
3+
import { TextField } from "@repo/ui/components/TextField";
4+
import { Label, Separator } from "react-aria-components";
5+
import { Trash2 } from "lucide-react";
6+
import { t } from "@lingui/core/macro";
7+
import { Trans } from "@lingui/react/macro";
8+
import { createFileRoute } from "@tanstack/react-router";
9+
import { SharedSideMenu } from "@/shared/components/SharedSideMenu";
10+
import { TopMenu } from "@/shared/components/topMenu";
11+
import { Breadcrumb } from "@repo/ui/components/Breadcrumbs";
12+
import { useState } from "react";
13+
import { useUserInfo } from "@repo/infrastructure/auth/hooks";
14+
import DeleteAccountConfirmation from "./-components/DeleteAccountConfirmation";
15+
16+
export const Route = createFileRoute("/admin/account/")({
17+
component: AccountSettings
18+
});
19+
20+
function AccountSettings() {
21+
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
22+
const userInfo = useUserInfo();
23+
if (userInfo === null) return null;
24+
25+
const saveChanges = () => {
26+
console.log("Saving changes");
27+
};
28+
29+
const handleDeleteAccount = () => {
30+
setIsDeleteModalOpen(true);
31+
};
32+
33+
return (
34+
<>
35+
<div className="flex gap-4 w-full h-full">
36+
<SharedSideMenu />
37+
<div className="flex flex-col gap-4 py-3 px-4 w-full">
38+
<TopMenu>
39+
<Breadcrumb href="/admin/account">
40+
<Trans>Account</Trans>
41+
</Breadcrumb>
42+
<Breadcrumb>
43+
<Trans>Settings</Trans>
44+
</Breadcrumb>
45+
</TopMenu>
46+
<div className="flex 20 w-full items-center justify-between space-x-2 sm:mt-4 mb-4">
47+
<div className="text-foreground text-3xl font-semibold flex gap-2 flex-col mt-3">
48+
<h1>
49+
<Trans>Account Settings</Trans>
50+
</h1>
51+
<p className="text-muted-foreground text-sm font-normal">
52+
<Trans>Manage your account here.</Trans>
53+
</p>
54+
</div>
55+
</div>
56+
57+
<div className="flex flex-col gap-4">
58+
<Label>
59+
<Trans>Logo</Trans>
60+
</Label>
61+
<img src={logoWrap} alt={t`Logo`} className="max-h-16 max-w-64" />
62+
63+
<div className="w-full md:max-w-md">
64+
<TextField autoFocus isRequired name="name" label={t`Name`} placeholder={`E.g. ${userInfo.tenantId}`} />
65+
</div>
66+
<div className="w-full md:max-w-md">
67+
<TextField
68+
name="domain"
69+
label={t`Domain`}
70+
value={`${userInfo.tenantId}.platformplatform.net`}
71+
isDisabled={true}
72+
/>
73+
</div>
74+
</div>
75+
76+
<div className="flex gap-4">
77+
<Button onPress={saveChanges}>
78+
<Trans>Save changes</Trans>
79+
</Button>
80+
</div>
81+
82+
<div className="flex flex-col gap-4 mt-6">
83+
<h3 className="font-semibold">
84+
<Trans>Danger zone</Trans>
85+
</h3>
86+
<Separator />
87+
<div className="flex flex-col gap-4">
88+
<div>
89+
<h4 className="text-sm font-semibold pt-2">
90+
<Trans>Delete Account</Trans>
91+
</h4>
92+
<p className="text-xs">
93+
<Trans>
94+
Deleting the account and all associated data. This action cannot be undone, so please proceed with
95+
caution.
96+
</Trans>
97+
</p>
98+
</div>
99+
<Button variant="destructive" onPress={handleDeleteAccount} className="w-fit">
100+
<Trash2 />
101+
<Trans>Delete Account</Trans>
102+
</Button>
103+
</div>
104+
</div>
105+
106+
<Separator className="my-8" />
107+
</div>
108+
</div>
109+
110+
<DeleteAccountConfirmation isOpen={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen} />
111+
</>
112+
);
113+
}

‎application/account-management/WebApp/shared/components/AvatarButton.tsx‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { Button } from "@repo/ui/components/Button";
22
import { Menu, MenuHeader, MenuItem, MenuSeparator, MenuTrigger } from "@repo/ui/components/Menu";
33
import { useEffect, useState } from "react";
4-
import { LogOutIcon, SettingsIcon, UserIcon } from "lucide-react";
5-
import AccountModal from "@/shared/components/accountModals/AccountSettingsModal";
4+
import { LogOutIcon, UserIcon } from "lucide-react";
65
import UserProfileModal from "@/shared/components/userModals/UserProfileModal";
7-
import DeleteAccountModal from "@/shared/components/accountModals/DeleteAccountConfirmation";
86
import { Avatar } from "@repo/ui/components/Avatar";
97
import { useUserInfo } from "@repo/infrastructure/auth/hooks";
108
import { api } from "@/shared/lib/api/client";
@@ -15,8 +13,6 @@ import { loginPath } from "@repo/infrastructure/auth/constants";
1513

1614
export default function AvatarButton() {
1715
const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
18-
const [isAccountModalOpen, setIsAccountModalOpen] = useState(false);
19-
const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] = useState(false);
2016
const userInfo = useUserInfo();
2117

2218
useEffect(() => {
@@ -53,27 +49,14 @@ export default function AvatarButton() {
5349
<UserIcon size={16} />
5450
<Trans>Edit profile</Trans>
5551
</MenuItem>
56-
<MenuItem id="account" onAction={() => setIsAccountModalOpen(true)}>
57-
<SettingsIcon size={16} />
58-
<Trans>Account settings</Trans>
59-
</MenuItem>
6052
<MenuSeparator />
6153
<MenuItem id="logout" onAction={logout}>
6254
<LogOutIcon size={16} /> <Trans>Log out</Trans>
6355
</MenuItem>
6456
</Menu>
6557
</MenuTrigger>
6658

67-
<AccountModal
68-
isOpen={isAccountModalOpen}
69-
onOpenChange={setIsAccountModalOpen}
70-
onDeleteAccount={() => {
71-
setIsAccountModalOpen(false);
72-
setIsDeleteAccountModalOpen(true);
73-
}}
74-
/>
7559
<UserProfileModal isOpen={isProfileModalOpen} onOpenChange={setIsProfileModalOpen} userId={userInfo.id ?? ""} />
76-
<DeleteAccountModal isOpen={isDeleteAccountModalOpen} onOpenChange={setIsDeleteAccountModalOpen} />
7760
</>
7861
);
7962
}

‎application/account-management/WebApp/shared/components/SharedSideMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function SharedSideMenu({ children }: Readonly<SharedSideMenuProps>) {
1515
<SideMenuSeparator>
1616
<Trans>Organization</Trans>
1717
</SideMenuSeparator>
18-
<MenuButton icon={CircleUserIcon} label={t`Account`} href="/admin/account" isDisabled forceReload />
18+
<MenuButton icon={CircleUserIcon} label={t`Account`} href="/admin/account" forceReload />
1919
<MenuButton icon={UsersIcon} label={t`Users`} href="/admin/users" />
2020
{children}
2121
</SideMenu>

‎application/account-management/WebApp/shared/components/accountModals/AccountSettingsModal.tsx‎

Lines changed: 0 additions & 90 deletions
This file was deleted.

‎application/account-management/WebApp/shared/translations/locale/da-DK.po‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,6 @@ msgstr "Domæne"
117117
msgid "Don't have an account? <0>Create one</0>"
118118
msgstr "Har du ikke en konto? <0>Opret en</0>"
119119

120-
msgid "E.g., CompanyX"
121-
msgstr "F.eks. FirmaX"
122-
123120
msgid "E.g., Marketing Manager"
124121
msgstr "F.eks. Marketingchef"
125122

@@ -283,6 +280,9 @@ msgstr "Vælg en ny rolle for <0>{0}</0>"
283280
msgid "Send invite"
284281
msgstr "Send invitation"
285282

283+
msgid "Settings"
284+
msgstr "Indstillinger"
285+
286286
msgid "Show filters"
287287
msgstr "Vis filtre"
288288

‎application/account-management/WebApp/shared/translations/locale/en-US.po‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,6 @@ msgstr "Domain"
117117
msgid "Don't have an account? <0>Create one</0>"
118118
msgstr "Don't have an account? <0>Create one</0>"
119119

120-
msgid "E.g., CompanyX"
121-
msgstr "E.g., CompanyX"
122-
123120
msgid "E.g., Marketing Manager"
124121
msgstr "E.g., Marketing Manager"
125122

@@ -283,6 +280,9 @@ msgstr "Select a new role for <0>{0}</0>"
283280
msgid "Send invite"
284281
msgstr "Send invite"
285282

283+
msgid "Settings"
284+
msgstr "Settings"
285+
286286
msgid "Show filters"
287287
msgstr "Show filters"
288288

‎application/account-management/WebApp/shared/translations/locale/nl-NL.po‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,6 @@ msgstr "Domein"
117117
msgid "Don't have an account? <0>Create one</0>"
118118
msgstr "Heb je geen account? <0>Maak er één aan</0>"
119119

120-
msgid "E.g., CompanyX"
121-
msgstr "Bijv. BedrijfX"
122-
123120
msgid "E.g., Marketing Manager"
124121
msgstr "Bijv. Marketing Manager"
125122

@@ -283,6 +280,9 @@ msgstr "Selecteer een nieuwe rol voor <0>{0}</0>"
283280
msgid "Send invite"
284281
msgstr "Uitnodiging verzenden"
285282

283+
msgid "Settings"
284+
msgstr "Instellingen"
285+
286286
msgid "Show filters"
287287
msgstr "Filters tonen"
288288

0 commit comments

Comments
 (0)