You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by bo...@apache.org on 2023/01/07 09:09:36 UTC

[streampipes] branch chore/formatting-linting-profile created (now 2c41e830c)

This is an automated email from the ASF dual-hosted git repository.

bossenti pushed a change to branch chore/formatting-linting-profile
in repository https://gitbox.apache.org/repos/asf/streampipes.git


      at 2c41e830c [#877] apply formatting and linting to profile module

This branch includes the following new commits:

     new 2c41e830c [#877] apply formatting and linting to profile module

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



[streampipes] 01/01: [#877] apply formatting and linting to profile module

Posted by bo...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

bossenti pushed a commit to branch chore/formatting-linting-profile
in repository https://gitbox.apache.org/repos/asf/streampipes.git

commit 2c41e830c90270131900fbf4a004207ec29e3409
Author: bossenti <bo...@posteo.de>
AuthorDate: Sat Jan 7 09:58:35 2023 +0100

    [#877] apply formatting and linting to profile module
---
 ui/.eslintignore                                   |   1 -
 ui/.prettierignore                                 |   1 -
 .../profile/components/basic-profile-settings.ts   |  65 ++++----
 .../general-profile-settings.component.html        |  84 ++++++++---
 .../general-profile-settings.component.scss        |  12 +-
 .../general/general-profile-settings.component.ts  | 144 +++++++++---------
 .../token/token-management-settings.component.html | 102 ++++++++++---
 .../token/token-management-settings.component.scss |  34 ++---
 .../token/token-management-settings.component.ts   |  85 ++++++-----
 .../change-email-dialog.component.html             |  77 +++++++---
 .../change-email-dialog.component.scss             |   3 +-
 .../change-email/change-email-dialog.component.ts  | 164 ++++++++++++---------
 .../change-password-dialog.component.html          |  78 +++++++---
 .../change-password-dialog.component.scss          |   2 +-
 .../change-password-dialog.component.ts            | 141 ++++++++++--------
 ui/src/app/profile/profile.component.html          |  35 ++++-
 ui/src/app/profile/profile.component.scss          |   2 +-
 ui/src/app/profile/profile.component.ts            |  25 ++--
 ui/src/app/profile/profile.module.ts               |  19 +--
 ui/src/app/profile/profile.service.ts              |  84 +++++++----
 20 files changed, 700 insertions(+), 458 deletions(-)

diff --git a/ui/.eslintignore b/ui/.eslintignore
index a4ba0955e..9ac0d7cfd 100644
--- a/ui/.eslintignore
+++ b/ui/.eslintignore
@@ -37,6 +37,5 @@ src/app/notifications
 src/app/NS
 src/app/pipeline-details
 src/app/pipelines
-src/app/profile
 src/app/services
 src/scss
diff --git a/ui/.prettierignore b/ui/.prettierignore
index e90ed933f..6b2d8c34a 100644
--- a/ui/.prettierignore
+++ b/ui/.prettierignore
@@ -38,6 +38,5 @@ src/app/notifications
 src/app/NS
 src/app/pipeline-details
 src/app/pipelines
-src/app/profile
 src/app/services
 src/scss
diff --git a/ui/src/app/profile/components/basic-profile-settings.ts b/ui/src/app/profile/components/basic-profile-settings.ts
index f9710fdee..3f14cf829 100644
--- a/ui/src/app/profile/components/basic-profile-settings.ts
+++ b/ui/src/app/profile/components/basic-profile-settings.ts
@@ -25,40 +25,41 @@ import { AuthService } from '../../services/auth.service';
 
 @Directive()
 export abstract class BasicProfileSettings {
+    userData: UserAccount;
+    profileLoaded = false;
+    profileUpdating = false;
+    errorMessage: string;
 
-  userData: UserAccount;
-  profileLoaded = false;
-  profileUpdating = false;
-  errorMessage: string;
+    constructor(
+        protected profileService: ProfileService,
+        public appConstants: AppConstants,
+        private tokenService: JwtTokenStorageService,
+        protected authService: AuthService,
+    ) {}
 
-  constructor(protected profileService: ProfileService,
-              public appConstants: AppConstants,
-              private tokenService: JwtTokenStorageService,
-              protected authService: AuthService) {
+    receiveUserData() {
+        this.profileService
+            .getUserProfile(this.authService.user$.getValue().username)
+            .subscribe(userData => {
+                this.userData = userData;
+                this.onUserDataReceived();
+                this.profileLoaded = true;
+            });
+    }
 
-  }
+    saveProfileSettings() {
+        this.profileUpdating = true;
+        this.profileService
+            .updateUserProfile(this.userData)
+            .subscribe(response => {
+                this.profileUpdating = false;
+                if (response.success) {
+                    this.receiveUserData();
+                } else {
+                    this.errorMessage = response.notifications[0].title;
+                }
+            });
+    }
 
-  receiveUserData() {
-    this.profileService
-        .getUserProfile(this.authService.user$.getValue().username)
-        .subscribe(userData => {
-          this.userData = userData;
-          this.onUserDataReceived();
-          this.profileLoaded = true;
-        });
-  }
-
-  saveProfileSettings() {
-    this.profileUpdating = true;
-    this.profileService.updateUserProfile(this.userData).subscribe(response => {
-      this.profileUpdating = false;
-      if (response.success) {
-        this.receiveUserData();
-      } else {
-        this.errorMessage = response.notifications[0].title;
-      }
-    });
-  }
-
-  abstract onUserDataReceived();
+    abstract onUserDataReceived();
 }
diff --git a/ui/src/app/profile/components/general/general-profile-settings.component.html b/ui/src/app/profile/components/general/general-profile-settings.component.html
index 8d96b0580..cca26a0d5 100644
--- a/ui/src/app/profile/components/general/general-profile-settings.component.html
+++ b/ui/src/app/profile/components/general/general-profile-settings.component.html
@@ -17,51 +17,89 @@
   -->
 
 <div fxLayout="row" class="page-container-padding">
-    <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" *ngIf="profileLoaded">
-        <sp-split-section title="Main Settings" subtitle="Manage your basic profile settings here.">
+    <div
+        fxFlex="100"
+        fxLayout="column"
+        fxLayoutAlign="start start"
+        *ngIf="profileLoaded"
+    >
+        <sp-split-section
+            title="Main Settings"
+            subtitle="Manage your basic profile settings here."
+        >
             <div fxLayout="row" fxLayoutAlign="start center">
-                <span>{{userData.username}}</span>
-                <button mat-button
-                        mat-raised-button
-                        color="accent"
-                        class="ml-15"
-                        (click)="openChangeEmailDialog()">Change email
+                <span>{{ userData.username }}</span>
+                <button
+                    mat-button
+                    mat-raised-button
+                    color="accent"
+                    class="ml-15"
+                    (click)="openChangeEmailDialog()"
+                >
+                    Change email
                 </button>
             </div>
             <mat-form-field fxFlex color="accent">
                 <mat-label>Full Name</mat-label>
-                <input [(ngModel)]="userData.fullName" matInput/>
+                <input [(ngModel)]="userData.fullName" matInput />
             </mat-form-field>
             <div fxLayout="row" fxLayoutAlign="start center">
-                <button mat-button mat-raised-button color="accent"
-                        (click)="saveProfileSettings()">
+                <button
+                    mat-button
+                    mat-raised-button
+                    color="accent"
+                    (click)="saveProfileSettings()"
+                >
                     Update profile
                 </button>
-                <button mat-button mat-raised-button color="accent" class="ml-15"
-                        (click)="openChangePasswordDialog()">
+                <button
+                    mat-button
+                    mat-raised-button
+                    color="accent"
+                    class="ml-15"
+                    (click)="openChangePasswordDialog()"
+                >
                     Change password
                 </button>
             </div>
         </sp-split-section>
         <mat-divider></mat-divider>
         <div fxLayout="row" fxFlex="100" class="mt-30">
-            <sp-split-section title="Appearance"
-                              subtitle="Change the appearance of your {{appConstants.APP_NAME}} installation">
+            <sp-split-section
+                title="Appearance"
+                subtitle="Change the appearance of your {{
+                    appConstants.APP_NAME
+                }} installation"
+            >
                 <label id="radio-group-label">Color Scheme</label>
-                <mat-radio-group [(ngModel)]="darkMode"
-                                 aria-labelledby="radio-group-label"
-                                 class="appearance-radio-group" (ngModelChange)="changeModePreview($event)">
-                    <mat-radio-button [value]="false" class="appearance-radio-button">Light Mode</mat-radio-button>
-                    <mat-radio-button [value]="true" class="appearance-radio-button">Dark Mode</mat-radio-button>
+                <mat-radio-group
+                    [(ngModel)]="darkMode"
+                    aria-labelledby="radio-group-label"
+                    class="appearance-radio-group"
+                    (ngModelChange)="changeModePreview($event)"
+                >
+                    <mat-radio-button
+                        [value]="false"
+                        class="appearance-radio-button"
+                        >Light Mode</mat-radio-button
+                    >
+                    <mat-radio-button
+                        [value]="true"
+                        class="appearance-radio-button"
+                        >Dark Mode</mat-radio-button
+                    >
                 </mat-radio-group>
                 <div>
-                    <button mat-button mat-raised-button color="accent"
-                            (click)="updateAppearanceMode()">
+                    <button
+                        mat-button
+                        mat-raised-button
+                        color="accent"
+                        (click)="updateAppearanceMode()"
+                    >
                         Save color scheme
                     </button>
                 </div>
             </sp-split-section>
         </div>
     </div>
-
 </div>
diff --git a/ui/src/app/profile/components/general/general-profile-settings.component.scss b/ui/src/app/profile/components/general/general-profile-settings.component.scss
index f53b1d0ad..423962b58 100644
--- a/ui/src/app/profile/components/general/general-profile-settings.component.scss
+++ b/ui/src/app/profile/components/general/general-profile-settings.component.scss
@@ -17,19 +17,19 @@
  */
 
 .title-section {
-  width: 300px;
+    width: 300px;
 }
 
 .appearance-radio-group {
-  display: flex;
-  flex-direction: column;
-  margin: 15px 0;
+    display: flex;
+    flex-direction: column;
+    margin: 15px 0;
 }
 
 .appearance-radio-button {
-  margin: 5px;
+    margin: 5px;
 }
 
 .ml-15 {
-  margin-left: 15px;
+    margin-left: 15px;
 }
diff --git a/ui/src/app/profile/components/general/general-profile-settings.component.ts b/ui/src/app/profile/components/general/general-profile-settings.component.ts
index 5b3138926..88f169395 100644
--- a/ui/src/app/profile/components/general/general-profile-settings.component.ts
+++ b/ui/src/app/profile/components/general/general-profile-settings.component.ts
@@ -28,84 +28,94 @@ import { ChangePasswordDialogComponent } from '../../dialog/change-password/chan
 import { Router } from '@angular/router';
 
 @Component({
-  selector: 'general-profile-settings',
-  templateUrl: './general-profile-settings.component.html',
-  styleUrls: ['./general-profile-settings.component.scss']
+    selector: 'sp-general-profile-settings',
+    templateUrl: './general-profile-settings.component.html',
+    styleUrls: ['./general-profile-settings.component.scss'],
 })
-export class GeneralProfileSettingsComponent extends BasicProfileSettings implements OnInit, OnDestroy {
+export class GeneralProfileSettingsComponent
+    extends BasicProfileSettings
+    implements OnInit, OnDestroy
+{
+    darkMode = false;
+    originalDarkMode = false;
+    darkModeChanged = false;
 
-  darkMode = false;
-  originalDarkMode = false;
-  darkModeChanged = false;
-
-  constructor(authService: AuthService,
-              profileService: ProfileService,
-              appConstants: AppConstants,
-              tokenService: JwtTokenStorageService,
-              private dialogService: DialogService,
-              private router: Router) {
-    super(profileService, appConstants, tokenService, authService);
-  }
-
-  ngOnInit(): void {
-    this.authService.darkMode$.subscribe(darkMode => this.darkMode = darkMode);
-    this.receiveUserData();
-  }
+    constructor(
+        authService: AuthService,
+        profileService: ProfileService,
+        appConstants: AppConstants,
+        tokenService: JwtTokenStorageService,
+        private dialogService: DialogService,
+        private router: Router,
+    ) {
+        super(profileService, appConstants, tokenService, authService);
+    }
 
-  ngOnDestroy(): void {
-    if (!this.darkModeChanged) {
-      this.authService.darkMode$.next(this.originalDarkMode);
+    ngOnInit(): void {
+        this.authService.darkMode$.subscribe(
+            darkMode => (this.darkMode = darkMode),
+        );
+        this.receiveUserData();
     }
-  }
 
-  changeModePreview(value: boolean) {
-    this.authService.darkMode$.next(value);
-  }
+    ngOnDestroy(): void {
+        if (!this.darkModeChanged) {
+            this.authService.darkMode$.next(this.originalDarkMode);
+        }
+    }
 
-  onUserDataReceived() {
-    this.originalDarkMode = this.userData.darkMode;
-    this.authService.darkMode$.next(this.userData.darkMode);
-  }
+    changeModePreview(value: boolean) {
+        this.authService.darkMode$.next(value);
+    }
 
-  updateAppearanceMode() {
-    this.profileService.updateAppearanceMode(this.userData.username, this.darkMode).subscribe(response => {
-      this.darkModeChanged = true;
-    });
-  }
+    onUserDataReceived() {
+        this.originalDarkMode = this.userData.darkMode;
+        this.authService.darkMode$.next(this.userData.darkMode);
+    }
 
-  openChangeEmailDialog() {
-    const dialogRef = this.dialogService.open(ChangeEmailDialogComponent, {
-      panelType: PanelType.SLIDE_IN_PANEL,
-      title: 'Change email',
-      width: '50vw',
-      data: {
-        'user': this.userData,
-      }
-    });
+    updateAppearanceMode() {
+        this.profileService
+            .updateAppearanceMode(this.userData.username, this.darkMode)
+            .subscribe(response => {
+                this.darkModeChanged = true;
+            });
+    }
 
-    this.afterClose(dialogRef);
-  }
+    openChangeEmailDialog() {
+        const dialogRef = this.dialogService.open(ChangeEmailDialogComponent, {
+            panelType: PanelType.SLIDE_IN_PANEL,
+            title: 'Change email',
+            width: '50vw',
+            data: {
+                user: this.userData,
+            },
+        });
 
-  openChangePasswordDialog() {
-    const dialogRef = this.dialogService.open(ChangePasswordDialogComponent, {
-      panelType: PanelType.SLIDE_IN_PANEL,
-      title: 'Change password',
-      width: '50vw',
-      data: {
-        'user': this.userData,
-      }
-    });
+        this.afterClose(dialogRef);
+    }
 
-    this.afterClose(dialogRef);
-  }
+    openChangePasswordDialog() {
+        const dialogRef = this.dialogService.open(
+            ChangePasswordDialogComponent,
+            {
+                panelType: PanelType.SLIDE_IN_PANEL,
+                title: 'Change password',
+                width: '50vw',
+                data: {
+                    user: this.userData,
+                },
+            },
+        );
 
-  afterClose(dialogRef: DialogRef<any>) {
-    dialogRef.afterClosed().subscribe(refresh => {
-      if (refresh) {
-        this.authService.logout();
-        this.router.navigate(['login']);
-      }
-    });
-  }
+        this.afterClose(dialogRef);
+    }
 
+    afterClose(dialogRef: DialogRef<any>) {
+        dialogRef.afterClosed().subscribe(refresh => {
+            if (refresh) {
+                this.authService.logout();
+                this.router.navigate(['login']);
+            }
+        });
+    }
 }
diff --git a/ui/src/app/profile/components/token/token-management-settings.component.html b/ui/src/app/profile/components/token/token-management-settings.component.html
index ebcd89392..37f79e14a 100644
--- a/ui/src/app/profile/components/token/token-management-settings.component.html
+++ b/ui/src/app/profile/components/token/token-management-settings.component.html
@@ -17,32 +17,62 @@
   -->
 
 <div fxLayout="row" class="page-container-padding">
-    <div fxFlex="100" fxLayout="column" fxLayoutAlign="start start" *ngIf="profileLoaded">
-        <sp-split-section title="API Keys" subtitle="Manage your API keys for third-party application access to
-                    {{appConstants.APP_NAME}}">
+    <div
+        fxFlex="100"
+        fxLayout="column"
+        fxLayoutAlign="start start"
+        *ngIf="profileLoaded"
+    >
+        <sp-split-section
+            title="API Keys"
+            subtitle="Manage your API keys for third-party application access to
+                    {{ appConstants.APP_NAME }}"
+        >
             <div fxLayout="column" class="subsection">
                 <div class="subsection-title">New API key</div>
                 <mat-form-field fxFlex color="accent">
                     <mat-label>Name</mat-label>
-                    <input [(ngModel)]="newTokenName" matInput/>
+                    <input [(ngModel)]="newTokenName" matInput />
                 </mat-form-field>
                 <div>
-                    <button mat-button mat-raised-button color="accent"
-                            (click)="requestNewKey()">
+                    <button
+                        mat-button
+                        mat-raised-button
+                        color="accent"
+                        (click)="requestNewKey()"
+                    >
                         Create new API key
                     </button>
                 </div>
             </div>
-            <div fxLayout="column" class="subsection mt-10" *ngIf="newTokenCreated">
+            <div
+                fxLayout="column"
+                class="subsection mt-10"
+                *ngIf="newTokenCreated"
+            >
                 <div class="subsection-title">Key created</div>
-                <div class="subsection-small">Your new API key has been created. Please copy the key now - you won't be able to see the key again.</div>
-                <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" class="new-token">
-                    <div class="token-name">{{newlyCreatedToken.tokenName}}</div>
+                <div class="subsection-small">
+                    Your new API key has been created. Please copy the key now -
+                    you won't be able to see the key again.
+                </div>
+                <div
+                    fxFlex="100"
+                    fxLayout="row"
+                    fxLayoutAlign="start center"
+                    class="new-token"
+                >
+                    <div class="token-name">
+                        {{ newlyCreatedToken.tokenName }}
+                    </div>
                     <div class="displayed-token">
-                        {{newlyCreatedToken.rawToken}}
+                        {{ newlyCreatedToken.rawToken }}
                     </div>
-                    <button mat-button mat-raised-button color="accent"
-                            [cdkCopyToClipboard]="newlyCreatedToken.rawToken">
+                    <button
+                        mat-button
+                        mat-raised-button
+                        color="accent"
+                        [cdkCopyToClipboard]="newlyCreatedToken.rawToken"
+                    >
                         Copy
                     </button>
                 </div>
@@ -50,20 +80,33 @@
             <mat-divider class="divider"></mat-divider>
             <div fxLayout="column" class="subsection mt-10">
                 <div class="subsection-title">Existing API keys</div>
-                <div *ngIf="userData.userApiTokens.length === 0">(no keys available)</div>
-                <table mat-table [dataSource]="apiKeyDataSource" class="mat-elevation-z0" *ngIf="userData.userApiTokens.length > 0">
+                <div *ngIf="userData.userApiTokens.length === 0">
+                    (no keys available)
+                </div>
+                <table
+                    mat-table
+                    [dataSource]="apiKeyDataSource"
+                    class="mat-elevation-z0"
+                    *ngIf="userData.userApiTokens.length > 0"
+                >
                     <ng-container matColumnDef="name">
-                        <th mat-header-cell *matHeaderCellDef> Name</th>
-                        <td mat-cell *matCellDef="let element"> {{element.tokenName}} </td>
+                        <th mat-header-cell *matHeaderCellDef>Name</th>
+                        <td mat-cell *matCellDef="let element">
+                            {{ element.tokenName }}
+                        </td>
                     </ng-container>
 
                     <!-- Name Column -->
                     <ng-container matColumnDef="action">
-                        <th mat-header-cell *matHeaderCellDef> Action</th>
+                        <th mat-header-cell *matHeaderCellDef>Action</th>
                         <td mat-cell *matCellDef="let element">
                             <div fxLayout="end end">
-                                <button mat-button mat-raised-button color="warn"
-                                        (click)="revokeApiKey(element)">
+                                <button
+                                    mat-button
+                                    mat-raised-button
+                                    color="warn"
+                                    (click)="revokeApiKey(element)"
+                                >
                                     Revoke
                                 </button>
                             </div>
@@ -71,16 +114,29 @@
                     </ng-container>
 
                     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                    <tr
+                        mat-row
+                        *matRowDef="let row; columns: displayedColumns"
+                    ></tr>
                 </table>
             </div>
         </sp-split-section>
         <mat-divider></mat-divider>
-        <sp-split-section title="API Docs" subtitle="View the documentation of the StreamPipes API. Here you can see all provided endpoints and how to query them.">
+        <sp-split-section
+            title="API Docs"
+            subtitle="View the documentation of the StreamPipes API. Here you can see all provided endpoints and how to query them."
+        >
             <div fxLayout="column" class="subsection">
                 <div fxLayout="column" class="subsection mt-8"></div>
                 <div>
-                    <button mat-button mat-raised-button color="accent" routerLink="/apidocs">View API Docs</button>
+                    <button
+                        mat-button
+                        mat-raised-button
+                        color="accent"
+                        routerLink="/apidocs"
+                    >
+                        View API Docs
+                    </button>
                 </div>
             </div>
         </sp-split-section>
diff --git a/ui/src/app/profile/components/token/token-management-settings.component.scss b/ui/src/app/profile/components/token/token-management-settings.component.scss
index 67df1a90e..f7f40e7a6 100644
--- a/ui/src/app/profile/components/token/token-management-settings.component.scss
+++ b/ui/src/app/profile/components/token/token-management-settings.component.scss
@@ -17,40 +17,38 @@
  */
 
 .title-section {
-  width: 300px;
+    width: 300px;
 }
 
-
 .subsection {
-  margin-bottom: 15px;
+    margin-bottom: 15px;
 }
 
 .mt-10 {
-  margin-top: 10px;
+    margin-top: 10px;
 }
 
 .divider {
-  margin-top: 5px;
-  margin-bottom: 5px;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 
 .new-token {
-
-  margin-top: 10px;
-  margin-bottom: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
 
 .token-name {
-  margin-right: 10px;
-  font-weight: bold;
-  padding: 10px;
+    margin-right: 10px;
+    font-weight: bold;
+    padding: 10px;
 }
 
 .displayed-token {
-  background: var(--color-bg-2);
-  border: 1px solid var(--color-bg-1);
-  padding: 10px;
-  color: var(--color-default-text);
-  margin-left: 10px;
-  margin-right: 10px;
+    background: var(--color-bg-2);
+    border: 1px solid var(--color-bg-1);
+    padding: 10px;
+    color: var(--color-default-text);
+    margin-left: 10px;
+    margin-right: 10px;
 }
diff --git a/ui/src/app/profile/components/token/token-management-settings.component.ts b/ui/src/app/profile/components/token/token-management-settings.component.ts
index 6b6c3b591..4ad812aed 100644
--- a/ui/src/app/profile/components/token/token-management-settings.component.ts
+++ b/ui/src/app/profile/components/token/token-management-settings.component.ts
@@ -22,49 +22,58 @@ import { RawUserApiToken, UserApiToken } from '@streampipes/platform-services';
 import { MatTableDataSource } from '@angular/material/table';
 
 @Component({
-  selector: 'token-management-settings',
-  templateUrl: './token-management-settings.component.html',
-  styleUrls: ['./token-management-settings.component.scss']
+    selector: 'sp-token-management-settings',
+    templateUrl: './token-management-settings.component.html',
+    styleUrls: ['./token-management-settings.component.scss'],
 })
-export class TokenManagementSettingsComponent extends BasicProfileSettings implements OnInit {
+export class TokenManagementSettingsComponent
+    extends BasicProfileSettings
+    implements OnInit
+{
+    newTokenName: string;
+    newTokenCreated = false;
+    newlyCreatedToken: RawUserApiToken;
 
-  newTokenName: string;
-  newTokenCreated = false;
-  newlyCreatedToken: RawUserApiToken;
+    displayedColumns: string[] = ['name', 'action'];
+    apiKeyDataSource: MatTableDataSource<UserApiToken>;
 
-  displayedColumns: string[] = ['name', 'action'];
-  apiKeyDataSource: MatTableDataSource<UserApiToken>;
+    ngOnInit(): void {
+        this.receiveUserData();
+    }
 
-  ngOnInit(): void {
-    this.receiveUserData();
-  }
+    requestNewKey() {
+        const baseToken: RawUserApiToken = this.makeBaseToken();
+        this.profileService
+            .requestNewApiToken(this.userData.username, baseToken)
+            .subscribe(result => {
+                this.newlyCreatedToken = result;
+                this.newTokenCreated = true;
+                this.newTokenName = '';
+                this.receiveUserData();
+            });
+    }
 
-  requestNewKey() {
-    const baseToken: RawUserApiToken = this.makeBaseToken();
-    this.profileService.requestNewApiToken(this.userData.username, baseToken).subscribe(result => {
-      this.newlyCreatedToken = result;
-      this.newTokenCreated = true;
-      this.newTokenName = '';
-      this.receiveUserData();
-    });
-  }
+    makeBaseToken(): RawUserApiToken {
+        const baseToken = new RawUserApiToken();
+        baseToken.tokenName = this.newTokenName;
+        return baseToken;
+    }
 
-  makeBaseToken(): RawUserApiToken {
-    const baseToken = new RawUserApiToken();
-    baseToken.tokenName = this.newTokenName;
-    return baseToken;
-  }
-
-  revokeApiKey(apiKey: UserApiToken) {
-    const removeIndex = this.userData.userApiTokens.map(token => token.tokenId).indexOf(apiKey.tokenId);
-    this.userData.userApiTokens.splice(removeIndex, 1);
-    this.profileService.updateUserProfile(this.userData).subscribe(response => {
-      this.receiveUserData();
-    });
-  }
-
-  onUserDataReceived() {
-    this.apiKeyDataSource = new MatTableDataSource<UserApiToken>(this.userData.userApiTokens);
-  }
+    revokeApiKey(apiKey: UserApiToken) {
+        const removeIndex = this.userData.userApiTokens
+            .map(token => token.tokenId)
+            .indexOf(apiKey.tokenId);
+        this.userData.userApiTokens.splice(removeIndex, 1);
+        this.profileService
+            .updateUserProfile(this.userData)
+            .subscribe(response => {
+                this.receiveUserData();
+            });
+    }
 
+    onUserDataReceived() {
+        this.apiKeyDataSource = new MatTableDataSource<UserApiToken>(
+            this.userData.userApiTokens,
+        );
+    }
 }
diff --git a/ui/src/app/profile/dialog/change-email/change-email-dialog.component.html b/ui/src/app/profile/dialog/change-email/change-email-dialog.component.html
index 62862697c..89fc52f19 100644
--- a/ui/src/app/profile/dialog/change-email/change-email-dialog.component.html
+++ b/ui/src/app/profile/dialog/change-email/change-email-dialog.component.html
@@ -19,40 +19,59 @@
 <div class="sp-dialog-container">
     <div class="sp-dialog-content">
         <div fxFlex="100" fxLayout="column" class="p-15">
-            <form [formGroup]="parentForm" fxFlex="100" fxLayout="column" *ngIf="!operationApplied">
+            <form
+                [formGroup]="parentForm"
+                fxFlex="100"
+                fxLayout="column"
+                *ngIf="!operationApplied"
+            >
                 <div class="general-options-panel" fxLayout="column">
                     <mat-form-field color="accent">
                         <mat-label>New mail address</mat-label>
-                        <input formControlName="email" fxFlex
-                               matInput
-                               required>
+                        <input
+                            formControlName="email"
+                            fxFlex
+                            matInput
+                            required
+                        />
                         <mat-error>Must be a valid email address.</mat-error>
                     </mat-form-field>
                     <mat-form-field color="accent">
                         <mat-label>Re-enter mail address</mat-label>
-                        <input formControlName="emailConfirm" fxFlex
-                               matInput
-                               required>
+                        <input
+                            formControlName="emailConfirm"
+                            fxFlex
+                            matInput
+                            required
+                        />
                         <mat-error>Must be a valid email address.</mat-error>
                     </mat-form-field>
-                    <mat-error *ngIf="parentForm.hasError('notMatching')">Email does not match.</mat-error>
+                    <mat-error *ngIf="parentForm.hasError('notMatching')"
+                        >Email does not match.</mat-error
+                    >
                     <mat-form-field color="accent">
                         <mat-label>Enter password</mat-label>
-                        <input formControlName="passwordConfirm" fxFlex
-                               matInput
-                               type="password"
-                               required>
+                        <input
+                            formControlName="passwordConfirm"
+                            fxFlex
+                            matInput
+                            type="password"
+                            required
+                        />
                     </mat-form-field>
                 </div>
             </form>
             <div *ngIf="operationApplied && error">
                 <div>Could not change email address.</div>
-                <div>Reason: {{errorMessage}}</div>
-                <button class="mt-20"
-                        mat-button
-                        mat-raised-button
-                        color="accent"
-                        (click)="operationApplied = false">Try again
+                <div>Reason: {{ errorMessage }}</div>
+                <button
+                    class="mt-20"
+                    mat-button
+                    mat-raised-button
+                    color="accent"
+                    (click)="operationApplied = false"
+                >
+                    Try again
                 </button>
             </div>
         </div>
@@ -60,12 +79,24 @@
     <mat-divider></mat-divider>
     <div class="sp-dialog-actions">
         <div fxLayout="row">
-            <button mat-button mat-raised-button color="accent" (click)="update()" style="margin-right:10px;"
-                    [disabled]="!parentForm.valid || operationApplied"
-                    data-cy="sp-element-edit-user-save">
-                <i class="material-icons">save</i><span>&nbsp;Update email</span>
+            <button
+                mat-button
+                mat-raised-button
+                color="accent"
+                (click)="update()"
+                style="margin-right: 10px"
+                [disabled]="!parentForm.valid || operationApplied"
+                data-cy="sp-element-edit-user-save"
+            >
+                <i class="material-icons">save</i
+                ><span>&nbsp;Update email</span>
             </button>
-            <button mat-button mat-raised-button class="mat-basic" (click)="close()">
+            <button
+                mat-button
+                mat-raised-button
+                class="mat-basic"
+                (click)="close()"
+            >
                 Cancel
             </button>
         </div>
diff --git a/ui/src/app/profile/dialog/change-email/change-email-dialog.component.scss b/ui/src/app/profile/dialog/change-email/change-email-dialog.component.scss
index 4a6a1cc8a..cd7a42538 100644
--- a/ui/src/app/profile/dialog/change-email/change-email-dialog.component.scss
+++ b/ui/src/app/profile/dialog/change-email/change-email-dialog.component.scss
@@ -19,6 +19,5 @@
 @import '../../../../scss/sp/sp-dialog.scss';
 
 .mt-20 {
-  margin-top: 20px;
+    margin-top: 20px;
 }
-
diff --git a/ui/src/app/profile/dialog/change-email/change-email-dialog.component.ts b/ui/src/app/profile/dialog/change-email/change-email-dialog.component.ts
index c8271502d..8f361e28b 100644
--- a/ui/src/app/profile/dialog/change-email/change-email-dialog.component.ts
+++ b/ui/src/app/profile/dialog/change-email/change-email-dialog.component.ts
@@ -19,85 +19,105 @@
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { DialogRef } from '@streampipes/shared-ui';
 import {
-  AbstractControl,
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup,
-  ValidationErrors,
-  ValidatorFn,
-  Validators
+    AbstractControl,
+    UntypedFormBuilder,
+    UntypedFormControl,
+    UntypedFormGroup,
+    ValidationErrors,
+    ValidatorFn,
+    Validators,
 } from '@angular/forms';
 import { UserAccount, UserService } from '@streampipes/platform-services';
 
 @Component({
-  selector: 'sp-change-email-dialog',
-  templateUrl: './change-email-dialog.component.html',
-  styleUrls: ['./change-email-dialog.component.scss'],
-  encapsulation: ViewEncapsulation.None
+    selector: 'sp-change-email-dialog',
+    templateUrl: './change-email-dialog.component.html',
+    styleUrls: ['./change-email-dialog.component.scss'],
+    encapsulation: ViewEncapsulation.None,
 })
 export class ChangeEmailDialogComponent implements OnInit {
+    parentForm: UntypedFormGroup;
+
+    @Input()
+    user: UserAccount;
+
+    clonedUser: UserAccount;
+
+    email = '';
+    confirmMail = '';
+    confirmPw = '';
+
+    operationApplied = false;
+    error = false;
+    errorMessage = '';
+
+    constructor(
+        private dialogRef: DialogRef<ChangeEmailDialogComponent>,
+        private fb: UntypedFormBuilder,
+        private userService: UserService,
+    ) {}
+
+    ngOnInit(): void {
+        this.clonedUser = UserAccount.fromData(this.user);
+        this.email = this.clonedUser.username;
+        this.parentForm = this.fb.group({});
+        this.parentForm.addControl(
+            'email',
+            new UntypedFormControl(this.email, [
+                Validators.required,
+                Validators.email,
+            ]),
+        );
+        this.parentForm.addControl(
+            'emailConfirm',
+            new UntypedFormControl(this.confirmMail, [
+                Validators.required,
+                Validators.email,
+            ]),
+        );
+        this.parentForm.addControl(
+            'passwordConfirm',
+            new UntypedFormControl(this.confirmPw, [Validators.required]),
+        );
+        this.parentForm.setValidators(this.checkEmail);
+
+        this.parentForm.valueChanges.subscribe(v => {
+            this.email = v.email;
+            this.confirmMail = v.emailConfirm;
+            this.confirmPw = v.passwordConfirm;
+        });
+    }
 
-  parentForm: UntypedFormGroup;
-
-  @Input()
-  user: UserAccount;
-
-  clonedUser: UserAccount;
-
-  email = '';
-  confirmMail = '';
-  confirmPw = '';
-
-  operationApplied = false;
-  error = false;
-  errorMessage = '';
-
-  constructor(private dialogRef: DialogRef<ChangeEmailDialogComponent>,
-              private fb: UntypedFormBuilder,
-              private userService: UserService) {
-
-  }
-
-  ngOnInit(): void {
-    this.clonedUser = UserAccount.fromData(this.user);
-    this.email = this.clonedUser.username;
-    this.parentForm = this.fb.group({});
-    this.parentForm.addControl('email', new UntypedFormControl(this.email, [Validators.required, Validators.email]));
-    this.parentForm.addControl('emailConfirm', new UntypedFormControl(this.confirmMail, [Validators.required, Validators.email]));
-    this.parentForm.addControl('passwordConfirm', new UntypedFormControl(this.confirmPw, [Validators.required]));
-    this.parentForm.setValidators(this.checkEmail);
-
-    this.parentForm.valueChanges.subscribe(v => {
-      this.email = v.email;
-      this.confirmMail = v.emailConfirm;
-      this.confirmPw = v.passwordConfirm;
-    });
-  }
-
-  close(refresh?: boolean) {
-    this.dialogRef.close(refresh);
-  }
-
-  update() {
-    this.clonedUser.username = this.email;
-    this.clonedUser.password = this.confirmPw;
-    this.userService.updateUsername(this.clonedUser).subscribe(result => {
-     this.close(true);
-    }, error => {
-      this.operationApplied = true;
-      this.error = true;
-      this.errorMessage = error.error.notifications[0].title;
-    });
-  }
-
-  checkEmail: ValidatorFn = (group: AbstractControl): ValidationErrors | null => {
-    const email = group.get('email');
-    const emailConfirm = group.get('emailConfirm');
+    close(refresh?: boolean) {
+        this.dialogRef.close(refresh);
+    }
 
-    if (!email || !emailConfirm) {
-      return null;
+    update() {
+        this.clonedUser.username = this.email;
+        this.clonedUser.password = this.confirmPw;
+        this.userService.updateUsername(this.clonedUser).subscribe(
+            result => {
+                this.close(true);
+            },
+            error => {
+                this.operationApplied = true;
+                this.error = true;
+                this.errorMessage = error.error.notifications[0].title;
+            },
+        );
     }
-    return email.value === emailConfirm.value ? null : {notMatching: true};
-  }
-}
 
+    checkEmail: ValidatorFn = (
+        group: AbstractControl,
+    ): ValidationErrors | null => {
+        const email = group.get('email');
+        const emailConfirm = group.get('emailConfirm');
+
+        if (!email || !emailConfirm) {
+            return null;
+        }
+        return email.value === emailConfirm.value
+            ? null
+            : { notMatching: true };
+    };
+}
diff --git a/ui/src/app/profile/dialog/change-password/change-password-dialog.component.html b/ui/src/app/profile/dialog/change-password/change-password-dialog.component.html
index 12bcd2183..450a1ceec 100644
--- a/ui/src/app/profile/dialog/change-password/change-password-dialog.component.html
+++ b/ui/src/app/profile/dialog/change-password/change-password-dialog.component.html
@@ -19,40 +19,59 @@
 <div class="sp-dialog-container">
     <div class="sp-dialog-content">
         <div fxFlex="100" fxLayout="column" class="p-15">
-            <form [formGroup]="parentForm" fxFlex="100" fxLayout="column" *ngIf="!operationApplied">
+            <form
+                [formGroup]="parentForm"
+                fxFlex="100"
+                fxLayout="column"
+                *ngIf="!operationApplied"
+            >
                 <div class="general-options-panel" fxLayout="column">
                     <mat-form-field color="accent">
                         <mat-label>Current password</mat-label>
-                        <input formControlName="currentPassword" fxFlex
-                               matInput
-                               type="password"
-                               required>
+                        <input
+                            formControlName="currentPassword"
+                            fxFlex
+                            matInput
+                            type="password"
+                            required
+                        />
                     </mat-form-field>
                     <mat-form-field color="accent">
                         <mat-label>New password</mat-label>
-                        <input formControlName="newPassword" fxFlex
-                               matInput
-                               type="password"
-                               required>
+                        <input
+                            formControlName="newPassword"
+                            fxFlex
+                            matInput
+                            type="password"
+                            required
+                        />
                     </mat-form-field>
                     <mat-form-field color="accent">
                         <mat-label>New password</mat-label>
-                        <input formControlName="newPasswordConfirm" fxFlex
-                               matInput
-                               type="password"
-                               required>
+                        <input
+                            formControlName="newPasswordConfirm"
+                            fxFlex
+                            matInput
+                            type="password"
+                            required
+                        />
                     </mat-form-field>
-                    <mat-error *ngIf="parentForm.hasError('notMatching')">Passwords do not match.</mat-error>
+                    <mat-error *ngIf="parentForm.hasError('notMatching')"
+                        >Passwords do not match.</mat-error
+                    >
                 </div>
             </form>
             <div *ngIf="operationApplied && error">
                 <div>Could not change the password.</div>
-                <div>Reason: {{errorMessage}}</div>
-                <button class="mt-20"
-                        mat-button
-                        mat-raised-button
-                        color="accent"
-                        (click)="operationApplied = false">Try again
+                <div>Reason: {{ errorMessage }}</div>
+                <button
+                    class="mt-20"
+                    mat-button
+                    mat-raised-button
+                    color="accent"
+                    (click)="operationApplied = false"
+                >
+                    Try again
                 </button>
             </div>
         </div>
@@ -60,12 +79,23 @@
     <mat-divider></mat-divider>
     <div class="sp-dialog-actions">
         <div fxLayout="row">
-            <button mat-button mat-raised-button color="accent" (click)="update()" style="margin-right:10px;"
-                    [disabled]="!parentForm.valid"
-                    data-cy="sp-element-edit-user-save">
+            <button
+                mat-button
+                mat-raised-button
+                color="accent"
+                (click)="update()"
+                style="margin-right: 10px"
+                [disabled]="!parentForm.valid"
+                data-cy="sp-element-edit-user-save"
+            >
                 <i class="material-icons">save</i><span>&nbsp;Save</span>
             </button>
-            <button mat-button mat-raised-button class="mat-basic" (click)="close()">
+            <button
+                mat-button
+                mat-raised-button
+                class="mat-basic"
+                (click)="close()"
+            >
                 Cancel
             </button>
         </div>
diff --git a/ui/src/app/profile/dialog/change-password/change-password-dialog.component.scss b/ui/src/app/profile/dialog/change-password/change-password-dialog.component.scss
index d764f9960..cd7a42538 100644
--- a/ui/src/app/profile/dialog/change-password/change-password-dialog.component.scss
+++ b/ui/src/app/profile/dialog/change-password/change-password-dialog.component.scss
@@ -19,5 +19,5 @@
 @import '../../../../scss/sp/sp-dialog.scss';
 
 .mt-20 {
-  margin-top: 20px;
+    margin-top: 20px;
 }
diff --git a/ui/src/app/profile/dialog/change-password/change-password-dialog.component.ts b/ui/src/app/profile/dialog/change-password/change-password-dialog.component.ts
index 657c74acf..da38810e1 100644
--- a/ui/src/app/profile/dialog/change-password/change-password-dialog.component.ts
+++ b/ui/src/app/profile/dialog/change-password/change-password-dialog.component.ts
@@ -19,80 +19,99 @@
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { DialogRef } from '@streampipes/shared-ui';
 import {
-  AbstractControl,
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup,
-  ValidationErrors,
-  ValidatorFn,
-  Validators
+    AbstractControl,
+    UntypedFormBuilder,
+    UntypedFormControl,
+    UntypedFormGroup,
+    ValidationErrors,
+    ValidatorFn,
+    Validators,
 } from '@angular/forms';
-import { UserAccount, ChangePasswordRequest, UserService } from '@streampipes/platform-services';
+import {
+    UserAccount,
+    ChangePasswordRequest,
+    UserService,
+} from '@streampipes/platform-services';
 
 @Component({
-  selector: 'sp-change-password-dialog',
-  templateUrl: './change-password-dialog.component.html',
-  styleUrls: ['./change-password-dialog.component.scss'],
-  encapsulation: ViewEncapsulation.None
+    selector: 'sp-change-password-dialog',
+    templateUrl: './change-password-dialog.component.html',
+    styleUrls: ['./change-password-dialog.component.scss'],
+    encapsulation: ViewEncapsulation.None,
 })
 export class ChangePasswordDialogComponent implements OnInit {
+    @Input()
+    user: UserAccount;
 
-  @Input()
-  user: UserAccount;
-
-  parentForm: UntypedFormGroup;
-
-  existingPw = '';
-  newPw = '';
-  newPwConfirm = '';
-
-  operationApplied = false;
-  error = false;
-  errorMessage = '';
+    parentForm: UntypedFormGroup;
 
-  constructor(private dialogRef: DialogRef<ChangePasswordDialogComponent>,
-              private fb: UntypedFormBuilder,
-              private userService: UserService) {
+    existingPw = '';
+    newPw = '';
+    newPwConfirm = '';
 
-  }
+    operationApplied = false;
+    error = false;
+    errorMessage = '';
 
-  ngOnInit(): void {
-    this.parentForm = this.fb.group({});
-    this.parentForm.addControl('currentPassword', new UntypedFormControl(this.existingPw, [Validators.required]));
-    this.parentForm.addControl('newPassword', new UntypedFormControl(this.newPw, [Validators.required]));
-    this.parentForm.addControl('newPasswordConfirm', new UntypedFormControl(this.newPw, [Validators.required]));
-    this.parentForm.setValidators(this.checkPasswords);
+    constructor(
+        private dialogRef: DialogRef<ChangePasswordDialogComponent>,
+        private fb: UntypedFormBuilder,
+        private userService: UserService,
+    ) {}
 
-    this.parentForm.valueChanges.subscribe(v => {
-      this.existingPw = v.currentPassword;
-      this.newPw = v.newPassword;
-      this.newPwConfirm = v.newPasswordConfirm;
-    });
-  }
+    ngOnInit(): void {
+        this.parentForm = this.fb.group({});
+        this.parentForm.addControl(
+            'currentPassword',
+            new UntypedFormControl(this.existingPw, [Validators.required]),
+        );
+        this.parentForm.addControl(
+            'newPassword',
+            new UntypedFormControl(this.newPw, [Validators.required]),
+        );
+        this.parentForm.addControl(
+            'newPasswordConfirm',
+            new UntypedFormControl(this.newPw, [Validators.required]),
+        );
+        this.parentForm.setValidators(this.checkPasswords);
 
-  close(refresh?: boolean) {
-    this.dialogRef.close(refresh);
-  }
-
-  update() {
-    const req: ChangePasswordRequest = {newPassword: this.newPw, existingPassword: this.existingPw};
-    this.userService.updatePassword(this.user, req).subscribe(response => {
-      this.close(true);
-    }, error => {
-      this.operationApplied = true;
-      this.error = true;
-      this.errorMessage = error.error.notifications[0].title;
-    });
-  }
+        this.parentForm.valueChanges.subscribe(v => {
+            this.existingPw = v.currentPassword;
+            this.newPw = v.newPassword;
+            this.newPwConfirm = v.newPasswordConfirm;
+        });
+    }
 
-  checkPasswords: ValidatorFn = (group: AbstractControl):  ValidationErrors | null => {
-    const pass = group.get('newPassword');
-    const confirmPass = group.get('newPasswordConfirm');
+    close(refresh?: boolean) {
+        this.dialogRef.close(refresh);
+    }
 
-    if (!pass || !confirmPass) {
-      return null;
+    update() {
+        const req: ChangePasswordRequest = {
+            newPassword: this.newPw,
+            existingPassword: this.existingPw,
+        };
+        this.userService.updatePassword(this.user, req).subscribe(
+            response => {
+                this.close(true);
+            },
+            error => {
+                this.operationApplied = true;
+                this.error = true;
+                this.errorMessage = error.error.notifications[0].title;
+            },
+        );
     }
-    return pass.value === confirmPass.value ? null : { notMatching: true };
-  }
 
+    checkPasswords: ValidatorFn = (
+        group: AbstractControl,
+    ): ValidationErrors | null => {
+        const pass = group.get('newPassword');
+        const confirmPass = group.get('newPasswordConfirm');
+
+        if (!pass || !confirmPass) {
+            return null;
+        }
+        return pass.value === confirmPass.value ? null : { notMatching: true };
+    };
 }
diff --git a/ui/src/app/profile/profile.component.html b/ui/src/app/profile/profile.component.html
index c86aada01..fd7196cce 100644
--- a/ui/src/app/profile/profile.component.html
+++ b/ui/src/app/profile/profile.component.html
@@ -16,13 +16,16 @@
   ~
   -->
 
-
 <div fxLayout="column" class="page-container">
     <div fxLayout="row" class="border sp-tab-bg">
         <div fxFlex="100" class="page-container-nav">
             <div fxFlex="100" fxLayout="row">
                 <div fxFlex fxLayoutAlign="start center" [attr.id]="'peType'">
-                    <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectedIndexChange($event)" color="accent">
+                    <mat-tab-group
+                        [selectedIndex]="selectedIndex"
+                        (selectedIndexChange)="selectedIndexChange($event)"
+                        color="accent"
+                    >
                         <mat-tab label="General Settings"></mat-tab>
                         <mat-tab label="API"></mat-tab>
                     </mat-tab-group>
@@ -31,12 +34,30 @@
         </div>
     </div>
 
-    <div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100">
-        <div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100" *ngIf="selectedIndex === 0">
-            <general-profile-settings fxFlex="100"></general-profile-settings>
+    <div
+        class="fixed-height page-container-padding-inner"
+        fxLayout="column"
+        fxFlex="100"
+    >
+        <div
+            class="fixed-height page-container-padding-inner"
+            fxLayout="column"
+            fxFlex="100"
+            *ngIf="selectedIndex === 0"
+        >
+            <sp-general-profile-settings
+                fxFlex="100"
+            ></sp-general-profile-settings>
         </div>
-        <div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100" *ngIf="selectedIndex === 1">
-            <token-management-settings fxFlex="100"></token-management-settings>
+        <div
+            class="fixed-height page-container-padding-inner"
+            fxLayout="column"
+            fxFlex="100"
+            *ngIf="selectedIndex === 1"
+        >
+            <sp-token-management-settings
+                fxFlex="100"
+            ></sp-token-management-settings>
         </div>
     </div>
 </div>
diff --git a/ui/src/app/profile/profile.component.scss b/ui/src/app/profile/profile.component.scss
index d727140df..3d47a361d 100644
--- a/ui/src/app/profile/profile.component.scss
+++ b/ui/src/app/profile/profile.component.scss
@@ -17,5 +17,5 @@
  */
 
 .page-container-padding-inner {
-  padding: 10px;
+    padding: 10px;
 }
diff --git a/ui/src/app/profile/profile.component.ts b/ui/src/app/profile/profile.component.ts
index 84dd97eed..952631ab6 100644
--- a/ui/src/app/profile/profile.component.ts
+++ b/ui/src/app/profile/profile.component.ts
@@ -20,23 +20,20 @@ import { Component, OnInit } from '@angular/core';
 import { SpBreadcrumbService } from '@streampipes/shared-ui';
 
 @Component({
-  selector: 'profile',
-  templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss']
+    selector: 'sp-profile',
+    templateUrl: './profile.component.html',
+    styleUrls: ['./profile.component.scss'],
 })
 export class ProfileComponent implements OnInit {
+    selectedIndex = 0;
 
-  selectedIndex = 0;
+    constructor(private breadcrumbService: SpBreadcrumbService) {}
 
-  constructor(private breadcrumbService: SpBreadcrumbService) {
-  }
-
-  ngOnInit(): void {
-    this.breadcrumbService.updateBreadcrumb([{label: 'Profile'}]);
-  }
-
-  selectedIndexChange(index: number) {
-    this.selectedIndex = index;
-  }
+    ngOnInit(): void {
+        this.breadcrumbService.updateBreadcrumb([{ label: 'Profile' }]);
+    }
 
+    selectedIndexChange(index: number) {
+        this.selectedIndex = index;
+    }
 }
diff --git a/ui/src/app/profile/profile.module.ts b/ui/src/app/profile/profile.module.ts
index 3e40e4dbe..5a1e1f108 100644
--- a/ui/src/app/profile/profile.module.ts
+++ b/ui/src/app/profile/profile.module.ts
@@ -33,7 +33,7 @@ import { CoreUiModule } from '../core-ui/core-ui.module';
 import { PlatformServicesModule } from '@streampipes/platform-services';
 import { ChangePasswordDialogComponent } from './dialog/change-password/change-password-dialog.component';
 import { ChangeEmailDialogComponent } from './dialog/change-email/change-email-dialog.component';
-import {RouterLink} from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 @NgModule({
     imports: [
@@ -48,25 +48,18 @@ import {RouterLink} from '@angular/router';
         ClipboardModule,
         CoreUiModule,
         PlatformServicesModule,
-        RouterLink
+        RouterLink,
     ],
     declarations: [
         ChangeEmailDialogComponent,
         ChangePasswordDialogComponent,
         GeneralProfileSettingsComponent,
         ProfileComponent,
-        TokenManagementSettingsComponent
+        TokenManagementSettingsComponent,
     ],
-    providers: [
-        ProfileService
-    ],
-    exports: [
-        ProfileComponent
-    ]
+    providers: [ProfileService],
+    exports: [ProfileComponent],
 })
 export class ProfileModule {
-
-  constructor() {
-  }
-
+    constructor() {}
 }
diff --git a/ui/src/app/profile/profile.service.ts b/ui/src/app/profile/profile.service.ts
index dc74e359e..5b502c289 100644
--- a/ui/src/app/profile/profile.service.ts
+++ b/ui/src/app/profile/profile.service.ts
@@ -17,46 +17,68 @@
  */
 
 import { Injectable } from '@angular/core';
-import { Message, PlatformServicesCommons, RawUserApiToken, UserAccount } from '@streampipes/platform-services';
+import {
+    Message,
+    PlatformServicesCommons,
+    RawUserApiToken,
+    UserAccount,
+} from '@streampipes/platform-services';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Injectable()
 export class ProfileService {
+    constructor(
+        private http: HttpClient,
+        private platformServicesCommons: PlatformServicesCommons,
+    ) {}
 
-  constructor(private http: HttpClient,
-              private platformServicesCommons: PlatformServicesCommons) {
+    getUserProfile(username: string): Observable<UserAccount> {
+        return this.http.get(this.profilePath + '/username/' + username).pipe(
+            map(response => {
+                return UserAccount.fromData(response as any);
+            }),
+        );
+    }
 
-  }
+    updateUserProfile(userData: UserAccount): Observable<Message> {
+        return this.http
+            .put(this.profilePath + '/user/' + userData.principalId, userData)
+            .pipe(
+                map(response => {
+                    return Message.fromData(response as any);
+                }),
+            );
+    }
 
-  getUserProfile(username: string): Observable<UserAccount> {
-    return this.http.get(this.profilePath + '/username/' + username).pipe(map(response => {
-      return UserAccount.fromData(response as any);
-    }));
-  }
+    updateAppearanceMode(username, darkMode: boolean): Observable<Message> {
+        return this.http
+            .put(
+                `${this.profilePath}/${username}/appearance/mode/${darkMode}`,
+                {},
+            )
+            .pipe(
+                map(response => {
+                    return Message.fromData(response as any);
+                }),
+            );
+    }
 
-  updateUserProfile(userData: UserAccount): Observable<Message> {
-    return this.http.put(this.profilePath + '/user/' + userData.principalId, userData).pipe(map(response => {
-      return Message.fromData(response as any);
-    }));
-  }
+    requestNewApiToken(
+        username: string,
+        baseToken: RawUserApiToken,
+    ): Observable<RawUserApiToken> {
+        return this.http
+            .post(this.profilePath + '/' + username + '/tokens', baseToken)
+            .pipe(
+                map(response => {
+                    return RawUserApiToken.fromData(response as any);
+                }),
+            );
+    }
 
-  updateAppearanceMode(username, darkMode: boolean): Observable<Message> {
-    return this.http.put(`${this.profilePath}/${username}/appearance/mode/${darkMode}`, {}).pipe(map(response => {
-      return Message.fromData(response as any);
-    }));
-  }
-
-  requestNewApiToken(username: string,
-                     baseToken: RawUserApiToken): Observable<RawUserApiToken> {
-    return this.http.post(this.profilePath + '/' + username + '/tokens', baseToken)
-        .pipe(map(response => {
-          return RawUserApiToken.fromData(response as any);
-        }));
-  }
-
-  private get profilePath(): string {
-    return this.platformServicesCommons.apiBasePath + '/users';
-  }
+    private get profilePath(): string {
+        return this.platformServicesCommons.apiBasePath + '/users';
+    }
 }