jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Login and profile page

Browse Source
This commit is contained in:
Kamigen
2024-06-26 15:01:34 -04:00
parent 5d3429afb2
commit aa4af266c0
4 changed files with 150 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/views/main/Footer.vue
View File

@@ -1,20 +1,7 @@
<template>
<footer>
<div class="text-black text-center ">
<footer class="mt-auto">
<div class="text-black text-center py-4">
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
</div>
</footer>
</template>
<style>
footer {
@apply flex justify-center pt-10
}
</style>

9
src/views/main/Header.vue
View File

@@ -39,14 +39,15 @@
<v-icon class="mx-2">mdi-bell-outline</v-icon>
<span class="flex items-center mx-2">
<span class="text-black text-base font-sans font-medium mr-3">
{{ currentUserName }}
</span>
<!-- TODO: Link to /profile if logged -->
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
class="rounded-circle h-10 w-10"
alt="Logo"/>
alt="Logo"/>
</span>
</div>
@@ -57,7 +58,7 @@
<script setup>
import {ref, onMounted, onUnmounted} from 'vue';
import {onMounted, onUnmounted, ref} from 'vue';
import {useRouter} from 'vue-router';
import SiteMenu from "@/views/main/SiteMenu.vue";

117
src/views/main/YourProfile.vue
View File

@@ -1,59 +1,56 @@
<template>
<div class="bg-purple-800 h-24 -mt-12 -mb-6"></div>
<div class="flex justify-center">
<div class="w-full">
<img :src="bannerImageUrl" class="max-h-96 object-cover shadow-md profile-banner">
</div>
</div>
<div class="bg-purple-800 h-24 flex items-center">
<div class="w-full text-right pr-12">
<button class="bg-white text-purple-800 p-2 rounded-full shadow-md hover:bg-purple-600 hover:text-white transition-colors duration-300 ease-in-out mr-3">
<i class="mdi mdi-pencil"></i>
</button>
</div>
</div>
<div class="max-w-4xl -mt-24 mx-auto flex justify-center items-center">
<div class="w-full">
<div class="bg-white rounded-3xl shadow-md p-6">
<div class="flex justify-center mb-5">
<div class="relative">
<img :src="profilePictureUrl" class="w-32 h-32 rounded-full shadow-lg border-4 border-white transition-transform duration-500 ease-in-out hover:scale-110">
<button class="absolute bottom-0 right-0 bg-white text-purple-800 p-2 rounded-full shadow-md hover:bg-purple-600 hover:text-white transition-colors duration-300 ease-in-out -mt-4">
<i class="mdi mdi-pencil"></i>
</button>
</div>
</div>
<v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;">
</v-row>
<p class="text-center mb-3 text-3xl font-semibold">{{ userName }}</p>
<p class="text-center mb-12 text-lg">{{ firstName }} {{ lastName }}</p>
<v-row justify="center">
<v-col cols="12">
<v-img class="profile-banner" max-height="375" :src="bannerImageUrl" cover
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col>
</v-row>
<v-row style="background-color: #6b0065; height: 100px; margin-top: 0;" align="center">
<v-col cols="12" class="text-right">
<v-btn style="margin-right: 3%;"> <v-icon>mdi-pencil</v-icon></v-btn>
</v-col>
</v-row>
<v-container style="max-width: 800px; margin-top: -100px" class="d-flex justify-center align-center">
<v-container>
<v-row justify="center">
<v-col style="background-color: white; border-radius: 30px;" class="col-shadow" cols="12">
<v-row justify="center" style="margin-bottom: 20px;">
<v-col cols="auto" class="d-flex justify-center">
<v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
</v-col>
<v-col cols="auto" class="d-flex justify-center align-center">
<v-btn style="margin-top: -30px;">
<v-icon>mdi-pencil</v-icon>
</v-btn>
</v-col>
</v-row>
<p class="text-center" style="margin-bottom: 10px; font-size: 2.5rem; font-weight: 600;">
{{ userName }}
</p>
<p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">
{{ firstName }} {{ lastName }}
</p>
<v-form>
<v-text-field variant="solo" v-model="firstName" label="Prénom" :readonly="!isEditing"></v-text-field>
<v-text-field variant="solo" v-model="lastName" label="Nom" :readonly="!isEditing"></v-text-field>
<v-text-field variant="solo" v-model="titre" label="Titre" :readonly="!isEditing"></v-text-field>
<v-text-field variant="solo" v-model="description" label="Description"
:readonly="!isEditing"></v-text-field>
</v-form>
<v-col class="text-right">
<RouterLink :to="{ name: 'creatorfolio' }" class="">
<v-btn style="margin-right: 20px;">Retour</v-btn>
</RouterLink>
<v-btn @click="toggleEdit">{{ isEditing ? 'Sauvegarder' : 'Éditer' }}</v-btn>
</v-col>
</v-col>
</v-row>
</v-container>
</v-container>
<form>
<div class="mb-4">
<input type="text" v-model="firstName" placeholder="Prénom" :readonly="!isEditing" class="input input-bordered w-full">
</div>
<div class="mb-4">
<input type="text" v-model="lastName" placeholder="Nom" :readonly="!isEditing" class="input input-bordered w-full">
</div>
<div class="mb-4">
<input type="text" v-model="titre" placeholder="Titre" :readonly="!isEditing" class="input input-bordered w-full">
</div>
<div class="mb-4">
<input type="text" v-model="description" placeholder="Description" :readonly="!isEditing" class="input input-bordered w-full">
</div>
</form>
<div class="text-right">
<router-link :to="{ name: 'creatorfolio' }">
<button class="bg-gray-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-gray-700 transition-colors duration-300 ease-in-out mr-5">Retour</button>
</router-link>
<button @click="toggleEdit" class="bg-purple-800 text-white px-4 py-2 rounded-lg shadow-md hover:bg-purple-600 transition-colors duration-300 ease-in-out">{{ isEditing ? 'Sauvegarder' : 'Éditer' }}</button>
</div>
</div>
</div>
</div>
</template>
<script async setup>
@@ -93,19 +90,3 @@ const toggleEdit = () => {
onBeforeMount(fetchUserData);
</script>
<style>
.your-profile-picture {
width: 300px;
border-radius: 40px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
}
.row-shadow {
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
}
.col-shadow {
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}
</style>