Feat: redesigned danger zone

.github/workflows/BuildAndTests.yml

@@ -12,37 +12,59 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
+
     - name: Setup .NET
-      uses: actions/setup-dotnet@v3
+      uses: actions/setup-dotnet@v4
       with:
-        dotnet-version: 6.0.x
+        dotnet-version: 8.0.x
 
     - name: Restore dependencies
       run: dotnet restore
 
     - name: Build backend application
       run: dotnet build --configuration Debug --no-restore
 
-    - name: Test
-      run: dotnet test --no-build --verbosity normal
-
     - name: Install Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: '18.x'
 
     - name: Install dependencies
       run: npm install
       working-directory: ./easyfinance.client
 
-    - name: Run Angular tests
-      run: npm test -- --watch=false --browsers=ChromeHeadless
-      working-directory: ./easyfinance.client
+  tests:
+    needs: [build]
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Setup .NET
+      uses: actions/setup-dotnet@v4
+      with:
+        dotnet-version: 8.0.x
+
+    - uses: actions/checkout@v4
+    - name: Run .Net tests
+      run: dotnet test --verbosity normal
 
     - name: Start application
+      id: dotnet
       run: dotnet run --project ./EasyFinance.Server --urls https://localhost:7003/ &
 
+    - name: Run Angular tests
+      id: angular
+      run: npm test -- --watch=false --browsers=ChromeHeadless
+      working-directory: ./easyfinance.client
+
     - name: Run Cypress tests
+      id: cypress
       run: npx cypress run
-      working-directory: ./easyfinance.client
+      working-directory: ./easyfinance.client
+
+    - name: Archive Cypress errors
+      if: failure()
+      uses: actions/upload-artifact@v4
+      with:
+        name: cypress-screenshots
+        path: ./easyfinance.client/cypress/screenshots

easyfinance.client/cypress/e2e/auth/register.cy.ts

@@ -4,20 +4,7 @@ describe('EconoFlow - Register Tests', () => {
         const user = users.testUser;
         const email = Math.floor(Math.random() * 1000).toString() + user.username;
 
-        cy.intercept('PUT', '**/account*').as('putAccount')
-
         cy.register(email, user.password)
-
-        cy.visit('/')
-
-        cy.get('input[formControlName=firstName]').type('Test')
-        cy.get('input[formControlName=lastName]').type(`Test`)
-        cy.get('mat-select[formControlName=preferredCurrency]').click().get('mat-option').contains('EUR').click()
-        cy.get('button').contains('Send').click();
-
-        cy.wait<UserReq, UserRes>('@putAccount').then(({ request, response }) => {
-          expect(response?.statusCode).to.equal(200)
-        })
       })
     })
   })

easyfinance.client/cypress/e2e/user/detail-user.cy.ts

