add-frames #1
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