readd AdvancedTab
This commit is contained in:
Philipp Rothmann
parent
23bf78e398
commit
0696801650
3 changed files with 237 additions and 0 deletions
|
|
@ -0,0 +1,99 @@
|
|||
import React, { Fragment, useRef } from 'react';
|
||||
import { Dialog, Transition } from '@headlessui/react';
|
||||
|
||||
type ChangeSecretModalProps = {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSave?: () => void;
|
||||
};
|
||||
|
||||
export const ChangeSecretModal = ({ open, onClose, onSave = () => {} }: ChangeSecretModalProps) => {
|
||||
const cancelButtonRef = useRef(null);
|
||||
|
||||
return (
|
||||
<Transition.Root show={open} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
auto-reopen="true"
|
||||
className="fixed z-10 inset-0 overflow-y-auto"
|
||||
initialFocus={cancelButtonRef}
|
||||
onClose={onClose}
|
||||
>
|
||||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
{/* This element is to trick the browser into centering the modal contents. */}
|
||||
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
|
||||
​
|
||||
</span>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
||||
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="mt-3 text-center sm:mt-0 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
|
||||
Change secret
|
||||
</Dialog.Title>
|
||||
<div className="my-4">
|
||||
<p className="text-sm text-gray-500">
|
||||
<span className="font-bold text-red-500">CAUTION:</span> changing this might cause the app to
|
||||
break.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<label htmlFor="appSecret" className="block text-sm font-medium text-gray-700">
|
||||
App Secret
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
type="text"
|
||||
name="appSecret"
|
||||
id="appSecret"
|
||||
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
placeholder="Enter New App Secret"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
onClick={onSave}
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
onClick={onClose}
|
||||
ref={cancelButtonRef}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
136
src/modules/apps/components/AdvancedTab/components/Secrets.tsx
Normal file
136
src/modules/apps/components/AdvancedTab/components/Secrets.tsx
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
import React, { useState } from 'react';
|
||||
import { ChevronDownIcon, ChevronRightIcon, 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 [openDangerZone, setOpenDangerZone] = useState(false);
|
||||
|
||||
const secretModalOpen = () => setSecretModal(true);
|
||||
const secretModalClose = () => setSecretModal(false);
|
||||
|
||||
const secretsModalSave = () => {
|
||||
showToast('The secret has been saved successfully.');
|
||||
setSecretModal(false);
|
||||
};
|
||||
|
||||
const toggleDangerZone = () => setOpenDangerZone((prevState) => !prevState);
|
||||
|
||||
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-red-400 shadow-sm text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-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`,
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between mt-24 mb-5 cursor-pointer"
|
||||
onClick={toggleDangerZone}
|
||||
>
|
||||
<h1 className="text-2xl leading-6 font-medium text-gray-900">Danger zone</h1>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-900 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
|
||||
>
|
||||
{openDangerZone ? (
|
||||
<ChevronDownIcon className="flex-shrink-0 h-5 w-5 text-gray-600" aria-hidden="true" />
|
||||
) : (
|
||||
<ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-600" aria-hidden="true" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{openDangerZone && (
|
||||
<div className="border-2 border-red-500 rounded-md overflow-hidden">
|
||||
<div className="border border-gray-200">
|
||||
<Table data={data} columns={columns} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ChangeSecretModal open={secretModal} onClose={secretModalClose} onSave={secretsModalSave} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { Secrets } from './Secrets';
|
||||
export { ChangeSecretModal } from './ChangeSecretModal';
|
||||
Loading…
Reference in a new issue