bishko86/client-app-ua

AngularNgrx

This project was generated with Angular CLI version 12.2.12.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

client-app-ua's Issues

Handle refreshToken is expired

Handles a situation when refresh token is expired.
Add method handleRefreshTokenIsNotValid() to interceptor

Move registartion logic to userService

Move registration logic from auth.controller to user service
Move verifyUser logic to user service
Create mailService

Add accessToken to Headers

Add to interceptor method that adds to each request accessToken.
To req headers add Authorization field where value is 'Bearer ...token...'

example:
addAccessTokenToHeader(req: HttpRequest, accessToken: string) {
return req.clone({
setHeaders: {
Authorization: Bearer ${accessToken}
}
});
}

We should send refreshToken in refresh() method when a client gets status code 401 unauthorized on the specific request.
Then system sends the GET request to '/refresh/refreshToken' URL, and if the response status is 200, then restore the previous request
Add to interceptor such method.

Setting up code scanning

For more code quality, there is a need to set up a pipeline in the Github repository

Link for setting guide:
https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/setting-up-code-scanning-for-a-repository

Add SCSS Preprocessor

Add SCSS preprocessor to project;

Info: https://javascript.plainenglish.io/step-by-step-guide-to-upgrade-your-angular-app-from-css-to-scss-fb347330fe28

Middleware isExpiredAccessToken

Add middleware that checks the expiration date of the access token.
Supporting article:
https://stackoverflow.com/questions/48662639/node-js-jwt-refresh-token-in-express-middleware

1.0

1.0 milestone

Move openAuthModal method

Move openAuthModal method to authService

Add Username input field

Add Username input field to login and registration forms

Add fiel to the top of form
Add username property to formData and sent this data to API

Don't show page content for logouted users

Add Guards for modules that display personal user information

Create WS API connection

https://www.freecodecamp.org/news/create-a-professional-node-express/

Create a Welcome Page

If the user clicks on the email’s confirmation link, they will find a blank page and still be unable to log in. Therefore, we need to make some changes on the front end to complete the registration procedure.

We have to add a new method in auth.service.js to call the endpoint defined in the last step.

Code example:

Add verifyUser() method to auth.service.js to establish the connection with the backend

After this, we have to create a new component to render when the confirmation URL is clicked. Don’t forget to include the respective route in the App file!
See here more detailed description:
https://betterprogramming.pub/how-to-create-a-signup-confirmation-email-with-node-js-c2fea602872a

Page up button

Go to the Photo tab.
On the photo tab scroll down the page on the whole height
Then on the right side must appear the Page up button
By press, it page should scroll to the top position
When the page is on the top, the Page up button should be hidden

Message Component

Add MessageComponent

Create the Confirmation Route

We have to set up a route to change the user status from “Pending” to “Active.”
Include a new route in the routes/auth.routes.js file and configured a new controller to deal with the procedure. The verifyUser controller searches the database for a user with the confirmationCode received in the URL and executes the status update accordingly.

code example:

Endpoint defined to deal with the user verification process

Move logout logic to auth service

Move logout logic to authServise to separate method

Add refreshToken to each requests

Add refreshToken to each requests in interceptor

Attach cookies to response

Attach refreshToken to response cookies
You need to send refeshToken by cookies after each login and after each refresh request
Add refresh method to user.controller

Refactor authMiddleware
Refactor roleMiddleware