From 090d30a7642c40355aa1f1b6d50215e40d35d2d0 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Sun, 28 Apr 2024 15:06:06 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Add=20basic=20form=20validation?=
 =?UTF-8?q?=20rules?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ticker/form/Description.tsx | 16 +++++++++++++++-
 src/components/ticker/form/Domain.tsx      | 15 ++++++++++++++-
 src/components/ticker/form/Email.tsx       | 11 ++++++++++-
 src/components/ticker/form/Facebook.tsx    | 11 ++++++++++-
 src/components/ticker/form/Telegram.tsx    | 11 ++++++++++-
 src/components/ticker/form/Title.tsx       | 15 ++++++++++++++-
 src/components/ticker/form/Twitter.tsx     | 11 ++++++++++-
 src/components/ticker/form/Url.tsx         | 11 ++++++++++-
 8 files changed, 93 insertions(+), 8 deletions(-)

diff --git a/src/components/ticker/form/Description.tsx b/src/components/ticker/form/Description.tsx
index d3c7a8a..961218c 100644
--- a/src/components/ticker/form/Description.tsx
+++ b/src/components/ticker/form/Description.tsx
@@ -9,7 +9,21 @@ const Description: FC = () => {
     <Controller
       name="description"
       control={control}
-      render={({ field }) => <TextField {...field} margin="dense" maxRows={10} multiline label="Description" required />}
+      rules={{
+        required: 'Description is required',
+      }}
+      render={({ field, fieldState: { error } }) => (
+        <TextField
+          {...field}
+          error={!!error}
+          helperText={error?.message ? error.message : null}
+          margin="dense"
+          maxRows={10}
+          multiline
+          label="Description"
+          required
+        />
+      )}
     />
   )
 }
diff --git a/src/components/ticker/form/Domain.tsx b/src/components/ticker/form/Domain.tsx
index d26f4fd..5d236c7 100644
--- a/src/components/ticker/form/Domain.tsx
+++ b/src/components/ticker/form/Domain.tsx
@@ -11,7 +11,20 @@ const Domain: FC = () => {
     <Controller
       name="domain"
       control={control}
-      render={({ field }) => <TextField {...field} label="Domain" margin="dense" required disabled={!user?.roles.includes('admin')} />}
+      rules={{
+        required: 'Domain is required',
+      }}
+      render={({ field, fieldState: { error } }) => (
+        <TextField
+          {...field}
+          label="Domain"
+          margin="dense"
+          error={!!error}
+          helperText={error?.message ? error.message : null}
+          required
+          disabled={!user?.roles.includes('admin')}
+        />
+      )}
     />
   )
 }
