martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

dashboard cleanup

Browse Source
This commit is contained in:
Roland Osborne 2023-01-14 21:11:10 -08:00
parent d480bb754b
commit bb54d0aa37
5 changed files with 66 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
net/web/src/context/useAppContext.hook.js
View File

@ -79,9 +79,7 @@ export function useAppContext(websocket) {
await appCreate(username, password, token)
},
setAdmin: (token) => {
console.log("TOKEN SET!", token);
updateState({ adminToken: token });
console.log("TOKEN SET: done");
},
clearAdmin: () => {
updateState({ adminToken: null });

3
net/web/src/dashboard/Dashboard.jsx
View File

@ -6,10 +6,7 @@ import { AccountItem } from './accountItem/AccountItem';
export function Dashboard() {
console.log("IN DASHBOARD");
const { state, actions } = useDashboard();
console.log("IN DASHBOARD here");
const onClipboard = (value) => {
navigator.clipboard.writeText(value);

72
net/web/src/dashboard/accountItem/AccountItem.jsx
View File

@ -13,12 +13,48 @@ export function AccountItem({ item, remove }) {
title: 'Are you sure you want to delete the account?',
icon: <ExclamationCircleOutlined />,
onOk() {
actions.remove();
applyRemoveAccount();
},
onCancel() {},
});
}
const applyRemoveAccount = async () => {
try {
await actions.remove();
}
catch(err) {
Modal.error({
title: 'Failed to Remove Account',
content: 'Please try again.',
});
}
}
const applyAccountStatus = async (status) => {
try {
await actions.setStatus(status);
}
catch(err) {
Modal.error({
title: 'Failed to Set Account Status',
content: 'Please try again.',
});
}
}
const setAccountAccess = async () => {
try {
await actions.setAccessLink();
}
catch(err) {
Modal.error({
title: 'Failed to Set Account Access',
content: 'Please try again.',
});
}
}
const onClipboard = (value) => {
navigator.clipboard.writeText(value);
};
@ -29,25 +65,25 @@ export function AccountItem({ item, remove }) {
return (
<AccountItemWrapper>
<div class="avatar">
<div className="avatar">
<Logo url={state.imageUrl} width={32} height={32} radius={4} />
</div>
<div class={state.activeClass}>
<div class="handle">{ state.handle }</div>
<div class="guid">{ state.guid }</div>
<div className={state.activeClass}>
<div className="handle">{ state.handle }</div>
<div className="guid">{ state.guid }</div>
</div>
<div class="control">
<div className="control">
{ state.display === 'small' && (
<>
<ResetButton type="text" size="large" icon={<UnlockOutlined />}
loading={state.accessBusy} onClick={() => actions.setAccessLink()}></ResetButton>
loading={state.accessBusy} onClick={setAccountAccess}></ResetButton>
{ state.disabled && (
<EnableButton type="text" size="large" icon={<CheckCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(false)}></EnableButton>
loading={state.statusBusy} onClick={() => applyAccountStatus(false)}></EnableButton>
)}
{ !state.disabled && (
<DisableButton type="text" size="large" icon={<CloseCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(true)}></DisableButton>
loading={state.statusBusy} onClick={() => applyAccountStatus(true)}></DisableButton>
)}
<DeleteButton type="text" size="large" icon={<UserDeleteOutlined />}
loading={state.removeBusy} onClick={removeAccount}></DeleteButton>
@ -57,18 +93,18 @@ export function AccountItem({ item, remove }) {
<>
<Tooltip placement="topLeft" title="Account Login Link">
<ResetButton type="text" size="large" icon={<UnlockOutlined />}
loading={state.accessBusy} onClick={() => actions.setAccessLink()}></ResetButton>
loading={state.accessBusy} onClick={setAccountAccess}></ResetButton>
</Tooltip>
{ state.disabled && (
<Tooltip placement="topLeft" title="Enable Account">
<EnableButton type="text" size="large" icon={<CheckCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(false)}></EnableButton>
loading={state.statusBusy} onClick={() => applyAccountStatus(false)}></EnableButton>
</Tooltip>
)}
{ !state.disabled && (
<Tooltip placement="topLeft" title="Disable Account">
<DisableButton type="text" size="large" icon={<CloseCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(true)}></DisableButton>
loading={state.statusBusy} onClick={() => applyAccountStatus(true)}></DisableButton>
</Tooltip>
)}
<Tooltip placement="topLeft" title="Delete Account">
@ -82,15 +118,15 @@ export function AccountItem({ item, remove }) {
footer={[ <Button type="primary" onClick={() => actions.setShowAccess(false)}>OK</Button> ]}
onCancel={() => actions.setShowAccess(false)}>
<AccessLayout>
<div class="url">
<div class="label">Browser Link:</div>
<div class="link">{accessLink()}</div>
<div className="url">
<div className="label">Browser Link:</div>
<div className="link">{accessLink()}</div>
<Button icon={<CopyOutlined />} size="small"
onClick={() => onClipboard(accessLink())}/>
</div>
<div class="url">
<div class="label">App Token:</div>
<div class="token">{state.accessToken}</div>
<div className="url">
<div className="label">App Token:</div>
<div className="token">{state.accessToken}</div>
<Button icon={<CopyOutlined />} size="small"
onClick={() => onClipboard(state.accessToken)} />
</div>

20
net/web/src/dashboard/accountItem/useAccountItem.hook.js
View File

@ -42,13 +42,14 @@ export function useAccountItem(item, remove) {
if (!state.accessBusy) {
updateState({ accessBusy: true });
try {
let access = await addAccountAccess(app.state.adminToken, item.accountId);
updateState({ accessToken: access, showAccess: true });
const access = await addAccountAccess(app.state.adminToken, item.accountId);
updateState({ accessToken: access, showAccess: true, accessBusy: false });
}
catch (err) {
window.alert(err);
console.log(err);
updateState({ accessBusy: false });
throw new Error('failed to generate token');
}
updateState({ accessBusy: false });
}
},
setShowAccess: (showAccess) => {
@ -59,12 +60,13 @@ export function useAccountItem(item, remove) {
updateState({ removeBusy: true });
try {
await remove(state.accountId);
updateState({ removeBusy: false });
}
catch(err) {
console.log(err);
window.alert(err);
updateState({ removeBusy: false });
throw new Error('failed to remove account');
}
updateState({ removeBusy: false });
}
},
setStatus: async (disabled) => {
@ -72,13 +74,13 @@ export function useAccountItem(item, remove) {
updateState({ statusBusy: true });
try {
await setAccountStatus(app.state.adminToken, item.accountId, disabled);
updateState({ disabled, activeClass: disabled ? 'inactive' : 'active' });
updateState({ statusBusy: false, disabled, activeClass: disabled ? 'inactive' : 'active' });
}
catch(err) {
console.log(err);
window.alert(err);
updateState({ statusBusy: false });
throw new Error('failed to set account status');
}
updateState({ statusBusy: false });
}
},
};

2
net/web/src/dashboard/useDashboard.hook.js
View File

@ -64,7 +64,7 @@ export function useDashboard() {
},
removeAccount: async (accountId) => {
await removeAccount(app.state.adminToken, accountId);
actions.getAccounts();
syncAccounts();
},
setHost: (domain) => {
updateState({ domain });