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

fixing navigation to admin dashboard

Browse Source
This commit is contained in:
Roland Osborne 2023-01-13 16:45:59 -08:00
parent 625f3a31de
commit 9bfbcc56f6
8 changed files with 103 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
net/web/src/access/admin/Admin.jsx
View File

@ -1,5 +1,5 @@
import { Button, Modal, Form, Input } from 'antd';
import { SettingOutlined, LockOutlined } from '@ant-design/icons';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { AdminWrapper } from './Admin.styled';
import { useAdmin } from './useAdmin.hook';
@ -30,7 +30,7 @@ export function Admin() {
<div className="app-title">
<span>Databag</span>
<div className="settings" onClick={() => actions.navUser()}>
<SettingOutlined />
<UserOutlined />
</div>
</div>
<div className="form-title">Admin</div>

21
net/web/src/access/admin/useAdmin.hook.js
View File

@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
import { getNodeStatus } from 'api/getNodeStatus';
import { setNodeStatus } from 'api/setNodeStatus';
import { getNodeConfig } from 'api/getNodeConfig';
import { AppContext } from 'context/AppContext';
export function useAdmin() {
@ -14,6 +15,7 @@ export function useAdmin() {
});
const navigate = useNavigate();
const app = useContext(AppContext);
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
@ -32,6 +34,12 @@ export function useAdmin() {
check();
}, []);
useEffect(() => {
if (app.state.adminToken) {
navigate('/dashboard');
}
}, [app.state]);
const actions = {
setPassword: (password) => {
updateState({ password });
@ -46,14 +54,17 @@ export function useAdmin() {
if (state.unclaimed === true) {
await setNodeStatus(state.password);
}
const status = await getNodeConfig(state.password);
const config = encodeURIComponent(JSON.stringify(config));
const pass= encodeURIComponent(state.password);
console.log("CHECK1");
await getNodeConfig(state.password);
console.log("CHECK2");
updateState({ busy: false });
navigate(`/dashboard?config=${status}&pass=${pass}`);
console.log("CHECK3");
console.log(app);
app.actions.setAdmin(state.password);
console.log("DONE!");
}
catch(err) {
console.log("ERROR!");
console.log(err);
updateState({ busy: false });
throw new Error("login failed");

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

@ -14,6 +14,7 @@ import { createWebsocket } from 'api/fetchUtil';
export function useAppContext(websocket) {
const [state, setState] = useState({
status: null,
adminToken: null,
});
const [appRevision, setAppRevision] = useState();
@ -26,6 +27,7 @@ export function useAppContext(websocket) {
const ws = useRef(null);
const updateState = (value) => {
console.log(" UPDATE STATE", value);
setState((s) => ({ ...s, ...value }))
}
@ -77,6 +79,14 @@ export function useAppContext(websocket) {
create: async (username, password, token) => {
await appCreate(username, password, token)
},
setAdmin: (token) => {
console.log("TOKEN SET!", token);
updateState({ adminToken: token });
console.log("TOKEN SET: done");
},
clearAdmin: () => {
updateState({ adminToken: null });
},
}
const appCreate = async (username, password, token) => {

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

@ -4,9 +4,12 @@ import { ExclamationCircleOutlined, SettingOutlined, CopyOutlined, UserAddOutlin
import { useDashboard } from './useDashboard.hook';
import { AccountItem } from './accountItem/AccountItem';
export function Dashboard({ token, config, logout }) {
export function Dashboard() {
const { state, actions } = useDashboard(token, config);
console.log("IN DASHBOARD");
const { state, actions } = useDashboard();
console.log("IN DASHBOARD here");
const onClipboard = (value) => {
navigator.clipboard.writeText(value);
@ -33,7 +36,7 @@ export function Dashboard({ token, config, logout }) {
</div>
<div class="settings">
<SettingsButton type="text" size="small" icon={<LogoutOutlined />}
onClick={() => logout()}></SettingsButton>
onClick={() => actions.logout()}></SettingsButton>
</div>
{ state.errorMessage && (
<div class="alert">
@ -63,7 +66,7 @@ export function Dashboard({ token, config, logout }) {
<div class="settings">
<Tooltip placement="topRight" title="Logout">
<SettingsButton type="text" size="small" icon={<LogoutOutlined />}
onClick={() => logout()}></SettingsButton>
onClick={() => actions.logout()}></SettingsButton>
</Tooltip>
</div>
{ state.errorMessage && (
@ -89,8 +92,7 @@ export function Dashboard({ token, config, logout }) {
itemLayout="horizontal"
dataSource={state.accounts}
loading={state.loading}
renderItem={item => (<AccountItem token={token} item={item}
remove={actions.removeAccount}/>)}
renderItem={item => (<AccountItem item={item} remove={actions.removeAccount}/>)}
/>
</div>
</div>

1
net/web/src/dashboard/Dashboard.styled.js
View File

@ -21,6 +21,7 @@ export const DashboardWrapper = styled.div`
border-radius: 4px;
max-width: 100%;
max-height: 80%;
background-color: ${Colors.formBackground};
.header {
color: #444444;

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

@ -4,9 +4,9 @@ import { useAccountItem } from './useAccountItem.hook';
import { ExclamationCircleOutlined, CopyOutlined, UserDeleteOutlined, UnlockOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
import { Modal, Tooltip, Button } from 'antd';
export function AccountItem({ token, item, remove }) {
export function AccountItem({ item, remove }) {
const { state, actions } = useAccountItem(token, item, remove);
const { state, actions } = useAccountItem(item, remove);
const removeAccount = () => {
Modal.confirm({

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

@ -3,8 +3,9 @@ import { getAccountImageUrl } from 'api/getAccountImageUrl';
import { setAccountStatus } from 'api/setAccountStatus';
import { addAccountAccess } from 'api/addAccountAccess';
import { ViewportContext } from 'context/ViewportContext';
import { AppContext } from 'context/AppContext';
export function useAccountItem(token, item, remove) {
export function useAccountItem(item, remove) {
const [state, setState] = useState({
statusBusy: false,
@ -13,6 +14,7 @@ export function useAccountItem(token, item, remove) {
showAccess: false,
});
const app = useContext(AppContext);
const viewport = useContext(ViewportContext);
const updateState = (value) => {
@ -27,9 +29,9 @@ export function useAccountItem(token, item, remove) {
name: item?.name,
guid: item?.guid,
handle: item?.handle,
imageUrl: item?.imageSet ? getAccountImageUrl(token, item?.accountId) : null,
imageUrl: item?.imageSet ? getAccountImageUrl(app.state.adminToken, item?.accountId) : null,
});
}, [token, item]);
}, [app.state.adminToken, item]);
useEffect(() => {
updateState({ display: viewport.state.display });
@ -40,7 +42,7 @@ export function useAccountItem(token, item, remove) {
if (!state.accessBusy) {
updateState({ accessBusy: true });
try {
let access = await addAccountAccess(token, item.accountId);
let access = await addAccountAccess(app.state.adminToken, item.accountId);
updateState({ accessToken: access, showAccess: true });
}
catch (err) {
@ -69,7 +71,7 @@ export function useAccountItem(token, item, remove) {
if (!state.statusBusy) {
updateState({ statusBusy: true });
try {
await setAccountStatus(token, item.accountId, disabled);
await setAccountStatus(app.state.adminToken, item.accountId, disabled);
updateState({ disabled, activeClass: disabled ? 'inactive' : 'active' });
}
catch(err) {

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

@ -1,9 +1,11 @@
import { useContext, useRef, useState, useEffect } from 'react';
import { getNodeConfig } from 'api/getNodeConfig';
import { setNodeConfig } from 'api/setNodeConfig';
import { getNodeAccounts } from 'api/getNodeAccounts';
import { removeAccount } from 'api/removeAccount';
import { addAccountCreate } from 'api/addAccountCreate';
import { useNavigation, useLocation } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { AppContext } from 'context/AppContext';
export function useDashboard() {
@ -24,20 +26,32 @@ export function useDashboard() {
accounts: [],
});
const navigate = useNavigation();
const location = useLocation();
const token = useRef();
console.log("HERE1");
const navigate = useNavigate();
console.log("HERE2");
const app = useContext(AppContext);
console.log("HERE4");
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
}
useEffect(() => {
if (!app.state.adminToken) {
navigate('/admin');
}
else {
syncConfig();
syncAccounts();
}
}, [app]);
const actions = {
setCreateLink: async () => {
if (!state.createBusy) {
updateState({ busy: true });
try {
const create = await addAccountCreate(token.current)
const create = await addAccountCreate(app.state.adminToken)
updateState({ createToken: create, showCreate: true });
}
catch (err) {
@ -50,7 +64,7 @@ export function useDashboard() {
updateState({ showCreate });
},
removeAccount: async (accountId) => {
await removeAccount(token, accountId);
await removeAccount(app.state.adminToken, accountId);
actions.getAccounts();
},
setHost: (domain) => {
@ -77,6 +91,12 @@ export function useDashboard() {
setShowSettings: (value) => {
updateState({ showSettings: value });
},
logout: () => {
app.actions.clearAdmin();
},
getAccounts: async () => {
await syncAccounts();
},
setSettings: async () => {
if (!state.busy) {
updateState({ busy: true });
@ -84,7 +104,7 @@ export function useDashboard() {
const { domain, keyType, accountStorage, pushSupported, enableImage, enableAudio, enableVideo } = state;
const storage = accountStorage * 1073741824;
const config = { domain, accountStorage: storage, keyType, enableImage, enableAudio, enableVideo, pushSupported };
await setNodeConfig(token.current, config);
await setNodeConfig(app.state.adminToken, config);
updateState({ busy: false, showSettings: false });
}
catch(err) {
@ -94,46 +114,41 @@ export function useDashboard() {
}
}
},
getAccounts: async () => {
if (!state.busy) {
updateState({ busy: true });
try {
let accounts = await getNodeAccounts(token.current);
accounts.sort((a, b) => {
if (a.handle < b.handle) {
return -1;
}
if (a.handle > b.handle) {
return 1;
}
return 0;
});
updateState({ busy: false, accounts });
}
catch(err) {
console.log(err);
updateState({ busy: false, errorMessage: 'failed to load accounts' });
}
}
},
};
useEffect(() => {
const params = new URLSearchParams(location);
const pass = params.get("pass");
if (!pass) {
navigate('/admin');
}
else {
token.current = pass;
const config = JSON.parse(params.get("config"));
const syncConfig = async () => {
try {
const config = await getNodeConfig(app.state.adminToken);
const { storage, domain, keyType, pushSupported, enableImage, enableAudio, enableVideo } = config;
const accountStorage = Math.ceil(accountStorage / 1073741824);
const accountStorage = Math.ceil(storage / 1073741824);
updateState({ domain, accountStorage, keyType, enableImage, enableAudio, enableVideo, pushSupported });
actions.getAccounts();
}
}, []);
catch(err) {
console.log(err);
updateState({ errorMessage: 'failed to sync config' });
}
};
const syncAccounts = async () => {
try {
const accounts = await getNodeAccounts(app.state.adminToken);
accounts.sort((a, b) => {
if (a.handle < b.handle) {
return -1;
}
if (a.handle > b.handle) {
return 1;
}
return 0;
});
updateState({ accounts });
}
catch(err) {
console.log(err);
updateState({ errorMessage: 'failed to sync accounts' });
}
};
return { state, actions };
}