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

rendering initial admin options

Browse Source
This commit is contained in:
balzack 2025-02-20 17:59:18 -08:00
parent 8a2d57f089
commit 01e6ef9568
5 changed files with 87 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/client/web/src/accounts/Accounts.module.css
View File

@ -13,6 +13,10 @@
padding-right: 16px;
border-bottom: 1px solid var(--mantine-color-text-8);
font-size: 14px;
&:hover {
background-color: var(--mantine-color-surface-2);
}
}
.action {
@ -31,6 +35,7 @@
.header {
height: 48px;
flex-shrink: 0;
width: 100%;
display: flex;
flex-direction: row;

10
app/client/web/src/accounts/Accounts.tsx
View File

@ -1,17 +1,23 @@
import { useEffect } from 'react';
import classes from './Accounts.module.css'
import { useAccounts } from './useAccounts.hook'
import { Modal, Divider, Text, ActionIcon } from '@mantine/core'
import { IconUserPlus, IconReload, IconSettings, IconLockOpen2, IconUserCancel, IconTrash } from '@tabler/icons-react'
import { Card } from '../card/Card'
import { Colors } from '../constants/Colors';
export function Accounts({ openSetup }: { openSetup: ()=>void }) {
const { state, actions } = useAccounts();
useEffect(() => {
actions.reload();
}, []);
const members = state.members.map((member, idx) => {
const options = [
<ActionIcon key="acess" className={classes.action} variant="light" onClick={actions.reload} loading={state.loading}><IconLockOpen2 /></ActionIcon>,
<ActionIcon key="block" className={classes.action} variant="light" onClick={actions.reload} loading={state.loading}><IconUserCancel /></ActionIcon>,
<ActionIcon key="remove" className={classes.action} variant="light" onClick={actions.reload} loading={state.loading}><IconTrash /></ActionIcon>,
<ActionIcon key="block" className={classes.action} variant="light" onClick={actions.reload} loading={state.loading} color={Colors.pending}><IconUserCancel /></ActionIcon>,
<ActionIcon key="remove" className={classes.action} variant="light" onClick={actions.reload} loading={state.loading} color={Colors.offsync}><IconTrash /></ActionIcon>,
];
return (

2
app/client/web/src/service/Service.tsx
View File

@ -58,7 +58,7 @@ export function Service() {
{state.layout === 'large' && (
<div className={classes.display}>
<Accounts openSetup={openSetup} />
<Drawer opened={setup} onClose={closeSetup} withCloseButton={false} size="sm" padding="0" position="right">
<Drawer opened={setup} onClose={closeSetup} withCloseButton={false} size="550px" padding="0" position="right">
<div style={{ height: '100vh' }}>
<Setup />
</div>

33
app/client/web/src/setup/Setup.module.css
View File

@ -17,6 +17,7 @@
align-items: center;
padding-left: 16px;
padding-right: 16px;
border-bottom: 2px solid var(--mantine-color-text-8);
.centerTitle {
flex-grow: 1;
@ -32,10 +33,38 @@
.area {
flex-grow: 1;
}
.loader {
width: 32px;
display: flex;
flex-direction: row;
justify-content: center;
}
}
}
.option {
display: flex;
flex-direction: row;
align-items: center;
padding-left: 16px;
padding-right: 16px;
height: 48px;
.label {
font-size: 16px;
}
.value {
padding-left: 24px;
flex-grow: 1;
}
.line {
width: 100%;
.radio {
padding-left: 24px;
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 8px;
}
}
}

50
app/client/web/src/setup/Setup.tsx
View File

@ -1,6 +1,6 @@
import classes from './Setup.module.css'
import { useSetup } from './useSetup.hook'
import { Loader, Modal, Divider, Text, ActionIcon } from '@mantine/core'
import { Radio, Group, Loader, Modal, Divider, Text, TextInput, ActionIcon } from '@mantine/core'
export function Setup() {
const { state, actions } = useSetup();
@ -9,17 +9,51 @@ export function Setup() {
<div className={classes.accounts}>
<div className={classes.content}>
<div className={classes.header}>
{ state.loading && (
<Loader size={18} />
)}
<div className={classes.loader}>
{ state.loading && (
<Loader size={18} />
)}
</div>
<div className={classes.centerTitle}>
<Text className={classes.title}>{ state.strings.setup }</Text>
</div>
{ state.updating && (
<Loader size={18} />
)}
<div className={classes.loader}>
{ state.updating && (
<Loader size={18} />
)}
</div>
</div>
<div className={classes.option}>
<Text className={classes.label}>{state.strings.keyType}:</Text>
<Radio.Group name="keyType" className={classes.radio} disabled={state.loading} value={state.setup?.keyType} onChange={actions.setKeyType}>
<Group mt="xs">
<Radio value="RSA_2048" label="RSA2048" />
<Radio value="RSA_4096" label="RSA4096" />
</Group>
</Radio.Group>
</div>
<div className={classes.option}>
<Text className={classes.label}>{state.strings.federatedHost}:</Text>
<TextInput
className={classes.value}
size="sm"
disabled={state.loading}
value={state.setup?.domain}
placeholder={state.strings.urlHint}
onChange={(event) => actions.setDomain(event.currentTarget.value)}
/>
</div>
<div className={classes.option}>
<Text className={classes.label}>{state.strings.storageLimit}:</Text>
<TextInput
className={classes.value}
size="sm"
disabled={state.loading}
value={state.accountStorage}
placeholder={state.strings.storageHint}
onChange={(event) => actions.setAccountStorage(event.currentTarget.value)}
/>
</div>
<Divider className={classes.line} />
</div>
</div>
);