Implement changes after review

Author: chiaryan

apps/frontend/src/app/login/page.tsx

@@ -17,8 +17,8 @@ import {setToken} from '@/app/services/login-store'
 import { useRouter } from "next/navigation";
 
 type InputFields = {
-  email?: string
-  password?: string
+  email: string
+  password: string
 }
 
 export default function Home() {
@@ -35,11 +35,6 @@ export default function Home() {
   };
 
   function submitDetails({email, password}: InputFields): void {
-    if (!email || email === "" ||
-      !password || password === ""
-    ) {
-      return;
-    }
     loginUser(email, password).then(jwt => {
       successMessage("Login successful")
       setToken(jwt);
@@ -65,12 +60,15 @@ export default function Home() {
             >
               <Form.Item<InputFields>
                 name="email"  
-                rules={[{
+                rules={[
+                  {
                     required: true, 
                     message: "Please provide your email."
-                  }]}
+                  },
+                ]}
               >
                 <Input
+                  type="email"
                   placeholder="Email"
                 />
               </Form.Item>

apps/frontend/src/app/register/page.tsx

@@ -16,10 +16,10 @@ import { createUser } from '@/app/services/user'
 import { useRouter } from "next/navigation";
 
 type InputFields = {
-  username?: string
-  email?: string
-  password?: string
-  confirmPassword?: string
+  username: string
+  email: string
+  password: string
+  confirmPassword: string
 }
 
 export default function Home() {
@@ -36,12 +36,6 @@ export default function Home() {
   };
 
   function submitDetails({username, email, password}: InputFields): void {
-    if (!username || username === "" ||
-      !email || email === "" ||
-      !password || password === ""
-    ) {
-      return;
-    }
     createUser(username, email, password)
     .then(() => {
       successMessage("Account successfully created")
@@ -68,10 +62,16 @@ export default function Home() {
 
               <Form.Item<InputFields>
                 name="username"  
-                rules={[{
-                  required: true, 
-                  message: "You must provide a username."
-                }]}
+                rules={[
+                  {
+                    required: true,
+                    message: "You must provide a username."
+                  },
+                  {
+                    pattern: /^\S+$/,
+                    message: "Please provide a valid username."
+                  },
+                ]}
               >
                 <Input
                   placeholder="Username"
@@ -80,12 +80,19 @@ export default function Home() {
 
               <Form.Item<InputFields>
                 name="email"  
-                rules={[{
-                  required: true, 
-                  message: "You must provide an email."
-                }]}
+                rules={[
+                  {
+                    required: true, 
+                    message: "You must provide an email."
+                  },
+                  {
+                    type: "email",
+                    message: "Please provide a valid email address."
+                  },
+                ]}
               >
                 <Input
+                  type="email"
                   placeholder="Email"
                 />
               </Form.Item>