Skip to content

Commit fc5c303

Browse files
nsemetsnsemets
committed
fix(developer-apps): fixed developer apps
1 parent 6d76abc commit fc5c303

10 files changed

Lines changed: 137 additions & 115 deletions

File tree

‎src/app/features/settings/developer-apps/components/developer-app-add-edit-form/developer-app-add-edit-form.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
class="w-12rem btn-full-width"
4949
[label]="'settings.developerApps.form.buttons.cancel' | translate"
5050
severity="info"
51-
(click)="dialogRef.close()"
51+
(onClick)="dialogRef.close()"
5252
/>
5353
<p-button
5454
[label]="'settings.developerApps.form.buttons.create' | translate"

‎src/app/features/settings/developer-apps/components/developer-app-add-edit-form/developer-app-add-edit-form.component.ts‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@ export class DeveloperAppAddEditFormComponent implements OnInit {
3535
updateDeveloperApp: UpdateDeveloperApp,
3636
});
3737

38-
protected readonly inputLimits = InputLimits;
39-
protected readonly dialogRef = inject(DynamicDialogRef);
40-
protected readonly isLoading = select(DeveloperAppsSelectors.isLoading);
38+
readonly inputLimits = InputLimits;
39+
readonly dialogRef = inject(DynamicDialogRef);
40+
readonly isLoading = select(DeveloperAppsSelectors.isLoading);
4141

