Skip to content

Commit 2fef271

Browse files
shawonshawon
shawon
authored and
shawon
committed
added form control to profile setings and installed plugins
1 parent 2410a6e commit 2fef271

File tree

5 files changed

+193
-68
lines changed

5 files changed

+193
-68
lines changed

‎eform-client/src/app/modules/account-management/components/profile/profile-settings/profile-settings.component.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@
1111
</div>
1212
</eform-new-subheader>
1313

14-
<div class="d-flex flex-row justify-content-between align-items-start">
14+
<div [formGroup]="profileForm" class="d-flex flex-row justify-content-between align-items-start">
1515
<mat-card class="p-3" *ngIf="selectCurrentUserIsAdmin$ | async">
1616
<mat-card-header>
1717
<mat-card-title>{{ 'Google Authenticator' | translate }}</mat-card-title>
1818
</mat-card-header>
1919
<div class="mb-1">
2020
<mat-checkbox
2121
id="2fauthForsed"
22-
(change)="isTwoFactorEnabledCheckBoxChanged($event)"
23-
[(ngModel)]="googleAuthInfoModel.isTwoFactorEnabled"
22+
formControlName="isTwoFactorEnabled"
23+
(change)="toggleTwoFactor()"
2424
color="primary">
2525
{{ 'Status' | translate }}
2626
</mat-checkbox>
@@ -128,7 +128,7 @@
128128
[bindLabel]="'name'"
129129
[bindValue]="'languageCode'"
130130
[clearable]="false"
131-
[(ngModel)]="userSettingsModel.locale"
131+
formControlName="locale"
132132
[items]="activeLanguages">
133133
</mtx-select>
134134
</mat-form-field>
@@ -139,7 +139,7 @@
139139
[bindLabel]="'text'"
140140
[bindValue]="'id'"
141141
[clearable]="false"
142-
[(ngModel)]="userSettingsModel.formats"
142+
formControlName="formats"
143143
[items]="countries">
144144
</mtx-select>
145145
</mat-form-field>
@@ -150,14 +150,14 @@
150150
[bindLabel]="'name'"
151151
[bindValue]="'id'"
152152
[clearable]="false"
153-
[(ngModel)]="userSettingsModel.timeZone"
153+
formControlName="timeZone"
154154
[items]="timeZones.timeZoneModels">
155155
</mtx-select>
156156
</mat-form-field>
157157
<div class="mb-1">
158158
<mat-checkbox
159159
id="darkTheme"
160-
[(ngModel)]="userSettingsModel.darkTheme">
160+
formControlName="darkTheme">
161161
{{ 'Dark theme' | translate }}
162162
</mat-checkbox>
163163
</div>

‎eform-client/src/app/modules/account-management/components/profile/profile-settings/profile-settings.component.ts‎

