From d4f896e398a97bdf9817ad4d2a76b9d93c316456 Mon Sep 17 00:00:00 2001 From: Bastian Wagner Date: Sun, 8 Sep 2024 12:42:08 +0200 Subject: [PATCH] ui --- idp/src/application/user/user.controller.ts | 21 ++++++- idp/src/application/user/user.module.ts | 6 +- idp/src/application/user/user.service.ts | 1 + idp/src/auth/auth.module.ts | 2 + idp/src/client/client.module.ts | 4 +- idp/src/client/client.service.ts | 34 +++++++++- idp/src/core/database/database.module.ts | 3 +- idp/src/model/client.entity.ts | 5 +- idp/src/model/redirect-uri.entity.ts | 21 ++++++- .../components/card/card.component.html | 19 ++++-- .../components/card/card.component.scss | 9 +-- .../components/card/card.component.spec.ts | 10 +-- .../components/card/card.component.ts | 26 +++++++- .../client-admins.component.html | 17 +++++ .../client-admins.component.scss | 21 +++++++ .../client-admins.component.spec.ts | 23 +++++++ .../client-admins/client-admins.component.ts | 36 +++++++++++ .../client-redirect-uris.component.html | 28 +++++++++ .../client-redirect-uris.component.scss | 21 +++++++ .../client-redirect-uris.component.spec.ts | 23 +++++++ .../client-redirect-uris.component.ts | 63 +++++++++++++++++++ .../create-client.component.html | 11 ++-- .../create-client/create-client.component.ts | 6 +- .../app/dashboard/dashboard.component.html | 7 ++- .../src/app/dashboard/dashboard.component.ts | 22 ++++++- idp_client/src/app/model/client.interface.ts | 3 +- idp_client/src/styles.scss | 1 + 27 files changed, 403 insertions(+), 40 deletions(-) create mode 100644 idp_client/src/app/dashboard/components/client-admins/client-admins.component.html create mode 100644 idp_client/src/app/dashboard/components/client-admins/client-admins.component.scss create mode 100644 idp_client/src/app/dashboard/components/client-admins/client-admins.component.spec.ts create mode 100644 idp_client/src/app/dashboard/components/client-admins/client-admins.component.ts create mode 100644 idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.html create mode 100644 idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.scss create mode 100644 idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.spec.ts create mode 100644 idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.ts diff --git a/idp/src/application/user/user.controller.ts b/idp/src/application/user/user.controller.ts index c5f1033..51289a6 100644 --- a/idp/src/application/user/user.controller.ts +++ b/idp/src/application/user/user.controller.ts @@ -1,10 +1,20 @@ -import { Body, Controller, Delete, Get, Param, Post, Req, UseGuards } from '@nestjs/common'; +import { + Body, + Controller, + Delete, + Get, + Param, + Post, + Req, + UseGuards, +} from '@nestjs/common'; import { UserService } from './user.service'; import { AuthGuard, Roles, RolesGuard } from 'src/core/secure/guards'; import { Client } from 'src/model/client.entity'; import { AuthenticatedRequest } from 'src/model'; import { CreateClientDto } from 'src/model/dto/create-client.dto'; import { ClientService } from 'src/client/client.service'; +import { RedirectUri } from 'src/model/redirect-uri.entity'; @UseGuards(AuthGuard, RolesGuard) @Controller('app/user') @@ -42,4 +52,13 @@ export class UserController { deleteClient(@Req() req: AuthenticatedRequest, @Param('id') id) { return this.clientService.deleteClient(req.user, id); } + + @Post('clients/:id/redirect') + saveUris( + @Req() req: AuthenticatedRequest, + @Param('id') id, + @Body() uris: RedirectUri[], + ): Promise { + return this.clientService.saveRedirectUris(req.user, id, uris); + } } diff --git a/idp/src/application/user/user.module.ts b/idp/src/application/user/user.module.ts index 4536de8..d9904e4 100644 --- a/idp/src/application/user/user.module.ts +++ b/idp/src/application/user/user.module.ts @@ -2,12 +2,12 @@ import { Module } from '@nestjs/common'; import { UserController } from './user.controller'; import { SecureModule } from 'src/core/secure/secure.module'; import { UserService } from './user.service'; -import { ClientRepository } from 'src/model/client.entity'; import { ClientService } from 'src/client/client.service'; +import { DatabaseModule } from 'src/core/database/database.module'; @Module({ controllers: [UserController], - imports: [SecureModule], - providers: [UserService, ClientRepository, ClientService], + imports: [SecureModule, DatabaseModule], + providers: [UserService, ClientService], }) export class UserModule {} diff --git a/idp/src/application/user/user.service.ts b/idp/src/application/user/user.service.ts index 49ed7f2..b71c112 100644 --- a/idp/src/application/user/user.service.ts +++ b/idp/src/application/user/user.service.ts @@ -10,6 +10,7 @@ export class UserService { return this.clientRepository.find({ where: { admins: { id: user.id } }, relations: ['admins'], + order: { createdAt: 'ASC' }, }); } } diff --git a/idp/src/auth/auth.module.ts b/idp/src/auth/auth.module.ts index 7aac194..bce61ab 100644 --- a/idp/src/auth/auth.module.ts +++ b/idp/src/auth/auth.module.ts @@ -16,6 +16,7 @@ import { LoggerModule } from 'src/core/logger.module'; import { SessionKey, SessionKeyRepository } from 'src/model/session-key.entity'; import { ConfigModule, ConfigService } from '@nestjs/config'; import { Role, RoleRepository } from 'src/model/role.entity'; +import { DatabaseModule } from 'src/core/database/database.module'; @Module({ providers: [ @@ -47,6 +48,7 @@ import { Role, RoleRepository } from 'src/model/role.entity'; Role, ]), LoggerModule, + DatabaseModule, ], }) export class AuthModule {} diff --git a/idp/src/client/client.module.ts b/idp/src/client/client.module.ts index 2b440ca..a219528 100644 --- a/idp/src/client/client.module.ts +++ b/idp/src/client/client.module.ts @@ -1,12 +1,12 @@ import { Module } from '@nestjs/common'; import { NestjsFormDataModule } from 'nestjs-form-data'; -import { TypeOrmModule } from '@nestjs/typeorm'; import { LoggerModule } from 'src/core/logger.module'; import { ClientController } from './client.controller'; +import { DatabaseModule } from 'src/core/database/database.module'; @Module({ providers: [], controllers: [ClientController], - imports: [NestjsFormDataModule, TypeOrmModule.forFeature([]), LoggerModule], + imports: [NestjsFormDataModule, DatabaseModule, LoggerModule], }) export class ClientModule {} diff --git a/idp/src/client/client.service.ts b/idp/src/client/client.service.ts index 1ab3315..7cb57c3 100644 --- a/idp/src/client/client.service.ts +++ b/idp/src/client/client.service.ts @@ -1,12 +1,15 @@ import { HttpException, HttpStatus, Injectable } from '@nestjs/common'; import { v4 as uuidv4 } from 'uuid'; import { Client, ClientRepository } from 'src/model/client.entity'; -import { RedirectUri } from 'src/model/redirect-uri.entity'; +import { RedirectRepository, RedirectUri } from 'src/model/redirect-uri.entity'; import { User } from 'src/model/user.entity'; @Injectable() export class ClientService { - constructor(private clientRepo: ClientRepository) {} + constructor( + private clientRepo: ClientRepository, + private uriRepo: RedirectRepository, + ) {} async createClient( user: User, @@ -71,9 +74,36 @@ export class ClientService { }); if (client) { + await this.uriRepo.remove(client.redirectUris); + return this.clientRepo.remove(client); } throw new HttpException('client not found', HttpStatus.BAD_REQUEST); } + + async saveRedirectUris( + user: User, + clientId: string, + uris: RedirectUri[], + ): Promise { + const client = await this.clientRepo.findOne({ + where: { id: clientId, admins: { id: user.id } }, + }); + + if (!client) { + throw new HttpException('client not found', HttpStatus.NOT_FOUND); + } + console.log(uris); + uris.map((u) => { + u.client = client; + }); + const redirects = await this.uriRepo.save(uris); + client.redirectUris = redirects; + await this.clientRepo.save(client); + return this.uriRepo.find({ + where: { client: { id: clientId } }, + order: { createdAt: 'ASC' }, + }); + } } diff --git a/idp/src/core/database/database.module.ts b/idp/src/core/database/database.module.ts index 54a21ff..0868b36 100644 --- a/idp/src/core/database/database.module.ts +++ b/idp/src/core/database/database.module.ts @@ -5,7 +5,7 @@ import { AuthorizationCodeRepository, } from 'src/model/auth-code.entity'; import { Client, ClientRepository } from 'src/model/client.entity'; -import { RedirectUri } from 'src/model/redirect-uri.entity'; +import { RedirectRepository, RedirectUri } from 'src/model/redirect-uri.entity'; import { SessionKey, SessionKeyRepository } from 'src/model/session-key.entity'; import { User, UserRepository } from 'src/model/user.entity'; @@ -15,6 +15,7 @@ const REPOSITORIES = [ ClientRepository, AuthorizationCodeRepository, SessionKeyRepository, + RedirectRepository, ]; @Module({ diff --git a/idp/src/model/client.entity.ts b/idp/src/model/client.entity.ts index e084112..789578c 100644 --- a/idp/src/model/client.entity.ts +++ b/idp/src/model/client.entity.ts @@ -9,6 +9,7 @@ import { OneToMany, ManyToMany, JoinTable, + CreateDateColumn, } from 'typeorm'; import { RedirectUri } from './redirect-uri.entity'; import { AuthorizationCode } from './auth-code.entity'; @@ -19,6 +20,9 @@ export class Client { @PrimaryGeneratedColumn('uuid') id: string; + @CreateDateColumn({ name: 'created_at' }) + createdAt?: Date; + @Column() clientName: string; @@ -30,7 +34,6 @@ export class Client { description: string; @OneToMany(() => RedirectUri, (uri) => uri.client, { - cascade: true, eager: true, }) redirectUris: RedirectUri[]; diff --git a/idp/src/model/redirect-uri.entity.ts b/idp/src/model/redirect-uri.entity.ts index fc6d2e6..a084254 100644 --- a/idp/src/model/redirect-uri.entity.ts +++ b/idp/src/model/redirect-uri.entity.ts @@ -1,14 +1,33 @@ -import { Entity, PrimaryGeneratedColumn, ManyToOne, Column } from 'typeorm'; +import { + Entity, + PrimaryGeneratedColumn, + ManyToOne, + Column, + DataSource, + Repository, + CreateDateColumn, +} from 'typeorm'; import { Client } from './client.entity'; +import { Injectable } from '@nestjs/common'; @Entity() export class RedirectUri { @PrimaryGeneratedColumn('uuid') id: string; + @CreateDateColumn({ name: 'created_at' }) + createdAt?: Date; + @ManyToOne(() => Client, (client) => client.redirectUris) client: Client; @Column() uri: string; } + +@Injectable() +export class RedirectRepository extends Repository { + constructor(dataSource: DataSource) { + super(RedirectUri, dataSource.createEntityManager()); + } +} diff --git a/idp_client/src/app/dashboard/components/card/card.component.html b/idp_client/src/app/dashboard/components/card/card.component.html index e966094..a1fe357 100644 --- a/idp_client/src/app/dashboard/components/card/card.component.html +++ b/idp_client/src/app/dashboard/components/card/card.component.html @@ -1,9 +1,18 @@ -
{{ client.clientName }}
+
+ {{ client.clientName }} +
+
shield_person
{{ client.admins.length }}
+
link
{{ client.redirectUris.length }}
+
+
{{ client.description }}
-
- - - +
+
{{ client.createdAt | date }}
+
+ + + +
\ No newline at end of file diff --git a/idp_client/src/app/dashboard/components/card/card.component.scss b/idp_client/src/app/dashboard/components/card/card.component.scss index 5e847df..22953a7 100644 --- a/idp_client/src/app/dashboard/components/card/card.component.scss +++ b/idp_client/src/app/dashboard/components/card/card.component.scss @@ -6,12 +6,13 @@ } .footer { - display: flex; - flex-direction: row; - justify-content: flex-end; - gap: 8px; + margin-top: 12px; } .header { font-weight: bold; +} + +.body { + margin-top: 12px; } \ No newline at end of file diff --git a/idp_client/src/app/dashboard/components/card/card.component.spec.ts b/idp_client/src/app/dashboard/components/card/card.component.spec.ts index 7fc8912..1d03f47 100644 --- a/idp_client/src/app/dashboard/components/card/card.component.spec.ts +++ b/idp_client/src/app/dashboard/components/card/card.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { CardComponent } from './card.component'; +import { ClientCardComponent } from './card.component'; describe('CardComponent', () => { - let component: CardComponent; - let fixture: ComponentFixture; + let component: ClientCardComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [CardComponent] + imports: [ClientCardComponent] }) .compileComponents(); - fixture = TestBed.createComponent(CardComponent); + fixture = TestBed.createComponent(ClientCardComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/idp_client/src/app/dashboard/components/card/card.component.ts b/idp_client/src/app/dashboard/components/card/card.component.ts index 2c9dd6a..f229730 100644 --- a/idp_client/src/app/dashboard/components/card/card.component.ts +++ b/idp_client/src/app/dashboard/components/card/card.component.ts @@ -3,25 +3,47 @@ import { MatButtonModule } from '@angular/material/button'; import { Client } from '../../../model/client.interface'; import { HttpClient } from '@angular/common/http'; import { HotToastService } from '@ngxpert/hot-toast'; +import { MatDialog, MatDialogModule } from '@angular/material/dialog'; +import { ClientAdminsComponent } from '../client-admins/client-admins.component'; +import { ClientRedirectUrisComponent } from '../client-redirect-uris/client-redirect-uris.component'; +import { MatIconModule } from '@angular/material/icon'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'app-card', standalone: true, - imports: [MatButtonModule], + imports: [MatButtonModule, MatDialogModule, MatIconModule, CommonModule], templateUrl: './card.component.html', styleUrl: './card.component.scss' }) -export class CardComponent { +export class ClientCardComponent { @Input() client: Client; @Output() onDelete = new EventEmitter(); private http = inject(HttpClient); private toast = inject(HotToastService); + private dialog = inject(MatDialog); deleteClient() { this.onDelete.emit(this.client); } + + showAdmins() { + const dialog = this.dialog.open(ClientAdminsComponent, { + autoFocus: false + }); + dialog.componentInstance.client = this.client; + dialog.componentInstance.isDialog = true; + } + + showUris() { + const dialog = this.dialog.open(ClientRedirectUrisComponent, { + autoFocus: false + }); + dialog.componentInstance.client = this.client; + dialog.componentInstance.isDialog = true; + } } diff --git a/idp_client/src/app/dashboard/components/client-admins/client-admins.component.html b/idp_client/src/app/dashboard/components/client-admins/client-admins.component.html new file mode 100644 index 0000000..075a5de --- /dev/null +++ b/idp_client/src/app/dashboard/components/client-admins/client-admins.component.html @@ -0,0 +1,17 @@ +

Client Admins

+
+ @for (admin of client.admins; track $index) { +
+ {{ admin.firstName }} {{ admin.lastName }} + @if($index!= 0) { + + } +
+ } +
+ +@if (isDialog) { +
+ +
+} diff --git a/idp_client/src/app/dashboard/components/client-admins/client-admins.component.scss b/idp_client/src/app/dashboard/components/client-admins/client-admins.component.scss new file mode 100644 index 0000000..0620adb --- /dev/null +++ b/idp_client/src/app/dashboard/components/client-admins/client-admins.component.scss @@ -0,0 +1,21 @@ +.admin__item { + box-sizing: border-box; + padding: 6px; +} + +.content{ + display: flex; + flex-direction: column; + box-sizing: border-box; + padding: 4px 0; +} + +mat-icon { + margin: 0 !important; + padding: 0; +} + +.remove_btn { + min-width: 0; + padding: 0 14px; +} \ No newline at end of file diff --git a/idp_client/src/app/dashboard/components/client-admins/client-admins.component.spec.ts b/idp_client/src/app/dashboard/components/client-admins/client-admins.component.spec.ts new file mode 100644 index 0000000..7836662 --- /dev/null +++ b/idp_client/src/app/dashboard/components/client-admins/client-admins.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ClientAdminsComponent } from './client-admins.component'; + +describe('ClientAdminsComponent', () => { + let component: ClientAdminsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ClientAdminsComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ClientAdminsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/idp_client/src/app/dashboard/components/client-admins/client-admins.component.ts b/idp_client/src/app/dashboard/components/client-admins/client-admins.component.ts new file mode 100644 index 0000000..5909086 --- /dev/null +++ b/idp_client/src/app/dashboard/components/client-admins/client-admins.component.ts @@ -0,0 +1,36 @@ +import { AfterViewInit, Component, Input } from '@angular/core'; +import { Client } from '../../../model/client.interface'; +import { MatIconModule } from '@angular/material/icon'; +import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'; +import { MatButtonModule } from '@angular/material/button'; + +@Component({ + selector: 'app-client-admins', + standalone: true, + imports: [MatIconModule, MatDialogModule, MatButtonModule], + templateUrl: './client-admins.component.html', + styleUrl: './client-admins.component.scss' +}) +export class ClientAdminsComponent { + private _client: Client; + + isDialog = false; + + constructor(private dialogRef: MatDialogRef) { + + } + + @Input() + set client(client: Client) { + if (!client) { throw new Error('Client not set')} + this._client = client; + } + + get client(): Client { + return this._client; + } + + + + +} diff --git a/idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.html b/idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.html new file mode 100644 index 0000000..eeccfc2 --- /dev/null +++ b/idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.html @@ -0,0 +1,28 @@ +

Client Redirect-URIs

+
+ @for (uri of client.redirectUris; track $index) { +
+ {{ uri.uri }} + @if(client.redirectUris.length > 1) { + + } +
+ } + +
+ + +
+
+ +@if (isDialog) { +
+ +
+} + +@if (isLoading) { + +} diff --git a/idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.scss b/idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.scss new file mode 100644 index 0000000..0620adb --- /dev/null +++ b/idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.scss @@ -0,0 +1,21 @@ +.admin__item { + box-sizing: border-box; + padding: 6px; +} + +.content{ + display: flex; + flex-direction: column; + box-sizing: border-box; + padding: 4px 0; +} + +mat-icon { + margin: 0 !important; + padding: 0; +} + +.remove_btn { + min-width: 0; + padding: 0 14px; +} \ No newline at end of file diff --git a/idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.spec.ts b/idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.spec.ts new file mode 100644 index 0000000..885a173 --- /dev/null +++ b/idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ClientRedirectUrisComponent } from './client-redirect-uris.component'; + +describe('ClientRedirectUrisComponent', () => { + let component: ClientRedirectUrisComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ClientRedirectUrisComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ClientRedirectUrisComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.ts b/idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.ts new file mode 100644 index 0000000..2ef60bc --- /dev/null +++ b/idp_client/src/app/dashboard/components/client-redirect-uris/client-redirect-uris.component.ts @@ -0,0 +1,63 @@ +import { Component, inject, Input } from '@angular/core'; +import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'; +import { Client } from '../../../model/client.interface'; +import { ClientAdminsComponent } from '../client-admins/client-admins.component'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { HttpClient } from '@angular/common/http'; +import { RedirectUri } from '../../../model/redirect-uri.interface'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; + +@Component({ + selector: 'app-client-redirect-uris', + standalone: true, + imports: [MatIconModule, MatDialogModule, MatButtonModule, MatProgressSpinnerModule], + templateUrl: './client-redirect-uris.component.html', + styleUrl: './client-redirect-uris.component.scss' +}) +export class ClientRedirectUrisComponent { + private _client: Client; + private http: HttpClient = inject(HttpClient); + + isDialog = false; + isLoading = false; + + constructor(private dialogRef: MatDialogRef) { + + } + + @Input() + set client(client: Client) { + if (!client) { throw new Error('Client not set')} + this._client = client; + } + + get client(): Client { + return this._client; + } + + addUri() { + const val: HTMLInputElement = document.getElementById('addURIInput') as any; + + console.log(val.value) + + this.client.redirectUris.push({ + uri: val.value + }); + + val.value = null; + this.saveClient(); + }; + removeUri(u: RedirectUri) { + this.client.redirectUris = this.client.redirectUris.filter(r => r != u); + this.saveClient() + } + + saveClient() { + this.isLoading = true; + this.http.post(`api/app/user/clients/${this.client.id}/redirect`, this.client.redirectUris).subscribe(res => { + this.client.redirectUris = res; + this.isLoading = false; + }) + } +} diff --git a/idp_client/src/app/dashboard/components/create-client/create-client.component.html b/idp_client/src/app/dashboard/components/create-client/create-client.component.html index 24df442..977bb9d 100644 --- a/idp_client/src/app/dashboard/components/create-client/create-client.component.html +++ b/idp_client/src/app/dashboard/components/create-client/create-client.component.html @@ -40,13 +40,12 @@ Admins und Redirect URLs -
space
-
{{ client?.clientName }}
+
+ @if (client && client.admins) { + + } +
- - - - diff --git a/idp_client/src/app/dashboard/components/create-client/create-client.component.ts b/idp_client/src/app/dashboard/components/create-client/create-client.component.ts index fdfdf5c..d4f9460 100644 --- a/idp_client/src/app/dashboard/components/create-client/create-client.component.ts +++ b/idp_client/src/app/dashboard/components/create-client/create-client.component.ts @@ -11,11 +11,13 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import {MatStepper, MatStepperModule} from '@angular/material/stepper'; import { HotToastService } from '@ngxpert/hot-toast'; import { Client } from '../../../model/client.interface'; +import { User } from '../../../model/user.interface'; +import { ClientAdminsComponent } from '../client-admins/client-admins.component'; @Component({ selector: 'app-create-client', standalone: true, - imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatDialogModule, MatButtonModule, MatProgressSpinnerModule, CommonModule, MatStepperModule], + imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatDialogModule, MatButtonModule, MatProgressSpinnerModule, CommonModule, MatStepperModule, ClientAdminsComponent], templateUrl: './create-client.component.html', styleUrl: './create-client.component.scss' }) @@ -36,6 +38,7 @@ export class CreateClientComponent { client: Client; + create() { if (this.createClient.invalid) { return; } @@ -52,6 +55,7 @@ export class CreateClientComponent { ) .subscribe({ next: data => { + console.log(this.stepper) this.client = data; this.createClient.enable(); this.stepper.next(); diff --git a/idp_client/src/app/dashboard/dashboard.component.html b/idp_client/src/app/dashboard/dashboard.component.html index 58f5ef5..a2a3aff 100644 --- a/idp_client/src/app/dashboard/dashboard.component.html +++ b/idp_client/src/app/dashboard/dashboard.component.html @@ -22,8 +22,11 @@
- @for (client of clients; track $index) { + + + +
\ No newline at end of file diff --git a/idp_client/src/app/dashboard/dashboard.component.ts b/idp_client/src/app/dashboard/dashboard.component.ts index 3a887b2..c27dee3 100644 --- a/idp_client/src/app/dashboard/dashboard.component.ts +++ b/idp_client/src/app/dashboard/dashboard.component.ts @@ -1,8 +1,8 @@ -import { Component, inject, OnInit } from '@angular/core'; +import { Component, inject, Injector, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; import { UserService } from '../auth/user.service'; import { Router } from '@angular/router'; import { HttpClient } from '@angular/common/http'; -import { CardComponent } from './components/card/card.component'; +import { ClientCardComponent } from './components/card/card.component'; import { Client } from '../model/client.interface'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; @@ -10,11 +10,12 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog'; import { CreateClientComponent } from './components/create-client/create-client.component'; import { CreateHotToastRef, HotToastService } from '@ngxpert/hot-toast'; import {MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef} from '@angular/material/bottom-sheet'; +import { ClientAdminsComponent } from './components/client-admins/client-admins.component'; @Component({ selector: 'app-dashboard', standalone: true, - imports: [CardComponent, MatButtonModule, MatIconModule, MatDialogModule, MatBottomSheetModule], + imports: [ClientCardComponent, MatButtonModule, MatIconModule, MatDialogModule, MatBottomSheetModule], templateUrl: './dashboard.component.html', styleUrl: './dashboard.component.scss' }) @@ -26,7 +27,9 @@ export class DashboardComponent implements OnInit { private dialog: MatDialog = inject(MatDialog); private toast: HotToastService = inject(HotToastService); private bottomSheet = inject(MatBottomSheet); + private injector: Injector = inject(Injector); + @ViewChild('listSection', { read: ViewContainerRef, static: true }) clientList!: ViewContainerRef; clients: Client[] = []; @@ -42,6 +45,18 @@ export class DashboardComponent implements OnInit { load() { this.http.get('api/app/user/clients').subscribe(res => { this.clients = res; + this.createList(); + }) + } + + createList() { + this.clientList.clear(); + this.clients.forEach(c => { + const ref = this.clientList.createComponent(ClientCardComponent); + ref.instance.client = c; + ref.instance.onDelete.subscribe(() => { + this.openDeleteDialog(c) + }) }) } @@ -102,6 +117,7 @@ export class DashboardComponent implements OnInit { }) } + } diff --git a/idp_client/src/app/model/client.interface.ts b/idp_client/src/app/model/client.interface.ts index c87cf72..20e3d38 100644 --- a/idp_client/src/app/model/client.interface.ts +++ b/idp_client/src/app/model/client.interface.ts @@ -2,9 +2,10 @@ import { RedirectUri } from "./redirect-uri.interface"; import { User } from "./user.interface"; export interface Client { - admins: User; clientName: string; id: string; description: string; redirectUris: RedirectUri[]; + admins: User[]; + createdAt?: string; } \ No newline at end of file diff --git a/idp_client/src/styles.scss b/idp_client/src/styles.scss index b858833..b1be1c4 100644 --- a/idp_client/src/styles.scss +++ b/idp_client/src/styles.scss @@ -21,6 +21,7 @@ html, body { flex-direction: row; align-items: center; gap: 12px; + justify-content: space-between; } .create-client__dialog{