diff --git a/src/components/ticker/form/Email.tsx b/src/components/ticker/form/Email.tsx
index aa6db58..2a62b0a 100644
--- a/src/components/ticker/form/Email.tsx
+++ b/src/components/ticker/form/Email.tsx
@@ -11,7 +11,14 @@ const Email: FC = () => {
     <Controller
       name="information.email"
       control={control}
-      render={({ field }) => (
+      rules={{
+        required: false,
+        pattern: {
+          value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+          message: 'E-Mail is invalid',
+        },
+      }}
+      render={({ field, fieldState: { error } }) => (
         <TextField
           {...field}
           InputProps={{
@@ -21,6 +28,8 @@ const Email: FC = () => {
               </InputAdornment>
             ),
           }}
+          error={!!error}
+          helperText={error?.message ? error.message : null}
           label="E-Mail"
           margin="dense"
         />
diff --git a/src/components/ticker/form/Facebook.tsx b/src/components/ticker/form/Facebook.tsx
index 28694e2..b0febd3 100644
--- a/src/components/ticker/form/Facebook.tsx
+++ b/src/components/ticker/form/Facebook.tsx
@@ -11,7 +11,14 @@ const Facebook: FC = () => {
     <Controller
       name="information.facebook"
       control={control}
-      render={({ field }) => (
+      rules={{
+        required: false,
+        pattern: {
+          value: /^([a-zA-Z0-9._]+)$/,
+          message: 'Invalid Facebook username',
+        },
+      }}
+      render={({ field, fieldState: { error } }) => (
         <TextField
           {...field}
           InputProps={{
@@ -22,6 +29,8 @@ const Facebook: FC = () => {
               </InputAdornment>
             ),
           }}
+          error={!!error}
+          helperText={error?.message ? error.message : null}
           label="Facebook"
           margin="dense"
         />
diff --git a/src/components/ticker/form/Telegram.tsx b/src/components/ticker/form/Telegram.tsx
index 890e0fb..712514f 100644
--- a/src/components/ticker/form/Telegram.tsx
+++ b/src/components/ticker/form/Telegram.tsx
@@ -11,7 +11,14 @@ const Telegram: FC = () => {
     <Controller
       name="information.telegram"
       control={control}
-      render={({ field }) => (
+      rules={{
+        required: false,
+        pattern: {
+          value: /^\w{5,32}$/,
+          message: 'Invalid Telegram username',
+        },
+      }}
+      render={({ field, fieldState: { error } }) => (
         <TextField
           {...field}
           InputProps={{
@@ -22,6 +29,8 @@ const Telegram: FC = () => {
               </InputAdornment>
             ),
           }}
+          error={!!error}
+          helperText={error?.message ? error.message : null}
           label="Telegram"
           margin="dense"
         />
diff --git a/src/components/ticker/form/Title.tsx b/src/components/ticker/form/Title.tsx
index 923b882..850b227 100644
--- a/src/components/ticker/form/Title.tsx
+++ b/src/components/ticker/form/Title.tsx
@@ -5,7 +5,20 @@ import { Controller, useFormContext } from 'react-hook-form'
 const Title: FC = () => {
   const { control } = useFormContext()
 
-  return <Controller name="title" control={control} render={({ field }) => <TextField {...field} label="Title" margin="dense" required />} />
+  return (
+    <Controller
+      name="title"
+      control={control}
+      rules={{
+        required: 'Title is required',
+        minLength: { value: 3, message: 'Title is too short' },
+        maxLength: { value: 255, message: 'Title is too long' },
+      }}
+      render={({ field, fieldState: { error } }) => (
+        <TextField {...field} error={!!error} helperText={error?.message ? error.message : null} label="Title" margin="dense" required />
+      )}
+    />
+  )
 }
 
 export default Title
diff --git a/src/components/ticker/form/Twitter.tsx b/src/components/ticker/form/Twitter.tsx
index 39f3196..db5a487 100644
--- a/src/components/ticker/form/Twitter.tsx
+++ b/src/components/ticker/form/Twitter.tsx
@@ -11,7 +11,14 @@ const Twitter: FC = () => {
     <Controller
       name="information.twitter"
       control={control}
-      render={({ field }) => (
+      rules={{
+        required: false,
+        pattern: {
+          value: /^([a-zA-Z0-9._]+)$/,
+          message: 'Invalid Twitter username',
+        },
+      }}
+      render={({ field, fieldState: { error } }) => (
         <TextField
           {...field}
           InputProps={{
@@ -22,6 +29,8 @@ const Twitter: FC = () => {
               </InputAdornment>
             ),
           }}
+          error={!!error}
+          helperText={error?.message ? error.message : null}
           label="Twitter"
           margin="dense"
         />
diff --git a/src/components/ticker/form/Url.tsx b/src/components/ticker/form/Url.tsx
index 22ecd6e..4ed23a7 100644
--- a/src/components/ticker/form/Url.tsx
+++ b/src/components/ticker/form/Url.tsx
@@ -11,7 +11,14 @@ const Url: FC = () => {
     <Controller
       name="information.url"
       control={control}
-      render={({ field }) => (
+      rules={{
+        required: false,
+        pattern: {
+          value: /^(https?:\/\/)?([a-z0-9-]+\.)+[a-z]{2,}(:\d{1,5})?(\/.*)?$/i,
+          message: 'Homepage is invalid',
+        },
+      }}
+      render={({ field, fieldState: { error } }) => (
         <TextField
           {...field}
           InputProps={{
@@ -21,6 +28,8 @@ const Url: FC = () => {
               </InputAdornment>
             ),
           }}
+          error={!!error}
+          helperText={error?.message ? error.message : null}
           label="Homepage"
           margin="dense"
         />