Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChristianHohlfeld
ChristianHohlfeld authored Nov 20, 2024
1 parent df55b1f commit 83835c2
Showing 1 changed file with 145 additions and 133 deletions.
278 changes: 145 additions & 133 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
<!-- Navbar start: Logo -->
<a href="/" class="btn btn-ghost normal-case text-xl">skillcoins.de</a>

<!-- Navbar end: Dark Mode Toggle und Logout Button -->
<!-- Navbar end: Dark Mode Toggle und Auth Buttons -->
<div class="flex items-center space-x-4">
<!-- Dark Mode Toggle (Swap Component) -->
<label class="swap swap-rotate">
Expand All @@ -128,167 +128,179 @@
</svg>
</label>

<!-- Login Button (nur sichtbar, wenn nicht eingeloggt) -->
<button id="keycloak-login" class="btn btn-primary">Login</button>

<!-- Logout Button (nur sichtbar, wenn eingeloggt) -->
<button id="keycloak-logout" class="btn btn-secondary hidden">Logout</button>
</div>
</div>
</header>
</header>

<!-- Hero Section -->
<main class="container mx-auto my-10">
<div class="hero bg-base-100 shadow-lg p-10 rounded-lg">
<div class="hero-content text-center">
<div>
<h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
<p class="py-6 text-lg">Lerne, sammle Punkte und verdiene digitale Belohnungen!</p>
<!-- Hero Section -->
<main class="container mx-auto my-10">
<div class="hero bg-base-100 shadow-lg p-10 rounded-lg">
<div class="hero-content text-center">
<div>
<h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
<p class="py-6 text-lg">Lerne, sammle Punkte und verdiene digitale Belohnungen!</p>

<!-- CTA - Registrieren Button -->
<div id="cta-container">
<button id="register-button" class="btn btn-primary">Registrieren</button>
<!-- CTA - Registrieren Button -->
<div id="cta-container">
<button id="register-button" class="btn btn-primary">Registrieren</button>
</div>
</div>
</div>
</div>
</div>

<!-- Status -->
<div id="status-container" class="alert alert-info mt-6 hidden">
<span id="status" class="text-gray-600">Nicht eingeloggt.</span>
</div>
</main>
<!-- Status -->
<div id="status-container" class="alert alert-info mt-6 hidden">
<span id="status" class="text-gray-600">Nicht eingeloggt.</span>
</div>
</main>

<!-- Footer -->
<footer class="footer footer-center p-4 bg-gray-800 text-white">
<div>
<p>© 2024 skillcoins.de. Alle Rechte vorbehalten.</p>
</div>
</footer>
<!-- Footer -->
<footer class="footer footer-center p-4 bg-gray-800 text-white">
<div>
<p>© 2024 skillcoins.de. Alle Rechte vorbehalten.</p>
</div>
</footer>

<!-- Scripts -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const registerButton = document.getElementById('register-button');
const logoutButton = document.getElementById('keycloak-logout');
const themeToggleCheckbox = document.getElementById('theme-toggle-checkbox');
const lightIcon = document.getElementById('theme-toggle-light-icon');
const darkIcon = document.getElementById('theme-toggle-dark-icon');
const statusContainer = document.getElementById('status-container');
const statusText = document.getElementById('status');
const apiUrl = 'https://resourceserver.de/v1/graphql'; // Hasura GraphQL endpoint
<!-- Scripts -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const registerButton = document.getElementById('register-button');
const loginButton = document.getElementById('keycloak-login');
const logoutButton = document.getElementById('keycloak-logout');
const themeToggleCheckbox = document.getElementById('theme-toggle-checkbox');
const lightIcon = document.getElementById('theme-toggle-light-icon');
const darkIcon = document.getElementById('theme-toggle-dark-icon');
const statusContainer = document.getElementById('status-container');
const statusText = document.getElementById('status');
const apiUrl = 'https://resourceserver.de/v1/graphql'; // Hasura GraphQL endpoint

// Initialize Keycloak
const keycloak = new Keycloak({
url: 'https://identityserver.de', // Keycloak server URL
realm: 'fakturaservice', // Keycloak realm
clientId: 'skillcoins-frontend', // Keycloak client ID
});
// Initialize Keycloak
const keycloak = new Keycloak({
url: 'https://identityserver.de', // Keycloak server URL
realm: 'fakturaservice', // Keycloak realm
clientId: 'skillcoins-frontend', // Keycloak client ID
});

