fix: ipv6 connect peer and block host

alexfreska · alexfreska · commit 633a2567cdc3 · 2024-05-13T16:28:51.000-04:00
diff --git a/.changeset/rich-oranges-pay.md b/.changeset/rich-oranges-pay.md
@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The host blocklist dialog now supports adding IPv6 addresses.
diff --git a/.changeset/tame-cougars-sit.md b/.changeset/tame-cougars-sit.md
@@ -0,0 +1,7 @@
+---
+'hostd': minor
+'renterd': minor
+'walletd': minor
+---
+
+The connect to peer dialog now supports IPv6 addresses. Closes https://github.com/SiaFoundation/web/issues/624
diff --git a/libs/design-system/src/app/SyncerConnectPeerDialog.tsx b/libs/design-system/src/app/SyncerConnectPeerDialog.tsx
@@ -1,33 +1,62 @@
 'use client'
 
 import { Paragraph } from '../core/Paragraph'
-import { triggerSuccessToast } from '../lib/toast'
-import {
-  FormFieldFormik,
-  FormSubmitButtonFormik,
-} from '../components/FormFormik'
+import { triggerErrorToast, triggerSuccessToast } from '../lib/toast'
 import { Response } from '@siafoundation/react-core'
-import { useFormik } from 'formik'
-import * as Yup from 'yup'
-import { hostnameOrIpRegex } from '../lib/ipRegex'
+import { hostnameOrIpRegex, ipv6Regex } from '../lib/ipRegex'
 import { Dialog } from '../core/Dialog'
+import { ConfigFields } from '../form/configurationFields'
+import { useDialogFormHelpers } from '../form/useDialogFormHelpers'
+import { useForm } from 'react-hook-form'
+import { useCallback } from 'react'
+import { FormSubmitButton } from '../components/Form'
+import { FieldNumber } from '../form/FieldNumber'
+import { FieldText } from '../form/FieldText'
 
