fix: added message errors to user and channel creation

front/src/components/MessageComponent.tsx

@@ -21,11 +21,13 @@ export default function MessageComponent({ message, user, channel, deleteMessage
                 return <span key={index}>{word} </span>;
             })}
             <p>{new Date(message.date * 1000).toLocaleString()}</p>
-            {channel && deleteMessage && (
+            {channel && deleteMessage ? (
                 user?.id === message.user_id || user?.id === channel?.owner_id || user?.admin === 1) && (
                     <button onClick={() => {deleteMessage(message.id)}}>Delete</button>
+                ) : (
+                    <p>In <Link to={`/c/${message.channel_name}`}>{message.channel_name}</Link></p>
                 )
-            }            
+            }
         </li>
     );
 }

front/src/pages/CreateChannel.tsx

@@ -31,6 +31,11 @@ export default function CreateChannel() {
             <Link to="/">Home</Link>
             <h1>Create Channel</h1>
             <form onSubmit={handleSubmit}>
+                <p>
+                    {!/^[a-zA-Z0-9-_]+$/.test(name) && name.length != 0 && (
+                        <span>Channel name can only contain letters, numbers, - and _</span>
+                    )}
+                </p>
                 <input
                     type="text"
                     placeholder="Name"
@@ -43,7 +48,9 @@ export default function CreateChannel() {
                     value={description}
                     onChange={(e) => setDescription(e.target.value)}
                 />
-                <button type="submit">Create</button>
+                <button type="submit" disabled={!/^[a-zA-Z0-9-_]+$/.test(name)}>
+                    Create
+                </button>
             </form>
         </div>
     );

front/src/pages/Register.tsx

@@ -32,6 +32,11 @@ export default function Register () {
             <Link to="/">Home</Link>
             <h1>Register</h1>
             <form onSubmit={handleSubmit}>
+                <p>
+                    {!/^[a-zA-Z0-9-_]+$/.test(username) && username.length != 0 && (
+                        <span>Username can only contain letters, numbers, - and _</span>
+                    )}
+                </p>
                 <input
                     type="text"
                     placeholder="Username"
@@ -44,7 +49,9 @@ export default function Register () {
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                 />
-                <button type="submit">Register</button>
+                <button type="submit" disabled={!/^[a-zA-Z0-9-_]+$/.test(username)}>
+                    Register
+                </button>
             </form>
             <Link to="/login">Login</Link>
         </div>