Andrew 14 hours ago
parent
commit
19fc04ee59

BIN
public/assets/indiaButtonDisabled.png


+ 2 - 4
src/components/PremiumProfilePicturePicker.vue

@@ -121,10 +121,8 @@ export default defineComponent({
 }
 
 .india-button:disabled {
-	color: var(--background-color);
-	background-color: var(--secondary-background-color);
-	border-style: none;
-	border-image-source: none;
+	border-image-source: url('/assets/indiaButtonDisabled.png');
+	color: black;
 }
 
 .flex-column {

+ 6 - 0
src/router/index.js

@@ -8,6 +8,7 @@ import UpdateAccountView from '@/views/UpdateAccountView.vue'
 import ProfileVideosView from '@/views/ProfileVideosView.vue'
 import ExploreView from '@/views/ExploreView.vue'
 import ExploreVideosView from '@/views/ExploreVideosView.vue'
+import ContactView from '@/views/ContactView.vue'
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
@@ -56,6 +57,11 @@ const router = createRouter({
 			path: '/explore/videos',
 			name: 'exploreVideos',
 			component: ExploreVideosView
+		},
+		{
+			path: '/contact',
+			name: 'contact',
+			component: ContactView,
 		}
 	],
 })

+ 158 - 0
src/views/ContactView.vue

@@ -0,0 +1,158 @@
+<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>

+ 40 - 9
src/views/ProfileView.vue

@@ -15,7 +15,7 @@ export default defineComponent({
 		return {
 			config,
 			data: null,
-			videos: null,
+			videos: null
 		}
 	},
 	setup() {
@@ -26,7 +26,7 @@ export default defineComponent({
 		'$route.params.id'(newId, oldId) {
 			this.data = null
 			this.fetchData(newId)
-		},
+		}
 	},
 	created() {
 		this.fetchData(this.$route.params.id)
@@ -36,14 +36,14 @@ export default defineComponent({
 			// Fetch account data //
 			axios
 				.get(`${config.serverURL}/account/${id}/get`, {
-					withCredentials: true,
+					withCredentials: true
 				})
 				.then((response) => {
 					if (response.data.error)
 						return (this.data = {
 							username: 'profile not found',
 							followers: 'profile not found',
-							following: 'profile not found',
+							following: 'profile not found'
 						})
 					this.data = response.data
 					console.log(this.data)
@@ -52,7 +52,7 @@ export default defineComponent({
 					this.data = {
 						username: 'profile not found',
 						followers: 'profile not found',
-						following: 'profile not found',
+						following: 'profile not found'
 					}
 
 					console.error('Error in getting profile id ' + id + '!')
@@ -62,7 +62,7 @@ export default defineComponent({
 			// Fetch video data //
 			axios
 				.get(`${config.serverURL}/account/${id}/videos`, {
-					withCredentials: true,
+					withCredentials: true
 				})
 				.then((response) => {
 					if (response.data.error) return (this.videos = [])
@@ -84,7 +84,25 @@ export default defineComponent({
 		signedIn() {
 			return Cookies.get('token') && Cookies.get('token').startsWith('HajeebToken')
 		},
-	},
+		async follow() {
+			const response = await axios.post(`${config.serverURL}/account/${this.$route.params.id}/follow`, {}, {
+				withCredentials: true
+			});
+
+			if(response.data.error) {
+				alert(`error ${this.data.error} following ${this.data.username}. try again later`);
+				return console.error(response.data);
+			}
+
+			if(response.data.successful) {
+				alert("successfully followed " + this.data.username + "!!!");
+				return this.router.go();
+			} else {
+				alert(response.data.message);
+				return this.router.go();
+			}
+		}
+	}
 })
 </script>
 
@@ -109,8 +127,16 @@ export default defineComponent({
 
 				<span class="profile-detail">
 					<span class="profile-row" id="buttons">
-						<button class="india-button">follow</button>
-						<button class="india-button">message</button>
+						<span v-if="this.data">
+							<button class="india-button" disabled
+									v-if="this.data.followed || this.data.myself">follow</button>
+							<button class="india-button" v-else @click="follow">follow</button>
+						</span>
+						<span v-if="this.data">
+							<button class="india-button" disabled
+									v-if="this.data.myself">message</button>
+							<button class="india-button" v-else>message</button>
+						</span>
 						<span v-if="this.data">
 							<button
 								class="india-button"
@@ -270,6 +296,11 @@ export default defineComponent({
 	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;