Refactor: Login and profile page
This commit is contained in:
Kamigen
@@ -1,102 +1,106 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="min-h-screen flex items-center justify-center">
|
||||||
<!-- Google Oauth -->
|
<!-- Desktop View -->
|
||||||
<div class="sm:flex hidden items-center justify-between flex-col"
|
<div class="hidden sm:flex items-center justify-center w-full">
|
||||||
style="margin-top: 3%;">
|
<div class="container mx-auto px-4 flex items-center justify-center">
|
||||||
|
|
||||||
<v-container>
|
|
||||||
<v-row align="center" justify="center">
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
|
<div class="w-full lg:w-6/12 md:w-6/12 sm:w-6/12 xs:w-6/12 flex items-center justify-center">
|
||||||
<img class="login-picture" src="/images/hutopymedia/loginpage/loginhutopy.png">
|
<img class="rounded-2xl mr-8" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="hutopy login">
|
||||||
</v-col>
|
</div>
|
||||||
|
|
||||||
<!-- Connexion-objects -->
|
<!-- Connexion-objects -->
|
||||||
<v-col cols="3" lg="4" md="10" sm="10" xs="10" class="connexion-container">
|
<div class="lg:w-4/12 md:w-6/12 sm:w-6/12 xs:w-6/12 bg-white shadow-lg rounded-lg p-8">
|
||||||
<h1 class="text-center display-6 h1-connexion">Connexion</h1>
|
<h1 class="text-center text-2xl font-bold mb-6">Connexion</h1>
|
||||||
<h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous vous connecter à votre
|
<div class="mb-4">
|
||||||
compte?</h2>
|
<!-- TODO: Fix input box overflowing when screen it too small -->
|
||||||
<v-card-text>
|
<form class="mb-4">
|
||||||
<v-form class="label-mail-password">
|
<div class="mb-4">
|
||||||
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email"
|
<input type="text" v-model="user.email" placeholder="Nom d'utilisateur" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-800">
|
||||||
label="Nom d'utilisateur" class="text-start"></v-text-field>
|
</div>
|
||||||
<v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
|
<div class="mb-4">
|
||||||
label="Mot de passe" class="text-start"></v-text-field>
|
<input type="password" v-model="user.password" placeholder="Mot de passe" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-800">
|
||||||
</v-form>
|
</div>
|
||||||
<v-snackbar v-model="errorSnackBar">
|
</form>
|
||||||
|
</div>
|
||||||
|
<div v-if="errorSnackBar" class="mb-4 text-red-600">
|
||||||
Nom d'utilisateur ou mot de passe invalide.
|
Nom d'utilisateur ou mot de passe invalide.
|
||||||
<template v-slot:actions>
|
<button class="text-red-600 ml-4" @click="errorSnackBar = false">Fermer</button>
|
||||||
<v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
|
</div>
|
||||||
</template>
|
<div class="flex justify-center mb-4">
|
||||||
</v-snackbar>
|
<button class="bg-blue-500 text-white px-8 py-2 rounded-lg shadow-md hover:bg-blue-400 transition-colors duration-300 ease-in-out" @click="login">Login</button>
|
||||||
</v-card-text>
|
</div>
|
||||||
<v-card-actions>
|
<div class="flex justify-center mb-4">
|
||||||
<div class="flex-grow-1"></div>
|
<!-- TODO: Remove custom elements -->
|
||||||
<RouterLink to="/">
|
<google-login :callback="googleCallback" popup-type="TOKEN">
|
||||||
<v-btn color="#6b0065" class="ma-2 btnhome">Accueil</v-btn>
|
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-500 transition-colors duration-300 ease-in-out mr-2 flex items-center">
|
||||||
</RouterLink>
|
<svg class="w-5 h-5 mr-2" viewBox="0 0 512 512">
|
||||||
<v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn>
|
<path xmlns="http://www.w3.org/2000/svg" d="M473.16,221.48l-2.26-9.59H262.46v88.22H387c-12.93,61.4-72.93,93.72-121.94,93.72-35.66,0-73.25-15-98.13-39.11a140.08,140.08,0,0,1-41.8-98.88c0-37.16,16.7-74.33,41-98.78s61-38.13,97.49-38.13c41.79,0,71.74,22.19,82.94,32.31l62.69-62.36C390.86,72.72,340.34,32,261.6,32h0c-60.75,0-119,23.27-161.58,65.71C58,139.5,36.25,199.93,36.25,256S56.83,369.48,97.55,411.6C141.06,456.52,202.68,480,266.13,480c57.73,0,112.45-22.62,151.45-63.66,38.34-40.4,58.17-96.3,58.17-154.9C475.75,236.77,473.27,222.12,473.16,221.48Z"/>
|
||||||
<GoogleLogin :callback="googleCallback" popup-type="TOKEN">
|
</svg>
|
||||||
<v-btn color="primary" class="ma-2 btnhome">Google Login</v-btn>
|
Google
|
||||||
</GoogleLogin>
|
</button>
|
||||||
|
</google-login>
|
||||||
<FacebookAuth :appId="facebookAppId" @on-submit="facebookCallback">
|
<facebook-auth :appId="facebookAppId" @on-submit="facebookCallback">
|
||||||
<v-btn color="primary" class="ma-2 btnhome">Facebook Login</v-btn>
|
<button class="bg-blue-700 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-600 transition-colors duration-300 ease-in-out flex items-center">
|
||||||
</FacebookAuth>
|
<svg class="w-5 h-5 mr-2" viewBox="0 0 24 24">
|
||||||
|
<path fill="#ffffff" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.406.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.464.099 2.796.143v3.24l-1.918.001c-1.504 0-1.794.714-1.794 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116C23.407 24 24 23.406 24 22.676V1.325C24 .593 23.407 0 22.675 0z"></path>
|
||||||
</v-card-actions>
|
</svg>
|
||||||
|
Facebook
|
||||||
|
</button>
|
||||||
|
</facebook-auth>
|
||||||
|
</div>
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h2 class="text-center display-3 h2pasinscrit">Pas encore inscrit?</h2>
|
<h2 class="text-xl mb-4">Pas de compte ?</h2>
|
||||||
<RouterLink :to="{ name: 'join' }">
|
<router-link :to="{ name: 'join' }">
|
||||||
<v-btn color="#6b0065" class="inscriptionbtn"
|
<button class="bg-purple-800 text-white px-4 py-2 rounded-full shadow-md hover:bg-purple-600 transition-colors duration-300 ease-in-out" style="width: 200px;">Inscriptions</button>
|
||||||
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions
|
</router-link>
|
||||||
</v-btn>
|
</div>
|
||||||
</RouterLink>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile View -->
|
||||||
<div class="sm:hidden flex flex-col items-center justify-start"
|
<div class="sm:hidden flex flex-col items-center justify-center w-full">
|
||||||
style="height: 100vh;">
|
<img class="w-72 shadow-lg rounded-lg mb-6" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="hutopy login">
|
||||||
|
<h1 class="text-center text-2xl font-bold mb-4">Connexion</h1>
|
||||||
<img style="margin-top: 10%; width: 350px; box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px;"
|
<h2 class="text-center text-xl mb-4">Comment souhaitez-vous vous connecter à votre compte?</h2>
|
||||||
src="/images/hutopymedia/loginpage/loginhutopy.png">
|
<form class="w-72 mb-4">
|
||||||
|
<div class="mb-4">
|
||||||
<h1 class="h1-connexion">Connexion</h1>
|
<input type="text" v-model="user.email" placeholder="Nom d'utilisateur" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-800">
|
||||||
<h2 class="h2-connexion">Comment souhaitez-vous vous connecter à votre compte?</h2>
|
</div>
|
||||||
|
<div class="mb-4">
|
||||||
<v-form style="max-width: 400px; width: 350px;">
|
<input type="password" v-model="user.password" placeholder="Mot de passe" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-800">
|
||||||
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="Nom d'utilisateur"></v-text-field>
|
</div>
|
||||||
<v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
|
</form>
|
||||||
label="Mot de passe"></v-text-field>
|
<div class="flex justify-end w-72 mb-4">
|
||||||
</v-form>
|
<router-link to="/">
|
||||||
|
<button 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 mr-2">Accueil</button>
|
||||||
<v-card-actions>
|
</router-link>
|
||||||
<div class="flex-grow-1"></div>
|
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-400 transition-colors duration-300 ease-in-out" @click="login">Login</button>
|
||||||
<RouterLink to="/">
|
</div>
|
||||||
<v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
|
<div class="flex justify-center mb-4">
|
||||||
</RouterLink>
|
<google-login :callback="googleCallback" popup-type="TOKEN">
|
||||||
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
|
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-500 transition-colors duration-300 ease-in-out mr-2 flex items-center">
|
||||||
</v-card-actions>
|
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="-3 0 262 262" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>
|
||||||
|
</button>
|
||||||
|
</google-login>
|
||||||
|
<facebook-auth :appId="facebookAppId" @on-submit="facebookCallback">
|
||||||
|
<button class="bg-blue-700 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-600 transition-colors duration-300 ease-in-out flex items-center">
|
||||||
|
<svg class="w-5 h-5 mr-2" viewBox="0 0 24 24">
|
||||||
|
<path fill="#ffffff" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.406.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.464.099 2.796.143v3.24l-1.918.001c-1.504 0-1.794.714-1.794 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116C23.407 24 24 23.406 24 22.676V1.325C24 .593 23.407 0 22.675 0z"></path>
|
||||||
|
</svg>
|
||||||
|
Facebook Login
|
||||||
|
</button>
|
||||||
|
</facebook-auth>
|
||||||
|
</div>
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h2 class="h2pasinscrit">
|
<h2 class="text-xl mb-4">Pas encore inscrit?</h2>
|
||||||
Pas encore
|
<router-link :to="{ name: 'join' }">
|
||||||
inscrit?</h2>
|
<button class="bg-purple-800 text-white px-4 py-2 rounded-full shadow-md hover:bg-purple-600 transition-colors duration-300 ease-in-out" style="width: 200px;">Inscriptions</button>
|
||||||
<RouterLink :to="{ name: 'join' }">
|
</router-link>
|
||||||
<v-btn color="#6b0065" class="inscriptionbtn"
|
</div>
|
||||||
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions
|
|
||||||
</v-btn>
|
|
||||||
</RouterLink>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {auth} from '@/stores/auth.js';
|
import {auth} from '@/stores/auth.js';
|
||||||
import {ref} from 'vue';
|
import {ref} from 'vue';
|
||||||
@@ -136,269 +140,3 @@ const facebookCallback = async (response) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.h1-connexion {
|
|
||||||
font-size: 0.55em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2-connexion {
|
|
||||||
font-size: 0.55em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-mail-password {
|
|
||||||
margin-bottom: -10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media (min-width: 300px) {
|
|
||||||
.h1-connexion {
|
|
||||||
font-size: 2em;
|
|
||||||
margin-bottom: 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2-connexion {
|
|
||||||
font-size: 1.1em;
|
|
||||||
margin-bottom: 5%;
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2pasinscrit {
|
|
||||||
margin-bottom: 6%;
|
|
||||||
font-size: 1.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inscriptionbtn {
|
|
||||||
transform: scale(.7);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 450px) and (max-width: 670px) {
|
|
||||||
.h1-connexion {
|
|
||||||
font-size: 2em;
|
|
||||||
margin-bottom: 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2-connexion {
|
|
||||||
font-size: 1.1em;
|
|
||||||
margin-bottom: 5%;
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2pasinscrit {
|
|
||||||
margin-bottom: 6%;
|
|
||||||
font-size: 1.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inscriptionbtn {
|
|
||||||
transform: scale(.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-picture {
|
|
||||||
width: auto;
|
|
||||||
border-radius: 30px;
|
|
||||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 641px) and (max-width: 770px) {
|
|
||||||
.h1-connexion {
|
|
||||||
font-size: 2.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2-connexion {
|
|
||||||
font-size: 1.1em;
|
|
||||||
margin-bottom: 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2pasinscrit {
|
|
||||||
margin-bottom: 5%;
|
|
||||||
font-size: 1.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-mail-password {
|
|
||||||
margin-bottom: -3%;
|
|
||||||
width: 425px;
|
|
||||||
margin-left: 6%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.btnhome {
|
|
||||||
|
|
||||||
font-size: 1em;
|
|
||||||
|
|
||||||
justify-content: center;
|
|
||||||
transform: matrix(1, 0, 0, 1, -160, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-picture {
|
|
||||||
width: auto;
|
|
||||||
border-radius: 30px;
|
|
||||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.inscriptionbtn {
|
|
||||||
transform: scale(.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 769px) and (max-width: 1280px) {
|
|
||||||
.h1-connexion {
|
|
||||||
font-size: 3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2-connexion {
|
|
||||||
font-size: 1.2em;
|
|
||||||
margin-bottom: 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2pasinscrit {
|
|
||||||
margin-bottom: 5%;
|
|
||||||
font-size: 1.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-mail-password {
|
|
||||||
margin-bottom: -3%;
|
|
||||||
width: 550px;
|
|
||||||
margin-left: 9%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.inscriptionbtn {
|
|
||||||
transform: scale(.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-picture {
|
|
||||||
width: auto;
|
|
||||||
border-radius: 30px;
|
|
||||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.btnhome {
|
|
||||||
font-size: 1em;
|
|
||||||
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1279px) and (max-width: 1920px) {
|
|
||||||
.h1-connexion {
|
|
||||||
font-size: 2em;
|
|
||||||
margin-top: 4%;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2-connexion {
|
|
||||||
font-size: 1em;
|
|
||||||
margin-bottom: 5%;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2pasinscrit {
|
|
||||||
margin-bottom: 5%;
|
|
||||||
font-size: 1.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-mail-password {
|
|
||||||
margin-bottom: -10%;
|
|
||||||
margin-top: -4%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.inscriptionbtn {
|
|
||||||
transform: scale(.6);
|
|
||||||
margin-top: -5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-picture {
|
|
||||||
width: auto;
|
|
||||||
border-radius: 30px;
|
|
||||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
|
|
||||||
margin-left: -5%;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1921px) {
|
|
||||||
.h1-connexion {
|
|
||||||
font-size: 4.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2-connexion {
|
|
||||||
font-size: 1.3em;
|
|
||||||
margin-bottom: 5%;
|
|
||||||
margin-left: 6%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2pasinscrit {
|
|
||||||
margin-bottom: 5%;
|
|
||||||
font-size: 1.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.label-mail-password {
|
|
||||||
margin-left: 5%;
|
|
||||||
margin-bottom: 0%;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connexion-container {
|
|
||||||
margin-left: -7%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-picture {
|
|
||||||
width: auto;
|
|
||||||
border-radius: 30px;
|
|
||||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
|
|
||||||
margin-left: -10%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 2500px) and (max-width: 4000px) {
|
|
||||||
.h1-connexion {
|
|
||||||
font-size: 6.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2-connexion {
|
|
||||||
font-size: 1.7em;
|
|
||||||
margin-bottom: 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2pasinscrit {
|
|
||||||
margin-bottom: 5%;
|
|
||||||
font-size: 1.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-mail-password {
|
|
||||||
margin-bottom: 0%;
|
|
||||||
margin-left: 10%;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inscriptionbtn {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.connexion-container {
|
|
||||||
margin-left: -3%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-picture {
|
|
||||||
width: auto;
|
|
||||||
border-radius: 30px;
|
|
||||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
|
|
||||||
margin-left: -5%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,20 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<footer class="mt-auto">
|
||||||
<footer>
|
<div class="text-black text-center py-4">
|
||||||
|
|
||||||
<div class="text-black text-center ">
|
|
||||||
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
|
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
footer {
|
|
||||||
@apply flex justify-center pt-10
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -44,6 +44,7 @@
|
|||||||
{{ currentUserName }}
|
{{ currentUserName }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
<!-- TODO: Link to /profile if logged -->
|
||||||
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||||
class="rounded-circle h-10 w-10"
|
class="rounded-circle h-10 w-10"
|
||||||
alt="Logo"/>
|
alt="Logo"/>
|
||||||
@@ -57,7 +58,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {ref, onMounted, onUnmounted} from 'vue';
|
import {onMounted, onUnmounted, ref} from 'vue';
|
||||||
import {useRouter} from 'vue-router';
|
import {useRouter} from 'vue-router';
|
||||||
import SiteMenu from "@/views/main/SiteMenu.vue";
|
import SiteMenu from "@/views/main/SiteMenu.vue";
|
||||||
|
|
||||||
|
|||||||
@@ -1,59 +1,56 @@
|
|||||||
<template>
|
<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;">
|
<p class="text-center mb-3 text-3xl font-semibold">{{ userName }}</p>
|
||||||
</v-row>
|
<p class="text-center mb-12 text-lg">{{ firstName }} {{ lastName }}</p>
|
||||||
|
|
||||||
<v-row justify="center">
|
<form>
|
||||||
<v-col cols="12">
|
<div class="mb-4">
|
||||||
<v-img class="profile-banner" max-height="375" :src="bannerImageUrl" cover
|
<input type="text" v-model="firstName" placeholder="Prénom" :readonly="!isEditing" class="input input-bordered w-full">
|
||||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
</div>
|
||||||
</v-col>
|
<div class="mb-4">
|
||||||
</v-row>
|
<input type="text" v-model="lastName" placeholder="Nom" :readonly="!isEditing" class="input input-bordered w-full">
|
||||||
<v-row style="background-color: #6b0065; height: 100px; margin-top: 0;" align="center">
|
</div>
|
||||||
<v-col cols="12" class="text-right">
|
<div class="mb-4">
|
||||||
<v-btn style="margin-right: 3%;"> <v-icon>mdi-pencil</v-icon></v-btn>
|
<input type="text" v-model="titre" placeholder="Titre" :readonly="!isEditing" class="input input-bordered w-full">
|
||||||
</v-col>
|
</div>
|
||||||
</v-row>
|
<div class="mb-4">
|
||||||
|
<input type="text" v-model="description" placeholder="Description" :readonly="!isEditing" class="input input-bordered w-full">
|
||||||
<v-container style="max-width: 800px; margin-top: -100px" class="d-flex justify-center align-center">
|
</div>
|
||||||
<v-container>
|
</form>
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<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>
|
</template>
|
||||||
|
|
||||||
<script async setup>
|
<script async setup>
|
||||||
@@ -93,19 +90,3 @@ const toggleEdit = () => {
|
|||||||
|
|
||||||
onBeforeMount(fetchUserData);
|
onBeforeMount(fetchUserData);
|
||||||
</script>
|
</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>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user