@@ -1,61 +1,85 @@
 describe('EconoFlow - user detail Tests', () => {
   let currenciesAvailable: string[];
 
-  beforeEach(() => {
+  it('Should edit user infos', () => {
     cy.fixture('users').then((users) => {
       currenciesAvailable = users.currencies;
 
       const user = users.testUser;
 
       cy.login(user.username, user.password)
-    })
-  })
+      cy.visit('/user')
 
-  it('Should edit user infos', () => {
-    cy.visit('/user')
-
-    cy.intercept('GET', '**/account*').as('getAccount')
-    cy.intercept('PUT', '**/account*').as('putAccount')
-    cy.intercept('POST', '/api/account/manage/info').as('postAccount')
+      cy.intercept('GET', '**/account*').as('getAccount')
+      cy.intercept('PUT', '**/account*').as('putAccount')
+      cy.intercept('POST', '/api/account/manage/info').as('postAccount')
 
-    const firstNameInput = cy.get('input[formcontrolname=firstName]');
-    const firstNameValue = 'firstName' + Math.floor(Math.random() * 1000).toString();
+      const firstNameInput = cy.get('input[formcontrolname=firstName]');
+      const firstNameValue = 'firstName' + Math.floor(Math.random() * 1000).toString();
 
-    const lastNameInput = cy.get('input[formcontrolname=lastName]');
-    const lastNameValue = 'lastName' + Math.floor(Math.random() * 1000).toString();
+      const lastNameInput = cy.get('input[formcontrolname=lastName]');
+      const lastNameValue = 'lastName' + Math.floor(Math.random() * 1000).toString();
 
-    const emailInput = cy.get('input[formcontrolname=email]');
-    const emailValue = 'email' + Math.floor(Math.random() * 1000).toString() + '@test.com';
+      const emailInput = cy.get('input[formcontrolname=email]');
+      const emailValue = 'email' + Math.floor(Math.random() * 1000).toString() + '@test.com';
 
-    const preferredCurrencyInput = cy.get('mat-select[formcontrolname=preferredCurrency]');
-    const preferredCurrencyValue = currenciesAvailable[Math.floor(Math.random() * currenciesAvailable.length)];
+      const preferredCurrencyInput = cy.get('mat-select[formcontrolname=preferredCurrency]');
+      const preferredCurrencyValue = currenciesAvailable[Math.floor(Math.random() * currenciesAvailable.length)];
 
-    cy.get('.btn').contains('Edit').click();
+      cy.get('.btn').contains('Edit').click();
 
-    firstNameInput.clear().type(firstNameValue);
-    lastNameInput.clear().type(lastNameValue);
-    emailInput.clear().type(emailValue);
-    preferredCurrencyInput.click().get('mat-option').contains(preferredCurrencyValue).click()
+      firstNameInput.clear().type(firstNameValue);
+      lastNameInput.clear().type(lastNameValue);
+      emailInput.clear().type(emailValue);
+      preferredCurrencyInput.click().get('mat-option').contains(preferredCurrencyValue).click()
 
-    cy.get('button').contains('Save').click();
+      cy.get('button').contains('Save').click();
 
-    cy.wait<UserReq, UserRes>('@putAccount').then(({ request, response }) => {
-      expect(response?.statusCode).to.equal(200)
-    })
-    cy.wait<UserReq, UserRes>('@postAccount').then(({ request, response }) => {
-      expect(response?.statusCode).to.equal(200)
-    })
-    cy.wait<UserReq, UserRes>('@getAccount').then(({ request, response }) => {
-      expect(response?.body.firstName).to.equal(firstNameValue);
-      expect(response?.body.lastName).to.equal(lastNameValue);
-      expect(response?.body.preferredCurrency).to.equal(preferredCurrencyValue);
+      cy.wait<UserReq, UserRes>('@putAccount').then(({ request, response }) => {
+        expect(response?.statusCode).to.equal(200)
+      })
+      cy.wait<UserReq, UserRes>('@postAccount').then(({ request, response }) => {
+        expect(response?.statusCode).to.equal(200)
+      })
+      cy.wait<UserReq, UserRes>('@getAccount').then(({ request, response }) => {
+        expect(response?.body.firstName).to.equal(firstNameValue);
+        expect(response?.body.lastName).to.equal(lastNameValue);
+        expect(response?.body.preferredCurrency).to.equal(preferredCurrencyValue);
+      })
     })
   })
 
   it('should be possible cancel modify password', () => {
-    cy.visit('/user')
-    cy.get('.btn').contains('Modify Password').click();
-    cy.get('.btn').contains('Cancel').click();
-    cy.get('.btn').contains('Modify Password').should('exist')
+    cy.fixture('users').then((users) => {
+      currenciesAvailable = users.currencies;
+
+      const user = users.testUser;
+
+      cy.login(user.username, user.password)
+      cy.visit('/user')
+      cy.get('.btn').contains('Modify Password').click();
+      cy.get('.btn').contains('Cancel').click();
+      cy.get('.btn').contains('Modify Password').should('exist')
+    })
+  })
+
+  it('should be possible delete user', () => {
+    cy.fixture('users').then((users) => {
+      const user = users.userToDelete;
+
+      cy.intercept('DELETE', '**/account*').as('deleteAccount')
+
+      cy.register(user.username, user.password)
+      cy.visit('/user')
+      cy.get('.btn').contains('Delete Account').click();
+      cy.wait('@deleteAccount').then((interception) => {
+        expect(interception?.response?.statusCode).to.equal(202)
+        cy.get('.modal-dialog .btn').contains('Delete').click();
+
+        cy.wait('@deleteAccount').then((interception2) => {
+          expect(interception2?.response?.statusCode).to.equal(200)
+        })
+      })
+    })
   })
 })

easyfinance.client/cypress/fixtures/users.json

@@ -9,5 +9,9 @@
   "testUser": {
     "username": "[email protected]",
     "password": "Passw0rd!"
+  },
+  "userToDelete": {
+    "username": "[email protected]",
+    "password": "Passw0rd!"
   }
 }

easyfinance.client/cypress/support/commands.ts

@@ -21,16 +21,35 @@ Cypress.Commands.add('register', (username, password) => {
     cy.session(
         username,
         () => {
+            cy.intercept('GET', '/api/account/').as('getAccount')
+            cy.intercept('POST', '/api/account/register').as('postAccount')
+
             cy.visit('/register')
             cy.get('input[formControlName=email]').type(username)
             cy.get('input[formControlName=password]').type(password)
             cy.get('input[formControlName=confirmPassword]').type(`${password}{enter}`, { force: true, log: false })
+            cy.wait('@postAccount')
             cy.url().should('include', 'login')
 
-            cy.login(username, password)
+            cy.get('input[formControlName=email]').type(username)
+            cy.get('input[formControlName=password]').type(`${password}{enter}`, { log: false })
+            cy.wait('@getAccount')
 
-            cy.visit('/')
             cy.url().should('include', 'first-signin')
+
+            cy.get('input[formControlName=firstName]').type('test')
+            cy.get('input[formControlName=lastName]').type('test')
+            const preferredCurrencyInput = cy.get('mat-select[formcontrolname=preferredCurrency]');
+            preferredCurrencyInput.click().get('mat-option').contains('EUR').click()
+            cy.get('button').contains('Send').click();
+            cy.wait('@getAccount')
+      },
+      {
+        validate: () => {
+          cy.login(username, password)
+          cy.visit('/')
+          cy.url().should('not.contain', 'login')
         }
+      }
     )
 })

easyfinance.client/src/app/core/components/confirm-dialog/confirm-dialog.component.css

@@ -0,0 +1,3 @@
+#confirmationModalLabel {
+  margin: 0;
+}

