Files
listify/listify-client/src/app/account/account.component.html
2026-07-14 18:09:43 +02:00

145 lines
4.8 KiB
HTML

<section class="account-page">
<mat-card class="account-card" appearance="outlined">
<mat-card-header>
<mat-card-title>Willkommen, {{ auth.user()?.name || auth.user()?.email }}</mat-card-title>
<mat-card-subtitle>{{ auth.user()?.email }}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div class="status-row">
<mat-icon aria-hidden="true">verified_user</mat-icon>
<span>SSO-Konto aktiv</span>
</div>
<div class="status-row">
<mat-icon aria-hidden="true">school</mat-icon>
<span>
{{ auth.user()?.onboardingCompleted ? 'Onboarding abgeschlossen' : 'Onboarding offen' }}
</span>
</div>
<section class="groups-section" aria-label="Keycloak Gruppen">
<div class="settings-heading">
<mat-icon aria-hidden="true">groups</mat-icon>
<div>
<h2>Keycloak-Gruppen</h2>
<p>{{ auth.user()?.groups?.length || 0 }} synchronisiert</p>
</div>
</div>
@if (auth.user()?.groups?.length) {
<ul class="group-list">
@for (group of auth.user()?.groups ?? []; track group) {
<li>{{ group }}</li>
}
</ul>
} @else {
<p class="settings-description">Keine Gruppen hinterlegt.</p>
}
</section>
<section class="settings-section" aria-label="Task-Mail Einstellungen">
<div class="settings-heading">
<mat-icon aria-hidden="true">mark_email_unread</mat-icon>
<div>
<h2>Task-Mail</h2>
<p>Offene Tasks von heute und ueberfaellige Tasks.</p>
</div>
</div>
<mat-form-field appearance="outline">
<mat-label>Taegliche Benachrichtigung</mat-label>
<mat-select
[value]="auth.user()?.taskDigestPreference ?? 'both'"
[disabled]="savingTaskDigestPreference"
(selectionChange)="updateTaskDigestPreference($event.value)"
>
@for (option of taskDigestPreferenceOptions; track option.value) {
<mat-option [value]="option.value">
{{ option.label }}
</mat-option>
}
</mat-select>
</mat-form-field>
@for (option of taskDigestPreferenceOptions; track option.value) {
@if ((auth.user()?.taskDigestPreference ?? 'both') === option.value) {
<p class="settings-description">{{ option.description }}</p>
}
}
@if (savingTaskDigestPreference) {
<div class="saving-row">
<mat-progress-spinner mode="indeterminate" diameter="18" />
<span>Speichert...</span>
</div>
}
<div class="push-row">
<div>
<h3>PWA-Benachrichtigungen</h3>
<p>
Gleiche Tasks und Zeiten wie die Task-Mail. Die App braucht dafuer eine
Browser-Erlaubnis.
</p>
</div>
@if (!taskPush.supported()) {
<span class="push-state">Nicht unterstuetzt</span>
} @else if (taskPush.permission() === 'granted') {
<button
mat-stroked-button
type="button"
[disabled]="taskPush.saving()"
(click)="disablePushNotifications()"
>
@if (taskPush.saving()) {
<mat-progress-spinner mode="indeterminate" diameter="18" />
} @else {
<mat-icon aria-hidden="true">notifications_off</mat-icon>
}
Deaktivieren
</button>
} @else {
<button
mat-stroked-button
type="button"
[disabled]="
taskPush.saving() || (auth.user()?.taskDigestPreference ?? 'both') === 'none'
"
(click)="enablePushNotifications()"
>
@if (taskPush.saving()) {
<mat-progress-spinner mode="indeterminate" diameter="18" />
} @else {
<mat-icon aria-hidden="true">notifications_active</mat-icon>
}
Aktivieren
</button>
}
</div>
</section>
</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
</button>
</mat-card-actions>
</mat-card>
</section>