contact

src/components/DesktopSidebar.vue

@@ -136,7 +136,7 @@ export default defineComponent({
             </li>
 
             <li>
-                <button>
+                <button @click="this.router.push('/contact')">
                     <Phone :size="size" />
                     <span v-if="!minimized">contact</span>
                 </button>

src/views/ContactView.vue

@@ -4,6 +4,7 @@ import { defineComponent } from 'vue'
 import axios from 'axios'
 import { config } from '@/main.js'
 import Cookies from "js-cookie";
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
 	name: 'ContactView',
@@ -11,11 +12,16 @@ export default defineComponent({
 	methods: {
 		async handleSubmit(e) {
 			e.preventDefault();
-			console.log("submit");
+
 			document.getElementById("submit").disabled = true;
 
 			const formData = new FormData(e.target);
 			const textarea = document.getElementById("textarea");
+
+			if(textarea.value.trim() === "" || formData.get("name").trim() === "" || formData.get("email").trim() === "") {
+				return alert("Please enter valid values into the form to contact the hajeebtok team.");
+			}
+
 			let response = await axios.post(config.serverURL + "/contact", {
 				name: formData.get("name"),
 				email: formData.get("email"),
@@ -25,6 +31,10 @@ export default defineComponent({
 			})
 
 			if(response.data.error) { // Login unsuccessful
+				if(response.data.error === 429) {
+					alert("There is a 1 hour cooldown inbetween contact form requests. please wait to contact the hajeebtok team again.");
+					return this.router.push("/");
+				}
 				document.getElementById("submit").disabled = false;
 				alert(`Contact error: ${response.data.message}`);
 				return this.router.go();
@@ -34,6 +44,10 @@ export default defineComponent({
 			alert(response.data.message);
 			return this.router.push("/");
 		}
+	},
+	setup () {
+		const router = useRouter();
+		return { router };
 	}
 });
 </script>
@@ -44,9 +58,10 @@ export default defineComponent({
 		<div class="contact-container">
 			<form class="contact" @submit="handleSubmit">
 				<p>contact form. you can contact the hajeebtok team here. the hajeebtok team will contact you back. we hope. we hope the hajeebtok team will contact you back in at least 15 days.</p>
-				<input type="text" placeholder="Name" name="name" />
-				<input type="email" placeholder="Email" name="email" />
-				<textarea id="textarea"></textarea>
+				<p>also. max message length 2000 characters.</p>
+				<input type="text" placeholder="Name" name="name" maxlength="100" />
+				<input type="email" placeholder="Email" name="email" maxlength="100" />
+				<textarea id="textarea" maxlength="2000" ></textarea>
 
 				<input type="submit" class="india-button" value="submit" id="submit" />
 			</form>
@@ -97,7 +112,10 @@ textarea {
 	border-radius: 5px;
 
 	width: 600px;
-	min-width: 400px;
+	min-width: 300px;
+
+	height: 450px;
+	min-height: 100px;
 }
 
 textarea:focus {
@@ -142,6 +160,19 @@ input:focus {
 	cursor: pointer;
 }
 
+form p {
+	width: 100%;
+}
+
+@media screen and (max-width: 700px) {
+	textarea {
+		width: 100%;
+		min-width: 0px;
+
+		height: 300px;
+	}
+}
+
 @keyframes interaction {
 	0% {
 		transform: scale(1);