Lines changed: 114 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, OnInit, inject } from '@angular/core';
2+
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
23
import { GoogleAuthInfoModel } from 'src/app/common/models/auth';
34
import { UserSettingsModel } from 'src/app/common/models/settings';
45
import {
@@ -32,6 +33,7 @@ import * as R from 'ramda';
3233
standalone: false
3334
})
3435
export class ProfileSettingsComponent implements OnInit {
36+
private fb = inject(FormBuilder);
3537
authStateService = inject(AuthStateService);
3638
private authStore = inject(Store);
3739
private googleAuthService = inject(GoogleAuthService);
@@ -55,6 +57,14 @@ export class ProfileSettingsComponent implements OnInit {
5557
public selectCurrentUserIsAdmin$ = this.authStore.select(selectCurrentUserIsAdmin);
5658
private selectBearerToken$ = this.authStore.select(selectBearerToken);
5759

60+
profileForm: FormGroup = this.fb.group({
61+
locale: new FormControl(''),
62+
formats: new FormControl(''),
63+
timeZone: new FormControl(''),
64+
darkTheme: new FormControl(false),
65+
isTwoFactorEnabled: new FormControl(false),
66+
});
67+
5868
ngOnInit() {
5969
this.getEnabledLanguages();
6070
this.initializeUploaders();
@@ -94,12 +104,25 @@ export class ProfileSettingsComponent implements OnInit {
94104
});
95105
}
96106

97-
isTwoFactorEnabledCheckBoxChanged(e) {
98-
if (e.target) {
99-
this.googleAuthInfoModel.isTwoFactorEnabled = e.target.checked;
100-
} else {
101-
return;
102-
}
107+
// isTwoFactorEnabledCheckBoxChanged(e) {
108+
// if (e.target) {
109+
// this.googleAuthInfoModel.isTwoFactorEnabled = e.target.checked;
110+
// } else {
111+
// return;
112+
// }
113+
// this.googleAuthService
114+
// .updateGoogleAuthenticatorInfo(this.googleAuthInfoModel)
115+
// .subscribe((data) => {
116+
// if (data.success) {
117+
// this.authStateService.logout();
118+
// }
119+
// });
120+
// }
121+
122+
toggleTwoFactor(): void {
123+
const isEnabled = this.profileForm.get('isTwoFactorEnabled')?.value;
124+
this.googleAuthInfoModel.isTwoFactorEnabled = isEnabled;
125+
103126
this.googleAuthService
104127
.updateGoogleAuthenticatorInfo(this.googleAuthInfoModel)
105128
.subscribe((data) => {
@@ -117,41 +140,106 @@ export class ProfileSettingsComponent implements OnInit {
117140
});
118141
}
119142

143+
// deleteGoogleAuthenticatorInfo() {
144+
// this.googleAuthService.deleteGoogleAuthenticatorInfo().subscribe((data) => {
145+
// if (data && data.success) {
146+
// this.googleAuthInfoModel.psk = null;
147+
// }
148+
// });
149+
// }
150+
151+
// updateUserProfileSettings() {
152+
//
153+
// if (this.profilePictureUploader.queue.length > 0) {
154+
// this.profilePictureUploader.queue[0].upload();
155+
// }
156+
// this.userSettingsService
157+
// .updateUserSettings(this.userSettingsModel)
158+
// .subscribe((data) => {
159+
// this.userSettings.getUserSettings().subscribe((data) => {
160+
// this.userSettingsModel = data.model;
161+
// this.store.dispatch(updateCurrentUserLocaleAndDarkTheme({
162+
// darkTheme: this.userSettingsModel.darkTheme,
163+
// locale: this.userSettingsModel.locale,
164+
// languageId: this.userSettingsModel.languageId
165+
// }));
166+
// this.getUserSettings();
167+
// });
168+
// this.store.dispatch(loadAppMenu());
169+
// });
170+
// }
171+
120172
updateUserProfileSettings() {
173+
const formValue = this.profileForm.value;
174+
175+
this.userSettingsModel.locale = formValue.locale;
176+
this.userSettingsModel.formats = formValue.formats;
177+
this.userSettingsModel.timeZone = formValue.timeZone;
178+
this.userSettingsModel.darkTheme = formValue.darkTheme;
121179

122180
if (this.profilePictureUploader.queue.length > 0) {
123181
this.profilePictureUploader.queue[0].upload();
124182
}
125-
this.userSettingsService
126-
.updateUserSettings(this.userSettingsModel)
127-
.subscribe((data) => {
128-
this.userSettings.getUserSettings().subscribe((data) => {
129-
this.userSettingsModel = data.model;
130-
this.store.dispatch(updateCurrentUserLocaleAndDarkTheme({
183+
184+
this.userSettingsService.updateUserSettings(this.userSettingsModel).subscribe((data) => {
185+
this.userSettings.getUserSettings().subscribe((data) => {
186+
this.userSettingsModel = data.model;
187+
this.store.dispatch(
188+
updateCurrentUserLocaleAndDarkTheme({
131189
darkTheme: this.userSettingsModel.darkTheme,
132190
locale: this.userSettingsModel.locale,
133-
languageId: this.userSettingsModel.languageId
134-
}));
135-
this.getUserSettings();
136-
});
137-
this.store.dispatch(loadAppMenu());
191+
languageId: this.userSettingsModel.languageId,
192+
})
193+
);
194+
this.getUserSettings();
138195
});
196+
this.store.dispatch(loadAppMenu());
197+
});
139198
}
140199

200+
// getEnabledLanguages() {
201+
// this.getLanguagesSub$ = this.appSettingsStateService.getLanguages()
202+
// .pipe(tap(data => {
203+
// if (data && data.success && data.model) {
204+
// this.appLanguages = data.model;
205+
// this.activeLanguages = this.appLanguages.languages.filter((x) => x.isActive);
206+
// this.getTimeZones();
207+
// this.getGoogleAuthenticatorInfo();
208+
// this.getUserSettings();
209+
// }
210+
// }))
211+
// .subscribe();
212+
// }
213+
141214
getEnabledLanguages() {
142215
this.getLanguagesSub$ = this.appSettingsStateService.getLanguages()
143-
.pipe(tap(data => {
144-
if (data && data.success && data.model) {
145-
this.appLanguages = data.model;
146-
this.activeLanguages = this.appLanguages.languages.filter((x) => x.isActive);
147-
this.getTimeZones();
148-
this.getGoogleAuthenticatorInfo();
149-
this.getUserSettings();
150-
}
151-
}))
216+
.pipe(
217+
tap((data) => {
218+
if (data && data.success && data.model) {
219+
this.appLanguages = data.model;
220+
this.activeLanguages = this.appLanguages.languages.filter((x) => x.isActive);
221+
this.getTimeZones();
222+
this.getGoogleAuthenticatorInfo();
223+
224+
// Fetch user settings after languages are available
225+
this.userSettingsService.getUserSettings().subscribe((data) => {
226+
this.userSettingsModel = data.model;
227+
228+
this.profileForm.patchValue({
229+
locale: this.userSettingsModel.locale,
230+
formats: this.userSettingsModel.formats,
231+
timeZone: this.userSettingsModel.timeZone,
232+
darkTheme: this.userSettingsModel.darkTheme,
233+
isTwoFactorEnabled: this.googleAuthInfoModel.isTwoFactorEnabled,
234+
});
235+
});
236+
}
237+
})
238+
)
152239
.subscribe();
153240
}
154241

242+
155243
get languages() {
156244
return this.appLanguages.languages.filter((x) => x.isActive);
157245
}

‎eform-client/src/app/modules/plugins-management/components/installed/installed-plugin-permissions/installed-plugin-permissions.component.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
1-
<h3 mat-dialog-title>{{'Plugin permissions' | translate}}</h3>
2-
<div mat-dialog-content>
1+
<h3 mat-dialog-title>{{ 'Plugin permissions' | translate }}</h3>
2+
3+
<div mat-dialog-content [formGroup]="permissionsForm">
34
<div class="flex-wrap d-flex flex-row" *ngIf="pluginGroupPermissions">
45
<mat-card *ngFor="let groupPermissions of pluginGroupPermissions" class="m-2">
56
<mat-card-header>
6-
<h3>{{getSecurityGroupName(groupPermissions.groupId)}}</h3>
7+
<h3>{{ getSecurityGroupName(groupPermissions.groupId) }}</h3>
78
</mat-card-header>
89
<mat-card-content>
910
<ng-container *ngFor="let permission of groupPermissions.permissions">
1011
<div class="d-flex flex-column">
1112
<mat-checkbox
13+
class="mb-2"
14+
[formControlName]="getPermissionControlName(groupPermissions.groupId, permission.permissionId)"
1215
id="perm_{{groupPermissions.groupId}}_{{permission.permissionId}}"
13-
[(ngModel)]="permission.isEnabled"
14-
class="mb-2">
15-
{{permission.permissionName | translate}}
16+
>
17+
{{ permission.permissionName | translate }}
1618
</mat-checkbox>
1719
</div>
1820
</ng-container>
@@ -27,13 +29,13 @@ <h3>{{getSecurityGroupName(groupPermissions.groupId)}}</h3>
2729
(click)="updatePluginPermissions()"
2830
id="saveBtn"
2931
>
30-
{{'Save' | translate}}
32+
{{ 'Save' | translate }}
3133
</button>
3234
<button
3335
mat-raised-button
3436
(click)="hide()"
3537
id="cancelCreateBtn"
3638
>
37-
{{'Cancel' | translate}}
39+
{{ 'Cancel' | translate }}
3840
</button>
3941
</div>

‎eform-client/src/app/modules/plugins-management/components/installed/installed-plugin-permissions/installed-plugin-permissions.component.ts‎

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,85 @@
1-
import { Component, OnInit, inject } from '@angular/core';
1+
import {Component, OnInit, inject} from '@angular/core';
22
import {
33
PluginGroupPermissionsListModel,
44
PluginGroupPermissionsUpdateModel,
55
SecurityGroupModel,
66
} from 'src/app/common/models';
7+
import {FormBuilder, FormGroup, FormControl} from '@angular/forms';
78
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
89
import {PluginPermissionsService} from 'src/app/common/services';
910

1011
@Component({
11-
selector: 'app-installed-plugin-permissions',
12-
templateUrl: './installed-plugin-permissions.component.html',
13-
styleUrls: ['./installed-plugin-permissions.component.scss'],
14-
standalone: false
12+
selector: 'app-installed-plugin-permissions',
13+
templateUrl: './installed-plugin-permissions.component.html',
14+
styleUrls: ['./installed-plugin-permissions.component.scss'],
15+
standalone: false,
1516
})
17+
1618
export class InstalledPluginPermissionsComponent implements OnInit {
1719
private pluginPermissionsService = inject(PluginPermissionsService);
20+
private fb = inject(FormBuilder);
1821
dialogRef = inject<MatDialogRef<InstalledPluginPermissionsComponent>>(MatDialogRef);
1922

2023
securityGroups: SecurityGroupModel[] = [];
2124
pluginGroupPermissions: PluginGroupPermissionsListModel[] = [];
2225
pluginId: number;
26+
permissionsForm: FormGroup = this.fb.group({});
2327

2428
constructor() {
2529
const model = inject<{
26-
pluginPermissions: PluginGroupPermissionsUpdateModel;
27-
securityGroups: SecurityGroupModel[];
28-
}>(MAT_DIALOG_DATA);
30+
pluginPermissions: PluginGroupPermissionsUpdateModel;
31+
securityGroups: SecurityGroupModel[];
32+
}>(MAT_DIALOG_DATA);
2933

3034
this.pluginId = model.pluginPermissions.pluginId;
3135
this.pluginGroupPermissions = model.pluginPermissions.groupPermissions;
3236
this.securityGroups = model.securityGroups;
3337
}
3438

35-
ngOnInit() {}
39+
ngOnInit() {
40+
this.initializeForm();
41+
}
42+
43+
private initializeForm() {
44+
const controls: { [key: string]: FormControl } = {};
45+
46+
this.pluginGroupPermissions.forEach(group => {
47+
group.permissions.forEach(permission => {
48+
const controlName = this.getPermissionControlName(group.groupId, permission.permissionId);
49+
controls[controlName] = new FormControl(permission.isEnabled);
50+
});
51+
});
52+
53+
this.permissionsForm = this.fb.group(controls);
54+
}
55+
56+
getPermissionControlName(groupId: number, permissionId: number): string {
57+
return `perm_${groupId}_${permissionId}`;
58+
}
3659

3760
hide(result = false) {
3861
this.dialogRef.close(result);
3962
}
4063

4164
getSecurityGroupName(id: number) {
42-
const group = this.securityGroups.find((g) => g.id === id);
65+
const group = this.securityGroups.find(g => g.id === id);
4366
return group ? group.groupName : '';
4467
}
4568

4669
updatePluginPermissions() {
70+
71+
this.pluginGroupPermissions.forEach(group => {
72+
group.permissions.forEach(permission => {
73+
const controlName = this.getPermissionControlName(group.groupId, permission.permissionId);
74+
permission.isEnabled = this.permissionsForm.get(controlName)?.value ?? false;
75+
});
76+
});
77+
4778
this.pluginPermissionsService
48-
.updatePluginGroupPermissions({pluginId: this.pluginId, groupPermissions: this.pluginGroupPermissions})
79+
.updatePluginGroupPermissions({
80+
pluginId: this.pluginId,
81+
groupPermissions: this.pluginGroupPermissions,
82+
})
4983
.subscribe((data) => {
5084
if (data && data.success) {
5185
this.hide(true);

0 commit comments

Comments
 (0)