hajeebtok-frontend/src/views/ContactView.vue

<script>
import Sidebar from '@/components/Sidebar.vue'
import { defineComponent } from 'vue'
import axios from 'axios'
import { config } from '@/main.js'
import Cookies from "js-cookie";

export default defineComponent({
	name: 'ContactView',
	components: {Sidebar},
	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");
			let response = await axios.post(config.serverURL + "/contact", {
				name: formData.get("name"),
				email: formData.get("email"),
				message: textarea.value
			}, {
				withCredentials: true
			})

			if(response.data.error) { // Login unsuccessful
				document.getElementById("submit").disabled = false;
				alert(`Contact error: ${response.data.message}`);
				return this.router.go();
			}

			// Login successful
			alert(response.data.message);
			return this.router.push("/");
		}
	}
});
</script>

<template>
	<div class="main">
		<Sidebar />
		<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>

				<input type="submit" class="india-button" value="submit" id="submit" />
			</form>
		</div>
	</div>
</template>

<style scoped>
.contact-container {
	width: 100vw;
	height: 100vh;
	margin: 0;
	position: absolute;

	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
}

.contact {
	background-color: var(--secondary-background-color);
	color: white;

	padding: 10px;
	border-radius: 5px;

	width: 600px;
	min-width: 400px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-self: center;
	gap: 10px;
}

input {
	font-family: "Knewave", system-ui;
	font-size: 30px;

	border: 2px solid var(--accent-color);
	border-radius: 5px;
}

textarea {
	border: 2px solid var(--accent-color);
	border-radius: 5px;

	width: 600px;
	min-width: 400px;
}

textarea:focus {
	outline: none;
}

input:focus {
	outline: none;
}

.india-button {
	display: flex;
	align-items: center;
	gap: 10px;

	padding: 10px 10px;
	background: none;
	color: var(--accent-color);
	font-family: 'Pinyon Script', cursive;
	font-size: 30px;

	border-style: solid;
	border-width: 10px 20px;
	border-image-source: url('/assets/indiaButton.png');
	border-image-slice: 0 80 fill;
	border-image-repeat: stretch;
	border-image-outset: 0;
	border-image-width: 10px 40px;
	border-radius: 40px;
	background-clip: padding-box;
}

.india-button:disabled {
	border-image-source: url('/assets/indiaButtonDisabled.png');
	color: black;
}

.india-button:hover {
	animation-name: interaction;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	cursor: pointer;
}

@keyframes interaction {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
	}
}
</style>