Merge pull request #125 from SELab-2/feat/homepagina
feat: Landing pagina (homepagina)
This commit is contained in:
Laure Jablonski
GitHub
commit
25cacb048b
1 changed files with 185 additions and 18 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Reference in a new issue