From ddb2b4af9f7a8938b3fdb103df4ed98325bcab87 Mon Sep 17 00:00:00 2001 From: MarcWieland Date: Tue, 9 Jun 2026 00:15:06 +0200 Subject: [PATCH 1/2] Neue agb seite implementiert --- .../Components/Layout/MainLayout.razor | 16 +- timetracker.Client/Components/Pages/Agb.razor | 139 ++++++++++++++++++ .../Components/Pages/Changelog.razor | 2 +- .../Components/Pages/Login.razor | 13 +- 4 files changed, 164 insertions(+), 6 deletions(-) create mode 100644 timetracker.Client/Components/Pages/Agb.razor diff --git a/timetracker.Client/Components/Layout/MainLayout.razor b/timetracker.Client/Components/Layout/MainLayout.razor index 61f2632..0b214b4 100644 --- a/timetracker.Client/Components/Layout/MainLayout.razor +++ b/timetracker.Client/Components/Layout/MainLayout.razor @@ -13,7 +13,11 @@ - + + + + + - - - + + + + + + + diff --git a/timetracker.Client/Components/Pages/Agb.razor b/timetracker.Client/Components/Pages/Agb.razor new file mode 100644 index 0000000..427a80c --- /dev/null +++ b/timetracker.Client/Components/Pages/Agb.razor @@ -0,0 +1,139 @@ +@page "/agb" +@rendermode InteractiveWebAssembly +@attribute [AllowAnonymous] + +AGB – Timetracker + + + + + @* ── Header ── *@ + + + + + Allgemeine Geschäftsbedingungen (AGB) + + Rechtlich absolut unverbindliches Kauderwelsch und Flachwitze + + + + + + @* ── Paragraphs with Flachwitze ── *@ + + + + § 1 Geltungsbereich & Transparenz + + + Diese Bedingungen gelten für die gesamte Nutzung dieses Zeiterfassungs-Tools. Transparenz ist uns extrem wichtig. + + + Warum können Geister eigentlich so schlecht lügen?
+ Weil sie einfach extrem leicht zu durchschauen sind! + + + + + + + + § 2 Pflichten des Nutzers & Gärtnerklauseln + + + Jeder Nutzer verpflichtet sich, seine Arbeitszeiten wahrheitsgemäß und pünktlich einzutragen. Bei Zuwiderhandlung behalten wir uns vor, den Garten des Nutzers aufzuräumen. + + + Was sagt ein Gärtner, wenn er seinen Arbeitsplatz vorzeitig verlässt?
+ "Ich mach mich dann mal vom Acker!" + + + + + + + + § 3 Haftungsausschluss & Straßenverkehr + + + Wir übernehmen keinerlei Haftung für vergessene Pausenzeiten, verpasste Feierabende oder schlechtes Wetter. + + + Was ist rot, rund und steht am Straßenrand?
+ Eine Spargelampel!

+ Und warum dürfen Bienen eigentlich nicht in die Kirche?
+ Weil sie in der Sekte sind! + + + + + + + + § 4 Datensicherheit & Physikalische Grundgesetze + + + Ihre Daten werden nach modernsten Verschlüsselungsstandards (nicht) an Dritte weitergegeben. Unsere Magnetbänder sind streng gesichert. + + + Treffen sich zwei Magnete im Rechenzentrum. Sagt der eine ganz verzweifelt:
+ "Du, sag mal... Was soll ich heute bloß anziehen?" + + + + + + + + § 5 Rückgaberecht & Büroalltag + + + Erfasste Arbeitszeiten können nicht zurückgenommen, umgetauscht oder bar ausgezahlt werden. + + + Was macht ein gelangweilter Clown im Büro?
+ Er macht Faxen!

+ Und warum steht ein einsamer Pilz mitten im tiefen Wald?
+ Weil die Tannen zapfen! + + + + + + + + § 6 Schlussbestimmungen & Salatgesetze + + + Sollten einzelne Bestimmungen dieser AGB unwirksam sein, bleibt die Fröhlichkeit aller anderen Bestimmungen unberührt. + + + Wie nennt man ein plötzlich spurlos verschwundenes Stück Rindfleisch?
+ Gulasch!

+ Was ist grün, gesund und klopft nachts an die Haustür?
+ Ein Klopfsalat!

