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

adding admin options

Browse Source
This commit is contained in:
balzack 2025-02-20 22:49:19 -08:00
parent 01e6ef9568
commit 7f62429945
2 changed files with 112 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,47 +1,54 @@
.accounts {
.setup {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
flex-direction: column;
.content {
width: 100%;
max-width: 650px;
flex-grow: 1;
overflow: auto;
padding-top: 8px;
}
.header {
height: 48px;
width: 100%;
.header {
height: 48px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-left: 16px;
padding-right: 16px;
border-bottom: 2px solid var(--mantine-color-text-8);
.centerTitle {
flex-grow: 1;
display: flex;
justify-content: center;
}
.title {
padding-left: 16px;
padding-right: 16px;
font-size: 20px;
}
.area {
flex-grow: 1;
}
.loader {
width: 32px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-left: 16px;
padding-right: 16px;
border-bottom: 2px solid var(--mantine-color-text-8);
.centerTitle {
flex-grow: 1;
display: flex;
justify-content: center;
}
.title {
padding-left: 16px;
padding-right: 16px;
font-size: 20px;
}
.area {
flex-grow: 1;
}
.loader {
width: 32px;
display: flex;
flex-direction: row;
justify-content: center;
}
}
}
.webrtc {
height: 256px;
}
.option {
display: flex;
flex-direction: row;
@ -66,5 +73,9 @@
align-items: center;
margin-bottom: 8px;
}
.switch {
padding-left: 24px;
}
}
}

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

@ -1,28 +1,28 @@
import classes from './Setup.module.css'
import { useSetup } from './useSetup.hook'
import { Radio, Group, Loader, Modal, Divider, Text, TextInput, ActionIcon } from '@mantine/core'
import { Radio, Group, Loader, Modal, Divider, Text, TextInput, Switch, ActionIcon } from '@mantine/core'
export function Setup() {
const { state, actions } = useSetup();
return (
<div className={classes.accounts}>
<div className={classes.content}>
<div className={classes.header}>
<div className={classes.loader}>
{ state.loading && (
<Loader size={18} />
)}
</div>
<div className={classes.centerTitle}>
<Text className={classes.title}>{ state.strings.setup }</Text>
</div>
<div className={classes.loader}>
{ state.updating && (
<Loader size={18} />
)}
</div>
<div className={classes.setup}>
<div className={classes.header}>
<div className={classes.loader}>
{ state.loading && (
<Loader size={18} />
)}
</div>
<div className={classes.centerTitle}>
<Text className={classes.title}>{ state.strings.setup }</Text>
</div>
<div className={classes.loader}>
{ state.updating && (
<Loader size={18} />
)}
</div>
</div>
<div className={classes.content}>
<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}>
@ -38,7 +38,7 @@ export function Setup() {
className={classes.value}
size="sm"
disabled={state.loading}
value={state.setup?.domain}
value={state.setup?.domain || ''}
placeholder={state.strings.urlHint}
onChange={(event) => actions.setDomain(event.currentTarget.value)}
/>
@ -54,6 +54,58 @@ export function Setup() {
onChange={(event) => actions.setAccountStorage(event.currentTarget.value)}
/>
</div>
<div className={classes.option}>
<Text className={classes.label}>{state.strings.accountCreation}:</Text>
<Switch className={classes.switch} disabled={state.loading} checked={state.setup?.enableOpenAccess} onChange={(ev) => actions.setEnableOpenAccess(ev.currentTarget.checked)} />
{ state.setup?.enableOpenAccess && (
<TextInput
className={classes.value}
size="sm"
disabled={state.loading}
value={state.setup?.openAccessLimit || ''}
placeholder={state.strings.storageHint}
onChange={(event) => actions.setOpenAccessLimit(event.currentTarget.value)}
/>
)}
</div>
<div className={classes.option}>
<Text className={classes.label}>{state.strings.enablePush}:</Text>
<Switch className={classes.switch} disabled={state.loading} checked={state.setup?.pushSupported} onChange={(ev) => actions.setPushSupported(ev.currentTarget.checked)} />
</div>
<div className={classes.option}>
<Text className={classes.label}>{state.strings.allowUnsealed}:</Text>
<Switch className={classes.switch} disabled={state.loading} checked={state.setup?.allowUnsealed} onChange={(ev) => actions.setAllowUnsealed(ev.currentTarget.checked)} />
</div>
<Divider />
<div className={classes.option}>
<Text className={classes.label}>{state.strings.enableImage}:</Text>
<Switch className={classes.switch} disabled={state.loading} checked={state.setup?.enableImage} onChange={(ev) => actions.setEnableImage(ev.currentTarget.checked)} />
</div>
<div className={classes.option}>
<Text className={classes.label}>{state.strings.enableAudio}:</Text>
<Switch className={classes.switch} disabled={state.loading} checked={state.setup?.enableAudio} onChange={(ev) => actions.setEnableAudio(ev.currentTarget.checked)} />
</div>
<div className={classes.option}>
<Text className={classes.label}>{state.strings.enableVideo}:</Text>
<Switch className={classes.switch} disabled={state.loading} checked={state.setup?.enableVideo} onChange={(ev) => actions.setEnableVideo(ev.currentTarget.checked)} />
</div>
<div className={classes.option}>
<Text className={classes.label}>{state.strings.enableBinary}:</Text>
<Switch className={classes.switch} disabled={state.loading} checked={state.setup?.enableBinary} onChange={(ev) => actions.setEnableBinary(ev.currentTarget.checked)} />
</div>
<Divider />
<div className={classes.webrtc}>
<div className={classes.option}>
<Text className={classes.label}>{state.strings.enableWeb}:</Text>
<Switch className={classes.switch} disabled={state.loading} checked={state.setup?.enableIce} onChange={(ev) => actions.setEnableIce(ev.currentTarget.checked)} />
</div>
{ state.setup?.enableIce && (
<div className={classes.option}>
<Text className={classes.label}>{state.strings.enableService}:</Text>
<Switch className={classes.switch} disabled={state.loading} checked={state.setup?.enableService} onChange={(ev) => actions.setEnableService(ev.currentTarget.checked)} />
</div>
)}
</div>
</div>
</div>
);