misc_pterodactyl-panel/resources/scripts/components/server/databases/RotatePasswordButton.tsx
Charles Morgan 4a234af7a3
Minor changes
Changes CopyOnClick to allow any.
Allows database information to be copied on click.
Changes layouts on database/backups to match the network tab.
Changes text to lighten it one level from 400 to 300 for easier visibility.
Moves database api endpoints to their own folder for some organization.
2020-11-08 21:09:22 -05:00

46 lines
1.6 KiB
TypeScript

import React, { useState } from 'react';
import rotateDatabasePassword from '@/api/server/databases/rotateDatabasePassword';
import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import { ServerContext } from '@/state/server';
import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
import { httpErrorToHuman } from '@/api/http';
import Button from '@/components/elements/Button';
import tw from 'twin.macro';
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 isSecondary color={'primary'} css={tw`mr-2`} onClick={rotate} isLoading={loading}>
Rotate Password
</Button>
);
};