Guams/my_book_list_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajout d'icones font awesome

Browse Source
This commit is contained in:
Guamss 2025-12-11 16:03:02 +01:00
parent a332d1bbc5
commit b36e3981ba
4 changed files with 418 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

657
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -12,6 +12,11 @@
"lint": "eslint . --fix" "lint": "eslint . --fix"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^7.1.0",
"@fortawesome/free-brands-svg-icons": "^7.1.0",
"@fortawesome/free-regular-svg-icons": "^7.1.0",
"@fortawesome/free-solid-svg-icons": "^7.1.0",
"@fortawesome/vue-fontawesome": "^3.1.2",
"axios": "^1.13.2", "axios": "^1.13.2",
"jwt-decode": "^4.0.0", "jwt-decode": "^4.0.0",
"vue": "^3.5.17", "vue": "^3.5.17",

73
src/App.vue
View File

@ -5,13 +5,13 @@ import { User } from './models/user';
import { onMounted, ref, watch } from 'vue'; import { onMounted, ref, watch } from 'vue';
import { AuthenticationService } from './services/authentication.service'; import { AuthenticationService } from './services/authentication.service';
const authenticatedUser = ref<User | undefined>(undefined) const authenticatedUser = ref<User | undefined>(undefined)
const API_URL = import.meta.env.VITE_MBL_API_URL const API_URL = import.meta.env.VITE_MBL_API_URL
const { isAuthenticated, logout } = useAuth(); const { isAuthenticated, logout } = useAuth();
const toastService = useToast(); const toastService = useToast();
const authenticationService = new AuthenticationService(); const authenticationService = new AuthenticationService();
const fetchUser = async () => { const fetchUser = async () => {
if (isAuthenticated.value) { if (isAuthenticated.value) {
try { try {
authenticatedUser.value = await authenticationService.findMe(); authenticatedUser.value = await authenticationService.findMe();
@ -31,14 +31,14 @@ watch(isAuthenticated, () => {
fetchUser(); fetchUser();
}); });
function handleLogout() { function handleLogout() {
logout(); logout();
toastService.info('Vous êtes maintenant déconnecté', { toastService.info('Vous êtes maintenant déconnecté', {
position: 'bottom-right', position: 'bottom-right',
pauseOnHover: true, pauseOnHover: true,
dismissible: true, dismissible: true,
}); });
} }
</script> </script>
<template> <template>
@ -51,35 +51,54 @@ watch(isAuthenticated, () => {
</div> </div>
<div class="nav-signin-div"> <div class="nav-signin-div">
<RouterLink v-if="!isAuthenticated" class="nav-link" to="/login">Se connecter</RouterLink> <RouterLink v-if="!isAuthenticated" class="nav-link" to="/login">Se connecter</RouterLink>
<!-- <a v-else @click="handleLogout" class="nav-link" style="cursor:pointer">Se déconnecter</a> -->
<div class="user-section" v-else> <div class="user-section" v-else>
<img class="profile-picture" :src="API_URL + authenticatedUser?.profile_picture"></img> <div class="clickable-user-section">
<span>{{ authenticatedUser?.username }}</span> <img class="profile-picture" :src="API_URL + authenticatedUser?.profile_picture"></img>
<span>{{ authenticatedUser?.username }}</span>
</div>
<a @click="handleLogout" class="nav-link logout">
<font-awesome-icon icon="arrow-right-from-bracket" />
</a>
</div> </div>
</div> </div>
</nav> </nav>
<RouterView/> <RouterView />
</template> </template>
<style> <style>
@import "styles.css"; @import "styles.css";
.user-section { .logout {
border-radius: 6px;
padding-bottom: 4px;
padding-top: 4px;
padding-right: 8px;
padding-left: 8px;
cursor: pointer; cursor: pointer;
}
.logout:hover {
transition: 0.5s;
color: red;
}
.user-section {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 10px;
align-items: center; align-items: center;
} }
.user-section:hover { .clickable-user-section {
background-color: light-dark(white, #5e5e5e); border-radius: 6px;
padding-bottom: 4px;
padding-top: 4px;
padding-right: 8px;
padding-left: 8px;
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
cursor: pointer;
}
.clickable-user-section:hover {
background-color: light-dark(white, #5e5e5e);
} }
.profile-picture { .profile-picture {

7
src/main.ts
View File

@ -3,5 +3,10 @@ import App from './App.vue'
import ToastPlugin from 'vue-toast-notification' import ToastPlugin from 'vue-toast-notification'
import { router } from './routes' import { router } from './routes'
import 'vue-toast-notification/dist/theme-sugar.css' import 'vue-toast-notification/dist/theme-sugar.css'
import { library } from "@fortawesome/fontawesome-svg-core";
import { faArrowRightFromBracket } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
createApp(App).use(router).use(ToastPlugin).mount('#app') library.add(faArrowRightFromBracket);
createApp(App).use(router).use(ToastPlugin).component("font-awesome-icon", FontAwesomeIcon).mount('#app')