+ Und zu guter Letzt: Warum fliegen Vögel im Winter eigentlich nach Süden?
+ Weil es zu Fuß einfach viel zu weit wäre! + + + + + @* ── Back Button ── *@ + + + Zurück zur Anmeldung + + + + + + +@code { + [Inject] private NavigationManager Nav { get; set; } = default!; + + private void GoBack() + { + Nav.NavigateTo("/login"); + } +} diff --git a/timetracker.Client/Components/Pages/Changelog.razor b/timetracker.Client/Components/Pages/Changelog.razor index 49d4603..95a81e9 100644 --- a/timetracker.Client/Components/Pages/Changelog.razor +++ b/timetracker.Client/Components/Pages/Changelog.razor @@ -1,6 +1,6 @@ @page "/changelog" @rendermode InteractiveWebAssembly -@attribute [Authorize] +@attribute [AllowAnonymous] Changelog – Timetracker diff --git a/timetracker.Client/Components/Pages/Login.razor b/timetracker.Client/Components/Pages/Login.razor index 93d765b..1c004e1 100644 --- a/timetracker.Client/Components/Pages/Login.razor +++ b/timetracker.Client/Components/Pages/Login.razor @@ -107,6 +107,11 @@ Required="true" HelperText="Mindestens 6 Zeichen" /> + + + Ich akzeptiere die AGB. + + + Disabled="_loading || !_acceptAgb"> @if (_loading) { @@ -134,6 +139,7 @@ private string? _error; private bool _loading; private string _honeypot = ""; + private bool _acceptAgb; private readonly AuthModel _loginModel = new(); private readonly AuthModel _registerModel = new(); @@ -189,6 +195,11 @@ private async Task HandleRegister() { + if (!_acceptAgb) + { + _error = "Du musst die AGB akzeptieren."; + return; + } _loading = true; _error = null; try From 94c10aebdd461dd6a1320ce84d11e626c8daddd1 Mon Sep 17 00:00:00 2001 From: MarcWieland Date: Tue, 9 Jun 2026 00:22:30 +0200 Subject: [PATCH 2/2] Onboarding --- .../Components/Layout/NavMenu.razor | 2 +- .../Components/Layout/NavMenu.razor.css | 36 +++- .../Components/Pages/Changelog.razor | 3 +- .../Components/Pages/Home.razor | 32 +++- .../Components/Pages/Login.razor | 2 + .../Components/Pages/OnboardingTour.razor | 179 ++++++++++++++++++ .../Components/Pages/Settings.razor | 44 +++++ timetracker.Server/Components/App.razor | 28 +++ 8 files changed, 316 insertions(+), 10 deletions(-) create mode 100644 timetracker.Client/Components/Pages/OnboardingTour.razor diff --git a/timetracker.Client/Components/Layout/NavMenu.razor b/timetracker.Client/Components/Layout/NavMenu.razor index f5118f8..eb9121c 100644 --- a/timetracker.Client/Components/Layout/NavMenu.razor +++ b/timetracker.Client/Components/Layout/NavMenu.razor @@ -1,4 +1,4 @@ -
+
@* --- Brand / Logo Section --- *@
diff --git a/timetracker.Client/Components/Layout/NavMenu.razor.css b/timetracker.Client/Components/Layout/NavMenu.razor.css index 0e18fa0..b031195 100644 --- a/timetracker.Client/Components/Layout/NavMenu.razor.css +++ b/timetracker.Client/Components/Layout/NavMenu.razor.css @@ -119,26 +119,54 @@ } /* NavLink active state (Fixes active color contrast issue) */ -::deep .custom-nav-link.active { +::deep .custom-nav-link.active, +::deep .custom-nav-link .active { background: linear-gradient(90deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.04) 100%) !important; font-weight: 600 !important; box-shadow: inset 3px 0 0 #0EA5E9 !important; } ::deep .custom-nav-link.active, +::deep .custom-nav-link .active, ::deep .custom-nav-link.active .mud-nav-link-text, -::deep .custom-nav-link.active .mud-nav-link-icon-default { +::deep .custom-nav-link .active .mud-nav-link-text, +::deep .custom-nav-link.active .mud-nav-link-icon-default, +::deep .custom-nav-link .active .mud-nav-link-icon-default { color: #0EA5E9 !important; /* Sky 500 */ } -/* Admin link color overrides */ +/* Admin link color overrides & active state */ ::deep .admin-link .mud-nav-link-icon-default { color: rgba(239, 68, 68, 0.7) !important; /* Red 500 */ } -::deep .admin-link.active .mud-nav-link-icon-default { + +::deep .admin-link.active, +::deep .admin-link .active { + background: linear-gradient(90deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.04) 100%) !important; + box-shadow: inset 3px 0 0 #EF4444 !important; +} + +::deep .admin-link.active, +::deep .admin-link .active, +::deep .admin-link.active .mud-nav-link-text, +::deep .admin-link .active .mud-nav-link-text, +::deep .admin-link.active .mud-nav-link-icon-default, +::deep .admin-link .active .mud-nav-link-icon-default { color: #EF4444 !important; } +/* Version link active state */ +::deep .version-link.active, +::deep .version-link .active { + opacity: 1 !important; +} + +::deep .version-link.active .version-text, +::deep .version-link .active .version-text { + color: #0EA5E9 !important; +} + + /* Footer Section */ .nav-footer { border-top: 1px solid rgba(255, 255, 255, 0.06); diff --git a/timetracker.Client/Components/Pages/Changelog.razor b/timetracker.Client/Components/Pages/Changelog.razor index 95a81e9..b483fc2 100644 --- a/timetracker.Client/Components/Pages/Changelog.razor +++ b/timetracker.Client/Components/Pages/Changelog.razor @@ -71,8 +71,9 @@ new("1.4", "08.06.2026", true, [ new("Neu", "Timebot implementiert"), + new("Neu", "Onboarding Tour"), new("Upgrade", "Security hardening"), - new("Upgrade", "Changed coloring") + new("Upgrade", "Changed coloring"), ]), new("1.3", "08.06.2026", false, [ diff --git a/timetracker.Client/Components/Pages/Home.razor b/timetracker.Client/Components/Pages/Home.razor index 8dee457..c17a615 100644 --- a/timetracker.Client/Components/Pages/Home.razor +++ b/timetracker.Client/Components/Pages/Home.razor @@ -5,6 +5,7 @@ @inject IHolidayService HolidayService @inject ISnackbar Snackbar @inject AuthenticationStateProvider AuthStateProvider +@inject IJSRuntime JSRuntime KW @_kw – Wochenübersicht – Timetracker @@ -20,7 +21,7 @@ else @* ── Wochen-Header ── *@ - @@ -269,7 +270,7 @@ else } @* ── Wochensumme ── *@ - @@ -306,7 +307,7 @@ else @* ── Gleitzeitkonto ── *@ - = TimeSpan.Zero ? "#4CAF50" : "#FF9800")};")"> @@ -328,6 +329,11 @@ else + + @if (_showOnboarding) + { + + } } @code { @@ -347,6 +353,7 @@ else private TimeSpan _totalOvertime; private Dictionary _holidays = []; private int _holidayYear = -1; + private bool _showOnboarding; private bool IsCurrentWeek => _monday == GetMonday(DateOnly.FromDateTime(DateTime.Today)); @@ -364,9 +371,26 @@ else await Task.WhenAll(loadWeekTask, overtimeTask); _totalOvertime = await overtimeTask; + + try + { + var showOnb = await JSRuntime.InvokeAsync("localStorage.getItem", "showOnboarding"); + _showOnboarding = showOnb == "true"; + } + catch + { + // Ignored during prerendering/SSR + } + _loading = false; } + private async Task HandleOnboardingFinished() + { + _showOnboarding = false; + await JSRuntime.InvokeVoidAsync("localStorage.setItem", "showOnboarding", "false"); + } + private async Task LoadWeek() { Task> holidaysTask; diff --git a/timetracker.Client/Components/Pages/Login.razor b/timetracker.Client/Components/Pages/Login.razor index 1c004e1..9ee1838 100644 --- a/timetracker.Client/Components/Pages/Login.razor +++ b/timetracker.Client/Components/Pages/Login.razor @@ -3,6 +3,7 @@ @attribute [AllowAnonymous] @inject IAuthService AuthService @inject NavigationManager Nav +@inject IJSRuntime JSRuntime Anmelden – Timetracker @@ -207,6 +208,7 @@ var (user, error) = await AuthService.RegisterAsync(_registerModel.Username, _registerModel.Password, _honeypot); if (user != null) { + await JSRuntime.InvokeVoidAsync("localStorage.setItem", "showOnboarding", "true"); Nav.NavigateTo("/", forceLoad: true); } else diff --git a/timetracker.Client/Components/Pages/OnboardingTour.razor b/timetracker.Client/Components/Pages/OnboardingTour.razor new file mode 100644 index 0000000..1082dcd --- /dev/null +++ b/timetracker.Client/Components/Pages/OnboardingTour.razor @@ -0,0 +1,179 @@ +@inject IJSRuntime JS + +@if (_active) +{ + @* Dark Backdrop Overlay *@ +
+ + @* Onboarding Instruction Card *@ +
+ + + + @* Header / Title *@ + + + + @_steps[_currentStep].Title + + + + @* Explanation Text *@ + + @_steps[_currentStep].Content + + + @* Footer / Progress & Buttons *@ + + @* Step Count *@ + + Schritt @(_currentStep + 1) von @_steps.Count + + + @* Navigation Button Stack *@ + + @if (_currentStep > 0) + { + + Zurück + + } + else + { + + Überspringen + + } + + + @(_currentStep == _steps.Count - 1 ? "Fertig" : "Weiter") + + + + + + +
+} + + + +@code { + [Parameter] public EventCallback OnFinished { get; set; } + + private bool _active = true; + private int _currentStep = 0; + + private readonly List _steps = + [ + new(".onboarding-nav-menu", "Die Navigation", "Hier auf der linken Seite findest du das Hauptmenü. Du kannst ganz einfach zwischen der Wochen- und Monatsübersicht wechseln oder deine Statistiken einsehen."), + new(".onboarding-week-header", "Kalenderwoche blättern", "Hier siehst du die aktuell ausgewählte Woche. Verwende die Pfeiltasten links und rechts, um in vergangenen oder zukünftigen Wochen deine Zeiten zu erfassen."), + new(".onboarding-day-card", "Zeiterfassung pro Tag", "Das Herzstück des Timetrackers. Trage hier deine täglichen Start- und Endzeiten sowie deine Pausen ein. Das System errechnet die Zeiten und Überstunden in Echtzeit."), + new(".onboarding-week-summary", "Wochenzusammenfassung", "Hier siehst du auf einen Blick, wie viele Stunden du in dieser Woche gearbeitet hast, wie viel Pause du gemacht hast und wie sich dein Stundensaldo verändert hat."), + new(".onboarding-overtime-balance", "Gleitzeitkonto", "Hier wird dein gesamtes Gleitzeitkonto über das Jahr hinweg zusammengerechnet. So weißt du immer genau, wie viele Überstunden du angesammelt hast.") + ]; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await HighlightStep(); + } + } + + private async Task HighlightStep() + { + if (_active && _steps.Count > 0) + { + var step = _steps[_currentStep]; + await JS.InvokeVoidAsync("window.onboarding.highlight", step.TargetSelector); + } + } + + private async Task NextStep() + { + if (_currentStep < _steps.Count - 1) + { + _currentStep++; + await HighlightStep(); + } + else + { + await CompleteTour(); + } + } + + private async Task PrevStep() + { + if (_currentStep > 0) + { + _currentStep--; + await HighlightStep(); + } + } + + private async Task CompleteTour() + { + _active = false; + await JS.InvokeVoidAsync("window.onboarding.clear"); + await OnFinished.InvokeAsync(); + } + + private class OnboardingStep + { + public string TargetSelector { get; } + public string Title { get; } + public string Content { get; } + + public OnboardingStep(string targetSelector, string title, string content) + { + TargetSelector = targetSelector; + Title = title; + Content = content; + } + } +} diff --git a/timetracker.Client/Components/Pages/Settings.razor b/timetracker.Client/Components/Pages/Settings.razor index 2da5397..be9ee39 100644 --- a/timetracker.Client/Components/Pages/Settings.razor +++ b/timetracker.Client/Components/Pages/Settings.razor @@ -5,6 +5,9 @@ @inject IHolidayService HolidayService @inject ISnackbar Snackbar @inject AuthenticationStateProvider AuthStateProvider +@inject IJSRuntime JSRuntime +@inject NavigationManager Nav + Einstellungen – Timetracker @@ -187,6 +190,33 @@ else + @* ── Hilfe & Einführung ── *@ + + + + + + + Hilfe & Einführung + + + + + + + Wenn du die interaktive Einführung (Onboarding Tour) noch einmal sehen möchtest, kannst du sie hier zurücksetzen und neu starten. + + + Onboarding wiederholen + + + + + + @* ── Speichern-Button ── *@ @@ -578,6 +608,20 @@ else Snackbar.Add("Feiertag entfernt", Severity.Info); } + private async Task RepeatOnboarding() + { + try + { + await JSRuntime.InvokeVoidAsync("localStorage.setItem", "showOnboarding", "true"); + Snackbar.Add("Onboarding zurückgesetzt. Leite weiter zur Startseite...", Severity.Info); + Nav.NavigateTo("/"); + } + catch (Exception ex) + { + Snackbar.Add($"Fehler beim Zurücksetzen des Onboardings: {ex.Message}", Severity.Error); + } + } + private static string FormatHours(double hours) { var ts = TimeSpan.FromHours(hours); diff --git a/timetracker.Server/Components/App.razor b/timetracker.Server/Components/App.razor index a95d06d..17fcf08 100644 --- a/timetracker.Server/Components/App.razor +++ b/timetracker.Server/Components/App.razor @@ -13,6 +13,15 @@ + @@ -20,6 +29,25 @@ +