Added error checking

package-lock.json

@@ -7,8 +7,12 @@
 		"": {
 			"name": "helpdesk-ui",
 			"version": "0.0.1",
+			"dependencies": {
+				"toastr": "^2.1.4"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^2.0.0",
+				"@sveltejs/adapter-node": "^1.3.1",
 				"@sveltejs/kit": "^1.20.4",
 				"autoprefixer": "^10.4.15",
 				"postcss": "^8.4.28",
@@ -483,6 +487,171 @@
 			"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
 			"dev": true
 		},
+		"node_modules/@rollup/plugin-commonjs": {
+			"version": "25.0.4",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.4.tgz",
+			"integrity": "sha512-L92Vz9WUZXDnlQQl3EwbypJR4+DM2EbsO+/KOcEkP4Mc6Ct453EeDB2uH9lgRwj4w5yflgNpq9pHOiY8aoUXBQ==",
+			"dev": true,
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.1",
+				"commondir": "^1.0.1",
+				"estree-walker": "^2.0.2",
+				"glob": "^8.0.3",
+				"is-reference": "1.2.1",
+				"magic-string": "^0.27.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^2.68.0||^3.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+			"dev": true
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/glob": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+			"integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+			"dev": true,
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^5.0.1",
+				"once": "^1.3.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/is-reference": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+			"integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/estree": "*"
+			}
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/magic-string": {
+			"version": "0.27.0",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+			"integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+			"dev": true,
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.13"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/minimatch": {
+			"version": "5.1.6",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+			"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@rollup/plugin-json": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.0.0.tgz",
+			"integrity": "sha512-i/4C5Jrdr1XUarRhVu27EEwjt4GObltD7c+MkCIpO2QIbojw8MUs+CCTqOphQi3Qtg1FLmYt+l+6YeoIf51J7w==",
+			"dev": true,
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^1.20.0||^2.0.0||^3.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/plugin-node-resolve": {
+			"version": "15.2.1",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.1.tgz",
+			"integrity": "sha512-nsbUg588+GDSu8/NS8T4UAshO6xeaOfINNuXeVHcKV02LJtoRaM1SiOacClw4kws1SFiNhdLGxlbMY9ga/zs/w==",
+			"dev": true,
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.1",
+				"@types/resolve": "1.20.2",
+				"deepmerge": "^4.2.2",
+				"is-builtin-module": "^3.2.1",
+				"is-module": "^1.0.0",
+				"resolve": "^1.22.1"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^2.78.0||^3.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/pluginutils": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.3.tgz",
+			"integrity": "sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==",
+			"dev": true,
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"estree-walker": "^2.0.2",
+				"picomatch": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^1.20.0||^2.0.0||^3.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/pluginutils/node_modules/estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+			"dev": true
+		},
 		"node_modules/@sveltejs/adapter-auto": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.1.0.tgz",
@@ -495,6 +664,21 @@
 				"@sveltejs/kit": "^1.0.0"
 			}
 		},
+		"node_modules/@sveltejs/adapter-node": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.3.1.tgz",
+			"integrity": "sha512-A0VgRQDCDPzdLNoiAbcOxGw4zT1Mc+n1LwT1OmO350R7WxrEqdMUChPPOd1iMfIDWlP4ie6E2d/WQf5es2d4Zw==",
+			"dev": true,
+			"dependencies": {
+				"@rollup/plugin-commonjs": "^25.0.0",
+				"@rollup/plugin-json": "^6.0.0",
+				"@rollup/plugin-node-resolve": "^15.0.1",
+				"rollup": "^3.7.0"
+			},
+			"peerDependencies": {
+				"@sveltejs/kit": "^1.0.0"
+			}
+		},
 		"node_modules/@sveltejs/kit": {
 			"version": "1.22.6",
 			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.22.6.tgz",
@@ -577,6 +761,12 @@
 			"integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
 			"dev": true
 		},
+		"node_modules/@types/resolve": {
+			"version": "1.20.2",
+			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+			"dev": true
+		},
 		"node_modules/acorn": {
 			"version": "8.10.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
@@ -738,6 +928,18 @@
 				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
 			}
 		},
+		"node_modules/builtin-modules": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
+			"integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/busboy": {
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -840,6 +1042,12 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/commondir": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+			"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+			"dev": true
+		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1170,6 +1378,21 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/is-builtin-module": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
+			"integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
+			"dev": true,
+			"dependencies": {
+				"builtin-modules": "^3.3.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/is-core-module": {
 			"version": "2.13.0",
 			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
@@ -1203,6 +1426,12 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/is-module": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+			"integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+			"dev": true
+		},
 		"node_modules/is-number": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -1230,6 +1459,11 @@
 				"jiti": "bin/jiti.js"
 			}
 		},