-const initialValues = {
-  port: 9981,
-  ip: '',
+function getDefaultValues() {
+  return {
+    ip: '',
+    port: 9981,
+  }
 }
 
-const validationSchema = Yup.object().shape({
-  port: Yup.number()
-    .required('Required')
-    .min(0, 'Out of valid range')
-    .max(65535, 'Out of valid range'),
-  ip: Yup.string()
-    .required('Required')
-    .test('ip', 'Invalid hostname or IP address', (v) =>
-      hostnameOrIpRegex().test(v || '')
-    ),
-})
+type Values = ReturnType<typeof getDefaultValues>
+
+function getFields(): ConfigFields<Values, never> {
+  return {
+    port: {
+      type: 'number',
+      title: 'Port',
+      placeholder: '9981',
+      autoComplete: 'off',
+      disableGroupSeparators: true,
+      validation: {
+        validate: {
+          min: (value) =>
+            Number(value) >= 0 || 'must be greater than or equal to 0',
+          max: (value) =>
+            Number(value) <= 65535 || 'must be less than or equal to 65,535',
+        },
+      },
+    },
+    ip: {
+      type: 'text',
+      title: 'Address',
+      placeholder: 'host.acme.com or 127.0.0.1',
+      autoComplete: 'off',
+      validation: {
+        validate: {
+          valid: (v) =>
+            hostnameOrIpRegex().test(String(v) || '') ||
+            'invalid hostname or IP address',
+        },
+      },
+    },
+  }
+}
+
+const defaultValues = getDefaultValues()
+const fields = getFields()
 
 export type SyncerConnectPeerDialogParams = void
 
@@ -45,73 +74,58 @@ export function SyncerConnectPeerDialog({
   connect,
   onOpenChange,
 }: Props) {
-  const formik = useFormik({
-    initialValues,
-    validationSchema,
-    onSubmit: async (values, actions) => {
-      const netAddress = `${values.ip}:${values.port}`
+  const form = useForm({
+    mode: 'all',
+    defaultValues,
+  })
+
+  const { handleOpenChange, closeAndReset } = useDialogFormHelpers({
+    form,
+    onOpenChange,
+    defaultValues,
+  })
+
+  const onSubmit = useCallback(
+    async (values: Values) => {
+      let netAddress = `${values.ip}:${values.port}`
+      if (ipv6Regex().test(values.ip)) {
+        netAddress = `[${values.ip}]:${values.port}`
+      }
       const response = await connect(netAddress)
       if (response.error) {
-        const formattedError = response.error.replace(
-          `invalid peer address: address ${netAddress}:`,
-          ''
-        )
-        actions.setStatus({ error: formattedError })
+        triggerErrorToast({ title: response.error })
       } else {
         triggerSuccessToast({ title: 'Connected to peer' })
-        actions.resetForm()
-        onOpenChange(false)
+        closeAndReset()
       }
     },
-  })
+    [closeAndReset, connect]
+  )
 
   return (
     <Dialog
       trigger={trigger}
       title="Connect peer"
       open={open}
-      onOpenChange={(open) => {
-        if (!open) {
-          formik.resetForm()
-        }
-        onOpenChange(open)
-      }}
+      onOpenChange={handleOpenChange}
       contentVariants={{
         className: 'w-[400px]',
       }}
+      onSubmit={form.handleSubmit(onSubmit)}
+      controls={
+        <div className="px-1">
+          <FormSubmitButton form={form} size="medium" className="w-full">
+            Connect
+          </FormSubmitButton>
+        </div>
+      }
     >
       <div className="flex flex-col gap-4">
         <Paragraph size="14">Connect to a peer by IP address.</Paragraph>
-        <form onSubmit={formik.handleSubmit}>
-          <div className="flex flex-col gap-4">
-            <FormFieldFormik
-              formik={formik}
-              title="Address"
-              name="ip"
-              placeholder="host.acme.com or 127.0.0.1"
-              autoComplete="off"
-              type="text"
-              variants={{
-                size: 'medium',
-              }}
-            />
-            <FormFieldFormik
-              formik={formik}
-              title="Port"
-              name="port"
-              disableGroupSeparators
-              placeholder="9981"
-              autoComplete="off"
-              type="number"
-              variants={{
-                size: 'medium',
-              }}
-            />
-            <FormSubmitButtonFormik formik={formik} size="medium">
-              Connect
-            </FormSubmitButtonFormik>
-          </div>
-        </form>
+        <div className="flex flex-col gap-4">
+          <FieldText form={form} fields={fields} name="ip" size="medium" />
+          <FieldNumber form={form} fields={fields} name="port" size="medium" />
+        </div>
       </div>
     </Dialog>
   )
diff --git a/libs/design-system/src/components/Form.tsx b/libs/design-system/src/components/Form.tsx
@@ -102,13 +102,15 @@ type FormSubmitProps<Values extends FieldValues> = {
   size?: React.ComponentProps<typeof Button>['size']
   variant?: React.ComponentProps<typeof Button>['variant']
   children: React.ReactNode
+  className?: string
   withStatusError?: boolean
 }
 
 export function FormSubmitButton<Values extends FieldValues>({
   form,
   size = 'medium',
   variant = 'accent',
+  className,
   children,
 }: FormSubmitProps<Values>) {
   return (
@@ -117,6 +119,7 @@ export function FormSubmitButton<Values extends FieldValues>({
         <Text color="red">{formik.status.error}</Text>
       )} */}
       <Button
+        className={className}
         size={size}
         variant={variant}
         state={form.formState.isSubmitting ? 'waiting' : undefined}
diff --git a/libs/design-system/src/form/ConfigurationNumber.tsx b/libs/design-system/src/form/ConfigurationNumber.tsx
@@ -25,6 +25,8 @@ export function ConfigurationNumber<
     decimalsLimit = 2,
     after,
     placeholder: _placeholder,
+    disableGroupSeparators,
+    autoComplete,
     units,
     prefix,
   } = field
@@ -52,6 +54,8 @@ export function ConfigurationNumber<
           units={units}
           prefix={prefix}
           decimalsLimit={decimalsLimit}
+          disableGroupSeparators={disableGroupSeparators}
+          autoComplete={autoComplete}
           placeholder={placeholder}
           state={
             error
diff --git a/libs/design-system/src/form/ConfigurationText.tsx b/libs/design-system/src/form/ConfigurationText.tsx
@@ -30,6 +30,7 @@ export function ConfigurationText<
           name={name}
           placeholder={placeholder}
           type={type}
+          autoComplete={field.autoComplete}
           state={
             error
               ? 'invalid'
diff --git a/libs/design-system/src/form/FieldNumber.tsx b/libs/design-system/src/form/FieldNumber.tsx
@@ -32,6 +32,8 @@ export function FieldNumber<
       units={units}
       size={size}
       decimalsLimit={decimalsLimit}
+      disableGroupSeparators={field.disableGroupSeparators}
+      autoComplete={field.autoComplete}
       placeholder={placeholder ? new BigNumber(placeholder) : undefined}
       state={
         error
diff --git a/libs/design-system/src/form/FieldText.tsx b/libs/design-system/src/form/FieldText.tsx
@@ -35,7 +35,9 @@ export function FieldText<
       name={name}
       placeholder={field.placeholder}
       size={size}
-      autoComplete={autoComplete}
+      autoComplete={
+        autoComplete !== undefined ? autoComplete : field.autoComplete
+      }
       type={field.type}
       readOnly={field.readOnly}
       spellCheck={spellCheck}
diff --git a/libs/design-system/src/form/configurationFields.ts b/libs/design-system/src/form/configurationFields.ts
@@ -61,6 +61,10 @@ export type ConfigField<
 
   validation: RegisterOptions<Values>
   trigger?: Path<Values>[]
+
+  // other
+  disableGroupSeparators?: boolean
+  autoComplete?: string
 }
 
 export type ConfigFields<
diff --git a/libs/design-system/src/lib/ipRegex.ts b/libs/design-system/src/lib/ipRegex.ts
@@ -1,7 +1,11 @@
-// Simpler combined regex https://regex101.com/r/0WMysi/2
+const domain = '((?!-)[A-Za-z0-9-]+([-.]{1}[a-z0-9]+)*.[A-Za-z]{2,6})'
+const ipv4 =
+  '((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))'
+const ipv6 =
+  '(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))'
+
+// Playground: https://regex101.com/r/1ojZzJ/1
 export const hostnameOrIpRegex = () =>
-  new RegExp(
-    '^(((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))|((([a-zA-Z]|[a-zA-Z][a-zA-Z0-9-]*[a-zA-Z0-9]).)+([A-Za-z|[A-Za-z][A-Za-z0-9‌​-]*[A-Za-z0-9])))$',
-    // '^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])$',
-    'g'
-  )
+  new RegExp(`^(${domain}|${ipv4}|${ipv6})$`, 'g')
+
+export const ipv6Regex = () => new RegExp(`^${ipv6}$`, 'g')

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'renterd': minor
 +---
++
 +The host blocklist dialog now supports adding IPv6 addresses.
Original file line number	Diff line number	Diff line change
`@@ -61,6 +61,10 @@ export type ConfigField<`
`61`	`61`
`62`	`62`	`validation: RegisterOptions<Values>`
`63`	`63`	`trigger?: Path<Values>[]`
	`64`	`+`
	`65`	`+ // other`
	`66`	`+ disableGroupSeparators?: boolean`
	`67`	`+ autoComplete?: string`
`64`	`68`	`}`
`65`	`69`
`66`	`70`	`export type ConfigFields<`