make shortened urls editable

2021-08-16 19:06:12 +02:00
parent d7fb55a661
commit 323ce0e885
6 changed files with 225 additions and 48 deletions
@@ -0,0 +1,76 @@
+<h1 mat-dialog-title>
+  <mat-icon inline="true">edit</mat-icon> {{'urlshortener.edit' | i18n}}
+</h1>
+<mat-dialog-content>
+  <form [formGroup]="form">
+    <mat-form-field>
+      <input matInput placeholder="{{'urlshortener.url' | i18n}}" formControlName="url"
+        [(ngModel)]="shortenedUrlModel.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)]="shortenedUrlModel.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-slide-toggle (change)="newPassword($event)" formControlName="newPassword">
+        {{'urlshortener.newPassword' | i18n}}
+      </mat-slide-toggle>
+
+      <mat-form-field *ngIf="shortenedUrlModel.newPassword">
+        <input matInput type="password" placeholder="{{'password' | i18n}}" formControlName="password"
+          [(ngModel)]="shortenedUrlModel.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 *ngIf="shortenedUrlModel.newPassword">
+        <input matInput type="password" placeholder="{{'password.confirm' | i18n}}" formControlName="password2"
+          [(ngModel)]="shortenedUrlModel.password2">
+        <mat-error>
+          {{'password.not-match' | i18n}}
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field>
+        <input matInput [ngxMatDatetimePicker]="expiresPicker" [(ngModel)]="shortenedUrlModel.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)]="shortenedUrlModel.newCode">
+        <mat-error>
+          {{'urlshortener.error.code' | i18n}}
+        </mat-error>
+      </mat-form-field>
+    </mat-expansion-panel>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button [mat-dialog-close]="false">{{'cancel' | i18n}}</button>
+  <button [disabled]="form.invalid" mat-raised-button (click)="save()" color="accent">{{
+    'urlshortener.save'
+    | i18n}}</button>
+</mat-dialog-actions>