tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

Merge pull request #125 from SELab-2/feat/homepagina

Browse source 
feat: Landing pagina (homepagina)
This commit is contained in:
Laure Jablonski 2025-03-23 15:44:34 +01:00 • committed by GitHub
commit 25cacb048b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 185 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

203
frontend/src/views/HomePage.vue
View file

@ -1,29 +1,196 @@
<script setup lang="ts"> <script setup lang="ts">
import auth from "@/services/auth/auth-service.ts";
import apiClient from "@/services/api-client.ts";
import { ref } from "vue"; import { ref } from "vue";
import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
import { useI18n } from "vue-i18n";
const testResponse = ref(null); const { t, locale } = useI18n();
async function testAuthenticated() { const languages = ref([
testResponse.value = await apiClient.get("/auth/testAuthenticatedOnly"); { name: "English", code: "en" },
} { name: "Nederlands", code: "nl" },
{ name: "Deutsch", code: "de" },
{ name: "français", code: "fr" },
]);
// Logic to change the language of the website to the selected language
const changeLanguage = (langCode: string) => {
locale.value = langCode;
localStorage.setItem("user-lang", langCode);
};
</script> </script>
<template> <template>
<main> <main>
<!-- TODO Placeholder implementation to test the login - replace by a more beautiful page later --> <div class="layout">
<b>Welcome to the dwengo homepage</b> <div class="container_left">
<div v-if="auth.isLoggedIn.value"> <img
<p>Hello {{ auth.authState.user?.profile.name }}!</p> :src="dwengoLogo"
<p> style="align-self: center"
Your access token for the backend is: <code>{{ auth.authState.user?.access_token }}</code> />
</p> <h> {{ t("homeTitle") }}</h>
<v-btn to="/user">home</v-btn> <p class="info">
{{ t("homeIntroduction1") }}
</p>
<p class="info">{{ t("homeIntroduction2") }}</p>
<v-btn
size="large"
density="comfortable"
style="font-weight: bolder; color: white; align-self: center"
color="#88BD28"
to="/login"
>
{{ t("login") }}
<v-icon
end
size="x-large"
>
mdi-menu-right
</v-icon>
</v-btn>
</div>
<div class="container_middle">
<div class="img_small">
<v-img
height="125"
width="125"
src="/assets/home/innovative.png"
></v-img>
<h class="big">{{ t("innovative") }}</h>
</div>
<div class="img_small">
<v-img
height="125"
width="125"
src="/assets/home/research_based.png"
></v-img>
<h class="big">{{ t("researchBased") }}</h>
</div>
<div class="img_small">
<v-img
height="125"
width="125"
src="/assets/home/inclusive.png"
></v-img>
<h class="big">{{ t("sociallyRelevant") }}</h>
</div>
<div class="img_small">
<v-img
height="125"
width="125"
src="/assets/home/socially_relevant.png"
></v-img>
<h class="big">{{ t("inclusive") }}</h>
</div>
</div>
<div class="container_right">
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
icon
variant="text"
>
{{ t("translate") }}
<v-icon
end
icon="mdi-translate"
size="small"
color="#0e6942"
></v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(language, index) in languages"
:key="index"
@click="changeLanguage(language.code)"
>
<v-list-item-title>{{ language.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</div> </div>
<v-btn @click="testAuthenticated">Send test request</v-btn>
<p v-if="testResponse">Response from the test request: {{ testResponse }}</p>
</main> </main>
</template> </template>
<style scoped></style> <style scoped>
.layout {
display: flex;
width: 100vw;
height: 100vh;
position: relative;
flex-wrap: wrap;
}
.container_left {
width: 600px;
background-color: #f6faf2;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container_middle {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 20px;
align-items: flex-start;
justify-content: center;
}
.container_right {
position: absolute;
top: 2%;
right: 100px;
}
.img_small {
display: flex;
align-items: center;
margin: 20px;
}
img {
width: 300px;
margin-bottom: 10px;
}
h {
font-size: large;
font-weight: bold;
align-self: center;
padding: 10px;
}
.big {
font-size: x-large;
}
.info {
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 30px;
}
@media (max-width: 1024px) {
.container_left {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 20px;
position: relative;
}
.container_right {
position: absolute;
top: 10px;
right: 80px;
}
}
</style>