diff --git a/userman_all/client/assets/PhilosophieAboutUs.jpg b/userman_all/client/assets/PhilosophieAboutUs.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..50d80eabc91d0b377bf8a7ff89223ca9b6b87c61
Binary files /dev/null and b/userman_all/client/assets/PhilosophieAboutUs.jpg differ
diff --git a/userman_all/client/assets/UnternehmenAboutUs.jpg b/userman_all/client/assets/UnternehmenAboutUs.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..560931696788e4db91e496fd34ebd217e6b7a5ad
Binary files /dev/null and b/userman_all/client/assets/UnternehmenAboutUs.jpg differ
diff --git a/userman_all/client/assets/heroAboutUs.jpeg b/userman_all/client/assets/heroAboutUs.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..fee216fa9beaa117b3335a7b87206c02be52dba8
Binary files /dev/null and b/userman_all/client/assets/heroAboutUs.jpeg differ
diff --git a/userman_all/client/index.html b/userman_all/client/index.html
index a3755517f8f8f2e5372ccc63833e0014f02d8806..983e2c4a43bf376014b93072e62662504589df76 100644
--- a/userman_all/client/index.html
+++ b/userman_all/client/index.html
@@ -68,22 +68,6 @@
<div id="startseite" class="page active">
-
- <!-- logout area -->
- <div class="container mb-3 d-none" id="logout-container">
- <form id="logout-form">
- <div class="row">
- <div class="col">
- <span id="current-user-username"></span>
- </div>
- <div class="col">
- <button id="logoutBtn" type="submit" class="btn btn-primary">Logout</button>
- </div>
- </div>
- </form>
- </div>
-
-
<div class="container mb-3 d-none" id="add-user-container">
<form id="add-user-form">
<div class="row mb-3">
@@ -225,7 +209,7 @@
</div>
<div id="registrieren" class="page">
- <i class="fa-solid fa-circle-arrow-left" id="backButtonRegistrieren"></i>
+ <i class="fa-solid fa-circle-arrow-left" class="backButton"></i>
<div class="card" id="card-registrieren">
<div class="card-body">
@@ -267,27 +251,28 @@
<input type="password" class="form-control-registrieren" id="add-user-repeatPassword">
</div>
- <button type="submit" class="btn btn-primary" id="registrierenButton" onclick="showPage('meineReisen')">Registrieren</button>
+ <button onclick="showPage('meineReisen')" type="submit" class="btn btn-primary" id="registrierenButton" >Registrieren</button>
</form>
</div>
</div>
</div>
+<!--Meine Reisen-->
<div id="meineReisen" class="page">
-<div class="container">
+<div class="container-meineReisen">
<aside class="sidebar">
- <i class="fa-solid fa-circle-arrow-left" id="backButtonMeineReisen"></i>
- <p class="greeting">Hallo, Annika!</p>
+ <i class="fa-solid fa-circle-arrow-left " class="backButton" onclick="showPage('startseite')"></i>
+ <p class="greeting" id="current-user-email">Hallo, Annika!</p>
<nav class="menu">
- <ul>
+ <ul id="logout-form">
<li><a href="#">Meine Reisen</a></li>
<li><a onclick="showPage('profil')">Mein Profil</a></li>
<li><a href="#">Merkliste</a></li>
<li><a href="#">Meine Supportanfragen</a></li>
<li><a href="#">Reisebericht schreiben</a></li>
- <li><a href="#">Abmelden</a></li>
+ <li><a id="logout-button" onclick="showPage('startseite')">Abmelden</a></li>
</ul>
</nav>
</aside>
@@ -320,72 +305,164 @@
<!--Profil-->
<div id="profil" class="page">
- <div class="container">
+ <div class="sidebar-container">
<aside class="sidebar">
- <i class="fa-solid fa-circle-arrow-left" id="backButtonProfil"></i>
+ <i class="fa-solid fa-circle-arrow-left" class="backButton" onclick="showPage('startseite')"></i>
<p class="greeting">Hallo, Annika!</p>
<nav class="menu">
<ul>
- <li><a href="#">Meine Reisen</a></li>
- <li><a href="#">Mein Profil</a></li>
- <li><a href="#">Merkliste</a></li>
- <li><a href="#">Meine Supportanfragen</a></li>
- <li><a href="#">Reisebericht schreiben</a></li>
- <li><a href="#">Abmelden</a></li>
+ <li><a onclick="showPage('meineReisen')">Meine Reisen</a></li>
+ <li><a>Mein Profil</a></li>
+ <li><a>Merkliste</a></li>
+ <li><a>Meine Supportanfragen</a></li>
+ <li><a>Reisebericht schreiben</a></li>
+ <li><a>Abmelden</a></li>
</ul>
</nav>
</aside>
-</div>
- <div class="profil-container">
- <h1>Profil</h1>
- <div class="profil-card">
- <div class="section">
- <h2>Persönliche Daten</h2>
- <div class="row">
- <span>Vorname</span>
- <span>Annika</span>
- </div>
- <div class="row">
- <span>Name</span>
- <span>Kastner</span>
- </div>
- <div class="row">
- <span>Email Adresse</span>
- <span>annika.k@outlook.com</span>
+ </div>
+ <div class="profil-container">
+ <h1>Profil</h1>
+ <div class="profil-card">
+ <div class="section">
+ <h2>Persönliche Daten</h2>
+ <div class="row">
+ <span>Vorname</span>
+ <span>Annika</span>
+ </div>
+ <div class="row">
+ <span>Name</span>
+ <span>Kastner</span>
+ </div>
+ <div class="row">
+ <span>Email Adresse</span>
+ <span>annika.k@outlook.com</span>
+ </div>
+ <div class="row">
+ <span>Passwort</span>
+ <span>************</span>
+ </div>
</div>
- <div class="row">
- <span>Passwort</span>
- <span>************</span>
+ <div class="section">
+ <h2>Adressdaten</h2>
+ <div class="row">
+ <span>Straße</span>
+ <span>Musterstraße</span>
+ </div>
+ <div class="row">
+ <span>Hausnummer</span>
+ <span>1</span>
+ </div>
+ <div class="row">
+ <span>Postleitzahl</span>
+ <span>68165</span>
+ </div>
+ <div class="row">
+ <span>Stadt/Ort</span>
+ <span>Mannheim</span>
+ </div>
+ <div class="row">
+ <span>Bundesland</span>
+ <span>Baden-Württemberg</span>
+ </div>
+ <div class="row">
+ <span>Land</span>
+ <span>Deutschland</span>
+ </div>
</div>
</div>
- <div class="section">
- <h2>Adressdaten</h2>
- <div class="row">
- <span>Straße</span>
- <span>Musterstraße</span>
- </div>
- <div class="row">
- <span>Hausnummer</span>
- <span>1</span>
- </div>
- <div class="row">
- <span>Postleitzahl</span>
- <span>68165</span>
+
+
+ </div>
+</div>
+
+<!--AboutUs-->
+
+<div id="about-Us" class="page">
+ <div class="containerAboutUs">
+ <header class="hero">
+ <img src="assets/heroAboutUs.jpeg" height="1104" width="736" alt="Teamwork" class="hero-image">
+ </header>
+
+ <main>
+ <!-- Ãœber uns Abschnitt -->
+ <section class="about-section">
+ <div class="container">
+ <div class="row align-items-center">
+ <!-- Textblock auf der linken Seite -->
+ <div class="col-lg-6">
+ <h1>Horizon Changers</h1>
+ <h2>Entdecken, Erleben, Unterstützen</h2>
+ <br>
+ <div class="text-box">
+ <p>
+ Horizon Changers wurde gegründet auf einer Vision: soziales Engagement, Urlaub und abenteuerliche Aktivitäten verbinden. Wir bieten Reisen, bei denen Teilnehmer an Freiwilligenprojekten in Bereichen wie Bildung und Umweltschutz mitwirken und gleichzeitig spannende Aktivitäten wie Elefantentouren genießen können.
+ Unser Ziel ist es, den Reisenden eine tiefere Verbindung zu den Kulturen und Gemeinschaften zu ermöglichen, in denen sie helfen. Ein Beispiel ist unser Projekt zum Bau von Schulen für Frauen, das den Zugang zu Bildung fördert. Wir legen großen Wert auf Nachhaltigkeit und respektvollen Umgang mit den lokalen Kulturen und möchten, dass jeder Reisende mit einem positiven Einfluss zurückkehrt.
+ </p>
+ </div>
+ </div>
+ <!-- Bild auf der rechten Seite -->
+ <div class="col-lg-6">
+ <img src="assets/UnternehmenAboutUs.jpg" class="img-fluid about-image" alt="Unser Team">
+ </div>
+ </div>
</div>
- <div class="row">
- <span>Stadt/Ort</span>
- <span>Mannheim</span>
+ </section>
+
+ <!-- Philosophie Abschnitt -->
+ <section class="philosophy-section">
+ <div class="container">
+ <div class="row align-items-center">
+ <!-- Bild auf der linken Seite -->
+ <div class="col-lg-6">
+ <img src="assets/PhilosophieAboutUs.jpg" class="img-fluid philosophy-image" alt="Unsere Mission">
+ </div>
+ <!-- Textblock auf der rechten Seite -->
+ <div class="col-lg-6">
+ <div class="text-box-philosophie">
+ <h2>Unsere Philosophie</h2>
+ <p>
+ Bei Horizon Changers verbinden wir Reisen mit sozialem Engagement, um ein erfüllendes Erlebnis zu schaffen. Unsere Teilnehmer nehmen an Freiwilligenprojekten teil und entdecken gleichzeitig neue Kulturen und Sehenswürdigkeiten.
+ Indien hat mich durch lebendige Straßen, beeindruckende Elefantentouren und ein berührendes Projekt, bei dem ich den Bau einer Schule für Frauen unterstützte, tief inspiriert. Unsere Reisen bieten eine ausgewogene Mischung aus Freizeit und sinnvollem Engagement in Bereichen wie Bildung und Umwelt.
+ Wir setzen auf nachhaltige Praktiken, respektieren lokale Kulturen und fördern Empowerment. Horizon Changers lädt dazu ein, die Welt zu entdecken und gleichzeitig einen positiven Einfluss zu hinterlassen.
+ </p>
+ </div>
+ </div>
+ </div>
</div>
- <div class="row">
- <span>Bundesland</span>
- <span>Baden-Württemberg</span>
+ </section>
+
+ <!-- Stimmen von Unterwegs -->
+ <section class="testimonials">
+ <h2>Stimmen von Unterwegs</h2>
+ <div class="testimonial">
+ <div class="stars">
+ <i class="fa fa-star"></i>
+ <i class="fa fa-star"></i>
+ <i class="fa fa-star"></i>
+ <i class="fa fa-star"></i>
+ <i class="fa fa-star"></i>
+ </div>
+ <p class="name">Annika Kastner</p>
+ <p class="quote">
+ Es war die erfüllendste Reise, die ich je erleben durfte!
+ </p>
</div>
- <div class="row">
- <span>Land</span>
- <span>Deutschland</span>
+ <div class="testimonial">
+ <div class="stars">
+ <i class="fa-solid fa-star"></i>
+ <i class="fa-solid fa-star"></i>
+ <i class="fa-solid fa-star"></i>
+ <i class="fa-solid fa-star"></i>
+ <i class="fa-solid fa-star"></i>
+ </div>
+ <p class="name">Max Mustermann</p>
+ <p class="quote">
+ Ich habe mich noch nie so mit Menschen und Kulturen verbunden gefühlt, wie auf dieser Reise!
+ </p>
</div>
- </div>
- </div>
+ </section>
+ </main>
</div>
</div>
diff --git a/userman_all/client/src/client.ts b/userman_all/client/src/client.ts
index 4c54db8613b9862af0c330d25b8f4b3a8d00b0c4..11c65f79f33d388e8b6b918b88808e41bffb8641 100644
--- a/userman_all/client/src/client.ts
+++ b/userman_all/client/src/client.ts
@@ -17,7 +17,7 @@ function showPage(pageId: string): void {
// Event-Listener für die Initialisierung beim Laden der Seite
document.addEventListener('DOMContentLoaded', () => {
- showPage('startseite'); // Standardmäßig die Startseite anzeigen
+ showPage('startseite'); // Standardmäßig die Seite "Reisen" anzeigen
});
interface User {
@@ -34,6 +34,8 @@ let modalEl: bootstrap.Modal
document.addEventListener("DOMContentLoaded", (): void => {
modalEl = new bootstrap.Modal("#edit-user-modal");
+ //--- check, if user is already logged in (e.g. after refresh) -------------------------------------------------------
+ checkLogin();
// --- Initialisierung der Benutzeranzeige ---
readUsers();
@@ -70,20 +72,31 @@ document.addEventListener("DOMContentLoaded", (): void => {
headers: {
"Content-type": "application/json",
},
- body: JSON.stringify({ firstName, lastName, eMail, password, repeatPassword }),
+ body: JSON.stringify({ firstName, lastName, eMail, password, repeatPassword}),
});
const data: any = await res.json();
addMessage(data.message);
- if (res.ok) {
- // Clear the input fields
- firstNameEl.value = "";
- lastNameEl.value = "";
- eMailEl.value = "";
- passwordEl.value = "";
- repeatPasswordEl.value = "";
+ if (res.status === 400) {
+ const data: any = await res.json();
+ addMessage(data.message);
+ showPage('startseite');
+ } else if (res.status === 201) {
+ const data: any = await res.json();
+ addMessage(data.message);
+ showPage('meineReisen');
}
+
+ readUsers();
+
+ // Clear the input fields
+ firstNameEl.value = "";
+ lastNameEl.value = "";
+ eMailEl.value = "";
+ passwordEl.value = "";
+ repeatPasswordEl.value = "";
+
});
document.getElementById("edit-user-form")!.addEventListener("submit", async (event: SubmitEvent): Promise<void> => {
@@ -131,9 +144,13 @@ document.addEventListener("DOMContentLoaded", (): void => {
}
);
- if (response.status === 400 || response.status === 401) {
+ if (response.status === 400) {
+ const data: any = await response.json();
+ addMessage(data.message);
+ } else if (response.status === 401) {
const data: any = await response.json();
addMessage(data.message);
+ showPage('startseite')
} else if (response.status === 200) {
const data: any = await response.json();
addMessage(data.message);
@@ -152,7 +169,19 @@ document.addEventListener("DOMContentLoaded", (): void => {
showLoggedOutStatus()
});
});
-
+/**
+ * Checks if user might be logged
+ */
+async function checkLogin(): Promise<void> {
+ const response: Response = await fetch('/login', {
+ method: "GET"
+ }
+ );
+ if (response.status === 200) {
+ const data: any = await response.json();
+ showLoggedInStatus(data.user);
+ }
+}
/**
* Gets and displays all users
@@ -170,8 +199,8 @@ async function readUsers(): Promise<void> {
* Displays the logged in username
*/
function showLoggedInStatus(user: User): void {
- const eMail: HTMLElement = document.getElementById('current-user-email')!;
- eMail.innerHTML = `Hello ${user.firstName}`;
+ const firstName: HTMLElement = document.getElementById('current-user-email')!;
+ firstName.innerHTML = `Hallo, ${user.firstName}!`;
readUsers();
}
@@ -193,9 +222,6 @@ function showLoggedOutStatus(): void {
const login: HTMLElement = document.getElementById('login-container')!;
login.classList.remove("d-none"); // show login
- const logout: HTMLElement = document.getElementById('logout-container')!;
- logout.classList.add("d-none"); // hide logout
-
(document.getElementById('add-user-form') as HTMLFormElement).reset();
}
diff --git a/userman_all/client/stylesheet.css b/userman_all/client/stylesheet.css
index 92bfdf22c9df23b73d8edabe1d7a3f1cb30d712e..67f765331793ddf4900d720f39fe8d36a2b196a8 100644
--- a/userman_all/client/stylesheet.css
+++ b/userman_all/client/stylesheet.css
@@ -105,6 +105,7 @@ header {
color: #fff;
padding: 20px 10%;
font-size: 20px;
+
}
.footer-container {
@@ -339,401 +340,539 @@ header {
}
-#backButton {
- position: absolute;
- top: 20px;
- left: 20px;
- font-size: 30px;
- color: #03355C; /* Dunkelblau passend zur Ãœberschrift */
- cursor: pointer;
-}
+ /*SPA*/
-#card-registrieren {
- background-color: #FCF3E4; /* Heller Beige-Hintergrund */
- border-radius: 10px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- padding: 20px;
- width: 701px; /* Breite des Formulars */
- height: 775px;
- text-align: center;
-}
+ #backButtonRegistrieren {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ font-size: 30px;
+ color: #03355C; /* Dunkelblau passend zur Ãœberschrift */
+ cursor: pointer;
+ }
-h1 {
- font-family: Cy Grotesk Wide;
- font-size: 34px;
- color: #03355C; /* Dunkelblau für die Überschrift */
- margin-bottom: 20px;
-}
+ #card-registrieren {
+ background-color: #FCF3E4; /* Heller Beige-Hintergrund */
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ padding: 20px;
+ width: 701px; /* Breite des Formulars */
+ height: 775px;
+ text-align: center;
-.form-control-registrieren {
- width: 525px;
- height: 57px;
- padding-left: 15px;
- margin-bottom: 10px;
- border: 1px solid #03355C; /* dunkelblauer Rahmen */
- border-radius: 30px; /* Runde Ecken für Eingabefelder */
- box-sizing: border-box;
- font-family: "DM Sans", sans-serif;
- font-size: 20px;
- color: #03355C;
-}
+ }
-.form-text-registrieren {
- text-align: left;
- font-size: 20px;
- margin-top: 5px;
- margin-bottom: 15px;
- color: #03355C; /* Dunkelblauer Text */
- padding-left: 90px; /* Gleiche Einrückung wie das Eingabefeld */
-}
+ h1 {
+ font-family: Cy Grotesk Wide;
+ font-size: 34px;
+ color: #03355C; /* Dunkelblau für die Überschrift */
+ margin-bottom: 20px;
+ }
+ .form-control-registrieren {
+ width: 525px;
+ height: 57px;
+ padding-left: 15px;
+ margin-bottom: 10px;
+ border: 1px solid #03355C; /* dunkelblauer Rahmen */
+ border-radius: 30px; /* Runde Ecken für Eingabefelder */
+ box-sizing: border-box;
+ font-family: "DM Sans", sans-serif;
+ font-size: 20px;
+ color: #03355C;
+ }
-#registrierenButton {
- background-color: #FB7300; /* Orange Farbe */
- font-family: "DM Sans", sans-serif, bold;
- font-size: 26px;
- color: white;
- border: none;
- border-radius: 50px;
- padding: 10px 20px;
- cursor: pointer;
- width: 242px;
- height: 55px;
- margin: 30px;
-}
+ .form-text-registrieren {
+ text-align: left;
+ font-size: 20px;
+ margin-top: 5px;
+ margin-bottom: 15px;
+ color: #03355C; /* Dunkelblauer Text */
+ padding-left: 90px; /* Gleiche Einrückung wie das Eingabefeld */
+ }
-#registrierenButton:hover {
- background-color: #e36c20; /* Etwas dunkleres Orange bei Hover */
-}
- /*Meine Reisen*/
+ #registrierenButton {
+ background-color: #FB7300; /* Orange Farbe */
+ font-family: "DM Sans", sans-serif, bold;
+ font-size: 26px;
+ color: white;
+ border: none;
+ border-radius: 50px;
+ padding: 10px 20px;
+ cursor: pointer;
+ width: 242px;
+ height: 55px;
+ margin: 30px;
+ }
+
+ #registrierenButton:hover {
+ background-color: #e36c20; /* Etwas dunkleres Orange bei Hover */
+ }
+
+/*Meine Reisen*/
/* Sidebar */
-.sidebar {
- background-color: #f1f4f9;
- width: 322px;
- padding: 20px;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-}
+ .container-meineReisen {
+ display: flex;
+ }
+ .sidebar {
+ background-color: #f1f4f9;
+ width: 322px;
+ padding: 20px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: flex-start;
+ box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+ height: 100vh;
+ }
-.back-button {
- background: none;
- border: none;
- font-size: 30px;
- color: #03355C;
- cursor: pointer;
- margin-bottom: 20px;
-}
+ .backButton {
+ background: none;
+ border: none;
+ font-size: 30px;
+ color: #03355C;
+ cursor: pointer;
+ margin-bottom: 20px;
+ }
-.greeting {
- font-family: 'DM Sans', sans-serif;
- color: #03355C;
- font-size: 26px;
- margin-bottom: 40px;
-}
+ .greeting {
+ margin-top: 20px;
+ font-family: 'DM Sans', sans-serif;
+ color: #03355C;
+ font-size: 26px;
+ margin-bottom: 20px;
+ }
-.menu ul {
- list-style: none;
- padding: 0;
- width: 100%;
-}
+ .menu ul {
+ list-style: none;
+ padding: 0;
+ width: 100%;
+ }
-.menu li {
- margin-bottom: 15px;
-}
+ .menu li {
+ margin-bottom: 15px;
+ }
-.menu a {
- font-family: 'DM Sans', sans-serif;
- text-decoration: none;
- color: #03355C;
- font-size: 20px;
-}
+ .menu a {
+ font-family: 'DM Sans', sans-serif;
+ text-decoration: none;
+ color: #03355C;
+ font-size: 20px;
+ }
- /* Main Content */
-.content {
- flex-grow: 1;
- padding: 20px;
- background-color: #ffffff;
- overflow-y: auto;
+ /* Main Content */
+
+ .content {
+ flex-grow: 1;
+ padding: 20px;
+ background-color: #ffffff;
+ overflow-y: auto;
+ margin-top:100px
+ }
+
+ h2 {
+ font-family: 'Cy Grotesk Wide';
+ font-size: 34px;
+ color: #03355C;
+ margin-bottom: 20px;
+ margin-top: 100px;
+ }
+
+ .trip-card {
+ width: 662px;
+ height: 163px;
+ display: flex;
+ align-items: center;
+ background-color: #FCF3E4;
+ border-radius: 30px;
+ padding: 15px;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+
+ .trip-card img {
+ width: 246px;
+ height: 163px;
+ border-radius: 30px;
+ margin-right: 15px;
+ object-fit: cover;
+ }
+
+ .trip-info {
+ font-family: 'DM Sans', sans-serif;
+ color: #03355C;
+ font-size: 20px;
+ flex-grow: 1;
+ }
+
+ h3 {
+ font-family: 'dM Sans', sans-serif;
+ font-size: 34px;
+ margin: 0;
+ color: #03355C;
+ }
+
+ .details-button, .report-button {
+ margin-top: 10px;
+ padding: 10px 15px;
+ font-family: 'dm sans', sans-serif, bold;
+ font-size: 20px;
+ border: none;
+ border-radius: 50px;
+ cursor: pointer;
+ }
+
+ .details-button {
+ background-color: #FB7300;
+ color: #fff;
+ }
+
+ .report-button {
+ background-color: #FCF3E4;
+ color: #03355C;
+ border: 1px solid #FB7300;
+ margin-left: 10px;
+ }
+
+/*Profil*/
+/*Main Body*/
+.profil-container {
+ max-width: 600px;
+ margin: 50px auto;
}
-h2 {
+h1 {
+ text-align: center;
font-family: 'Cy Grotesk Wide';
font-size: 34px;
color: #03355C;
- margin-bottom: 20px;
}
-.trip-card {
- width: 662px;
- height: 163px;
- display: flex;
- align-items: center;
+.profil-card {
+ width: 644px;
+ height: auto; /* Automatische Höhe für dynamische Inhalte */
background-color: #FCF3E4;
- border-radius: 30px;
- padding: 15px;
- margin-bottom: 20px;
+ padding: 50px;
+ border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
-.trip-card img {
- width: 246px;
- height: 163px;
- border-radius: 30px;
- margin-right: 15px;
- object-fit: cover;
+.section {
+ margin-bottom: 20px;
}
-.trip-info {
+h2 {
+ margin-bottom: 10px;
font-family: 'DM Sans', sans-serif;
+ font-weight: bold;
color: #03355C;
- font-size: 20px;
- flex-grow: 1;
+ font-size: 26px;
}
-h3 {
- font-family: 'dM Sans', sans-serif;
- font-size: 34px;
- margin: 0;
- color: #03355C;
+.row {
+ display: flex;
+ justify-content: space-between; /* Platz zwischen den Spans */
+ align-items: center; /* Zentriere den Text vertikal */
+ padding: 5px 0;
}
-.details-button, .report-button {
- margin-top: 10px;
- padding: 10px 15px;
- font-family: 'dm sans', sans-serif, bold;
- font-size: 20px;
- border: none;
- border-radius: 50px;
- cursor: pointer;
+.row span {
+ display: inline-block; /* Stellt sicher, dass Spans korrekt dargestellt werden */
+ white-space: nowrap; /* Verhindert, dass Inhalte umbrechen */
}
-.details-button {
- background-color: #FB7300;
- color: #fff;
-}
+.row span:first-child {
+ font-family: 'DM Sans', sans-serif;
+ font-size: 20px;
+ color: #03355C;
+ flex: 1; /* Erlaubt dynamische Breite */
+ }
-.report-button {
- background-color: #FCF3E4;
+.row span:last-child {
+ font-family: 'DM Sans', sans-serif;
+ font-size: 20px;
color: #03355C;
- border: 1px solid #FB7300;
- margin-left: 10px;
+ text-align: right; /* Richtet den Text am rechten Rand aus */
+ flex: 1; /* Erlaubt dynamische Breite */
}
-/*Profil*/
-
-/* Sidebar */
-.sidebar {
- background-color: #f1f4f9;
- width: 322px;
- padding: 20px;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+.row:last-child {
+ border-bottom: none;
}
-.back-button {
- background: none;
- border: none;
- font-size: 30px;
- color: #03355C;
- cursor: pointer;
- margin-bottom: 20px;
-}
+/*AboutUs*/
-.greeting {
- font-family: 'DM Sans', sans-serif;
+ /* Allgemein */
+ body {
+ margin: 0;
+ font-family: DM Sans, sans-serif;
+ font-size: 20px;
+ line-height: 1.6;
+ color: #03355C;
+ }
+
+ h1 {
+ margin: 0;
+ font-family: "Cy Grotesk Wide";
+ font-size: 43px;
color: #03355C;
- font-size: 26px;
- margin-bottom: 40px;
-}
+ text-align: left;
+ }
-.menu ul {
- list-style: none;
- padding: 0;
- width: 100%;
-}
+ h2 {
+ margin: 0;
+ font-family: "dM Sans", sans-serif;
+ font-size: 26px;
+ color: #03355C;
+ }
-.menu li {
- margin-bottom: 15px;
-}
+ /* Header Hero-Bereich */
+ .hero {
+ position: relative;
+ width: 100%;
+ height: 400px;
+ overflow: hidden;
+ }
-.menu a {
- font-family: 'DM Sans', sans-serif;
- text-decoration: none;
- color: #03355C;
- font-size: 20px;
-}
+ .hero-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
-/*Main Body*/
- .profil-container {
- max-width: 600px;
- margin: 50px auto;
- padding: 20px;
- }
- h1 {
- text-align: center;
- font-family: 'Cy Grotesk Wide';
- font-size: 34px;
- color: #03355C;
- }
+ /* About Section */
- .profil-card {
- width: 644px;
- height: auto; /* Automatische Höhe für dynamische Inhalte */
- background-color: #FCF3E4;
- padding: 20px;
- border-radius: 10px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- }
+ .about-section {
+ padding: 50px;
+ justify-content: left;
+ align-items: center;
+ gap: 30px;
+ }
- .section {
- margin-bottom: 20px;
- }
+ .about-container {
+ max-width: 1200px;
+ display: flex;
+ gap: 30px;
+ align-items: center;
+ }
- h2 {
- margin-bottom: 10px;
- font-family: 'DM Sans', sans-serif;
- font-weight: bold;
- color: #03355C;
- font-size: 26px;
- }
+ .text-box {
+ background-color: #FCF3E4;
+ padding: 20px;
+ border-radius: 10px;
+ margin-bottom: 20px;
- .row {
- display: flex;
- justify-content: space-between; /* Platz zwischen den Spans */
- align-items: center; /* Zentriere den Text vertikal */
- padding: 5px 0;
- }
+ }
- .row span {
- display: inline-block; /* Stellt sicher, dass Spans korrekt dargestellt werden */
- white-space: nowrap; /* Verhindert, dass Inhalte umbrechen */
- }
+ .text-block {
+ max-width: 500px;
+ }
- .row span:first-child {
- font-family: 'DM Sans', sans-serif;
- font-size: 20px;
- color: #03355C;
- flex: 1; /* Erlaubt dynamische Breite */
- }
+ .about-image {
+ width: 473px;
+ height: 275px;
+ margin-left: 50px ;
+ border-radius: 30px;
- .row span:last-child {
- font-family: 'DM Sans', sans-serif;
- font-size: 20px;
- color: #03355C;
- text-align: right; /* Richtet den Text am rechten Rand aus */
- flex: 1; /* Erlaubt dynamische Breite */
- }
+ }
- .row:last-child {
- border-bottom: none;
- }
- .hero {
- position: relative;
- text-align: right;
- color: white;
- padding-bottom: 200px;
+/*Philosophy Section*/
+
+ .philosophy-section {
+ padding: 50px;
+ display: flex;
+ justify-content: right;
+ align-items: center;
+ gap: 30px;
}
- .hero-image {
- width: 100%;
- height: auto;
+.philosophy-container {
+ max-width: 100%;
+ display: flex;
+ gap: 30px;
+ align-items: center;
}
- .hero-text {
+ .text-box-philosophie {
+ background-color: #FCF3E4;
+ padding: 20px;
+ border-radius: 10px;
+ margin-bottom: 20px;
+
+ }
+
+ .text-block {
+ max-width: 500px;
+ }
+
+.philosophy-image {
+ width: 473px;
+ height: 275px;
+ border-radius: 30px;
+ }
+
+
+ /* Testimonials Section */
+ .testimonials {
+ padding: 50px;
+ background-color: #FCF3E4;
+ width: 1220px;
+ height:495px;
+ border-radius: 60px;
+ margin-bottom: 20px;
+
+ }
+
+ .testimonials h2 {
+ font-family: 'DM Sans', sans-serif;
+ font-size: 26px;
color: #03355C;
- position: absolute;
- top: 30%;
- left: 80%;
- transform: translate(-50%, -50%);
- white-space: nowrap; /* Verhindert Zeilenumbrüche */
+ margin-bottom: 30px;
+
+
}
- #hero-button {
- background-color: #fb7300;
- color: #ffffff;
- border: none;
- border-radius: 50px;
- margin-left: 10px;
- cursor: pointer;
+ .testimonial {
+ background: white;
+ margin: 20px auto;
+ padding: 20px;
+ max-width: 600px;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ position:relative;
+ left: -250px;
}
- #hero-button:hover {
- background-color: #e36c20 /* Dunkleres Orange bei Hover */
+ .stars {
+ color: #ff9900;
+ margin-bottom: 10px;
+
}
-/* Horizon Changers Section */
-.horizon-changers-opening {
- background-color: #f5f9ff; /* Heller Hintergrund */
- padding: 60px 20px; /* Abstand innen */
- text-align: center; /* Zentriert den Text */
-}
+ .name {
+ font-weight: bold;
+ margin-top: 0;
+ font-family: 'DM Sans', sans-serif;
+ font-size: 20px;
+ color: #03355C;
-.horizon-changers-opening-container {
- max-width: 900px; /* Maximale Breite für den Textbereich */
- margin: 0 auto; /* Zentriert den Container */
- position: absolute;
- left: 50%;
- transform: translate(-50%, -50%);
+ }
-}
+ .quote {
+ margin: 10px 0;
+ font-family: 'DM Sans', sans-serif;
+ font-size: 20px;
+ color: #03355C;
-.horizon-changers-opening-title {
- font-family: Cy Grotesk Wide;
- font-size: 43px; /* Schriftgröße */
- color: #03355c; /* Dunkelblau */
- margin-bottom: 20px; /* Abstand nach unten */
- margin-top: 60px;
- display: flex;
- justify-content: center; /* Zentriert horizontal */
- align-items: center; /* Zentriert vertikal */
+ }
-}
+ .hero {
+ position: relative;
+ text-align: right;
+ color: white;
+ }
-.horizon-changers-description {
- font-family: "DM Sans", sans-serif; /* Standardschriftart */
- font-size: 1.2rem; /* Schriftgröße für den Absatz */
- color: #03355c; /* Dunkelblau */
- margin-bottom: 40px; /* Abstand nach unten */
- line-height: 1.6; /* Zeilenhöhe für Lesbarkeit */
- display: flex;
- justify-content: center; /* Zentriert horizontal */
- align-items: center; /* Zentriert vertikal */
- text-align: center;
- white-space: nowrap; /* Verhindert Zeilenumbrüche */
-}
+ .hero-image {
+ width: 100%;
+ height: auto;
+ }
-.horizon-changers-button {
- background-color: #fb7300;
- color: #ffffff;
- font-family: "DM Sans", sans-serif; /* Button-Schriftart */
- font-size: 26px; /* Schriftgröße */
- padding: 12px 25px; /* Innenabstand */
- border: none; /* Keine Umrandung */
- border-radius: 30px; /* Runde Kanten */
- cursor: pointer; /* Zeigt Klickbarkeit an */
- align-items: center;
-}
+ .hero-text {
+ color: #03355C;
+ position: absolute;
+ top: 30%;
+ left: 80%;
+ transform: translate(-50%, -50%);
+ white-space: nowrap; /* Verhindert Zeilenumbrüche */
+ }
-.horizon-changers-button:hover {
- background-color: #e36c20
-} /* Dunkleres Orange bei Hover */
+ #hero-button {
+ background-color: #fb7300;
+ color: #ffffff;
+ border: none;
+ border-radius: 50px;
+ margin-left: 10px;
+ cursor: pointer;
-.page {
- display: none;
-}
+ }
-.active {
- display: block;
-}
-}
\ No newline at end of file
+ #hero-button:hover {
+ background-color: #e36c20 /* Dunkleres Orange bei Hover */
+ }
+
+ /* Horizon Changers Section */
+
+ .horizon-changers-opening {
+ background-color: #f5f9ff; /* Heller Hintergrund */
+ padding: 60px 20px; /* Abstand innen */
+ text-align: center; /* Zentriert den Text */
+ }
+
+ .horizon-changers-opening-container {
+ max-width: 900px; /* Maximale Breite für den Textbereich */
+ margin: 0 auto; /* Zentriert den Container */
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ }
+
+ .horizon-changers-opening-title {
+ font-family: Cy Grotesk Wide;
+ font-size: 43px; /* Schriftgröße */
+ color: #03355c; /* Dunkelblau */
+ margin-bottom: 20px; /* Abstand nach unten */
+ margin-top: 60px;
+ display: flex;
+ justify-content: center; /* Zentriert horizontal */
+ align-items: center; /* Zentriert vertikal */
+
+ }
+
+ .horizon-changers-description {
+ font-family: "DM Sans", sans-serif; /* Standardschriftart */
+ font-size: 1.2rem; /* Schriftgröße für den Absatz */
+ color: #03355c; /* Dunkelblau */
+ margin-bottom: 40px; /* Abstand nach unten */
+ line-height: 1.6; /* Zeilenhöhe für Lesbarkeit */
+ display: flex;
+ justify-content: center; /* Zentriert horizontal */
+ align-items: center; /* Zentriert vertikal */
+ text-align: center;
+ white-space: nowrap; /* Verhindert Zeilenumbrüche */
+ }
+
+ .horizon-changers-button {
+ background-color: #fb7300;
+ color: #ffffff;
+ font-family: "DM Sans", sans-serif; /* Button-Schriftart */
+ font-size: 26px; /* Schriftgröße */
+ padding: 12px 25px; /* Innenabstand */
+ border: none; /* Keine Umrandung */
+ border-radius: 30px; /* Runde Kanten */
+ cursor: pointer; /* Zeigt Klickbarkeit an */
+ align-items: center;
+ }
+
+ .horizon-changers-button:hover {
+ background-color: #e36c20
+ }
+
+ /* Dunkleres Orange bei Hover */
+
+ .page {
+ display: none;
+ }
+
+ .active {
+ display: block;
+ }
+ }
\ No newline at end of file
diff --git a/userman_all/server/src/server.ts b/userman_all/server/src/server.ts
index ad6fa915e4b5b534644bb3ada0a2d55585ce7f94..55b7eed42096a04a0080aac07f9dc983ca3d1c77 100644
--- a/userman_all/server/src/server.ts
+++ b/userman_all/server/src/server.ts
@@ -81,7 +81,18 @@ export interface User {
* "message":"Session expired, please log in again."
* }
*/
-
+function isLoggedIn(req: Request, res: Response, next: NextFunction) {
+ // Abstract middleware route for checking login state of the user
+ if (req.session.user != null) {
+ // User has an active session and is logged in, continue with route
+ next();
+ } else {
+ // User is not logged in
+ res.status(401).send({
+ message: 'Session expired, please log in again',
+ });
+ }
+}
/*****************************************************************************
* HTTP ROUTES: LOGIN *
@@ -115,7 +126,7 @@ export interface User {
* "message":"Session expired, please log in again."
* }
*/
-app.get('/login', (req: Request, res: Response): void => {
+app.get('/login', isLoggedIn, (req: Request, res: Response): void => {
res.status(200).send({
message: 'User still logged in',
user: req.session.user, // Send user object to client for greeting message
@@ -195,11 +206,12 @@ app.post('/login', async (req: Request, res: Response): Promise<void> => {
res.status(200).send({
message: 'Erfolgreich eingeloggt :)!',
user: user, // Send user object to client for greeting message
+
});
} else {
// Login data is incorrect
res.status(401).send({
- message: 'Passwort und/oder Email stimmen nicht überein.',
+ message: 'Passwort und/oder Email stimmt/stimmen nicht.',
});
}
} catch (error: unknown) {
@@ -223,14 +235,13 @@ app.post('/login', async (req: Request, res: Response): Promise<void> => {
* message: "Successfully logged out"
* }
*/
-app.post('/logout', (req: Request, res: Response): void => {
+app.post('/logout', isLoggedIn, (req: Request, res: Response): void => {
// Log out user
req.session.user = undefined; // Delete user from session
res.status(200).send({
message: 'Erfolgreich ausgeloggt! Bis zum nächsten mal :)',
});
});
-
/*****************************************************************************
* HTTP ROUTES: USER, USERS *
*****************************************************************************/
@@ -335,7 +346,7 @@ app.post('/user', async (req: Request, res: Response): Promise<void> => {
* "message":"The requested user can not be found."
* }
*/
-app.get('/user/:userId', async (req: Request, res: Response): Promise<void> => {
+app.get('/user/:userId', isLoggedIn, async (req: Request, res: Response): Promise<void> => {
// Read data from request parameters
const data: [number] = [
parseInt(req.params.userId)
@@ -405,7 +416,7 @@ app.get('/user/:userId', async (req: Request, res: Response): Promise<void> => {
* "message":"The user to update could not be found"
* }
*/
-app.put('/user/:userId', async (req: Request, res: Response): Promise<void> => {
+app.put('/user/:userId', isLoggedIn, async (req: Request, res: Response): Promise<void> => {
// Read data from request
const userId: number = parseInt(req.params.userId);
const firstName: string = req.body.firstName;
@@ -460,7 +471,7 @@ app.put('/user/:userId', async (req: Request, res: Response): Promise<void> => {
* "message":"Successfully deleted user ..."
* }
*/
-app.delete('/user/:userId', async (req: Request, res: Response): Promise<void> => {
+app.delete('/user/:userId', isLoggedIn, async (req: Request, res: Response): Promise<void> => {
// Read data from request
const userId: number = parseInt(req.params.userId);
// Delete user
@@ -512,7 +523,7 @@ app.delete('/user/:userId', async (req: Request, res: Response): Promise<void> =
* "message":"Successfully requested user list"
* }
*/
-app.get('/users', async (req: Request, res: Response): Promise<void> => {
+app.get('/users', isLoggedIn, async (req: Request, res: Response): Promise<void> => {
// Send user list to client
const query: string = 'SELECT * FROM user;';