// Funktion zum Überprüfen des Tokens im localStorage
function checkToken() {
const token = localStorage.getItem('keycloak-token');
if (token) {
keycloak.token = token;
keycloak.authenticated = true;
updateUIOnLogin();
} else {
keycloak.authenticated = false;
updateUIOnLogout();
// Funktion zum Überprüfen des Tokens im localStorage
function checkToken() {
const token = localStorage.getItem('keycloak-token');
if (token) {
keycloak.token = token;
keycloak.authenticated = true;
updateUIOnLogin();
} else {
keycloak.authenticated = false;
updateUIOnLogout();
}
}
}

// UI aktualisieren für eingeloggt Zustand
function updateUIOnLogin() {
registerButton.classList.add('hidden');
logoutButton.classList.remove('hidden');
statusContainer.classList.remove('alert-info', 'hidden');
statusText.textContent = 'Eingeloggt.';
}

// UI aktualisieren für ausgeloggt Zustand
function updateUIOnLogout() {
registerButton.classList.remove('hidden');
logoutButton.classList.add('hidden');
statusContainer.classList.remove('alert-success', 'alert-error');
statusContainer.classList.add('alert-info', 'hidden');
statusText.textContent = 'Nicht eingeloggt.';
}

// Dark Mode Toggle Funktionalität
function applyTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
if (theme === 'dark') {
darkIcon.classList.remove('hidden');
lightIcon.classList.add('hidden');
themeToggleCheckbox.checked = true;
} else {
darkIcon.classList.add('hidden');
lightIcon.classList.remove('hidden');
themeToggleCheckbox.checked = false;
// UI aktualisieren für eingeloggt Zustand
function updateUIOnLogin() {
registerButton.classList.add('hidden');
loginButton.classList.add('hidden');
logoutButton.classList.remove('hidden');
statusContainer.classList.remove('alert-info', 'hidden');
statusText.textContent = 'Eingeloggt.';
}
}

// Überprüfen und Anwenden des Themes basierend auf localStorage oder Systempräferenz
function initializeTheme() {
const storedTheme = localStorage.getItem('theme');
if (storedTheme) {
applyTheme(storedTheme);
} else {
// Falls kein gespeichertes Theme vorhanden ist, das System-Theme verwenden
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
applyTheme(prefersDark ? 'dark' : 'cupcake');
// UI aktualisieren für ausgeloggt Zustand
function updateUIOnLogout() {
registerButton.classList.remove('hidden');
loginButton.classList.remove('hidden');
logoutButton.classList.add('hidden');
statusContainer.classList.remove('alert-success', 'alert-error');
statusContainer.classList.add('alert-info', 'hidden');
statusText.textContent = 'Nicht eingeloggt.';
}
}

// Event Listener für den Dark Mode Toggle Button
themeToggleCheckbox.addEventListener('change', function () {
if (this.checked) {
applyTheme('dark');
localStorage.setItem('theme', 'dark');
} else {
applyTheme('cupcake');
localStorage.setItem('theme', 'cupcake');
// Dark Mode Toggle Funktionalität
function applyTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
if (theme === 'dark') {
darkIcon.classList.remove('hidden');
lightIcon.classList.add('hidden');
themeToggleCheckbox.checked = true;
} else {
darkIcon.classList.add('hidden');
lightIcon.classList.remove('hidden');
themeToggleCheckbox.checked = false;
}
}
});

// Initialisieren des Themes beim Laden der Seite
initializeTheme();

// Initialisierung von Keycloak ohne automatische Weiterleitung
keycloak.init({
checkLoginIframe: false,
onLoad: 'check-sso' // Überprüft, ob eine Sitzung besteht, ohne zum Login zu zwingen
}).then(function (authenticated) {
if (authenticated) {
localStorage.setItem('keycloak-token', keycloak.token);
updateUIOnLogin();
} else {
checkToken();
// Überprüfen und Anwenden des Themes basierend auf localStorage oder Systempräferenz
function initializeTheme() {
const storedTheme = localStorage.getItem('theme');
if (storedTheme) {
applyTheme(storedTheme);
} else {
// Falls kein gespeichertes Theme vorhanden ist, das System-Theme verwenden
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
applyTheme(prefersDark ? 'dark' : 'cupcake');
}
}

// Event Listener für den Registrieren-Button
registerButton.addEventListener('click', function () {
if (!keycloak.authenticated) {
keycloak.register();
// Event Listener für den Dark Mode Toggle Button
themeToggleCheckbox.addEventListener('change', function () {
if (this.checked) {
applyTheme('dark');
localStorage.setItem('theme', 'dark');
} else {
applyTheme('cupcake');
localStorage.setItem('theme', 'cupcake');
}
});

// Event Listener für den Logout-Button
logoutButton.addEventListener('click', function () {
if (keycloak.authenticated) {
keycloak.logout().then(() => {
localStorage.removeItem('keycloak-token');
keycloak.authenticated = false;
updateUIOnLogout();
});
// Initialisieren des Themes beim Laden der Seite
initializeTheme();

// Initialisierung von Keycloak ohne automatische Weiterleitung
keycloak.init({
checkLoginIframe: false,
onLoad: 'check-sso' // Überprüft, ob eine Sitzung besteht, ohne zum Login zu zwingen
}).then(function (authenticated) {
if (authenticated) {
localStorage.setItem('keycloak-token', keycloak.token);
updateUIOnLogin();
} else {
checkToken();
}

// Event Listener für den Registrieren-Button
registerButton.addEventListener('click', function () {
if (!keycloak.authenticated) {
keycloak.register();
}
});

// Event Listener für den Login-Button
loginButton.addEventListener('click', function () {
if (!keycloak.authenticated) {
keycloak.login();
}
});

// Event Listener für den Logout-Button
logoutButton.addEventListener('click', function () {
if (keycloak.authenticated) {
keycloak.logout().then(() => {
localStorage.removeItem('keycloak-token');
keycloak.authenticated = false;
updateUIOnLogout();
});
}
});
}).catch(function (err) {
console.error('Fehler bei der Initialisierung von Keycloak:', err);
});
}).catch(function (err) {
console.error('Fehler bei der Initialisierung von Keycloak:', err);
});

// Überprüfen des Tokens beim Laden der Seite
checkToken();
});
</script>
// Überprüfen des Tokens beim Laden der Seite
checkToken();
});
</script>

</body>

Expand Down

0 comments on commit 83835c2

Please sign in to comment.