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

<form #settingsForm="ngForm" class="form-horizontal">
  <div class="card mb-4">
    <h5 class="card-header" i18n>
      Basic settings
    </h5>
    <div class="card-body">
      <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>


      <div class="form-group row" [hidden]="simplifiedMode">
        <label class="col-md-2 control-label" for="applicationTitle" i18n>Page title</label>
        <div class="col-md-10">
          <input type="text" class="form-control" placeholder="Pigallery 2"
                 id="applicationTitle"
                 [(ngModel)]="settings.applicationTitle"
                 name="applicationTitle" required>
        </div>
      </div>

      <div class="form-group row" [hidden]="simplifiedMode">
        <label class="col-md-2 control-label" for="host" i18n>Host</label>
        <div class="col-md-10">
          <input type="text" class="form-control" placeholder="0.0.0.0"
                 id="host"
                 [(ngModel)]="settings.host"
                 name="host" required>
          <small class="form-text text-muted" i18n>Server will accept connections from this IPv6 or IPv4 address.</small>
        </div>
      </div>

      <div class="form-group row" [hidden]="simplifiedMode">
        <label class="col-md-2 control-label" for="port" i18n>Port</label>
        <div class="col-md-10">
          <input type="number" class="form-control" placeholder="80"
                 id="port"
                 min="0"
                 step="1"
                 max="65535"
                 [(ngModel)]="settings.port"
                 name="port" required>
          <small class="form-text text-muted" i18n>Port number. Port 80 is usually what you need.</small>
        </div>
      </div>

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

      <div class="form-group row" [hidden]="simplifiedMode">
        <label class="col-md-2 control-label" for="publicUrl" i18n>Page public url</label>
        <div class="col-md-10">
          <input type="url" class="form-control" placeholder="{{urlPlaceholder}}"
                 id="publicUrl"
                 [(ngModel)]="settings.publicUrl"
                 (change)="onUrlChanged()"
                 name="publicUrl">
          <small class="form-text text-muted" i18n>If you access the page form local network its good to know the public
            url for creating sharing link
          </small>
        </div>
      </div>

      <div class="form-group row" [hidden]="simplifiedMode">
        <label class="col-md-2 control-label" for="urlBase" i18n>Url Base</label>
        <div class="col-md-10">
          <input type="url" class="form-control" placeholder="/myGallery"
                 id="urlBase"
                 [(ngModel)]="settings.urlBase"
                 (change)="onUrlBaseChanged()"
                 name="urlBase">
          <small class="form-text text-muted" i18n>If you access the gallery under a sub url (like:
            http://mydomain.com/myGallery), set it here. If not working you might miss the '/' from the beginning of the
            url.
          </small>
        </div>
      </div>

      <div *ngIf="urlError===true" class="alert alert-warning" role="alert" i18n>
        The public url and the url base are not matching. Some of the functionality might not work.
      </div>

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


</form>