diff --git a/src/views/LandingPages/Profile/EditProfile.vue b/src/views/LandingPages/Profile/EditProfile.vue index e69de29..b89691f 100644 --- a/src/views/LandingPages/Profile/EditProfile.vue +++ b/src/views/LandingPages/Profile/EditProfile.vue @@ -0,0 +1,177 @@ +<script setup> +import axios from 'axios'; +import { onMounted, ref, computed } from "vue"; +import NavbarDefault from "../../../examples/navbars/NavbarDefault.vue"; +import { useRouter } from "vue-router"; + + + + +const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token')); +const userId = computed(() => sessionStorage.getItem('user_id')); +const loggedUserName = computed(() => sessionStorage.getItem('username')); +const token = computed(() => sessionStorage.getItem('access_token')); + +const profileData = ref([]); +const router = useRouter(); + +const debugText = ref(''); + + +const getProfile = async () => { + const profileDataRecieved = await axios.get(`http://somebodyhire.me/api/profile/${userId.value}/`); + profileData.value = processProfileData(profileDataRecieved.data); +}; + +const processProfileData = (data) => { + return { + ...data, + name: data.name || '🤷 No Name Provided', + location: data.location || '🌍 No Location Provided', + short_intro: data.short_intro || '📝 No Short Intro Provided', + bio: data.bio || '📘 No Bio Provided', + profile_image: data.profile_image || '📷 No Image Provided', + social_github: data.social_github || '👨💻 No Github Provided', + social_twitter: data.social_twitter || '🐦 No Twitter Provided', + social_vk: data.social_vk || '🔵 No VK Provided', + social_youtube: data.social_youtube || '▶️ No YouTube Provided', + social_website: data.social_website || '🌐 No Website Provided', + }; +}; + +// Axios request and response interceptors +axios.interceptors.request.use((request) => { + debugText.value += '\n\nRequest:\n' + JSON.stringify(request, null, 2); + return request; +}); + +axios.interceptors.response.use((response) => { + debugText.value += '\n\nResponse:\n' + JSON.stringify(response, null, 2); + return response; +}, (error) => { + debugText.value += '\n\nResponse Error:\n' + JSON.stringify(error.toJSON(), null, 2); + return Promise.reject(error); +}); + +const updateProfile = async () => { + try { + const token = computed(() => sessionStorage.getItem('access_token')); + debugText.value = `Type of token: ${typeof token.value}, Value of token: ${token.value}`; + const headers = { 'Authorization': `Bearer ${token.value}` }; + await axios.put(`http://somebodyhire.me/api/profile/${userId.value}/`, profileData.value, { headers }); + router.push('/ViewMyProfile'); + } catch (error) { + debugText.value = `Error: ${JSON.stringify(error, null, 2)}`; + console.error(error); + } +}; + + +const cancelUpdate = () => { + router.push('/ViewMyProfile'); +}; + +onMounted(async() => { + await getProfile(); +}); + + +</script> + +<script> + + + +</script> + + +<template> + <NavbarDefault /> + <div class="profile-container"> + <h1>Профиль пользователя {{ loggedUserName }}</h1> + <textarea readonly v-model="debugText"></textarea> + <input type="text" v-model="profileData.username" placeholder="Username"> + <input type="email" v-model="profileData.email" placeholder="Email"> + <input type="text" v-model="profileData.name" placeholder="Имя"> + <input type="text" v-model="profileData.short_intro" placeholder="Краткое описание"> + <textarea v-model="profileData.bio" placeholder="Биография"></textarea> + <textarea v-model="profileData.profile_image" placeholder="Ссылка на изображение"></textarea> + <textarea v-model="profileData.social_github" placeholder="Ссылка на GitHub"></textarea> + <textarea v-model="profileData.social_twitter" placeholder="Ссылка на Twitter"></textarea> + <textarea v-model="profileData.social_vk" placeholder="Ссылка на VK"></textarea> + <textarea v-model="profileData.social_youtube" placeholder="Ссылка на YouTube"></textarea> + <textarea v-model="profileData.social_website" placeholder="Ссылка на сайт"></textarea> + <button @click="updateProfile" class="btn-submit">Submit</button> + <button @click="cancelUpdate" class="btn-cancel">Cancel</button> + </div> + + +</template> + + + +<style scoped> +.profile-container { + display: flex; + flex-direction: column; + align-items: center; + width: 80%; + margin: auto; + padding: 20px; + box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); +} + +.profile-container img { + width: 100px; + height: 100px; + border-radius: 50%; + object-fit: cover; + margin-bottom: 20px; +} + + +.profile-container input, .profile-container textarea { + width: 100%; /* Make inputs and textareas take up the full width of the container */ + padding: 10px; /* Add some padding */ + margin-bottom: 15px; /* Add some margin */ + box-sizing: border-box; /* Ensure padding doesn't affect final dimensions */ + border: 1px solid #ccc; /* Add a border */ + border-radius: 5px; /* Add rounded corners */ +} + +/* Style for smaller screens */ +@media (max-width: 768px) { + .profile-container { + width: 95%; + } +} + + +.btn-submit { + color: #fff; + background-color: #4CAF50; + border: none; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + border-radius: 5px; +} + +.btn-cancel { + color: #fff; + background-color: #f44336; + border: none; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + border-radius: 5px; +} +</style> \ No newline at end of file diff --git a/src/views/LandingPages/Project/AddProject.vue b/src/views/LandingPages/Project/AddProject.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/views/LandingPages/Project/EditProject.vue b/src/views/LandingPages/Project/EditProject.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/views/LandingPages/Project/ViewProject.vue b/src/views/LandingPages/Project/ViewProject.vue new file mode 100644 index 0000000..e69de29