misc_pterodactyl-panel/resources/scripts/components/server/databases/RotatePasswordButton.tsx

46 lines
1.5 KiB
TypeScript

import React, { useState } from 'react';
import { rotateDatabasePassword } from '@/api/server/databases';
import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import { ServerContext } from '@/state/server';
import { ServerDatabase } from '@definitions/user';
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(undefined);
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>
);
};