we_bstly-web/src/app/pages/urlshortener/urlshortener.component.html

<h3>{{'urlshortener' | i18n}}</h3>

@if (shortenedUrls) {
  <div>
    <div class="flex">
      <mat-form-field>
        <mat-label>{{'urlshortener.search' | i18n}}</mat-label>
        <input matInput [formControl]="searchFormControl">
      </mat-form-field>
    </div>
    <table mat-table matSort [dataSource]="shortenedUrls.content" (matSortChange)="updateSort($event)">
      <ng-container matColumnDef="share">
        <th mat-header-cell *matHeaderCellDef> {{'urlshortener.share' | i18n}} </th>
        <td mat-cell *matCellDef="let shortenedUrl">
          <a mat-icon-button (click)="share(shortenedUrl)">
            <mat-icon>share</mat-icon>
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="link">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="link"> {{'urlshortener.link' | i18n}} </th>
        <td mat-cell *matCellDef="let shortenedUrl">
          <a mat-button color="accent" href="{{ shortenedUrl.link }}" target="_blank">
            @if (shortenedUrl.password) {
              <mat-icon>vpn_key</mat-icon>
              } {{ shortenedUrl.link }}
              <mat-icon style="font-size: 1em;">open_in_new
              </mat-icon>
            </a>
          </td>
        </ng-container>
        <ng-container matColumnDef="note">
          <th mat-header-cell *matHeaderCellDef> {{'urlshortener.note' | i18n}} </th>
          <td mat-cell *matCellDef="let shortenedUrl">
            {{shortenedUrl.note}}
          </td>
        </ng-container>
        <ng-container matColumnDef="url">
          <th mat-header-cell *matHeaderCellDef mat-sort-header="url"> {{'urlshortener.url' | i18n}} </th>
          <td mat-cell *matCellDef="let shortenedUrl">
            <a mat-button color="primary" href="{{ shortenedUrl.url }}" target="_blank">
              <span class="url">{{ shortenedUrl.url }}</span>
              <mat-icon style="font-size: 1em;">open_in_new
              </mat-icon>
            </a>
          </td>
        </ng-container>
        <ng-container matColumnDef="expires">
          <th mat-header-cell *matHeaderCellDef mat-sort-header="expires"> {{'urlshortener.expires' | i18n}} </th>
          <td mat-cell *matCellDef="let shortenedUrl"> {{ shortenedUrl.expires | datef:datetimeformat}} </td>
        </ng-container>
        <ng-container matColumnDef="edit">
          <th mat-header-cell *matHeaderCellDef> {{'urlshortener.edit' | i18n}} </th>
          <td mat-cell *matCellDef="let shortenedUrl" class="text-right">
            <a mat-icon-button (click)="edit(shortenedUrl)">
              <mat-icon>edit</mat-icon>
            </a>
          </td>
        </ng-container>
        <ng-container matColumnDef="delete">
          <th mat-header-cell *matHeaderCellDef class="align-right"> {{'urlshortener.delete' | i18n}} </th>
          <td mat-cell *matCellDef="let shortenedUrl" class="text-right">
            <a mat-icon-button (click)="confirmDelete(shortenedUrl)">
              <mat-icon>delete</mat-icon>
            </a>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="shortenedUrlColumns"></tr>
        <tr mat-row *matRowDef="let myRowData; columns: shortenedUrlColumns"></tr>
      </table>
      <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="shortenedUrls.totalElements"
      [pageSize]="shortenedUrls.size" (page)="updatePages($event)" showFirstLastButtons></mat-paginator>
    </div>
  }

  <form [formGroup]="form" (ngSubmit)="create()" #formDirective="ngForm">
    <mat-card>
      <mat-card-content>
        <p>{{'urlshortener.info' | i18n}}</p>
        @if (!shortenedUrlQuota) {
          <p>{{'urlshortener.noQuota' | i18n}}</p>
        }
        @if (shortenedUrlQuota) {
          <div>
            <p>{{'urlshortener.left' | i18n:shortenedUrlQuota}}</p>
            <mat-form-field>
              <mat-label>{{'urlshortener.url' | i18n}}</mat-label>
              <input matInput formControlName="url" [(ngModel)]="shortenedUrl.url" type="url">
              <mat-error>
                {{'urlshortener.error.url' | i18n}}
              </mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label>{{'urlshortener.note' | i18n}}</mat-label>
              <textarea matInput type="note" formControlName="note" [(ngModel)]="shortenedUrl.note"></textarea>
              <mat-error>
                {{'urlshortener.error.note' | i18n}}
              </mat-error>
            </mat-form-field>
            <mat-expansion-panel>
              <mat-expansion-panel-header>
                <mat-panel-title>
                  {{'urlshortener.advanced' | i18n}}
                </mat-panel-title>
              </mat-expansion-panel-header>
              <mat-form-field>
                <mat-label>{{'password' | i18n}}</mat-label>
                <input matInput type="password" formControlName="password" [(ngModel)]="shortenedUrl.password">
                <mat-error>
                  @for (error of form.get('password').errors | keyvalue; track error) {
                    <div>
                      {{'password.error.' + error.key | i18n}}<br>
                    </div>
                  }
                </mat-error>
              </mat-form-field>
              <mat-form-field>
                <mat-label>{{'password.confirm' | i18n}}</mat-label>
                <input matInput type="password" formControlName="password2" [(ngModel)]="shortenedUrl.password2">
                <mat-error>
                  {{'password.not-match' | i18n}}
                </mat-error>
              </mat-form-field>
              <mat-form-field>
                <mat-label>{{'urlshortener.expires' | i18n}}</mat-label>
                <input matInput type="datetime-local" [(ngModel)]="shortenedUrl.expires" formControlName="expires">
                <mat-error>
                  {{'urlshortener.error.expires' | i18n}}
                </mat-error>
              </mat-form-field>
              <mat-slide-toggle [(ngModel)]="shortenedUrl.queryParameters" formControlName="queryParameters">
                {{'urlshortener.queryParameters' | i18n}}
                <mat-icon inline="true" matTooltip="{{'urlshortener.queryParameters.info' | i18n}}">info</mat-icon>
              </mat-slide-toggle>
              <mat-form-field>
                <mat-label>{{'urlshortener.code' | i18n}}</mat-label>
                <input matInput formControlName="code" [(ngModel)]="shortenedUrl.code">
                <mat-error>
                  {{'urlshortener.error.code' | i18n}}
                </mat-error>
              </mat-form-field>
            </mat-expansion-panel>
          </div>
        }
      </mat-card-content>
      <mat-card-actions>
        @if (shortenedUrlQuota && !working) {
          <button type="submit" mat-raised-button color="primary"
            [disabled]="form.invalid">
            {{'urlshortener.create' | i18n}}
          </button>
        }
      </mat-card-actions>
      <mat-card-footer>
        <a href="https://wiki.bstly.de/services/urlshortener" class="help-button" matTooltip="{{'help-button' | i18n}}"
          matTooltipPosition="above" target="_blank" mat-fab color="accent">
          <mat-icon>contact_support</mat-icon>
        </a>
      </mat-card-footer>
    </mat-card>

  </form>