85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
import type { App } from '../../shared/types'
|
|
import { closeModal, openModal, rerenderModal } from '../components/modal'
|
|
import { navigate } from '../router'
|
|
import { selectedApp } from '../state'
|
|
import { Button, Form, FormActions, FormError, FormField, FormInput, FormLabel } from '../styles'
|
|
import { theme } from '../themes'
|
|
|
|
let deleteAppError = ''
|
|
let deleteAppDeleting = false
|
|
let deleteAppTarget: App | null = null
|
|
|
|
async function deleteApp(input: HTMLInputElement) {
|
|
if (!deleteAppTarget) return
|
|
|
|
const expected = `sudo rm ${deleteAppTarget.name}`
|
|
const value = input.value.trim()
|
|
|
|
if (value !== expected) {
|
|
deleteAppError = `Type "${expected}" to confirm`
|
|
rerenderModal()
|
|
return
|
|
}
|
|
|
|
deleteAppDeleting = true
|
|
deleteAppError = ''
|
|
rerenderModal()
|
|
|
|
try {
|
|
const res = await fetch(`/api/sync/apps/${deleteAppTarget.name}`, {
|
|
method: 'DELETE',
|
|
})
|
|
if (!res.ok) {
|
|
throw new Error(`Failed to delete app: ${res.statusText}`)
|
|
}
|
|
|
|
// Success - close modal and navigate to dashboard
|
|
closeModal()
|
|
if (selectedApp === deleteAppTarget.name) {
|
|
navigate('/')
|
|
}
|
|
} catch (err) {
|
|
deleteAppError = err instanceof Error ? err.message : 'Failed to delete app'
|
|
deleteAppDeleting = false
|
|
rerenderModal()
|
|
}
|
|
}
|
|
|
|
export function openDeleteAppModal(app: App) {
|
|
deleteAppError = ''
|
|
deleteAppDeleting = false
|
|
deleteAppTarget = app
|
|
|
|
const expected = `sudo rm ${app.name}`
|
|
|
|
openModal('Delete App', () => (
|
|
<Form onSubmit={(e: Event) => {
|
|
e.preventDefault()
|
|
const input = (e.target as HTMLFormElement).querySelector('input') as HTMLInputElement
|
|
deleteApp(input)
|
|
}}>
|
|
<p style={{ margin: '0 0 16px', color: theme('colors-textMuted') }}>
|
|
This will <strong style={{ color: theme('colors-error') }}>permanently delete</strong> <strong>{app.name}</strong> from the server.
|
|
</p>
|
|
<FormField>
|
|
<FormLabel for="delete-confirm">Type "{expected}" to confirm</FormLabel>
|
|
<FormInput
|
|
id="delete-confirm"
|
|
type="text"
|
|
placeholder={expected}
|
|
autofocus
|
|
/>
|
|
{deleteAppError && <FormError>{deleteAppError}</FormError>}
|
|
</FormField>
|
|
<FormActions>
|
|
<Button type="button" onClick={closeModal} disabled={deleteAppDeleting}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" variant="danger" disabled={deleteAppDeleting}>
|
|
{deleteAppDeleting ? 'Deleting...' : 'Delete App'}
|
|
</Button>
|
|
</FormActions>
|
|
</Form>
|
|
))
|
|
}
|