default value for device name

ui/src/app/modals/generic-input/generic-input.component.html

@@ -13,7 +13,7 @@
       <div style="margin-left: 16px;">
         <p class="input-label">{{ label }}</p>
         <ion-item lines="none" color="dark">
-          <ion-input [type]="useMask && !unmasked ? 'password' : 'text'" [(ngModel)]="value" name="value" (ionChange)="error = ''"></ion-input>
+          <ion-input [type]="useMask && !unmasked ? 'password' : 'text'" [(ngModel)]="value" name="value" [placeholder]="placeholder" (ionChange)="error = ''"></ion-input>
           <ion-button slot="end" *ngIf="useMask" fill="clear" color="light" (click)="toggleMask()">
             <ion-icon slot="icon-only" [name]="unmasked ? 'eye-off-outline' : 'eye-outline'" size="small"></ion-icon>
           </ion-button>
@@ -28,7 +28,7 @@
         <ion-button fill="clear" (click)="cancel()">
           Cancel
         </ion-button>
-        <ion-button fill="clear" type="submit" [disabled]="!value">
+        <ion-button fill="clear" type="submit" [disabled]="!value && !nullable">
           {{ buttonText }}
         </ion-button>
       </div>

ui/src/app/modals/generic-input/generic-input.component.ts

@@ -10,8 +10,10 @@ import { getErrorMessage } from 'src/app/services/error-toast.service'
 export class GenericInputComponent {
   @Input() title: string
   @Input() message: string
-  @Input() label = 'Enter value'
+  @Input() label: string
   @Input() buttonText = 'Submit'
+  @Input() placeholder = 'Enter Value'
+  @Input() nullable = false
   @Input() useMask = false
   @Input() value = ''
   @Input() submitFn: (value: string) => Promise<any>

ui/src/app/pages/server-routes/preferences/preferences.page.ts

@@ -34,9 +34,11 @@ export class PreferencesPage {
         message: 'This is for your reference only.',
         label: 'Device Name',
         useMask: false,
+        placeholder: this.patch.data['server-info'].id,
+        nullable: true,
         value: this.patch.data.ui.name,
         buttonText: 'Save',
-        submitFn: async (value: string) => await this.setDbValue('name', value),
+        submitFn: async (value: string) => await this.setDbValue('name', value || this.patch.data['server-info'].id),
       },
       cssClass: 'alertlike-modal',
       presentingElement: await this.modalCtrl.getTop(),