Onboarding

listify-client/src/app/account/account.component.html

@@ -10,9 +10,29 @@
         <mat-icon aria-hidden="true">verified_user</mat-icon>
         <span>{{ auth.user()?.verified ? 'E-Mail verifiziert' : 'E-Mail nicht verifiziert' }}</span>
       </div>
+
+      <div class="status-row">
+        <mat-icon aria-hidden="true">school</mat-icon>
+        <span>
+          {{ auth.user()?.onboardingCompleted ? 'Onboarding abgeschlossen' : 'Onboarding offen' }}
+        </span>
+      </div>
     </mat-card-content>
 
     <mat-card-actions align="end">
+      <button
+        mat-stroked-button
+        type="button"
+        [disabled]="onboarding.saving()"
+        (click)="resetOnboarding()"
+      >
+        @if (onboarding.saving()) {
+          <mat-progress-spinner mode="indeterminate" diameter="18" />
+        } @else {
+          <mat-icon aria-hidden="true">restart_alt</mat-icon>
+        }
+        Onboarding neu starten
+      </button>
       <button mat-stroked-button type="button" (click)="logout()">
         <mat-icon aria-hidden="true">logout</mat-icon>
         Logout

listify-client/src/app/account/account.component.scss

@@ -22,6 +22,16 @@
   color: var(--mat-sys-primary);
 }
 
+mat-card-actions {
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+mat-card-actions mat-progress-spinner {
+  display: inline-flex;
+  margin-right: 0.5rem;
+}
+
 @media (min-width: 600px) {
   .account-page {
     place-items: center;

listify-client/src/app/account/account.component.ts

@@ -3,18 +3,25 @@ import { Router } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { AuthService } from '../auth/auth.service';
+import { OnboardingService } from '../onboarding/onboarding.service';
 
 @Component({
   selector: 'app-account',
-  imports: [MatButtonModule, MatCardModule, MatIconModule],
+  imports: [MatButtonModule, MatCardModule, MatIconModule, MatProgressSpinnerModule],
   templateUrl: './account.component.html',
   styleUrl: './account.component.scss',
 })
 export class AccountComponent {
   protected readonly auth = inject(AuthService);
+  protected readonly onboarding = inject(OnboardingService);
   private readonly router = inject(Router);
 
+  resetOnboarding(): void {
+    this.onboarding.resetForCurrentUser();
+  }
+
   logout(): void {
     this.auth.logout();
     void this.router.navigateByUrl('/login');