135 lines
4.3 KiB
TypeScript
135 lines
4.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { ClipboardIcon, KeyIcon } from '@heroicons/react/outline';
|
|
import { showToast } from 'src/common/util/show-toast';
|
|
import { Table } from 'src/components';
|
|
import { ChangeSecretModal } from './ChangeSecretModal';
|
|
|
|
export const Secrets = () => {
|
|
const [secretModal, setSecretModal] = useState(false);
|
|
|
|
const secretModalOpen = () => setSecretModal(true);
|
|
const secretModalClose = () => setSecretModal(false);
|
|
|
|
const secretsModalSave = () => {
|
|
showToast('The secret has been saved successfully.');
|
|
setSecretModal(false);
|
|
};
|
|
|
|
const columns: any = React.useMemo(
|
|
() => [
|
|
{
|
|
Header: 'Name',
|
|
accessor: 'name',
|
|
width: '25%',
|
|
},
|
|
{
|
|
Header: 'Secret',
|
|
accessor: 'secret',
|
|
Cell: (e: any) => {
|
|
const [reveal, setReveal] = useState(false);
|
|
|
|
return (
|
|
<div className="flex items-center">
|
|
{!reveal ? (
|
|
<>
|
|
<div className="w-48 bg-gray-200 h-4 rounded-full mr-4" />
|
|
<button
|
|
onClick={() => setReveal(true)}
|
|
type="button"
|
|
className="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded text-gray-700 hover:bg-gray-200 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
|
|
>
|
|
Reveal secret
|
|
</button>
|
|
</>
|
|
) : (
|
|
<div>{e.cell.row.original.secret}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
Header: ' ',
|
|
Cell: () => {
|
|
return (
|
|
<div className="flex items-center justify-end opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button
|
|
onClick={() => showToast('The secret has been copied to your clipboard.')}
|
|
type="button"
|
|
className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 mr-3"
|
|
>
|
|
<ClipboardIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
|
Copy Secret
|
|
</button>
|
|
|
|
<button
|
|
onClick={secretModalOpen}
|
|
type="button"
|
|
className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
|
|
>
|
|
<KeyIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
|
|
Change secret
|
|
</button>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
],
|
|
[],
|
|
);
|
|
|
|
const data: any[] = React.useMemo(
|
|
() => [
|
|
{
|
|
id: 1,
|
|
name: 'nextcloud_mariadb_password',
|
|
secret: 'xEtC2dvUsBVzoTA19fOyDF4IwpPSWW62I92F59s69EO9vp56',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'nextcloud_mariadb_root_password',
|
|
secret: `OB.IHD:HPY{x<)>@+B'p(LUU@k-Wv=w(!@)?7Zq%@nE7GY]!`,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'nextcloud_password (admin login)',
|
|
secret: `#B&>4A;O#XEF]_dE*zxF26>8fF:akgGL8gi#yALK{ZY[P$eE`,
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'onlyoffice_jwt_secret',
|
|
secret: `U),xxEbt*g~t[4:Jl6RU8Tih#3ExinoV|K?.gL/R%?;gzK)R`,
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'onlyoffice_postgresql_password',
|
|
secret: `U),xxEbt*g~t[4:Jl6RU8Tih#3ExinoV|K?.gL/R%?;gzK)R`,
|
|
},
|
|
{
|
|
id: 6,
|
|
name: 'onlyoffice_rabbitmq_password',
|
|
secret: `r7sFEUL&U(a;3yR;CaC7P,bPwUEKZOT=IyjJq%AWniY!ncP[`,
|
|
},
|
|
],
|
|
[],
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<div className="py-4">
|
|
<div className="flex flex-col">
|
|
<div className="-my-2 sm:-mx-6 lg:-mx-8">
|
|
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
|
<div className="border border-gray-200">
|
|
<Table data={data} columns={columns} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ChangeSecretModal open={secretModal} onClose={secretModalClose} onSave={secretsModalSave} />
|
|
</>
|
|
);
|
|
};
|