hajeebtok-frontend/src/views/UpdateAccountView.vue

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

export default defineComponent({
	name: 'UpdateAccountView',
	setup() {
		const router = useRouter()
		// no this here
		if (!Cookies.get('token') || !Cookies.get('token').startsWith('HajeebToken'))
			return router.push('/profile/myself')
		return { router }
	},
	components: { Sidebar },
	methods: {
		async handleSubmit(e) {
			e.preventDefault()
			if (!this.signedIn()) return this.router.push('/login');
			document.getElementById('submit').disabled = true

			const formData = new FormData(e.target);
			const response = await axios.post(`${config.serverURL}/video/upload`, formData, {
				withCredentials: true,
			})

			if(response.data.error) {
				alert(`Upload error: ${response.data.message}`);
				return console.error(response.data);
			}

			if(response.data.id) {
				alert(`Video uploaded successfully!`);
				return this.router.push(`/profile/myself`);
			}
		},
		signedIn() {
			return Cookies.get('token') && Cookies.get('token').startsWith('HajeebToken')
		},
	},
})
</script>

<template>
	<div class="main">
		<Sidebar />
		<div class="update-container">
			<form class="update" id="form" @submit="handleSubmit" enctype="multipart/form-data">
				<img src="/assets/hajeebtok.png" width="300px" alt="HajeebTok logo" />
				<input
					type="file"
					name="picture"
					accept="image/png, image/jpeg, image/jpg, image/webp"
				/>
				<input type="text" placeholder="title" name="title" />
				<input type="text" placeholder="description" name="description" />
				<input type="submit" value="update Account" id="submit" />
			</form>
		</div>
	</div>
</template>

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

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

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

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

	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;
}

input:focus {
	outline: none;
}
</style>