pigallery2/frontend/app/settings/basic/basic.settings.component.html

<form #settingsForm="ngForm" class="form-horizontal">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Basic settings</h3>
    </div>
    <div class="panel-body">
      <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>


      <div class="form-group">
        <label class="col-sm-2 control-label" for="applicationTitle">Page title</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" placeholder="Pigallery 2"
                 id="applicationTitle"
                 [(ngModel)]="_settingsService.settings.applicationTitle"
                 name="applicationTitle" required>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label" for="port">Port</label>
        <div class="col-sm-10">
          <input type="number" class="form-control" placeholder="80"
                 id="port"
                 min="0"
                 step="1"
                 max="65535"
                 [(ngModel)]="_settingsService.settings.port"
                 name="port" required>
          <span class="help-block">Port number. Port 80 is usually what you need.</span>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-2 control-label" for="folder">Images folder</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" placeholder="path"
                 id="folder"
                 [(ngModel)]="_settingsService.settings.imagesFolder"
                 name="folder" required>
          <span class="help-block">Images are loaded from this folder (read permission required)</span>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-2 control-label" for="publicUrl">Page public url</label>
        <div class="col-sm-10">
          <input type="url" class="form-control" placeholder="{{urlPlaceholder}}"
                 id="publicUrl"
                 [(ngModel)]="_settingsService.settings.publicUrl"
                 name="publicUrl">
          <span class="help-block">If you access the page form local network its good to know the public url for creating sharing link</span>
        </div>
      </div>

      <button class="btn btn-success pull-right"
              [disabled]="!settingsForm.form.valid || !changed || inProgress"
              (click)="save()">Save
      </button>
      <button class="btn btn-default pull-right"
              (click)="reset()">Reset
      </button>
    </div>
  </div>


</form>