Validate textfield input in "Add remote File"

client/components/Parts/Dialogs/Input.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import InputAdornment from '@mui/material/InputAdornment'
 import TextField from '@mui/material/TextField'
 import ConfirmDialog, { ConfirmDialogProps } from './Confirm'
+import * as helpers from '../../../helpers'
 
 export interface InputDialogProps extends Omit<ConfirmDialogProps, 'onConfirm'> {
   value?: string
@@ -14,10 +15,23 @@ export interface InputDialogProps extends Omit<ConfirmDialogProps, 'onConfirm'>
 export default function InputDialog(props: InputDialogProps) {
   const { value: initValue, prefix, placholder, spellcheck, onConfirm, ...rest } = props
   const [value, setValue] = React.useState(initValue || '')
-  const handleConfirm = () => onConfirm && onConfirm(value)
+  const [textFieldError, setTextFieldError] = React.useState(false)
+  const [errorHelperText, setErrorHelperText] = React.useState('')
+  const handleConfirm = () => {
+    if(value !== '' && helpers.isUrlValid(value)){
+      setTextFieldError(false)
+      return onConfirm && onConfirm(value)
+    } else {
+      setTextFieldError(true)
+      if(value === '') { setErrorHelperText('Enter an URL') }
+      else if(!helpers.isUrlValid(value)) { setErrorHelperText('Enter a valid URL') }
+    }
+  }
   return (
     <ConfirmDialog {...rest} onConfirm={handleConfirm}>
       <TextField
+        error={textFieldError}
+        helperText={textFieldError ? errorHelperText : ' '}
         autoFocus
         fullWidth
         size="small"

client/helpers/index.ts

@@ -8,3 +8,4 @@ export * from './menu'
 export * from './portal'
 export * from './report'
 export * from './table'
+export * from './validateURL'

client/helpers/validateURL.ts

@@ -0,0 +1,8 @@
+export function isUrlValid(str: string) {
+  try {
+    new URL(str)
+    return true
+  } catch (err) {
+    return false
+  }
+}