Rework (#2)

* spec entfernt

* wip

* wip

* wip

* wip

* wip

* rework

* done

---------

Co-authored-by: Bastian Wagner <bastian.wagner@softconcis.de>

idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.html

@@ -1,10 +1,11 @@
 <h3 matDialogTitle>Client Redirect-URIs</h3>
 <div mat-dialog-content class="content">
+    <div class="mat-body" style="margin: 0 4px;">Trage hier alle Redirect URIS ein. Sie müssen mit dem gesendeten Parameter exakt überein stimmen.</div>
     @for (uri of client.redirectUris; track $index) {
         <div class="admin__item flex-row">
             <span class="admin__name">{{ uri.uri }}</span>
             @if(client.redirectUris.length > 1) {
-                <button mat-raised-button color="warn" class="remove_btn" (click)="removeUri(uri)" ><mat-icon>delete</mat-icon></button>
+                <button mat-button color="warn" class="remove_btn" (click)="removeUri(uri)" ><mat-icon>delete</mat-icon></button>
             }
         </div>
     }

idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.scss

@@ -17,5 +17,5 @@ mat-icon {
 
 .remove_btn {
     min-width: 0;
-    padding: 0 14px;
+    padding: 0 12px;
 }

idp_client/src/app/dashboard/components/create-client/create-client.component.html

@@ -34,7 +34,7 @@
             <button mat-raised-button (click)="create()" [disabled]="createClient.invalid || isSaving">
                 <div class="flex-row">
                     <mat-spinner [diameter]="16" *ngIf="isSaving"></mat-spinner>
-                    <div>Next</div>
+                    <div>Weiter</div>
                 </div>
             </button>
         </mat-step>
@@ -44,6 +44,9 @@
                 @if (client && client.admins) {
                     <app-client-admins [client]="client" ></app-client-admins>
                 }
+                <button mat-raised-button mat-dialog-close="" [disabled]="isSaving">
+                    Schließen
+                </button>
             </div>
         </mat-step>
     </mat-stepper>

idp_client/src/app/dashboard/components/create-client/create-client.component.scss

@@ -1,4 +1,4 @@
-form {
+form, .admin_container {
     display: flex;
     flex-direction: column;
     gap: 24px;
@@ -13,6 +13,7 @@ form {
     height: 100%;
 }
 
-mat-dialog-content {
+mat-dialog-content, app-client-admins {
     flex: 1 1 auto;
-}
+}
+

idp_client/src/app/dashboard/components/create-client/create-client.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { Component, inject, ViewChild } from '@angular/core';
+import { Component, EventEmitter, inject, Output, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -29,6 +29,8 @@ export class CreateClientComponent {
 
   @ViewChild('stepper') stepper: MatStepper;
 
+  @Output('oncreate') createdClient = new EventEmitter(); 
+
   createClient = new FormGroup({
     clientName: new FormControl(null, [Validators.required, Validators.minLength(4), Validators.maxLength(200)]),
     clientSecret: new FormControl(null, [Validators.required, Validators.minLength(4), Validators.maxLength(200)]),
@@ -55,11 +57,11 @@ export class CreateClientComponent {
     )
     .subscribe({
       next: data => {
-        console.log(this.stepper)
         this.client = data;
         this.createClient.enable();
         this.stepper.next();
         this.isSaving = false;
+        this.createdClient.emit();
       }
     })
 

idp_client/src/app/dashboard/dashboard.component.scss

@@ -14,12 +14,13 @@
     flex-direction: column;
 }
 .card-container__list{
-    margin: 0 auto;
+    margin: -12px;
     display: flex;
     flex-direction: column;
     gap: 12px;
     width: 500px;
     overflow: auto;
+    padding: 12px;
 }
 
 .create-container{
@@ -70,10 +71,15 @@
     background-position: center;
     background-size: 20px;
     background-repeat: no-repeat;
-    border-radius: 4px;
+    border-radius: 8px;
     transition: all 0.2s ease-in-out;
 
     &:hover {
-        background-color: #ccc;
+        background-color: #e0e0e0;
     }
+
+}
+
+.deleting {
+    box-shadow: 0px 2px 4px -1px rgb(255 0 0 / 20%), 0px 4px 5px 0px rgb(255 0 0 / 14%), 0px 1px 10px 0px rgb(255 0 0 / 12%);
 }

idp_client/src/app/dashboard/dashboard.component.ts

@@ -65,9 +65,12 @@ export class DashboardComponent implements OnInit {
   }
 
   createClient() {
-    this.dialog.open(CreateClientComponent, {
+    const ref = this.dialog.open(CreateClientComponent, {
       panelClass: 'create-client__dialog'
     })
+    ref.componentInstance.createdClient.subscribe(() => {
+      this.load();
+    })
   }
 
   openDeleteDialog(client: Client) {