+		"node_modules/jquery": {
+			"version": "3.7.0",
+			"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
+			"integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ=="
+		},
 		"node_modules/kleur": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -1918,6 +2152,14 @@
 				"node": ">=8.0"
 			}
 		},
+		"node_modules/toastr": {
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/toastr/-/toastr-2.1.4.tgz",
+			"integrity": "sha512-LIy77F5n+sz4tefMmFOntcJ6HL0Fv3k1TDnNmFZ0bU/GcvIIfy6eG2v7zQmMiYgaalAiUv75ttFrPn5s0gyqlA==",
+			"dependencies": {
+				"jquery": ">=1.12.0"
+			}
+		},
 		"node_modules/totalist": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",

package.json

@@ -9,6 +9,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-node": "^1.3.1",
 		"@sveltejs/kit": "^1.20.4",
 		"autoprefixer": "^10.4.15",
 		"postcss": "^8.4.28",
@@ -16,5 +17,8 @@
 		"tailwindcss": "^3.3.3",
 		"vite": "^4.4.2"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"toastr": "^2.1.4"
+	}
 }

src/routes/+page.svelte

@@ -1,5 +1,7 @@
 <script>
   import Header from '../components/layout/Header.svelte';
+  import toastr from 'toastr';
+  import 'toastr/build/toastr.min.css';
 
   console.log("%c Made with \u2764 by your IT team", "color: white; font-size: 15px; background-color: cyan; padding: 10px;");
 
@@ -13,9 +15,12 @@
       name,
       body
     };
+    var name = document.getElementById('name');
+    var body = document.getElementById('body');
 
+    if (name.value !== '' && body.value !== '') {
       try {
-      const response = await fetch('http://helpdeskapi.mpe.ca/api/message', {
+      const response = await fetch('https://helpdeskapi.mpe.ca/api/message', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
@@ -25,11 +30,20 @@
 
       if (response.ok) {
         console.log('POST request successful');
+        toastr.success('One of the members of the IT department will contact you shortly', 'Message sent!');
+        body.value = '';
+        name.value = '';
       } else {
         console.error('Error:', response.status);
+        toastr.error('Error: ' + response.status, 'Message not sent');
       }
       } catch (error) {
         console.error('Error:', error);
+        toastr.error('There was an error.', 'Message not sent');
+      }
+    } else {
+      console.error('Please fill in both of the fields');
+      toastr.error('Please fill in all of the fields', 'Empty Fields');
     }
   };
 </script>
@@ -37,16 +51,16 @@
 <Header />
 
 <div class="flex flex-col w-full items-center align-middle">
-    <form class="bg-green p-20 flex flex-col rounded-xl border-2 shadow-xl md:w-1/2 sm:w-full" on:submit={handleSubmit}>
+    <form class="bg-green p-20 flex flex-col rounded-xl border-2 shadow-xl sm:w-full lg:w-3/4 xl:w-1/2" on:submit={handleSubmit}>
         <div class="flex flex-col items-center w-full">
             <h1 class="fle font-sans text-3xl">MPE Helpdesk</h1>
         </div>
-        <label class="block mb-2">Name:</label>
+        <label class="block mb-2" for='name'>Name:</label>
         <input id="name" class="border border-gray-300 rounded-md py-2 px-4 mb-4 w-full" type="text" placeholder="Enter your full name here:" bind:value={name}/>
-        <label class="block mb-2">Question/Issue:</label>
+        <label class="block mb-2" for='body'>Question/Issue:</label>
         <textarea id="body" class="border border-gray-300 rounded-md py-2 px-4 mb-4 w-full h-60" placeholder="Enter your question/issue here:" bind:value={body}></textarea>
         <div class="w-full flex flex-row justify-end">
-            <input class="bg-blue-600 rounded-md w-1/3 text-white p-3 shadow-xl hover:bg-blue-800" type="submit" name="submit" id="submit" value="Submit"/>
+            <input class="bg-blue-600 rounded-md w-1/3 text-white p-3 shadow-xl hover:bg-blue-800 focus:bg-blue-200 hover:cursor-pointer" type="submit" name="submit" id="submit" value="Submit"/>
         </div>
     </form>
 </div>

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */