From 0a0bab051b3c8d26adb2ca34d9f5f13377ec7d56 Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Mon, 13 May 2024 16:28:44 -0400
Subject: [PATCH] fix: ipv6 connect peer and block host

---
 .changeset/rich-oranges-pay.md                |   5 +
 .changeset/tame-cougars-sit.md                |   7 +
 .../HostsAllowBlockDialog/BlocklistForm.tsx   |   7 +-
 .../src/app/SyncerConnectPeerDialog.tsx       | 129 ++++++++----------
 libs/design-system/src/components/Form.tsx    |   3 +
 .../src/form/ConfigurationNumber.tsx          |   4 +
 .../src/form/ConfigurationText.tsx            |   1 +
 libs/design-system/src/form/FieldNumber.tsx   |   2 +
 libs/design-system/src/form/FieldText.tsx     |   4 +-
 .../src/form/configurationFields.ts           |   4 +
 libs/design-system/src/index.ts               |   1 -
 libs/design-system/src/lib/ipRegex.ts         |   7 -
 12 files changed, 87 insertions(+), 87 deletions(-)
 create mode 100644 .changeset/rich-oranges-pay.md
 create mode 100644 .changeset/tame-cougars-sit.md
 delete mode 100644 libs/design-system/src/lib/ipRegex.ts

diff --git a/.changeset/rich-oranges-pay.md b/.changeset/rich-oranges-pay.md
new file mode 100644
index 000000000..a0a2b2069
--- /dev/null
+++ 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
new file mode 100644
index 000000000..f3480c88a
--- /dev/null
+++ 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/apps/renterd/components/Hosts/HostsAllowBlockDialog/BlocklistForm.tsx b/apps/renterd/components/Hosts/HostsAllowBlockDialog/BlocklistForm.tsx
index 782263f0b..e4471b6c3 100644
--- a/apps/renterd/components/Hosts/HostsAllowBlockDialog/BlocklistForm.tsx
+++ b/apps/renterd/components/Hosts/HostsAllowBlockDialog/BlocklistForm.tsx
@@ -6,7 +6,6 @@ import {
   Text,
   Separator,
   Tooltip,
-  hostnameOrIpRegex,
   FormTextFieldFormik,
   FieldGroupFormik,
 } from '@siafoundation/design-system'
@@ -30,11 +29,7 @@ const suggestions = [
 ]
 
 const validationSchema = Yup.object().shape({
-  address: Yup.string()
-    .required('Required')
-    .test('address', 'Invalid hostname or IP address', (v) => {
-      return hostnameOrIpRegex().test(v || '')
-    }),
+  address: Yup.string().required('Required'),
 })
 
 export function BlocklistForm() {
diff --git a/libs/design-system/src/app/SyncerConnectPeerDialog.tsx b/libs/design-system/src/app/SyncerConnectPeerDialog.tsx
index c1369fd3a..057ff5c37 100644
--- a/libs/design-system/src/app/SyncerConnectPeerDialog.tsx
+++ b/libs/design-system/src/app/SyncerConnectPeerDialog.tsx
@@ -1,33 +1,40 @@
 '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 { 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 { FieldText } from '../form/FieldText'
 
-const initialValues = {
-  port: 9981,
-  ip: '',
+function getDefaultValues() {
+  return {
+    address: '',
+  }
 }
 
-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 {
+    address: {
+      type: 'text',
+      title: 'Address',
+      placeholder: 'host.acme.com:9981 or 127.0.0.1:9981',
+      autoComplete: 'off',
+      validation: {
+        required: 'required',
+      },
+    },
+  }
+}
+
+const defaultValues = getDefaultValues()
+const fields = getFields()
 
 export type SyncerConnectPeerDialogParams = void
 
@@ -45,73 +52,51 @@ export function SyncerConnectPeerDialog({
   connect,
   onOpenChange,
 }: Props) {
-  const formik = useFormik({
-    initialValues,
-    validationSchema,
-    onSubmit: async (values, actions) => {
-      const netAddress = `${values.ip}:${values.port}`
-      const response = await connect(netAddress)
+  const form = useForm({
+    mode: 'all',
+    defaultValues,
+  })
+
+  const { handleOpenChange, closeAndReset } = useDialogFormHelpers({
+    form,
+    onOpenChange,
+    defaultValues,
+  })
+
+  const onSubmit = useCallback(
+    async (values: Values) => {
+      const response = await connect(values.address)
       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>
+        <FieldText form={form} fields={fields} name="address" size="medium" />
       </div>
     </Dialog>
   )
diff --git a/libs/design-system/src/components/Form.tsx b/libs/design-system/src/components/Form.tsx
index 644868219..49b131122 100644
--- a/libs/design-system/src/components/Form.tsx
+++ b/libs/design-system/src/components/Form.tsx
@@ -102,6 +102,7 @@ type FormSubmitProps<Values extends FieldValues> = {
   size?: React.ComponentProps<typeof Button>['size']
   variant?: React.ComponentProps<typeof Button>['variant']
   children: React.ReactNode
+  className?: string
   withStatusError?: boolean
 }
 
@@ -109,6 +110,7 @@ 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
index 4470b289a..f8ee6e532 100644
--- 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
index be7fa86c1..aed5d5610 100644
--- 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
index 24162917d..34e406977 100644
--- 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
index 587e67a13..779344361 100644
--- 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
index 5d6c310c7..eb73f5dc5 100644
--- 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/index.ts b/libs/design-system/src/index.ts
index a92c1f472..a8be491d3 100644
--- a/libs/design-system/src/index.ts
+++ b/libs/design-system/src/index.ts
@@ -178,7 +178,6 @@ export * from './lib/mnemonics'
 export * from './lib/contracts'
 export * from './lib/chartData'
 export * from './lib/chartStats'
-export * from './lib/ipRegex'
 export * from './lib/getOs'
 export * from './lib/countryEmoji'
 export * from './lib/nodeToImage'
diff --git a/libs/design-system/src/lib/ipRegex.ts b/libs/design-system/src/lib/ipRegex.ts
deleted file mode 100644
index 35170b0f4..000000000
--- a/libs/design-system/src/lib/ipRegex.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Simpler combined regex https://regex101.com/r/0WMysi/2
-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'
-  )