chore: add file path input modal

web/src/components/filePathInputModal.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+
+import { Button, DialogActions, DialogContent, TextField } from '@mui/material'
+
+import { BootstrapDialogTitle } from './dialogTitle'
+import { BootstrapDialog } from './modal'
+
+type FilePathInputModalProps = {
+  open: boolean
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+  saveFile: (filePath: string) => void
+}
+
+const FilePathInputModal = ({
+  open,
+  setOpen,
+  saveFile
+}: FilePathInputModalProps) => {
+  const [filePath, setFilePath] = useState('')
+  const [hasError, setHasError] = useState(false)
+  const [errorText, setErrorText] = useState('')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value
+    const regex = /\.(exe|sh|htaccess)$/i
+    if (regex.test(value)) {
+      setHasError(true)
+      setErrorText('can not save file with extensions [exe, sh, htaccess]')
+    } else {
+      setHasError(false)
+      setErrorText('')
+    }
+    setFilePath(value)
+  }
+
+  return (
+    <BootstrapDialog fullWidth onClose={() => setOpen(false)} open={open}>
+      <BootstrapDialogTitle id="abort-modal" handleOpen={setOpen}>
+        Save File
+      </BootstrapDialogTitle>
+      <DialogContent dividers>
+        <TextField
+          fullWidth
+          variant="outlined"
+          label="File Path"
+          value={filePath}
+          onChange={handleChange}
+          error={hasError}
+          helperText={errorText}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button variant="contained" onClick={() => setOpen(false)}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() => {
+            saveFile(filePath)
+          }}
+          disabled={hasError || !filePath}
+        >
+          Save
+        </Button>
+      </DialogActions>
+    </BootstrapDialog>
+  )
+}
+
+export default FilePathInputModal

web/src/components/modal.tsx

@@ -5,7 +5,7 @@ import { styled } from '@mui/material/styles'
 
 import { BootstrapDialogTitle } from './dialogTitle'
 
-const BootstrapDialog = styled(Dialog)(({ theme }) => ({
+export const BootstrapDialog = styled(Dialog)(({ theme }) => ({
   '& .MuiDialogContent-root': {
     padding: theme.spacing(2)
   },
@@ -14,7 +14,7 @@ const BootstrapDialog = styled(Dialog)(({ theme }) => ({
   }
 }))
 
-export interface ModalProps {
+type ModalProps = {
   open: boolean
   setOpen: React.Dispatch<React.SetStateAction<boolean>>
   title: string