easyfinance.client/src/app/core/components/confirm-dialog/confirm-dialog.component.html

@@ -2,11 +2,10 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="confirmationModalLabel">{{ title }}</h5>
+        <h1 class="modal-title text-danger" id="confirmationModalLabel">{{ title }}</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
-      <div class="modal-body">
-        {{ message }}
+      <div class="modal-body" [innerHTML]="message">
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" (click)="cancelDelete()">Cancel</button>

easyfinance.client/src/app/core/components/confirm-dialog/confirm-dialog.component.ts

@@ -1,4 +1,5 @@
 import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 declare var bootstrap: any;
 
@@ -14,13 +15,15 @@ export class ConfirmDialogComponent {
   @Output() confirmed = new EventEmitter<boolean>();
 
   title!: string;
-  message!: string;
+  message!: SafeHtml;
   action!: string;
   modalInstance: any;
 
+  constructor(private sanitizer: DomSanitizer) { }
+
   openModal(title: string, customMessage: string, actionText: string): void {
     this.title = title;
-    this.message = customMessage;
+    this.message = this.sanitizer.bypassSecurityTrustHtml(customMessage);
     this.action = actionText;
 
     const modalElement = this.confirmationModal.nativeElement;

easyfinance.client/src/app/core/models/user.ts

@@ -9,3 +9,8 @@ export class User {
   emailConfirmed!: boolean;
   twoFactorEnabled!: boolean;
 }
+
+export class DeleteUser {
+  confirmationToken!: string;
+  confirmationMessage!: string;
+}

easyfinance.client/src/app/core/services/user.service.ts

@@ -1,10 +1,10 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, Subject, concatMap, map } from 'rxjs';
-import { User } from '../models/user';
+import { DeleteUser, User } from '../models/user';
 import { tap } from 'rxjs';
-import { TokenService } from './token.service';
 import { catchError, throwError } from 'rxjs';
+import { SnackbarComponent } from '../components/snackbar/snackbar.component';
 const USER_DATA = "user_data";
 
 @Injectable({
@@ -14,7 +14,7 @@ export class UserService {
   private loggedUser: Subject<User> = new BehaviorSubject<User>(new User());
   loggedUser$: Observable<User> = this.loggedUser.asObservable();
 
-  constructor(private http: HttpClient, private tokenSerive: TokenService) {
+  constructor(private http: HttpClient, private snackbar: SnackbarComponent) {
     const user = localStorage.getItem(USER_DATA);
 
     if (user) {
@@ -34,7 +34,6 @@ export class UserService {
   }
 
   public removeUserInfo() {
-    this.tokenSerive.clearToken();
     this.loggedUser.next(new User());
     localStorage.removeItem(USER_DATA);
   }
@@ -59,17 +58,18 @@ export class UserService {
     }));
   }
 
-  public deleteUser(token?: string) {
+  public deleteUser(token?: string): Observable<DeleteUser> {
     const options = token
       ? {
           body: { ConfirmationToken: token }, 
         }
       : undefined; 
 
-    return this.http.delete('/api/account/', options).pipe(
+    return this.http.delete<DeleteUser>('/api/account/', options).pipe(
       tap(() => console.log('Delete request sent')),
       catchError((error) => {
         console.error('Error occurred during deletion:', error);
+        this.snackbar.openErrorSnackbar('Failed to delete account. Please try again later');
         return throwError(() => error);
       })
     );