Added functionality to signin and register pages

daily-thought-frontend/src/pages/register.tsx

 import BasicField from "@/components/form/basicField";
-import { useState } from "react";
+import { FormEvent, useState } from "react";
+import Router from 'next/router'
 
 const Register = () => {
   const [username, setUsername] = useState<string>("");
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const [passwordConfirmation, setPasswordConfirmation] = useState<string>("");
+  const [error, setError] = useState<string>("");
 
-  const handleSubmit = async (event) => {
+  const handleSubmit = async (event: FormEvent) => {
     event.preventDefault()
 
     const JSONdata = JSON.stringify({
@@ -16,7 +18,7 @@ const Register = () => {
       password: password,
       profile: ""
     })
-    const endpoint = '/api/form'
+    const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/register`
     const options = {
       method: 'POST',
       headers: {
@@ -26,7 +28,14 @@ const Register = () => {
     }
     const response = await fetch(endpoint, options)
     const result = await response.json()
-    alert(`Success: ${result.data}`)
+
+    console.log(result.error)
+
+    if(result.error !== undefined){
+      setError(result.error.error)
+    } else {  
+      Router.push("/feed")
+    }
   }
 
  return (
@@ -44,7 +53,7 @@ const Register = () => {
               </a>
             </p>
 
-          <form className="mt-8 space-y-6" action="#" method="POST">
+          <form className="mt-8 space-y-6"  onSubmit={(e) => handleSubmit(e)}>
             <input type="hidden" name="remember" defaultValue="true" />
             <div className="rounded-md shadow-sm">
               <BasicField name="username" placeholder="Username" onChange={setUsername}/>
@@ -53,9 +62,12 @@ const Register = () => {
               <BasicField name="password" placeholder="Confirm Password" onChange={setPasswordConfirmation} error={password === passwordConfirmation ? null : "Confirmation doesn't match"}/>
             </div>
             <div>
+              <p className="text-xs text-c-pink m-2">
+                {error}
+              </p>
               <button
                 type="submit"
-                className="group relative flex w-full justify-center rounded-md bg-c-pink px-3 py-2 text-sm font-semibold text-white hover:bg-white hover:text-c-pink hover:border-c-pink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-c-pink"
+                className="group relative flex w-full justify-center rounded-md bg-c-pink px-3 py-2 text-sm font-semibold text-white hover:bg-c-pink hover:text-c-green hover:border-c-pink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-c-pink"
               >
                 Sign in
               </button>

daily-thought-frontend/src/pages/signIn.tsx

+import Router from 'next/router'
+import { FormEvent, useState } from 'react';
+
 const SignIn = () => {
+  const [error, setError] = useState<string>("");
+  const [username, setUsername] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault()
+
+    const JSONdata = JSON.stringify({
+      username: username,
+      password: password
+    })
+    const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/login`
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSONdata,
+    }
+    const response = await fetch(endpoint, options)
+    const result = await response.json()
+
+    console.log(result.error)
+
+    if(result.error !== undefined){
+      setError(result.error)
+    } else {  
+      Router.push("/feed")
+    }
+  }
+
   return (
     <>
       <div className="flex min-h-full items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
@@ -14,21 +48,22 @@ const SignIn = () => {
               </a>
             </p>
           </div>
-          <form className="mt-8 space-y-6" action="#" method="POST">
+          <form className="mt-8 space-y-6" onSubmit={(e) => handleSubmit(e)}>
             <input type="hidden" name="remember" defaultValue="true" />
             <div className="-space-y-px rounded-md shadow-sm">
               <div>
-                <label htmlFor="email-address" className="sr-only">
+                <label htmlFor="username" className="sr-only">
                   Email address
                 </label>
                 <input
-                  id="email-address"
-                  name="email"
-                  type="email"
-                  autoComplete="email"
+                  id="username"
+                  name="username"
+                  type="text"
+                  autoComplete="username"
                   required
                   className="relative block w-full rounded-t-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                  placeholder="Email address"
+                  placeholder="Username"
+                  onChange={(e) => setUsername(e.target.value)}
                 />
               </div>
               <div>
@@ -43,6 +78,7 @@ const SignIn = () => {
                   required
                   className="relative block w-full rounded-b-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                   placeholder="Password"
+                  onChange={(e) => setPassword(e.target.value)}
                 />
               </div>
             </div>
@@ -68,6 +104,9 @@ const SignIn = () => {
             </div>
 
             <div>
+              <p className='text-xs text-c-pink m-2'>
+                {error}
+              </p>
               <button
                 type="submit"
                 className="group relative flex w-full justify-center rounded-md bg-c-pink px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"