42-
protected readonly DeveloperAppFormFormControls = DeveloperAppFormFormControls;
43-
protected readonly appForm: DeveloperAppForm = new FormGroup({
42+
readonly DeveloperAppFormFormControls = DeveloperAppFormFormControls;
43+
readonly appForm: DeveloperAppForm = new FormGroup({
4444
[DeveloperAppFormFormControls.AppName]: new FormControl('', {
4545
nonNullable: true,
4646
validators: [CustomValidators.requiredTrimmed(), Validators.maxLength(InputLimits.fullName.maxLength)],
@@ -68,9 +68,7 @@ export class DeveloperAppAddEditFormComponent implements OnInit {
6868
});
6969

7070
constructor() {
71-
effect(() => {
72-
return this.isLoading() ? this.appForm.disable() : this.appForm.enable();
73-
});
71+
effect(() => (this.isLoading() ? this.appForm.disable() : this.appForm.enable()));
7472
}
7573

7674
ngOnInit(): void {
@@ -91,21 +89,21 @@ export class DeveloperAppAddEditFormComponent implements OnInit {
9189
return;
9290
}
9391

94-
if (!this.isEditMode()) {
95-
this.actions.createDeveloperApp({ ...this.appForm.value } as DeveloperAppCreateUpdate).subscribe({
96-
next: () => this.toastService.showSuccess('settings.developerApps.form.createSuccess'),
97-
complete: () => this.dialogRef.close(),
98-
});
99-
} else {
92+
if (this.isEditMode()) {
10093
this.actions
10194
.updateDeveloperApp(this.initialValues()!.clientId, {
10295
...this.appForm.value,
10396
id: this.initialValues()!.id,
10497
} as DeveloperAppCreateUpdate)
10598
.subscribe({
106-
next: () => this.toastService.showSuccess('settings.developerApps.form.createSuccess'),
99+
next: () => this.toastService.showSuccess('settings.developerApps.form.updateSuccess'),
107100
complete: () => this.router.navigate(['settings/developer-apps']),
108101
});
102+
} else {
103+
this.actions.createDeveloperApp({ ...this.appForm.value } as DeveloperAppCreateUpdate).subscribe({
104+
next: () => this.toastService.showSuccess('settings.developerApps.form.createSuccess'),
105+
complete: () => this.dialogRef.close(),
106+
});
109107
}
110108
}
111109
}

‎src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.html‎

Lines changed: 76 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<section class="bg-white py-4 px-3 md:p-5 xl:p-4">
1+
<section class="bg-white py-4 px-3 h-full md:p-5 xl:p-4">
22
<nav class="flex align-items-center gap-2">
33
<osf-icon iconClass="fas fa-chevron-left fa-sm"></osf-icon>
44

@@ -7,85 +7,93 @@
77
</a>
88
</nav>
99

10-
@if (developerApp()) {
11-
<section class="flex align-items-center justify-content-between mt-5">
12-
<h1>{{ developerApp()?.name }}</h1>
10+
@if (isLoading()) {
11+
<osf-loading-spinner></osf-loading-spinner>
12+
} @else {
13+
@if (developerApp()) {
14+
<section class="flex align-items-center justify-content-between mt-5">
15+
<h1>{{ developerApp()?.name }}</h1>
1316

14-
<p-button
15-
[label]="'settings.developerApps.list.deleteButton' | translate"
16-
severity="danger"
17-
(click)="deleteApp()"
18-
/>
19-
</section>
17+
<p-button
18+
[label]="'settings.developerApps.list.deleteButton' | translate"
19+
severity="danger"
20+
(click)="deleteApp()"
21+
/>
22+
</section>
2023

21-
<section class="flex flex-column gap-4 mt-4 md:mt-6">
22-
<p-card class="no-padding-card">
23-
<section class="p-3 md:p-4">
24-
<h2>
25-
{{ 'settings.developerApps.details.clientId.title' | translate }}
26-
</h2>
24+
<section class="flex flex-column gap-4 mt-4 md:mt-6">
25+
<p-card class="no-padding-card">
26+
<section class="p-3 md:p-4">
27+
<h2>
28+
{{ 'settings.developerApps.details.clientId.title' | translate }}
29+
</h2>
2730

28-
<p class="mt-4">
29-
{{ 'settings.developerApps.details.clientId.description' | translate }}
30-
</p>
31+
<p class="mt-4">
32+
{{ 'settings.developerApps.details.clientId.description' | translate }}
33+
</p>
3134

32-
<div class="mt-3 w-4">
33-
<p-iconfield iconPosition="right">
34-
<input type="text" pInputText readonly [value]="clientId()" />
35-
<p-inputicon>
36-
<osf-copy-button [copyItem]="clientId()"></osf-copy-button>
37-
</p-inputicon>
38-
</p-iconfield>
39-
</div>
40-
</section>
41-
</p-card>
42-
43-
<p-card class="no-padding-card">
44-
<section class="p-3 md:p-4">
45-
<h2>
46-
{{ 'settings.developerApps.details.clientSecret.title' | translate }}
47-
</h2>
48-
49-
<p class="mt-4">
50-
{{ 'settings.developerApps.details.clientSecret.description' | translate }}
51-
</p>
52-
53-
<section class="flex flex-column gap-2 mt-3 md:flex-row">
54-
<div class="relative">
35+
<div class="mt-3 w-4">
5536
<p-iconfield iconPosition="right">
56-
<input pInputText [value]="isClientSecretVisible() ? clientSecret() : hiddenClientSecret()" readonly />
37+
<input type="text" pInputText readonly [value]="clientId()" />
5738
<p-inputicon>
58-
<osf-copy-button [copyItem]="clientSecret()"></osf-copy-button>
39+
<osf-copy-button [copyItem]="clientId()"></osf-copy-button>
5940
</p-inputicon>
6041
</p-iconfield>
6142
</div>
62-
63-
<p-button
64-
[label]="
65-
isClientSecretVisible()
66-
? ('settings.developerApps.details.clientSecret.hide' | translate)
67-
: ('settings.developerApps.details.clientSecret.show' | translate)
68-
"
69-
severity="secondary"
70-
(click)="isClientSecretVisible.set(!isClientSecretVisible())"
71-
/>
7243
</section>
44+
</p-card>
45+
46+
<p-card class="no-padding-card">
47+
<section class="p-3 md:p-4">
48+
<h2>
49+
{{ 'settings.developerApps.details.clientSecret.title' | translate }}
50+
</h2>
7351

74-
<section class="flex justify-content-end mt-4">
75-
<p-button
76-
[label]="'settings.developerApps.details.clientSecret.resetSecret' | translate"
77-
(click)="resetClientSecret()"
78-
/>
52+
<p class="mt-4">
53+
{{ 'settings.developerApps.details.clientSecret.description' | translate }}
54+
</p>
55+
56+
<section class="flex flex-column gap-2 mt-3 md:flex-row">
57+
<div class="relative">
58+
<p-iconfield iconPosition="right">
59+
<input
60+
pInputText
61+
[value]="isClientSecretVisible() ? clientSecret() : hiddenClientSecret()"
62+
readonly
63+
/>
64+
<p-inputicon>
65+
<osf-copy-button [copyItem]="clientSecret()"></osf-copy-button>
66+
</p-inputicon>
67+
</p-iconfield>
68+
</div>
69+
70+
<p-button
71+
[label]="
72+
isClientSecretVisible()
73+
? ('settings.developerApps.details.clientSecret.hide' | translate)
74+
: ('settings.developerApps.details.clientSecret.show' | translate)
75+
"
76+
severity="secondary"
77+
(click)="isClientSecretVisible.set(!isClientSecretVisible())"
78+
/>
79+
</section>
80+
81+
<section class="flex justify-content-end mt-4">
82+
<p-button
83+
[label]="'settings.developerApps.details.clientSecret.resetSecret' | translate"
84+
(click)="resetClientSecret()"
85+
/>
86+
</section>
7987
</section>
80-
</section>
81-
</p-card>
88+
</p-card>
8289

83-
<p-card class="no-padding-card">
84-
<section class="p-3 md:p-4">
85-
<h2>{{ 'settings.developerApps.form.editTitle' | translate }}</h2>
86-
<osf-developer-app-add-edit-form class="block mt-4" [isEditMode]="true" [initialValues]="developerApp()!" />
87-
</section>
88-
</p-card>
89-
</section>
90+
<p-card class="no-padding-card">
91+
<section class="p-3 md:p-4">
92+
<h2>{{ 'settings.developerApps.form.editTitle' | translate }}</h2>
93+
<osf-developer-app-add-edit-form class="block mt-4" [isEditMode]="true" [initialValues]="developerApp()!" />
94+
</section>
95+
</p-card>
96+
</section>
97+
}
9098
}
9199
</section>

‎src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
:host {
2+
flex: 1;
3+
}
4+
15
.p-iconfield {
26
--p-icon-size: 1.5rem;
37
}

‎src/app/features/settings/developer-apps/pages/developer-app-details/developer-app-details.component.ts‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createDispatchMap, Store } from '@ngxs/store';
1+
import { createDispatchMap, select, Store } from '@ngxs/store';
22

33
import { TranslatePipe } from '@ngx-translate/core';
44

@@ -15,9 +15,8 @@ import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@a
1515
import { toSignal } from '@angular/core/rxjs-interop';
1616
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
1717

18-
import { CopyButtonComponent, IconComponent } from '@osf/shared/components';
19-
import { IS_XSMALL } from '@osf/shared/helpers';
20-
import { CustomConfirmationService } from '@osf/shared/services';
18+
import { CopyButtonComponent, IconComponent, LoadingSpinnerComponent } from '@osf/shared/components';
19+
import { CustomConfirmationService, ToastService } from '@osf/shared/services';
2120

2221
import { DeveloperAppAddEditFormComponent } from '../../components';
2322
import { DeleteDeveloperApp, DeveloperAppsSelectors, GetDeveloperAppDetails, ResetClientSecret } from '../../store';
@@ -35,6 +34,7 @@ import { DeleteDeveloperApp, DeveloperAppsSelectors, GetDeveloperAppDetails, Res
3534
TranslatePipe,
3635
CopyButtonComponent,
3736
IconComponent,
37+
LoadingSpinnerComponent,
3838
],
3939
templateUrl: './developer-app-details.component.html',
4040
styleUrl: './developer-app-details.component.scss',
@@ -46,17 +46,17 @@ export class DeveloperAppDetailsComponent {
4646
private readonly activatedRoute = inject(ActivatedRoute);
4747
private readonly router = inject(Router);
4848
private readonly store = inject(Store);
49+
private readonly toastService = inject(ToastService);
4950
private readonly actions = createDispatchMap({
5051
getDeveloperAppDetails: GetDeveloperAppDetails,
5152
deleteDeveloperApp: DeleteDeveloperApp,
5253
resetClientSecret: ResetClientSecret,
5354
});
5455

55-
protected readonly isXSmall = toSignal(inject(IS_XSMALL));
56-
57-
protected readonly isClientSecretVisible = signal(false);
58-
protected readonly clientSecret = computed<string>(() => this.developerApp()?.clientSecret ?? '');
59-
protected readonly hiddenClientSecret = computed<string>(() => '*'.repeat(this.clientSecret().length));
56+
readonly isClientSecretVisible = signal(false);
57+
readonly clientSecret = computed<string>(() => this.developerApp()?.clientSecret ?? '');
58+
readonly hiddenClientSecret = computed<string>(() => '*'.repeat(this.clientSecret().length));
59+
readonly isLoading = select(DeveloperAppsSelectors.isLoading);
6060

6161
readonly clientId = toSignal(
6262
this.activatedRoute.params.pipe(
@@ -86,10 +86,9 @@ export class DeveloperAppDetailsComponent {
8686
headerParams: { name: this.developerApp()?.name },
8787
messageKey: 'settings.developerApps.confirmation.delete.message',
8888
onConfirm: () => {
89-
this.actions.deleteDeveloperApp(this.clientId()).subscribe({
90-
complete: () => {
91-
this.router.navigate(['settings/developer-apps']);
92-
},
89+
this.actions.deleteDeveloperApp(this.clientId()).subscribe(() => {
90+
this.router.navigate(['settings/developer-apps']);
91+
this.toastService.showSuccess('settings.developerApps.confirmation.delete.success');
9392
});
9493
},
9594
});
@@ -101,7 +100,10 @@ export class DeveloperAppDetailsComponent {
101100
headerParams: { name: this.developerApp()?.name },
102101
messageKey: 'settings.developerApps.confirmation.resetSecret.message',
103102
acceptLabelKey: 'settings.developerApps.details.clientSecret.reset',
104-
onConfirm: () => this.actions.resetClientSecret(this.clientId()),
103+
onConfirm: () =>
104+
this.actions
105+
.resetClientSecret(this.clientId())
106+
.subscribe(() => this.toastService.showSuccess('settings.developerApps.confirmation.resetSecret.success')),
105107
});
106108
}
107109
}

‎src/app/features/settings/developer-apps/pages/developer-apps-list/developer-apps-list.component.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Skeleton } from 'primeng/skeleton';
99
import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
1010
import { RouterLink } from '@angular/router';
1111

12-
import { CustomConfirmationService } from '@osf/shared/services';
12+
import { CustomConfirmationService, ToastService } from '@osf/shared/services';
1313

1414
import { DeveloperApp } from '../../models';
1515
import { DeleteDeveloperApp, DeveloperAppsSelectors, GetDeveloperApps } from '../../store';
@@ -27,8 +27,9 @@ export class DeveloperAppsListComponent implements OnInit {
2727
deleteDeveloperApp: DeleteDeveloperApp,
2828
});
2929
private readonly customConfirmationService = inject(CustomConfirmationService);
30+
private readonly toastService = inject(ToastService);
3031

31-
protected readonly isLoading = select(DeveloperAppsSelectors.isLoading);
32+
readonly isLoading = select(DeveloperAppsSelectors.isLoading);
3233
readonly developerApplications = select(DeveloperAppsSelectors.getDeveloperApps);
3334

3435
ngOnInit(): void {
@@ -42,7 +43,10 @@ export class DeveloperAppsListComponent implements OnInit {
4243
headerKey: 'settings.developerApps.confirmation.delete.title',
4344
headerParams: { name: developerApp.name },
4445
messageKey: 'settings.developerApps.confirmation.delete.message',
45-
onConfirm: () => this.actions.deleteDeveloperApp(developerApp.clientId),
46+
onConfirm: () =>
47+
this.actions
48+
.deleteDeveloperApp(developerApp.clientId)
49+
.subscribe(() => this.toastService.showSuccess('settings.developerApps.confirmation.delete.success')),
4650
});
4751
}
4852
}

‎src/app/features/settings/developer-apps/services/developer-apps.service.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import { environment } from 'src/environments/environment';
1414
providedIn: 'root',
1515
})
1616
export class DeveloperApplicationsService {
17-
jsonApiService = inject(JsonApiService);
18-
baseUrl = `${environment.apiUrl}/applications/`;
17+
private readonly jsonApiService = inject(JsonApiService);
18+
private readonly baseUrl = `${environment.apiUrl}/applications/`;
1919

2020
getApplications(): Observable<DeveloperApp[]> {
2121
return this.jsonApiService
@@ -25,7 +25,7 @@ export class DeveloperApplicationsService {
2525

2626
getApplicationDetails(clientId: string): Observable<DeveloperApp> {
2727
return this.jsonApiService
28-
.get<JsonApiResponse<DeveloperAppGetResponseJsonApi, null>>(`${this.baseUrl}/${clientId}/`)
28+
.get<JsonApiResponse<DeveloperAppGetResponseJsonApi, null>>(`${this.baseUrl}${clientId}/`)
2929
.pipe(map((response) => DeveloperAppMapper.fromGetResponse(response.data)));
3030
}
3131

@@ -41,19 +41,19 @@ export class DeveloperApplicationsService {
4141
const request = DeveloperAppMapper.toUpdateRequest(developerAppUpdate);
4242

4343
return this.jsonApiService
44-
.patch<DeveloperAppGetResponseJsonApi>(`${this.baseUrl}/${clientId}/`, request)
44+
.patch<DeveloperAppGetResponseJsonApi>(`${this.baseUrl}${clientId}/`, request)
4545
.pipe(map((response) => DeveloperAppMapper.fromGetResponse(response)));
4646
}
4747

4848
resetClientSecret(clientId: string) {
4949
const request = DeveloperAppMapper.toResetSecretRequest(clientId);
5050

5151
return this.jsonApiService
52-
.patch<DeveloperAppGetResponseJsonApi>(`${this.baseUrl}/${clientId}/`, request)
52+
.patch<DeveloperAppGetResponseJsonApi>(`${this.baseUrl}${clientId}/`, request)
5353
.pipe(map((response) => DeveloperAppMapper.fromGetResponse(response)));
5454
}
5555

5656
deleteApplication(clientId: string): Observable<void> {
57-
return this.jsonApiService.delete(`${this.baseUrl}/${clientId}/`);
57+
return this.jsonApiService.delete(`${this.baseUrl}${clientId}/`);
5858
}
5959
}

0 commit comments

Comments
 (0)