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

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

<div *ngIf="shortenedUrls">
  <mat-form-field>
    <input matInput [formControl]="searchFormControl" placeholder="{{'urlshortener.search' | i18n}}">
  </mat-form-field>
  <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">
        <button mat-icon-button (click)="share(shortenedUrl)">
          <mat-icon>share</mat-icon>
        </button>
      </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">
          <mat-icon *ngIf="shortenedUrl.password">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 | date: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>
          <mat-icon (click)="edit(shortenedUrl)">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>
          <mat-icon (click)="confirmDelete(shortenedUrl)">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>
      <p *ngIf="!shortenedUrlQuota">{{'urlshortener.noQuota' | i18n}}</p>
      <div *ngIf="shortenedUrlQuota">
        <p>{{'urlshortener.left' | i18n:shortenedUrlQuota}}</p>

        <mat-form-field>
          <input matInput placeholder="{{'urlshortener.url' | i18n}}" formControlName="url"
            [(ngModel)]="shortenedUrl.url" type="url">
          <mat-error>
            {{'urlshortener.error.url' | i18n}}
          </mat-error>
        </mat-form-field>

        <mat-form-field>
          <textarea matInput type="note" placeholder="{{'urlshortener.note' | i18n}}" 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>
            <input matInput type="password" placeholder="{{'password' | i18n}}" formControlName="password"
              [(ngModel)]="shortenedUrl.password">
            <mat-error>
              <div *ngFor="let error of form.get('password').errors | keyvalue">
                {{'password.error.' + error.key | i18n}}<br>
              </div>
            </mat-error>
          </mat-form-field>

          <mat-form-field>
            <input matInput type="password" placeholder="{{'password.confirm' | i18n}}" formControlName="password2"
              [(ngModel)]="shortenedUrl.password2">
            <mat-error>
              {{'password.not-match' | i18n}}
            </mat-error>
          </mat-form-field>

          <mat-form-field>
            <input matInput [ngxMatDatetimePicker]="expiresPicker" [(ngModel)]="shortenedUrl.expires"
              formControlName="expires" placeholder="{{'urlshortener.expires' | i18n}}">
            <mat-datepicker-toggle matSuffix [for]="expiresPicker"></mat-datepicker-toggle>
            <ngx-mat-datetime-picker #expiresPicker></ngx-mat-datetime-picker>
            <mat-error>
              {{'urlshortener.error.expires' | i18n}}
            </mat-error>
          </mat-form-field>

          <mat-form-field>
            <input matInput placeholder="{{'urlshortener.code' | i18n}}" 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>
      <button *ngIf="shortenedUrlQuota && !working" mat-raised-button color="primary" [disabled]="form.invalid">
        {{'urlshortener.create' | i18n}}
      </button>
    </mat-card-actions>
  </mat-card>

</form>