StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add database password rotation to view

Browse source
This commit is contained in:
Dane Everitt 2019-07-27 15:17:50 -07:00
parent f6ee885f26
commit 48c39abfcb
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
11 changed files with 178 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

20
resources/scripts/components/elements/Button.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from 'react';
import classNames from 'classnames';
type Props = { isLoading?: boolean } & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
export default ({ isLoading, children, className, ...props }: Props) => (
<button
{...props}
className={classNames('btn btn-sm relative', className)}
>
{isLoading &&
<div className={'w-full flex absolute justify-center'} style={{ marginLeft: '-0.75rem' }}>
<div className={'spinner-circle spinner-white spinner-sm'}/>
</div>
}
<span className={isLoading ? 'text-transparent' : undefined}>
{children}
</span>
</button>
);

13
resources/scripts/components/server/databases/DatabaseRow.tsx
View file

@ -15,19 +15,26 @@ import { ApplicationStore } from '@/state';
import { ServerContext } from '@/state/server';
import deleteServerDatabase from '@/api/server/deleteServerDatabase';
import { httpErrorToHuman } from '@/api/http';
import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton';
interface Props {
database: ServerDatabase;
databaseId: string | number;
className?: string;
onDelete: () => void;
}
export default ({ database, className, onDelete }: Props) => {
export default ({ databaseId, className, onDelete }: Props) => {
const [visible, setVisible] = useState(false);
const database = ServerContext.useStoreState(state => state.databases.items.find(item => item.id === databaseId));
const appendDatabase = ServerContext.useStoreActions(actions => actions.databases.appendDatabase);
const [connectionVisible, setConnectionVisible] = useState(false);
const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const server = ServerContext.useStoreState(state => state.server.data!);
if (!database) {
return null;
}
const schema = object().shape({
confirm: string()
.required('The database name must be provided.')
@ -104,6 +111,7 @@ export default ({ database, className, onDelete }: Props) => {
}
</Formik>
<Modal visible={connectionVisible} onDismissed={() => setConnectionVisible(false)}>
<FlashMessageRender byKey={'database-connection-modal'} className={'mb-6'}/>
<h3 className={'mb-6'}>Database connection details</h3>
<div>
<label className={'input-dark-label'}>Password</label>
@ -119,6 +127,7 @@ export default ({ database, className, onDelete }: Props) => {
/>
</div>
<div className={'mt-6 text-right'}>
<RotatePasswordButton databaseId={database.id} onUpdate={appendDatabase}/>
<button className={'btn btn-sm btn-secondary'} onClick={() => setConnectionVisible(false)}>
Close
</button>

11
resources/scripts/components/server/databases/DatabasesContainer.tsx
View file

@ -12,12 +12,15 @@ import CreateDatabaseButton from '@/components/server/databases/CreateDatabaseBu
export default () => {
const [ loading, setLoading ] = useState(true);
const [ databases, setDatabases ] = useState<ServerDatabase[]>([]);
const server = ServerContext.useStoreState(state => state.server.data!);
const databases = ServerContext.useStoreState(state => state.databases.items);
const { setDatabases, appendDatabase, removeDatabase } = ServerContext.useStoreActions(state => state.databases);
const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
useEffect(() => {
setLoading(!databases.length);
clearFlashes('databases');
getServerDatabases(server.uuid)
.then(databases => {
setDatabases(databases);
@ -43,8 +46,8 @@ export default () => {
databases.map((database, index) => (
<DatabaseRow
key={database.id}
database={database}
onDelete={() => setDatabases(s => [ ...s.filter(d => d.id !== database.id) ])}
databaseId={database.id}
onDelete={() => removeDatabase(database)}
className={index > 0 ? 'mt-1' : undefined}
/>
))
@ -54,7 +57,7 @@ export default () => {
</p>
}
<div className={'mt-6 flex justify-end'}>
<CreateDatabaseButton onCreated={database => setDatabases(s => [ ...s, database ])}/>
<CreateDatabaseButton onCreated={appendDatabase}/>
</div>
</React.Fragment>
</CSSTransition>

45
resources/scripts/components/server/databases/RotatePasswordButton.tsx Normal file
View file

@ -0,0 +1,45 @@
import React, { useState } from 'react';
import rotateDatabasePassword from '@/api/server/rotateDatabasePassword';
import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import { ServerContext } from '@/state/server';
import { ServerDatabase } from '@/api/server/getServerDatabases';
import { httpErrorToHuman } from '@/api/http';
import Button from '@/components/elements/Button';
export default ({ databaseId, onUpdate }: {
databaseId: string;
onUpdate: (database: ServerDatabase) => void;
}) => {
const [ loading, setLoading ] = useState(false);
const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const server = ServerContext.useStoreState(state => state.server.data!);
if (!databaseId) {
return null;
}
const rotate = () => {
setLoading(true);
clearFlashes();
rotateDatabasePassword(server.uuid, databaseId)
.then(database => onUpdate(database))
.catch(error => {
console.error(error);
addFlash({
type: 'error',
title: 'Error',
message: httpErrorToHuman(error),
key: 'database-connection-modal',
});
})
.then(() => setLoading(false));
};
return (
<Button className={'btn-secondary mr-2'} onClick={rotate} isLoading={loading}>
Rotate Password
</Button>
);
};