From 909f22979f8fe667b1b7675d3c08ed982c394a23 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Wed, 7 Apr 2021 17:08:25 +0300 Subject: [PATCH 1/2] add user profile screen --- apps/red-ui/src/app/app-routing.module.ts | 15 +++ apps/red-ui/src/app/app.module.ts | 3 +- .../base-screen/base-screen.component.html | 124 ++++++++++-------- .../base-screen/base-screen.component.ts | 8 +- .../user-profile-screen.component.html | 57 ++++++++ .../user-profile-screen.component.scss | 48 +++++++ .../user-profile-screen.component.ts | 91 +++++++++++++ apps/red-ui/src/assets/i18n/en.json | 16 ++- 8 files changed, 303 insertions(+), 59 deletions(-) create mode 100644 apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html create mode 100644 apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss create mode 100644 apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts index 23d068454..676a591e8 100644 --- a/apps/red-ui/src/app/app-routing.module.ts +++ b/apps/red-ui/src/app/app-routing.module.ts @@ -9,6 +9,7 @@ import { RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; import { DownloadsListScreenComponent } from './components/downloads-list-screen/downloads-list-screen.component'; import { AppStateGuard } from './state/app-state.guard'; +import { UserProfileScreenComponent } from './components/user-profile/user-profile-screen.component'; const routes = [ { @@ -37,6 +38,20 @@ const routes = [ routeGuards: [AuthGuard, RedRoleGuard] } }, + { + path: 'ui/my-profile', + component: BaseScreenComponent, + children: [ + { + path: '', + component: UserProfileScreenComponent + } + ], + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] + } + }, { path: 'ui/admin', component: BaseScreenComponent, diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index b9142f7a1..d89bb2958 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -29,12 +29,13 @@ import { DownloadsListScreenComponent } from './components/downloads-list-screen import { AppRoutingModule } from './app-routing.module'; import { SharedModule } from './modules/shared/shared.module'; import { FileUploadDownloadModule } from './modules/upload-download/file-upload-download.module'; +import { UserProfileScreenComponent } from './components/user-profile/user-profile-screen.component'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); } -const screens = [BaseScreenComponent, PdfViewerScreenComponent, HtmlDebugScreenComponent, DownloadsListScreenComponent]; +const screens = [BaseScreenComponent, PdfViewerScreenComponent, HtmlDebugScreenComponent, DownloadsListScreenComponent, UserProfileScreenComponent]; const components = [AppComponent, LogoComponent, AuthErrorComponent, ToastComponent, NotificationsComponent, ...screens]; diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html index 88da93e88..f0b6e76c2 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html @@ -1,17 +1,18 @@ -
-
-
-
- - - - +
-
+
- + {{ 'top-bar.navigation-items.back-to-projects' | translate }} - - - + + + {{ appStateService.activeProject.project.projectName }} - + {{ appStateService.activeFile.filename }}
-
- +
+ -
{{ titleService.getTitle() }}
- +
{{ titleService.getTitle() }}
+
-
- - - +
+ + + + - - - - + + + -
-
+
diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts index 226d8ae7e..738eab1df 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts @@ -9,6 +9,7 @@ import { AppConfigService } from '../../modules/app-config/app-config.service'; import { Title } from '@angular/platform-browser'; import { FileDownloadService } from '../../modules/upload-download/services/file-download.service'; import { StatusOverlayService } from '../../modules/upload-download/services/status-overlay.service'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'redaction-base-screen', @@ -32,7 +33,8 @@ export class BaseScreenComponent { private readonly _appConfigService: AppConfigService, private readonly _router: Router, private readonly _languageService: LanguageService, - private readonly _userService: UserService + private readonly _userService: UserService, + private readonly _translateService: TranslateService ) { _router.events.subscribe(() => { this._projectsView = this._router.url.indexOf('/ui/projects') === 0; @@ -51,6 +53,10 @@ export class BaseScreenComponent { return this.fileDownloadService.hasPendingDownloads; } + get languages(): string[] { + return this._translateService.langs; + } + logout() { this._userService.logout(); } diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html new file mode 100644 index 000000000..2bdd2b1f3 --- /dev/null +++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html @@ -0,0 +1,57 @@ +
+
+
+
+
+
+
+
+
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ + + + {{('top-bar.navigation-items.my-account.children.language.' + language) | translate}} + + +
+
+
+
+ +
+
+
+
+
+ + diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss new file mode 100644 index 000000000..f68f276d4 --- /dev/null +++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss @@ -0,0 +1,48 @@ +@import '../../../assets/styles/red-mixins'; + +.left-container { + width: 100vw; + background-color: $grey-2; + display: flex; + justify-content: center; + @include scroll-bar; + overflow: auto; + + .dialog { + border-radius: 8px; + margin-top: 40px; + margin-bottom: 70px; + background-color: $white; + max-width: 650px; + height: fit-content; + box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); + position: unset; + + .heading-l { + margin-bottom: 16px; + } + + .dialog-content { + display: flex; + + .dialog-content-left { + min-width: 300px; + margin-right: 64px; + } + + .link-action { + margin-top: 8px; + } + } + } +} + +.full-height { + display: flex; + flex-direction: row; + position: absolute; + bottom: 0; + width: 100%; + height: calc(100% - 50px); + z-index: 1; +} diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts new file mode 100644 index 000000000..e10a2252b --- /dev/null +++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts @@ -0,0 +1,91 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { UserService } from '../../services/user.service'; +import { PermissionsService } from '../../services/permissions.service'; +import { LanguageService } from '../../i18n/language.service'; +import { TranslateService } from '@ngx-translate/core'; +import { User, UserControllerService } from '@redaction/red-ui-http'; + +interface ProfileModel { + email: string; + firstName: string; + lastName: string; + language: string; +} + +@Component({ + selector: 'redaction-user-profile-screen', + templateUrl: './user-profile-screen.component.html', + styleUrls: ['./user-profile-screen.component.scss'] +}) +export class UserProfileScreenComponent implements OnInit { + public viewReady = false; + public formGroup: FormGroup; + private _initialValue: ProfileModel; + private _user: User; + + constructor( + public readonly permissionsService: PermissionsService, + private readonly _formBuilder: FormBuilder, + private readonly _userService: UserService, + private readonly _userControllerService: UserControllerService, + private readonly _languageService: LanguageService, + private readonly _translateService: TranslateService + ) { + this.formGroup = this._formBuilder.group({ + email: [undefined, [Validators.required, Validators.email]], + firstName: [undefined], + lastName: [undefined], + language: [undefined] + }); + } + + ngOnInit() { + this._loadData(); + } + + private _loadData() { + try { + this._user = this._userService.getUserById(this._userService.userId); + console.log(this._userService.allUsers); + this._initialValue = { + email: this._user.email, + firstName: this._user.firstName, + lastName: this._user.lastName, + language: this._languageService.currentLanguage + }; + console.log(this._initialValue); + this.formGroup.patchValue(this._initialValue, { emitEvent: false }); + } catch (e) { + } finally { + this.viewReady = true; + } + } + + public changeLanguage(language: string): void { + this._languageService.changeLanguage(language); + } + + public get languages(): string[] { + return this._translateService.langs; + } + + public async save(): Promise { + this.viewReady = false; + const value = this.formGroup.getRawValue() as ProfileModel; + this.changeLanguage(value.language); + delete value.language; + + await this._userControllerService + .updateProfile( + { + ...value, + roles: this._user.roles + }, + this._user.userId + ) + .toPromise(); + this._initialValue = this.formGroup.getRawValue(); + this.viewReady = true; + } +} diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index f41f85c77..abd684111 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -63,10 +63,11 @@ "children": { "admin": "Settings", "downloads": "My Downloads", + "my-profile": "My Profile", "language": { "label": "Language", - "english": "English", - "german": "German" + "en": "English", + "de": "German" }, "logout": "Logout" } @@ -791,6 +792,17 @@ "save": "Save Document Info", "save-approval": "Save and Send for Approval" }, + "user-profile": { + "title": "My profile", + "form": { + "email": "Email", + "first-name": "First name", + "last-name": "Last name" + }, + "actions": { + "save": "Save profile" + } + }, "user-listing": { "table-header": { "title": "{{length}} users" From 813b887cfba4cc6ae1f36b87929a8c02cef9fbb6 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Thu, 8 Apr 2021 13:07:26 +0300 Subject: [PATCH 2/2] refactor user profile --- .../user-profile-screen.component.html | 56 ++++++++----------- .../user-profile-screen.component.scss | 32 +---------- .../user-profile-screen.component.ts | 54 ++++++++++++------ .../smtp-config-screen.component.scss | 28 ---------- .../src/assets/styles/red-page-layout.scss | 28 ++++++++++ 5 files changed, 87 insertions(+), 111 deletions(-) diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html index 2bdd2b1f3..ecd08b43d 100644 --- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html +++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html @@ -1,51 +1,39 @@ -
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
+ +
+
+
- +
-
+
- +
-
+
- +
-
+
- - - {{('top-bar.navigation-items.my-account.children.language.' + language) | translate}} + + + {{ 'top-bar.navigation-items.my-account.children.language.' + language | translate }}
-
-
@@ -54,4 +42,4 @@
- + diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss index f68f276d4..b0efc79c6 100644 --- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss +++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss @@ -1,40 +1,10 @@ @import '../../../assets/styles/red-mixins'; .left-container { - width: 100vw; background-color: $grey-2; - display: flex; justify-content: center; @include scroll-bar; overflow: auto; - - .dialog { - border-radius: 8px; - margin-top: 40px; - margin-bottom: 70px; - background-color: $white; - max-width: 650px; - height: fit-content; - box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); - position: unset; - - .heading-l { - margin-bottom: 16px; - } - - .dialog-content { - display: flex; - - .dialog-content-left { - min-width: 300px; - margin-right: 64px; - } - - .link-action { - margin-top: 8px; - } - } - } } .full-height { @@ -43,6 +13,6 @@ position: absolute; bottom: 0; width: 100%; - height: calc(100% - 50px); + height: calc(100% + 50px); z-index: 1; } diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts index e10a2252b..4967e06a0 100644 --- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts +++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts @@ -44,17 +44,15 @@ export class UserProfileScreenComponent implements OnInit { this._loadData(); } - private _loadData() { + private _loadData(): void { try { this._user = this._userService.getUserById(this._userService.userId); - console.log(this._userService.allUsers); this._initialValue = { email: this._user.email, firstName: this._user.firstName, lastName: this._user.lastName, language: this._languageService.currentLanguage }; - console.log(this._initialValue); this.formGroup.patchValue(this._initialValue, { emitEvent: false }); } catch (e) { } finally { @@ -62,8 +60,21 @@ export class UserProfileScreenComponent implements OnInit { } } - public changeLanguage(language: string): void { - this._languageService.changeLanguage(language); + public get languageChanged(): boolean { + return this._initialValue['language'] !== this.formGroup.get('language').value; + } + + public get profileChanged(): boolean { + const keys = Object.keys(this.formGroup.getRawValue()); + keys.splice(keys.indexOf('language'), 1); + + for (const key of keys) { + if (this._initialValue[key] !== this.formGroup.get(key).value) { + return true; + } + } + + return false; } public get languages(): string[] { @@ -72,20 +83,27 @@ export class UserProfileScreenComponent implements OnInit { public async save(): Promise { this.viewReady = false; - const value = this.formGroup.getRawValue() as ProfileModel; - this.changeLanguage(value.language); - delete value.language; - await this._userControllerService - .updateProfile( - { - ...value, - roles: this._user.roles - }, - this._user.userId - ) - .toPromise(); - this._initialValue = this.formGroup.getRawValue(); + if (this.languageChanged) { + this._languageService.changeLanguage(this.formGroup.get('language').value); + } + + if (this.profileChanged) { + const value = this.formGroup.value as ProfileModel; + delete value.language; + + await this._userControllerService + .updateProfile( + { + ...value, + roles: this._user.roles + }, + this._user.userId + ) + .toPromise(); + } + + this._initialValue = this.formGroup.value; this.viewReady = true; } } diff --git a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss index 32d693e2d..3447b574d 100644 --- a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss @@ -8,34 +8,6 @@ justify-content: center; @include scroll-bar; overflow: auto; - - .dialog { - border-radius: 8px; - margin-top: 40px; - margin-bottom: 70px; - background-color: $white; - max-width: 650px; - height: fit-content; - box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); - position: unset; - - .heading-l { - margin-bottom: 16px; - } - - .dialog-content { - display: flex; - - .dialog-content-left { - min-width: 300px; - margin-right: 64px; - } - - .link-action { - margin-top: 8px; - } - } - } } .w-100 { diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss index f26f6bcf2..9d8de2063 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -120,6 +120,34 @@ body { } } + .dialog { + border-radius: 8px; + margin-top: 40px; + margin-bottom: 70px; + background-color: $white; + max-width: 650px; + height: fit-content; + box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); + position: unset; + + .heading-l { + margin-bottom: 16px; + } + + .dialog-content { + display: flex; + + .dialog-content-left { + min-width: 300px; + margin-right: 64px; + } + + .link-action { + margin-top: 8px; + } + } + } + @media only screen and (max-width: 1600px) { redaction-initials-avatar .username:not(.always-visible) { display: none;