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

43 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>
);
};