119602: Set default value as actual value instead of placeholder

Author: AAwouters

src/app/accessibility/accessibility-settings.service.stub.ts

@@ -36,7 +36,7 @@ export class AccessibilitySettingsServiceStub {
 
   convertStoredValuesToFormValues = jasmine.createSpy('convertStoredValuesToFormValues').and.returnValue({});
 
-  getPlaceholder = jasmine.createSpy('getPlaceholder').and.returnValue('placeholder');
+  getDefaultValue = jasmine.createSpy('getPlaceholder').and.returnValue('placeholder');
 
   isValid = jasmine.createSpy('isValid').and.returnValue(true);
 

src/app/accessibility/accessibility-settings.service.ts

@@ -231,10 +231,10 @@ export class AccessibilitySettingsService {
   }
 
   /**
-   * Retrieve the placeholder to be used for the provided AccessibilitySetting.
-   * Returns an empty string when no placeholder is specified for the provided setting.
+   * Retrieve the default value to be used for the provided AccessibilitySetting.
+   * Returns an empty string when no default value is specified for the provided setting.
    */
-  getPlaceholder(setting: AccessibilitySetting): string {
+  getDefaultValue(setting: AccessibilitySetting): string {
     switch (setting) {
       case 'notificationTimeOut':
         return millisecondsToSeconds(environment.notifications.timeOut.toString());

src/app/info/accessibility-settings/accessibility-settings.component.html

@@ -32,7 +32,6 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
         <input [type]="'number'" [id]="'notificationTimeOutInput'" class="form-control"
                [ngClass]="{'is-invalid': !settingsService.isValid('notificationTimeOut', formValues.notificationTimeOut)}"
                [min]="1"
-               [placeholder]="getPlaceholder('notificationTimeOut')"
                [readOnly]="!formValues.notificationTimeOutEnabled"
                [(ngModel)]="formValues.notificationTimeOut" [ngModelOptions]="{ standalone: true }"
                [attr.aria-describedby]="'notificationTimeOutHint'">
@@ -60,7 +59,6 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
         <input [type]="'number'" [id]="'liveRegionTimeOutInput'" class="form-control"
                [ngClass]="{'is-invalid': !settingsService.isValid('liveRegionTimeOut', formValues.liveRegionTimeOut)}"
                [min]="1"
-               [placeholder]="getPlaceholder('liveRegionTimeOut')"
                [(ngModel)]="formValues.liveRegionTimeOut" [ngModelOptions]="{ standalone: true }"
                [attr.aria-describedby]="'liveRegionTimeOutHint'">
         <div class="invalid-feedback" [ngClass]="{ 'd-block': !settingsService.isValid('liveRegionTimeOut', formValues.liveRegionTimeOut) }">
@@ -82,7 +80,7 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
       <button type="submit" (click)="saveSettings()" class="btn btn-primary mr-2">
         {{ 'info.accessibility-settings.submit' | translate }}
       </button>
-      <button type="reset" (click)="resetSettings()" class="btn btn-warning">
+      <button (click)="resetSettings()" class="btn btn-warning">
         {{ 'info.accessibility-settings.reset' | translate }}
       </button>
     </div>

src/app/info/accessibility-settings/accessibility-settings.component.ts

@@ -8,6 +8,7 @@ import {
 import { take } from 'rxjs';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
+import { isEmpty } from 'src/app/shared/empty.util';
 
 /**
  * Component providing the form where users can update accessibility settings.
@@ -32,10 +33,6 @@ export class AccessibilitySettingsComponent implements OnInit {
     this.updateFormValues();
   }
 
-  getPlaceholder(setting: AccessibilitySetting): string {
-    return this.settingsService.getPlaceholder(setting);
-  }
-
   /**
    * Saves the user-configured settings
    */
@@ -57,11 +54,23 @@ export class AccessibilitySettingsComponent implements OnInit {
   }
 
   /**
-   * Updates the form values with the currently stored accessibility settings
+   * Updates the form values with the currently stored accessibility settings and sets the default values for settings
+   * that have no stored value.
    */
   updateFormValues() {
     this.settingsService.getAll().pipe(take(1)).subscribe(storedSettings => {
-      this.formValues = this.settingsService.convertStoredValuesToFormValues(storedSettings);
+      const formValues = this.settingsService.convertStoredValuesToFormValues(storedSettings);
+
+      const settingsRequiringDefaultValue: AccessibilitySetting[] = ['notificationTimeOut', 'liveRegionTimeOut'];
+
+      for (const setting of settingsRequiringDefaultValue) {
+        if (isEmpty(formValues[setting])) {
+          const defaultValue = this.settingsService.getDefaultValue(setting);
+          formValues[setting] = defaultValue;
+        }
+      }
+
+      this.formValues = formValues;
     });
   }