rdt-client/client/src/app/settings/settings.component.html

<div class="tabs">
  <ul>
    @for (tab of tabs; track tab.key; let i = $index) {
      <li [ngClass]="{ 'is-active': activeTab === i }" (click)="activeTab = i">
        <a>{{ tab.displayName }}</a>
      </li>
    }
    <li [ngClass]="{ 'is-active': activeTab === 99 }" (click)="activeTab = 99">
      <a>Speed Tests</a>
    </li>
  </ul>
</div>

@for (tab of tabs; track tab.key; let i = $index) {
  <div [hidden]="activeTab !== i">
    <h3>{{ tab.description }}</h3>
    @for (setting of tab.settings; track setting.key) {
      @if (setting.type === "Object") {
        <h3 class="title is-3" style="margin-top: 1.2rem">{{ setting.displayName }}</h3>
      }
      <div class="field">
        @if (setting.type !== "Boolean" && setting.type !== "Object") {
          <label class="label">{{ setting.displayName }}</label>
        }
        @switch (setting.type) {
          @case ("String") {
            <div class="control">
              <input class="input" type="text" [(ngModel)]="setting.value" />
            </div>
          }
          @case ("Int32") {
            <div class="control">
              <input class="input" type="number" [(ngModel)]="setting.value" />
            </div>
          }
          @case ("Boolean") {
            <label class="checkbox">
              <input type="checkbox" [(ngModel)]="setting.value" />
              {{ setting.displayName }}
            </label>
          }
          @case ("Enum") {
            <div class="control select is-fullwidth">
              <select [(ngModel)]="setting.value">
                @for (kvp of setting.enumValues | keyvalue; track kvp) {
                  <option [value]="kvp.key">{{ kvp.value }}</option>
                }
              </select>
            </div>
          }
          @case ("Object") {}
          @default {
            <div class="control">Invalid setting type {{ setting.type }}</div>
          }
        }
        <p class="help" [innerHtml]="setting.description | nl2br"></p>
        @if (setting.key === "DownloadClient:Aria2cSecret") {
          <button
            class="button is-warning"
            (click)="testAria2cConnection()"
            [disabled]="saving"
            [ngClass]="{ 'is-loading': saving }"
          >
            Test aria2 connection
          </button>
          @if (testAria2cConnectionError) {
            <div class="notification is-danger is-light" style="margin-top: 1rem">
              Could connect to Aria2 client<br />
              {{ testAria2cConnectionError }}
            </div>
          }
          @if (testAria2cConnectionSuccess) {
            <div class="notification is-success is-light" style="margin-top: 1rem">
              Found Aria2 client version {{ testAria2cConnectionSuccess }}
            </div>
          }
        }
      </div>
    }
  </div>
}

@if (activeTab === 99) {
  <div>
    <div class="field">
      <label class="label">Test download path permissions</label>
      <div class="control">
        @if (!testPathError && !testPathSuccess) {
          <button
            class="button is-warning"
            (click)="testDownloadPath()"
            [disabled]="saving"
            [ngClass]="{ 'is-loading': saving }"
          >
            Test permissions
          </button>
        }
        @if (testPathError) {
          <div class="notification is-danger is-light">
            Could not test your download path<br />
            {{ testPathError }}
          </div>
        }
        @if (testPathSuccess) {
          <div class="notification is-success is-light">Your download path looks good!</div>
        }
      </div>
      <div class="help">This will check if the download folder has write permissions.</div>
    </div>
    <div class="field">
      <label class="label">Test Real-Debrid download speed</label>
      <div class="control">
        @if (testDownloadSpeedError) {
          <div class="notification is-danger is-light">
            Could not test your download speed<br />
            {{ testDownloadSpeedError }}
          </div>
        } @else if (testDownloadSpeedSuccess) {
          <div class="notification is-success is-light">Download speed {{ testDownloadSpeedSuccess | filesize }}/s</div>
        } @else {
          <button
            class="button is-warning"
            (click)="testDownloadSpeed()"
            [disabled]="saving"
            [ngClass]="{ 'is-loading': saving }"
          >
            Test download speed
          </button>
        }
      </div>
      <div class="help">
        This will attempt to download a 10GB file from Real-Debrid. When 50MB has been downloaded the test will stop.
      </div>
    </div>
    <div class="field">
      <label class="label">Test download folder write speed</label>
      <div class="control">
        @if (testWriteSpeedError) {
          <div class="notification is-danger is-light">
            Could not test your download speed<br />
            {{ testWriteSpeedError }}
          </div>
        } @else if (testWriteSpeedSuccess) {
          <div class="notification is-success is-light">Write speed {{ testWriteSpeedSuccess | filesize }}/s</div>
        } @else {
          <button
            class="button is-warning"
            (click)="testWriteSpeed()"
            [disabled]="saving"
            [ngClass]="{ 'is-loading': saving }"
          >
            Test write speed
          </button>
        }
      </div>
      <div class="help">This will write a small file to your download folder to see how fast it can write to it.</div>
    </div>
  </div>
}

<div class="field">
  <div class="control">
    @if (error?.length > 0) {
      <div class="notification is-danger is-light">Error saving settings: {{ error }}</div>
    }
  </div>
</div>

@if (activeTab === 0) {
  <div class="field">
    <label class="label">Register client as magnet link handler</label>
    <div class="control">
      <button
        class="button is-info"
        type="button"
        (click)="registerMagnetHandler()"
        [disabled]="!canRegisterMagnetHandler"
      >
        <span>
          {{ canRegisterMagnetHandler ? "Register Handler" : "Unavailable in This Browser" }}
        </span>
      </button>
    </div>
    <p class="help">
      @if (canRegisterMagnetHandler) {
        This will attempt to register the client as your browser's default handler for magnet links and automatically
        open them in the new torrent screen for downloading.
      } @else {
        Magnet link registration is unavailable. Your
        <a
          href="https://caniuse.com/mdn-api_navigator_registerprotocolhandler"
          target="_blank"
          rel="noopener noreferrer"
        >
          browser may not support this feature
        </a>
        , or the client is not being served in a
        <a
          href="https://developer.mozilla.org/en-US/docs/Glossary/Secure_Context/"
          target="_blank"
          rel="noopener noreferrer"
        >
          secure context
        </a>
        .
      }
    </p>
  </div>
}

@if (activeTab < 99) {
  <div class="field">
    <div class="control">
      <button class="button is-success" (click)="ok()" [disabled]="saving" [ngClass]="{ 'is-loading': saving }">
        Save Settings
      </button>
    </div>
  </div>
}