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) await appCreate(username, password, token)
}, },
setAdmin: (token) => { setAdmin: (token) => {
console.log("TOKEN SET!", token);
updateState({ adminToken: token }); updateState({ adminToken: token });
console.log("TOKEN SET: done");
}, },
clearAdmin: () => { clearAdmin: () => {
updateState({ adminToken: null }); updateState({ adminToken: null });

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

@ -6,10 +6,7 @@ import { AccountItem } from './accountItem/AccountItem';
export function Dashboard() { export function Dashboard() {
console.log("IN DASHBOARD");
const { state, actions } = useDashboard(); const { state, actions } = useDashboard();
console.log("IN DASHBOARD here");
const onClipboard = (value) => { const onClipboard = (value) => {
navigator.clipboard.writeText(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?', title: 'Are you sure you want to delete the account?',
icon: <ExclamationCircleOutlined />, icon: <ExclamationCircleOutlined />,
onOk() { onOk() {
actions.remove(); applyRemoveAccount();
}, },
onCancel() {}, 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) => { const onClipboard = (value) => {
navigator.clipboard.writeText(value); navigator.clipboard.writeText(value);
}; };
@ -29,25 +65,25 @@ export function AccountItem({ item, remove }) {
return ( return (
<AccountItemWrapper> <AccountItemWrapper>
<div class="avatar"> <div className="avatar">
<Logo url={state.imageUrl} width={32} height={32} radius={4} /> <Logo url={state.imageUrl} width={32} height={32} radius={4} />
</div> </div>
<div class={state.activeClass}> <div className={state.activeClass}>
<div class="handle">{ state.handle }</div> <div className="handle">{ state.handle }</div>
<div class="guid">{ state.guid }</div> <div className="guid">{ state.guid }</div>
</div> </div>
<div class="control"> <div className="control">
{ state.display === 'small' && ( { state.display === 'small' && (
<> <>
<ResetButton type="text" size="large" icon={<UnlockOutlined />} <ResetButton type="text" size="large" icon={<UnlockOutlined />}
loading={state.accessBusy} onClick={() => actions.setAccessLink()}></ResetButton> loading={state.accessBusy} onClick={setAccountAccess}></ResetButton>
{ state.disabled && ( { state.disabled && (
<EnableButton type="text" size="large" icon={<CheckCircleOutlined />} <EnableButton type="text" size="large" icon={<CheckCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(false)}></EnableButton> loading={state.statusBusy} onClick={() => applyAccountStatus(false)}></EnableButton>
)} )}
{ !state.disabled && ( { !state.disabled && (
<DisableButton type="text" size="large" icon={<CloseCircleOutlined />} <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 />} <DeleteButton type="text" size="large" icon={<UserDeleteOutlined />}
loading={state.removeBusy} onClick={removeAccount}></DeleteButton> loading={state.removeBusy} onClick={removeAccount}></DeleteButton>
@ -57,18 +93,18 @@ export function AccountItem({ item, remove }) {
<> <>
<Tooltip placement="topLeft" title="Account Login Link"> <Tooltip placement="topLeft" title="Account Login Link">
<ResetButton type="text" size="large" icon={<UnlockOutlined />} <ResetButton type="text" size="large" icon={<UnlockOutlined />}
loading={state.accessBusy} onClick={() => actions.setAccessLink()}></ResetButton> loading={state.accessBusy} onClick={setAccountAccess}></ResetButton>
</Tooltip> </Tooltip>
{ state.disabled && ( { state.disabled && (
<Tooltip placement="topLeft" title="Enable Account"> <Tooltip placement="topLeft" title="Enable Account">
<EnableButton type="text" size="large" icon={<CheckCircleOutlined />} <EnableButton type="text" size="large" icon={<CheckCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(false)}></EnableButton> loading={state.statusBusy} onClick={() => applyAccountStatus(false)}></EnableButton>
</Tooltip> </Tooltip>
)} )}
{ !state.disabled && ( { !state.disabled && (
<Tooltip placement="topLeft" title="Disable Account"> <Tooltip placement="topLeft" title="Disable Account">
<DisableButton type="text" size="large" icon={<CloseCircleOutlined />} <DisableButton type="text" size="large" icon={<CloseCircleOutlined />}
loading={state.statusBusy} onClick={() => actions.setStatus(true)}></DisableButton> loading={state.statusBusy} onClick={() => applyAccountStatus(true)}></DisableButton>
</Tooltip> </Tooltip>
)} )}
<Tooltip placement="topLeft" title="Delete Account"> <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> ]} footer={[ <Button type="primary" onClick={() => actions.setShowAccess(false)}>OK</Button> ]}
onCancel={() => actions.setShowAccess(false)}> onCancel={() => actions.setShowAccess(false)}>
<AccessLayout> <AccessLayout>
<div class="url"> <div className="url">
<div class="label">Browser Link:</div> <div className="label">Browser Link:</div>
<div class="link">{accessLink()}</div> <div className="link">{accessLink()}</div>
<Button icon={<CopyOutlined />} size="small" <Button icon={<CopyOutlined />} size="small"
onClick={() => onClipboard(accessLink())}/> onClick={() => onClipboard(accessLink())}/>
</div> </div>
<div class="url"> <div className="url">
<div class="label">App Token:</div> <div className="label">App Token:</div>
<div class="token">{state.accessToken}</div> <div className="token">{state.accessToken}</div>
<Button icon={<CopyOutlined />} size="small" <Button icon={<CopyOutlined />} size="small"
onClick={() => onClipboard(state.accessToken)} /> onClick={() => onClipboard(state.accessToken)} />
</div> </div>

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

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