import React, { useEffect, useState } from 'react'; import { Field as FormikField, Form, Formik, FormikHelpers } from 'formik'; import tw from 'twin.macro'; import { object, string } from 'yup'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faKey, faTrashAlt } from '@fortawesome/free-solid-svg-icons'; import createSSHKey from '@/api/account/ssh/createSSHKey'; import deleteSSHKey from '@/api/account/ssh/deleteSSHKey'; import getSSHKeys, { SSHKey } from '@/api/account/ssh/getSSHKeys'; import FlashMessageRender from '@/components/FlashMessageRender'; import Button from '@/components/elements/Button'; import ContentBox from '@/components/elements/ContentBox'; import Field from '@/components/elements/Field'; import GreyRowBox from '@/components/elements/GreyRowBox'; import PageContentBlock from '@/components/elements/PageContentBlock'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import useFlash from '@/plugins/useFlash'; import ConfirmationModal from '@/components/elements/ConfirmationModal'; import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper'; import { Textarea } from '@/components/elements/Input'; import { format } from 'date-fns'; interface Values { name: string; publicKey: string; } const AddSSHKeyForm = ({ onKeyAdded }: { onKeyAdded: (key: SSHKey) => void }) => { const { clearFlashes, clearAndAddHttpError } = useFlash(); const submit = ({ name, publicKey }: Values, { setSubmitting, resetForm }: FormikHelpers) => { clearFlashes('ssh_keys'); createSSHKey(name, publicKey) .then(key => { resetForm(); onKeyAdded(key); }) .catch(error => { console.error(error); clearAndAddHttpError({ key: 'ssh_keys', error }); }) .then(() => setSubmitting(false)); }; return ( {({ isSubmitting }) => (
)}
); }; export default () => { const { clearFlashes, clearAndAddHttpError } = useFlash(); const [ keys, setKeys ] = useState([]); const [ loading, setLoading ] = useState(true); const [ deleteId, setDeleteId ] = useState(null); const doDeletion = (id: number | null) => { if (id === null) { return; } clearFlashes('ssh_keys'); deleteSSHKey(id) .then(() => setKeys(s => ([ ...(s || []).filter(key => key.id !== id), ]))) .catch(error => { console.error(error); clearAndAddHttpError({ key: 'ssh_keys', error }); }); }; useEffect(() => { clearFlashes('ssh_keys'); getSSHKeys() .then(keys => setKeys(keys)) .then(() => setLoading(false)) .catch(error => { console.error(error); clearAndAddHttpError({ key: 'ssh_keys', error }); }); }, []); return (
{ doDeletion(deleteId); setDeleteId(null); }} onModalDismissed={() => setDeleteId(null)} > Are you sure you wish to delete this SSH key? {keys.length === 0 ? !loading ?

No SSH keys have been configured for this account.

: null : keys.map((key, index) => ( 0 && tw`mt-2` ]}>

{key.name}

Added at:  {key.createdAt ? format(key.createdAt, 'MMM do, yyyy HH:mm') : 'Never'}

)) }
setKeys(s => ([ ...s!, key ]))}/>
); };