Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 28x 68x 68x 56x 68x 68x 3x 8x 3x 8x 8x 3x 8x 8x 3x 8x 8x 3x 8x 8x 3x 8x 8x 3x 8x 8x 3x 8x 8x 8x 3x 8x 3x 8x 8x 28x | <div class="page-container">
<h1>{{ 'auth.account.title' | transloco }}</h1>
<div class="setting-item" *ngIf="isLoading()">
<span class="setting-label">{{ 'auth.account.loading' | transloco }}</span>
</div>
<div class="setting-item error" *ngIf="!isLoading() && errorMessage()">
<span class="setting-label">{{ 'auth.account.error' | transloco }}</span>
<span>{{ errorMessage() }}</span>
</div>
<ng-container *ngIf="!isLoading() && profile() as profile">
<div class="setting-item">
<span class="setting-label">{{ 'auth.account.profileInfo' | transloco }}</span>
<div class="attribute-grid">
<div class="attribute-row">
<span class="attribute-key">{{ 'auth.account.attributes.id' | transloco }}</span>
<span class="attribute-value">{{ profile.id || '-' }}</span>
</div>
<div class="attribute-row">
<span class="attribute-key">{{ 'auth.account.attributes.username' | transloco }}</span>
<span class="attribute-value">{{ profile.username }}</span>
</div>
<div class="attribute-row">
<span class="attribute-key">{{ 'auth.account.attributes.theme' | transloco }}</span>
<span class="attribute-value">{{ profile.settings!.theme }}</span>
</div>
<div class="attribute-row">
<span class="attribute-key">{{ 'auth.account.attributes.syncInterval' | transloco }}</span>
<span class="attribute-value">{{ profile.settings!.sync_interval }} min</span>
</div>
<div class="attribute-row">
<span class="attribute-key">{{ 'auth.account.attributes.updatedAt' | transloco }}</span>
<span class="attribute-value">{{ formatUpdatedAt(profile.updated_at) }}</span>
</div>
<div class="attribute-row">
<span class="attribute-key">{{ 'auth.account.attributes.email' | transloco }}</span>
<span class="attribute-value">{{ user()?.email || '-' }}</span>
</div>
</div>
</div>
<div class="setting-item">
<div class="edit-header">
<span class="setting-label">{{ 'auth.account.editMode' | transloco }}</span>
<button class="theme-btn" [class.active]="isEditMode()" (click)="toggleEditMode()">
{{ isEditMode()
? ('auth.account.stopEditing' | transloco)
: ('auth.account.startEditing' | transloco) }}
</button>
</div>
<form class="edit-form" *ngIf="isEditMode()" [formGroup]="editForm" (ngSubmit)="saveChanges()">
<label class="field-label" for="username">{{ 'auth.register.username' | transloco }}</label>
<input id="username" type="text" class="text-input" formControlName="username" />
<label class="field-label" for="sync_interval">
{{ 'auth.account.syncIntervalLabel' | transloco : { minutes: editForm.controls.sync_interval.value } }}
</label>
<input id="sync_interval" class="slider-input" type="range" min="1" max="60" step="1"
formControlName="sync_interval" />
<button class="theme-btn active" type="submit" [disabled]="isSaving()">
{{ isSaving()
? ('auth.account.saving' | transloco)
: ('auth.account.saveChanges' | transloco) }}
</button>
</form>
</div>
<button type="button" class="theme-btn back-link" (click)="this.logout()">{{ 'auth.account.logout' | transloco }}</button>
<button type="button" class="theme-btn back-link" routerLink="/settings">{{ 'auth.account.backToSettings' | transloco }}</button>
</ng-container>
</div> |