Delete backend directory

README.md

@@ -1,16 +0,0 @@
-# Projet Sécurité INFO5A 2022
-
-**Auteurs**:
-- Baptiste Peupier
-- Wilfried Vallée
-- Mihary Ranaivoson
-- Yûki Vachot
-
-**Branches**: 
-- db1: Base de données Utilisateur
-- db2: Base de données Log
-- backend: Flask Backend
-- frontend: Serveur Angular avec un autre serveur Flask Backend communiquant avec la "branche" backend
-- development: non mis à jour ne pas cloner
-
-docker compose up pour chaque branche 

frontend/.browserslistrc

@@ -0,0 +1,19 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
+not ios_saf 15.2-15.3
+not safari 15.2-15.3

frontend/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

frontend/.gitignore

@@ -0,0 +1,51 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+.idea/*
+
+# misc
+/.angular/cache
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+package-lock.json
+
+backend/dist

frontend/Dockerfile

@@ -0,0 +1,6 @@
+FROM node:latest
+WORKDIR /app-frontend
+COPY ["package.json", "package-lock.json*", "./"]
+RUN npm install
+RUN npm install -g @angular/cli
+COPY . .

frontend/README.md

@@ -0,0 +1,27 @@
+# Frontend
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.10.
+
+## 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](https://karma-runner.github.io).
+
+## 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](https://angular.io/cli) page.

frontend/angular.json

@@ -0,0 +1,113 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "frontend": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/frontend",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "./node_modules/bootstrap/scss/bootstrap.scss",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "1mb",
+                  "maximumError": "2mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kb",
+                  "maximumError": "8kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "frontend:build:production"
+            },
+            "development": {
+              "browserTarget": "frontend:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "frontend:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "frontend"
+}

frontend/backend/Dockerfile

@@ -0,0 +1,5 @@
+FROM python:latest
+COPY requirements.txt requirements.txt
+RUN pip install --upgrade pip
+RUN pip install -r requirements.txt
+COPY . .

frontend/backend/app.py

@@ -0,0 +1,7 @@
+from application import create_app
+import os
+
+app = create_app(os.environ.get('FLASK_ENV'))
+
+if __name__ == "__main__":
+  app.run(host='0.0.0.0', DEBUG=True)

frontend/backend/application/__init__.py

@@ -0,0 +1,24 @@
+from flask import Flask
+from flask_cors import CORS
+
+
+def create_app(flask_env='development'):
+    print("create app")
+    app = Flask(__name__, instance_relative_config=False, static_url_path='')
+    origin = app.config.get('ALLOW_ORIGIN')
+    if origin is None:
+        origin = ['http://10.1.1.10']
+    CORS(app, supports_credentials=True, origins=origin)
+    if flask_env == 'production':
+        app.config.from_object("config.ProductionConfig")
+    elif flask_env == 'testing':
+        app.config.from_object("config.TestingConfig")
+    elif flask_env == 'development':
+        app.config.from_object("config.DevelopmentConfig")
+    else:
+        app.config.from_object("config.Config")
+
+    with app.app_context():
+        from . import routes
+        app.register_blueprint(routes.bp)
+    return app

frontend/backend/application/responses.py

@@ -0,0 +1,37 @@
+print("Import responses Flask")
+from flask import current_app as app
+print("Import Json")
+import json
+
+
+def send_error(status_code, message, token=None):
+    data_json = {
+        'status': 'error',
+        'message': message
+    }
+    res = app.response_class(
+        response=json.dumps(data_json),
+        status=status_code,
+        mimetype='application/json'
+    )
+    if token is not None:
+        res.set_cookie('SESSIONID', token)
+    return res
+
+
+def send_message(message, data, token=None, token_delete=False):
+    data_json = {
+        'status': 'success',
+        'message': message,
+        'data': data
+    }
+    res = app.response_class(
+        response=json.dumps(data_json),
+        status=200,
+        mimetype='application/json'
+    )
+    if token is not None:
+        res.set_cookie('SESSIONID', token)
+    if token_delete:
+        res.delete_cookie('SESSIONID')
+    return res

frontend/backend/application/routes.py

@@ -0,0 +1,349 @@
+print("Import Flask")
+from flask import request, Blueprint, send_from_directory, current_app as app
+print("Import Requests")
+import requests
+print("Import werkzeug")
+from werkzeug.exceptions import HTTPException
+from .responses import send_message, send_error
+from .sessionJWT import create_auth_token, check_auth_token
+
+
+# Request Post
+def request_post(url, data_json):
+    return requests.post(app.config['API_URL'] + url, json=data_json)
+
+
+# Request Put
+def request_put(url, data_json):
+    return requests.put(app.config['API_URL'] + url, json=data_json)
+
+
+# Request Get
+def request_get(url):
+    return requests.get(app.config['API_URL'] + url)
+
+
+# Request Delete
+def request_delete(url, data_json):
+    return requests.delete(app.config['API_URL'] + url, json=data_json)
+
+
+bp = Blueprint('myapp', __name__)
+
+
+@bp.app_errorhandler(HTTPException)
+def handle_exception(e):
+    return send_error(e.code, e.name)
+
+
+# Login
+@bp.route('/api/login', methods=['POST'])
+def login():
+    post_json = request.json
+    try:
+        post_email = str(post_json['email'])
+        post_password = str(post_json['password'])
+        if post_email != '' and post_password != '':
+            ip = request.remote_addr
+            # res = db_login(ip, post_email, post_password)
+            res = request_post('login', {'ip': ip, 'email': post_email, 'password': post_password}).json()
+            if res['status'] == 'success':
+                user = res['data']
+                token = create_auth_token(user)
+                return send_message(res['message'], user, token)
+            elif res['status'] == 'error':
+                user = None
+                token = create_auth_token(user)
+                return send_error(400, res['message'], token)
+        else:
+            return send_error(400, 'Empty email and/or password fields.')
+    except KeyError as e:
+        return send_error(400, 'Need email, password fields.')
+
+
+# Register
+@bp.route('/api/register', methods=['POST'])
+def register():
+    post_json = request.json
+    try:
+        post_email = str(post_json['email'])
+        post_nickname = str(post_json['nickname'])
+        post_password = str(post_json['password'])
+        if post_email != '' and post_password != '' and post_nickname != '':
+            ip = request.remote_addr
+            # res = db_register(ip, post_email, post_nickname, post_password)
+            res = request_post('register', {'ip': ip, 'email': post_email, 'nickname': post_nickname,
+                                            'password': post_password}).json()
+            if res['status'] == 'error':
+                return send_error(500, res['message'])
+            elif res['status'] == 'success':
+                return send_message(res['message'], res['data'])
+        else:
+            return send_error(400, 'Empty email and/or password and/or nickname fields.')
+    except KeyError as e:
+        return send_error(400, 'Need ' + str(e) + 'field.')
+
+
+# Logout
+@bp.route('/api/logout', methods=['DELETE'])
+def logout():
+    token = check_auth_token(request)
+    if token['success']:
+        ip = request.remote_addr
+        user_id = token['payload']['id']
+        res = request_delete('logout', {'ip': ip, 'user_id': user_id}).json()
+        return send_message(res['message'], None, token_delete=True)
+    else:
+        return send_error(500, token['message'])
+
+
+# Update User (Nickname, Password)
+@bp.route('/api/user/update', methods=['PUT'])
+def user_update():
+    token = check_auth_token(request)
+    if token['success']:
+        post_json = request.json
+        post_nickname = None
+        post_password = None
+        fields = ''
+        if 'nickname' in post_json:
+            post_nickname = str(post_json['nickname'])
+        else:
+            fields += 'nickname '
+
+        if 'password' in post_json:
+            post_password = str(post_json['password'])
+        else:
+            fields += 'password '
+
+        if post_nickname is not None or post_password is not None:
+            if post_nickname != '' and post_password != '':
+                ip = request.remote_addr
+                user_id = token['payload']['id']
+                # res = db_user_update(ip, user_id, post_nickname, post_password)
+                res = request_put('user/update', {'ip': ip, 'user_id': user_id, 'nickname': post_nickname,
+                                                   'password': post_password}).json()
+                if res['status'] == 'error':
+                    return send_error(500, res['message'])
+                elif res['status'] == 'success':
+                    return send_message(res['message'], res['data'])
+            else:
+                return send_error(400, 'Empty nickname and/or password fields.')
+        else:
+            return send_error(400, 'Need ' + fields + 'field.')
+    else:
+        return send_error(500, token['message'])
+
+
+# Delete User
+@bp.route('/api/user/delete', methods=['DELETE'])
+def user_delete():
+    token = check_auth_token(request)
+    if token['success']:
+        ip = request.remote_addr
+        user_id = token['payload']['id']
+        # res = db_user_delete(ip, user_id)
+        res = request_delete('user/delete', {'ip': ip, 'user_id': user_id}).json()
+        if res['status'] != 'success':
+            return send_error(500, res['message'])
+        else:
+            return send_message(res['message'], None, token_delete=True)
+    else:
+        return send_error(500, token['message'])
+
+
+# Admin : Create User
+@bp.route('/api/admin/create/user', methods=['POST'])
+def admin_create_user():
+    token = check_auth_token(request)
+    if token['success']:
+        ip = request.remote_addr
+        user_id = token['payload']['id']
+        is_admin = token['payload']['is_admin']
+        if is_admin:
+            post_json = request.json
+            post_email = None
+            post_nickname = None
+            post_password = None
+            post_is_admin = None
+            fields = ''
+            if 'email' in post_json:
+                post_email = str(post_json['email'])
+            else:
+                fields += 'email '
+
+            if 'nickname' in post_json:
+                post_nickname = str(post_json['nickname'])
+            else:
+                fields += 'nickname '
+
+            if 'password' in post_json:
+                post_password = str(post_json['password'])
+            else:
+                fields += 'password '
+
+            if 'is_admin' in post_json:
+                post_is_admin = bool(post_json['is_admin'])
+            else:
+                fields += 'is_admin '
+
+            if post_email is not None or post_nickname is not None or post_password is not None or post_is_admin is not None:
+                if post_email != '' and post_nickname != '' and post_password != '' and str(post_is_admin) != '':
+                    # res = db_register(ip, post_email, post_nickname, post_password, is_admin=post_is_admin)
+                    res = request_post('admin/create/user', {
+                        'ip': ip,
+                        'user_id': user_id,
+                        'token_is_admin': is_admin,
+                        'email': post_email,
+                        'nickname': post_nickname,
+                        'password': post_password,
+                        'is_admin': post_is_admin
+                    }).json()
+                    if res['status'] == 'error':
+                        return send_error(500, res['message'])
+                    elif res['status'] == 'success':
+                        return send_message(res['message'], res['data'])
+                else:
+                    return send_error(400, 'Empty email and/or nickname and/or password and/or is_admin fields.')
+            else:
+                return send_error(400, 'Need ' + fields + 'field.')
+        else:
+            return send_error(500, 'User does not have permission.')
+    else:
+        return send_error(500, token['message'])
+
+
+# Admin : Change User password and/or role
+@bp.route('/api/admin/update/user', methods=['PUT'])
+def admin_update_user():
+    token = check_auth_token(request)
+    if token['success']:
+        user_id = token['payload']['id']
+        is_admin = token['payload']['is_admin']
+        if is_admin:
+            post_json = request.json
+            post_is_admin = None
+            post_password = None
+            post_user_id_delete = None
+            fields = ''
+            if 'id' in post_json:
+                post_user_id_delete = int(post_json['id'])
+            else:
+                fields += 'id '
+
+            if 'is_admin' in post_json:
+                post_is_admin = bool(post_json['is_admin'])
+            else:
+                fields += 'is_admin '
+
+            if 'password' in post_json:
+                post_password = str(post_json['password'])
+            else:
+                fields += 'password '
+
+            if post_user_id_delete is not None and (post_is_admin is not None or post_password is not None):
+                if str(post_is_admin) != '' and post_password != '' and str(post_user_id_delete) != '':
+                    ip = request.remote_addr
+                    # res = db_admin_update_user(ip, post_user_id_delete, post_is_admin, post_password)
+                    res = request_put('admin/update/user', {
+                        'ip': ip,
+                        'user_id': user_id,
+                        'token_is_admin': is_admin,
+                        'id': post_user_id_delete,
+                        'is_admin': post_is_admin,
+                        'password': post_password
+                    }).json()
+                    if res['status'] == 'error':
+                        return send_error(500, res['message'])
+                    elif res['status'] == 'success':
+                        return send_message(res['message'], res['data'])
+                else:
+                    return send_error(400, 'Empty is_admin and/or password fields.')
+            else:
+                return send_error(400, 'Need ' + fields + 'field.')
+        else:
+            return send_error(500, 'User does not have permission.')
+    else:
+        return send_error(500, token['message'])
+
+
+# Admin : Delete User
+@bp.route('/api/admin/delete/user/<id>', methods=['DELETE'])
+def admin_delete_user(id):
+    token = check_auth_token(request)
+    if token['success']:
+        ip = request.remote_addr
+        user_id = token['payload']['id']
+        is_admin = token['payload']['is_admin']
+        if is_admin:
+            post_json = {'id': id}
+            post_user_id_delete = None
+            fields = ''
+            if 'id' in post_json:
+                post_user_id_delete = int(post_json['id'])
+            else:
+                fields += 'id'
+            if post_user_id_delete is not None:
+                if str(post_user_id_delete) != '':
+                    # res = db_user_delete(ip, int(post_user_id_delete))
+                    res = request_delete('admin/delete/user', {
+                        'ip': ip,
+                        'user_id': user_id,
+                        'token_is_admin': is_admin,
+                        'id': post_user_id_delete
+                    }).json()
+                    if res['status'] == 'error':
+                        return send_error(500, res['message'])
+                    else:
+                        return send_message(res['message'], None)
+                else:
+                    return send_error(400, 'Empty id field.')
+            else:
+                return send_error(400, 'Need ' + fields + 'field.')
+        else:
+            return send_error(500, 'User does not have permission.')
+    else:
+        return send_error(500, token['message'])
+
+
+# List of User (must be authenticated) & Search
+@bp.route('/api/users', methods=['GET'])
+def users():
+    token = check_auth_token(request)
+    if token['success']:
+        ip = request.remote_addr
+        user_id = token['payload']['id']
+
+        filter = ''
+        get_query = request.args.get('q')
+        if get_query is not None:
+            filter += f'&q={get_query}'
+
+        get_by = request.args.get('by')
+        if get_by is not None:
+            filter += f'&by={get_by}'
+
+        get_id = request.args.get('id')
+        if get_id is not None:
+            filter += f'&id={get_id}'
+
+        get_is_admin = request.args.get('is_admin')
+        if get_is_admin is not None:
+            filter += f'&is_admin={get_is_admin}'
+
+        get_order_by = request.args.get('order_by')
+        if get_order_by is not None:
+            filter += f'&order_by={get_order_by}'
+        # res = db_users(ip, user_id, get_query, get_by, get_id, get_is_admin, get_order_by)
+        res = request_get(
+            'users'
+            f'?ip={ip}'
+            f'&user_id={user_id}'
+            f'{filter}'
+        ).json()
+        if res['status'] == 'error':
+            return send_error(500, res['message'])
+        else:
+            return send_message(res['message'], res['data'])
+    else:
+        return send_error(500, token['message'])

frontend/backend/application/sessionJWT.py

@@ -0,0 +1,42 @@
+print("Import datetime")
+from datetime import datetime, timedelta
+print("Import sessionJWT Flask")
+from flask import current_app as app
+print("Import jwt")
+import jwt
+
+
+def create_auth_token(user, time_second=1800):
+    try:
+        time = datetime.now()
+        payload = {
+            'exp': time + timedelta(days=0, seconds=time_second),
+            'iat': time,
+            'user': user
+        }
+        return jwt.encode(
+            payload,
+            app.config.get('SECRET_KEY'),
+            algorithm='HS256'
+        )
+    except Exception as e:
+        return e
+
+
+def decode_auth_token(auth_token):
+    try:
+        payload = jwt.decode(
+            auth_token,
+            app.config.get('SECRET_KEY'),
+            algorithms='HS256'
+        )
+        return {'success': True, 'payload': payload['user']}
+    except jwt.ExpiredSignatureError:
+        return {'success': False, 'message': 'Signature expired . Please log in again.'}
+    except jwt.InvalidTokenError as e:
+        return {'success': False, 'message': 'User not authenticated.'}
+
+
+def check_auth_token(request):
+    token = request.cookies.get('SESSIONID')
+    return decode_auth_token(token)

frontend/backend/config.py

@@ -0,0 +1,33 @@
+print("Import os")
+import os
+
+basedir = os.path.abspath(os.path.dirname(__file__))
+
+
+class Config(object):
+    DEBUG = False
+    TESTING = False
+    CSRF_ENABLED = True
+
+    FLASK_APP = os.environ.get('FLASK_APP', None)
+    FLASK_ENV = os.environ.get('FLASK_ENV', None)
+    FLASK_RUN_PORT = os.environ.get('FLASK_RUN_PORT', 5000)
+
+    API_URL = os.environ.get('API_URL', 'http://127.0.0.1:5000/api/')
+
+    SECRET_KEY = os.environ.get('SECRET_KEY', 'default_secret_key')
+    ALLOW_ORIGIN = os.environ.get('ALLOW_ORIGIN', None)
+
+
+class ProductionConfig(Config):
+    DEBUG = False
+    API_URL = os.environ.get('API_URL', 'http://10.1.2.10:5000/api/')
+
+
+class TestingConfig(Config):
+    TESTING = True
+
+
+class DevelopmentConfig(Config):
+    DEVELOPMENT = True
+    DEBUG = True

frontend/backend/requirements.txt

@@ -0,0 +1,8 @@
+Flask==2.0.2
+Flask-Testing==0.8.1
+Flask-WTF==0.15.1
+PyJWT==2.3.0
+pytest==6.2.5
+psycopg2==2.9.2
+Flask-Cors==3.0.10
+requests==2.22.0

frontend/conf/nginx.conf

@@ -0,0 +1,42 @@
+events {
+  worker_connections  1024;
+}
+
+http {
+
+  resolver 127.0.0.11 ipv6=off;
+
+  proxy_redirect          off;
+  proxy_set_header        Host            $host;
+  proxy_set_header        X-Real-IP       $remote_addr;
+  proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
+  client_max_body_size    100m;
+  client_body_buffer_size 128k;
+  proxy_connect_timeout   90;
+  proxy_send_timeout      90;
+  proxy_read_timeout      90;
+  proxy_buffers           32 4k;
+
+  upstream frontend {
+	  server frontend:4200;
+  }
+
+  upstream flask-frontend {
+	  server flask-frontend:5000;
+  }
+
+
+  server {
+    listen 					      80;
+    access_log      		  logs/access.log;
+
+    location / {
+      proxy_pass      		http://frontend;
+    }
+
+    location /api {
+      proxy_pass      		http://flask-frontend;
+    }
+  }
+
+}

frontend/docker-compose.yml

@@ -0,0 +1,48 @@
+version: '3.8'
+
+services:
+  nginx-front:
+    image: nginx:latest
+    volumes:
+      - ./conf/nginx.conf:/etc/nginx/nginx.conf
+      - ./logs/nginx:/etc/nginx/logs
+      - ./cert:/etc/nginx/cert
+    networks:
+      - net
+    ports:
+      - 80:80
+    depends_on:
+      - frontend
+      - flask-frontend
+
+  frontend:
+    container_name: frontend
+    build: .
+    command: npm start
+    volumes:
+      - ./src:/data/frontend
+      - ./node_modules:/data/frontend/node_modules
+    environment:
+      - NODE_ENV=production
+    networks:
+      - net
+
+  flask-frontend:
+    container_name: flask-frontend
+    build: backend
+    command: python -m flask run
+    volumes:
+      - ./backend:/data/backend
+    environment:
+      - FLASK_APP=app.py
+      - FLASK_ENV=production
+      - FLASK_DEBUG=0
+      - FLASK_RUN_PORT=5000
+    networks:
+      - net
+    depends_on:
+      - frontend
+
+networks:
+  net:
+    driver: bridge

frontend/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/frontend'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

frontend/logs/nginx/access.log

@@ -0,0 +1,49 @@
+192.168.0.1 - - [28/Jan/2022:11:02:32 +0000] "GET / HTTP/1.1" 200 2713 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.0.1 - - [28/Jan/2022:11:02:32 +0000] "GET /polyfills.0cf80192f5858f6f.js HTTP/1.1" 200 37090 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.0.1 - - [28/Jan/2022:11:02:32 +0000] "GET /runtime.aaedba49815d2ab0.js HTTP/1.1" 200 1066 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.0.1 - - [28/Jan/2022:11:02:32 +0000] "GET /styles.f64087845b474dd2.css HTTP/1.1" 200 235504 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.0.1 - - [28/Jan/2022:11:02:32 +0000] "GET /main.d1e7791aa69a6ada.js HTTP/1.1" 200 694159 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.0.1 - - [28/Jan/2022:11:02:33 +0000] "GET /assets/logo.png HTTP/1.1" 200 201990 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.0.1 - - [28/Jan/2022:11:02:33 +0000] "GET /favicon.ico HTTP/1.1" 200 948 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.0.1 - - [28/Jan/2022:11:02:41 +0000] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.0.1 - - [28/Jan/2022:11:02:41 +0000] "GET /polyfills.0cf80192f5858f6f.js HTTP/1.1" 304 0 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.0.1 - - [28/Jan/2022:11:02:41 +0000] "GET /runtime.aaedba49815d2ab0.js HTTP/1.1" 304 0 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.0.1 - - [28/Jan/2022:11:02:41 +0000] "GET /main.d1e7791aa69a6ada.js HTTP/1.1" 304 0 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.16.1 - - [28/Jan/2022:11:03:38 +0000] "GET / HTTP/1.1" 200 2713 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.16.1 - - [28/Jan/2022:11:03:38 +0000] "GET /styles.f64087845b474dd2.css HTTP/1.1" 200 235504 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.16.1 - - [28/Jan/2022:11:03:38 +0000] "GET /assets/logo.png HTTP/1.1" 200 201990 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.16.1 - - [28/Jan/2022:11:04:23 +0000] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.16.1 - - [28/Jan/2022:11:04:23 +0000] "GET /runtime.aaedba49815d2ab0.js HTTP/1.1" 200 1066 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.16.1 - - [28/Jan/2022:11:04:23 +0000] "GET /polyfills.0cf80192f5858f6f.js HTTP/1.1" 200 37090 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.16.1 - - [28/Jan/2022:11:04:23 +0000] "GET /main.d1e7791aa69a6ada.js HTTP/1.1" 200 694159 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.16.1 - - [28/Jan/2022:11:04:23 +0000] "GET /styles.f64087845b474dd2.css HTTP/1.1" 304 0 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.16.1 - - [28/Jan/2022:11:04:23 +0000] "GET /assets/logo.png HTTP/1.1" 304 0 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+192.168.16.1 - - [28/Jan/2022:11:04:23 +0000] "GET /favicon.ico HTTP/1.1" 200 948 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+172.21.0.1 - - [01/Feb/2022:14:58:24 +0000] "GET / HTTP/1.1" 502 559 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36"
+172.21.0.1 - - [01/Feb/2022:14:58:25 +0000] "GET /favicon.ico HTTP/1.1" 502 559 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36"
+172.21.0.1 - - [01/Feb/2022:14:58:30 +0000] "GET / HTTP/1.1" 502 559 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36"
+172.21.0.1 - - [01/Feb/2022:14:58:30 +0000] "GET /favicon.ico HTTP/1.1" 502 559 "http://127.0.0.1/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36"
+172.21.0.1 - - [01/Feb/2022:15:01:07 +0000] "GET / HTTP/1.1" 502 559 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36"
+172.21.0.1 - - [01/Feb/2022:15:01:07 +0000] "GET /favicon.ico HTTP/1.1" 502 559 "http://127.0.0.1/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36"
+172.22.0.1 - - [01/Feb/2022:15:14:43 +0000] "GET / HTTP/1.1" 502 559 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36"
+172.22.0.1 - - [01/Feb/2022:15:14:43 +0000] "GET /favicon.ico HTTP/1.1" 502 559 "http://127.0.0.1/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36"
+172.22.0.1 - - [01/Feb/2022:15:19:49 +0000] "GET / HTTP/1.1" 502 559 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36"
+172.22.0.1 - - [01/Feb/2022:15:19:52 +0000] "GET /favicon.ico HTTP/1.1" 502 559 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36"
+172.22.0.1 - - [01/Feb/2022:15:22:17 +0000] "GET / HTTP/1.1" 502 559 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36"
+172.22.0.1 - - [01/Feb/2022:15:22:18 +0000] "GET /favicon.ico HTTP/1.1" 502 559 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36"
+172.22.0.1 - - [01/Feb/2022:15:22:19 +0000] "GET / HTTP/1.1" 502 559 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36"
+172.22.0.1 - - [01/Feb/2022:15:22:19 +0000] "GET /favicon.ico HTTP/1.1" 502 559 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36"
+172.28.0.1 - - [02/Feb/2022:08:44:58 +0000] "GET / HTTP/1.1" 200 2713 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+172.28.0.1 - - [02/Feb/2022:08:44:59 +0000] "GET /runtime.aaedba49815d2ab0.js HTTP/1.1" 200 1066 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+172.28.0.1 - - [02/Feb/2022:08:44:59 +0000] "GET /polyfills.0cf80192f5858f6f.js HTTP/1.1" 200 37090 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+172.28.0.1 - - [02/Feb/2022:08:44:59 +0000] "GET /styles.f64087845b474dd2.css HTTP/1.1" 200 235504 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+172.28.0.1 - - [02/Feb/2022:08:44:59 +0000] "GET /main.100f2196b68e9ba2.js HTTP/1.1" 200 694159 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+172.28.0.1 - - [02/Feb/2022:08:44:59 +0000] "GET /assets/logo.png HTTP/1.1" 200 201990 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+172.28.0.1 - - [02/Feb/2022:08:45:01 +0000] "GET /styles.f64087845b474dd2.css HTTP/1.1" 304 0 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+172.28.0.1 - - [02/Feb/2022:08:45:52 +0000] "GET / HTTP/1.1" 200 2713 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+172.28.0.1 - - [02/Feb/2022:08:45:52 +0000] "GET /runtime.aaedba49815d2ab0.js HTTP/1.1" 200 1066 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+172.28.0.1 - - [02/Feb/2022:08:45:52 +0000] "GET /polyfills.0cf80192f5858f6f.js HTTP/1.1" 200 37090 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+172.28.0.1 - - [02/Feb/2022:08:45:52 +0000] "GET /main.100f2196b68e9ba2.js HTTP/1.1" 200 694159 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+172.28.0.1 - - [02/Feb/2022:08:45:52 +0000] "GET /styles.f64087845b474dd2.css HTTP/1.1" 200 235504 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+172.28.0.1 - - [02/Feb/2022:08:45:52 +0000] "GET /assets/logo.png HTTP/1.1" 200 201990 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"
+172.28.0.1 - - [02/Feb/2022:08:45:52 +0000] "GET /favicon.ico HTTP/1.1" 200 948 "http://localhost/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 OPR/82.0.4227.50"

frontend/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng build && node server.js",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~13.1.1",
+    "@angular/cdk": "^13.0.2",
+    "@angular/common": "~13.1.1",
+    "@angular/compiler": "~13.1.1",
+    "@angular/core": "~13.1.1",
+    "@angular/forms": "~13.1.1",
+    "@angular/material": "^13.0.2",
+    "@angular/platform-browser": "~13.1.1",
+    "@angular/platform-browser-dynamic": "~13.1.1",
+    "@angular/router": "~13.1.1",
+    "bootstrap": "^5.1.3",
+    "express": "^4.17.2",
+    "jquery": "^3.6.0",
+    "popper": "^1.0.1",
+    "rxjs": "~6.6.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^13.1.4",
+    "@angular/cli": "~13.1.2",
+    "@angular/compiler-cli": "~13.1.1",
+    "@types/jasmine": "~3.8.0",
+    "@types/node": "^12.11.1",
+    "jasmine-core": "~3.8.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.0.3",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "typescript": "~4.5.4"
+  }
+}

frontend/server.js

@@ -0,0 +1,13 @@
+const path = require('path');
+const express = require('express');
+const app = express();
+const port = process.env.PORT || 4200;
+
+app.use(express.static(__dirname + '/dist/frontend'));
+app.get('/*', function(req,res) {
+  res.sendFile(path.join(__dirname+ '/dist/frontend/index.html'));
+});
+
+app.listen(port, '0.0.0.0',() => {
+  console.log (`listening on port ${port}`);
+});

frontend/src/app/admin/myProfil/commentary.txt

@@ -0,0 +1,7 @@
+La page "admin/myProfil" contient:
+    - les informations de l'admin (composant "page-profil")
+    - un bouton "modifier profil" pour modifier les informations de l'admin (composant "popup-update-profil")
+
+Cette page est la même que la page de la partie utilisateur.
+
+Ainsi, on a rangé cette page dans le dossier "common/components/profil".

frontend/src/app/admin/userList/page-user-list/page-user-list.component.html

@@ -0,0 +1,67 @@
+<div>
+
+    <app-navbar pour="admin"></app-navbar>
+
+
+    <div class="btnContainer">
+        <button mat-button class="btnAjouter" (click)="onCreate()">
+            <mat-icon>add_circle</mat-icon> Ajouter un utilisateur
+        </button>
+    </div>
+
+
+    <div style="text-align: center">
+        <mat-form-field appearance="standard" class="filtre">
+            <mat-label>Filter</mat-label>
+            <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Riri" #input>
+        </mat-form-field>
+    </div>
+
+
+    <table *ngIf="(dataSource !== undefined) && (dataSource !== null) && (dataSource.data.length !== 0)"
+           mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+
+        <!-- Pseudo Column -->
+        <ng-container matColumnDef="nickname">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Pseudo</th>
+            <td mat-cell *matCellDef="let person">{{person.nickname}}</td>
+        </ng-container>
+
+        <!-- Email Column -->
+        <ng-container matColumnDef="email">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
+            <td mat-cell *matCellDef="let person">{{person.email}}</td>
+        </ng-container>
+
+        <!-- Role Column -->
+        <ng-container matColumnDef="role">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Rôle</th>
+            <td mat-cell *matCellDef="let person">{{person.role}}</td>
+        </ng-container>
+
+        <!-- Actions Column -->
+        <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Actions</th>
+            <td mat-cell *matCellDef="let person">
+                <button mat-icon-button (click)="onUpdate(person)">
+                    <mat-icon>edit</mat-icon>
+                </button>
+                <button mat-icon-button (click)="onDelete(person)">
+                    <mat-icon>delete</mat-icon>
+                </button>
+            </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+
+
+    <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]"
+                   showFirstLastButtons
+                   aria-label="Select page of periodic elements"
+                   class="mat-elevation-z8"></mat-paginator>
+
+
+</div>
+<br><br>

frontend/src/app/admin/userList/page-user-list/page-user-list.component.scss

@@ -0,0 +1,18 @@
+mat-paginator, table {
+  width: 80%;
+  margin: auto 10%;
+}
+
+.btnContainer {
+  margin: 50px 10% 20px 0px;
+  text-align: right;
+}
+
+.btnAjouter {
+  border: solid 1px black;
+}
+
+.filtre {
+  text-align: center;
+  width: 33%;
+}

frontend/src/app/admin/userList/page-user-list/page-user-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageUserListComponent } from './page-user-list.component';
+
+describe('PageAdminComponent', () => {
+  let component: PageUserListComponent;
+  let fixture: ComponentFixture<PageUserListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageUserListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageUserListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/admin/userList/page-user-list/page-user-list.component.ts

@@ -0,0 +1,152 @@
+import {AfterViewInit, Component, ViewChild} from '@angular/core';
+import {MatTableDataSource} from "@angular/material/table";
+import {MatSort} from "@angular/material/sort";
+import {MatPaginator} from "@angular/material/paginator";
+import {MatDialog} from "@angular/material/dialog";
+import {PopupCreatePersonComponent} from "../popup-create-person/popup-create-person.component";
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {PopupUpdatePersonAdminComponent} from "../popup-update-person-admin/popup-update-person-admin.component";
+import {PopupDeleteProfilComponent} from "../../../common/components/popup-delete-profil/popup-delete-profil.component";
+import {MessageService} from "../../../common/services/message/message.service";
+
+
+
+@Component({
+  selector: 'app-page-user-list',
+  templateUrl: './page-user-list.component.html',
+  styleUrls: ['./page-user-list.component.scss']
+})
+export class PageUserListComponent implements AfterViewInit
+{
+    displayedColumns: string[] = [ "nickname", "email", "role", "actions" ];
+    dataSource: MatTableDataSource<any> = new MatTableDataSource<any>();
+    @ViewChild(MatSort) sort: MatSort;
+    @ViewChild(MatPaginator) paginator: MatPaginator;
+    configSnackBar = { duration: 2000, panelClass: "custom-class" };
+
+
+    constructor( private messageService: MessageService,
+                 public dialog: MatDialog,
+                 private snackBar: MatSnackBar) { }
+
+
+    ngAfterViewInit(): void
+    {
+        this.messageService
+            .get('users?order_by=nickname')
+            .subscribe(retour => this.ngAfterViewInitCallback(retour), err => this.ngAfterViewInitCallback(err));
+    }
+
+
+    ngAfterViewInitCallback(retour: any): void
+    {
+        if(retour.status !== "success") {
+            console.log(retour);
+        }
+        else {
+            let tabPerson: { id: number, email: string, nickname: string, is_admin: boolean }[] = retour.data;
+            tabPerson = tabPerson.map( person => {
+                if(!person.is_admin) return Object.assign(person, {role: "utilisateur"});
+                else return Object.assign(person, {role: "admin"});
+            });
+            this.dataSource = new MatTableDataSource(tabPerson);
+            this.dataSource.sort = this.sort;
+            this.dataSource.paginator = this.paginator;
+        }
+    }
+
+
+    applyFilter(event: Event)
+    {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.dataSource.filter = filterValue.trim().toLowerCase();
+    }
+
+
+    // Appuie sur le bouton "create"
+    onCreate(): void
+    {
+        const config = { width: '50%' };
+        this.dialog
+            .open(PopupCreatePersonComponent, config)
+            .afterClosed()
+            .subscribe( retour => {
+
+                if((retour === null) || (retour === undefined))
+                {
+                    this.snackBar.open( "Opération annulée", "", this.configSnackBar);
+                }
+                else {
+                    if(retour.data.is_admin) retour.data.role = "admin" ;
+                    else retour.data.role = "utilisateur" ;
+                    this.dataSource.data.push(retour.data);
+                    this.dataSource.data = this.dataSource.data;
+                    this.dataSource = this.dataSource;
+                    this.snackBar.open( "L'utilisateur a bien été créé ✔", "", this.configSnackBar);
+                }
+            });
+    }
+
+
+    // Appuie sur le bouton "edit"
+    onUpdate(personToUpdate: any): void
+    {
+        const config = {
+            width: '50%',
+            data: { person: personToUpdate }
+        };
+        this.dialog
+            .open(PopupUpdatePersonAdminComponent, config)
+            .afterClosed()
+            .subscribe( is_admin => {
+
+                if((is_admin === null) || (is_admin === undefined))
+                {
+                    this.snackBar.open("Opération annulée", "", this.configSnackBar);
+                }
+                else {
+                    const index = this.dataSource.data.findIndex(elt => (elt.id === personToUpdate.id));
+                    this.dataSource.data[index].is_admin = is_admin;
+                    if(is_admin) this.dataSource.data[index].role = "admin";
+                    else this.dataSource.data[index].role = "utilisateur";
+                    this.snackBar.open("L'utilisateur a bien été modifié ✔", "", this.configSnackBar);
+                }
+
+            });
+    }
+
+
+    // Appuie sur le bouton "delete"
+    onDelete(personToDelete: any): void
+    {
+        const config = {
+            data: {
+                id: personToDelete.id,
+                email: personToDelete.email,
+                me: false,
+            }
+        };
+        this.dialog
+            .open(PopupDeleteProfilComponent, config)
+            .afterClosed()
+            .subscribe( retour => {
+
+                if((retour === null) || (retour === undefined))
+                {
+                    this.snackBar.open("Opération annulée", "", this.configSnackBar);
+                }
+                else if(retour.status === "error")
+                {
+                    this.snackBar.open(retour.error.message, "", this.configSnackBar);
+                }
+                else {
+                    const index = this.dataSource.data.findIndex( elt => (elt.id === personToDelete.id));
+                    this.dataSource.data.splice(index, 1);
+                    this.dataSource.data = this.dataSource.data;
+                    this.dataSource = this.dataSource;
+                    this.snackBar.open("L'utilisateur a bien été supprimé ✔", "", this.configSnackBar);
+                }
+            });
+    }
+
+}

frontend/src/app/admin/userList/popup-create-person/popup-create-person.component.html

@@ -0,0 +1,47 @@
+<div class="myContainer">
+
+    <h3>Ajouter un utilisateur</h3>
+
+    <mat-divider style="margin: 20px 0px 20px 0px"></mat-divider>
+
+    <!-- nickname -->
+    <mat-form-field appearance="fill">
+        <mat-label>Pseudo</mat-label>
+        <input matInput type="text" [(ngModel)]="nickname" required>
+    </mat-form-field><br>
+
+    <!-- email -->
+    <mat-form-field appearance="fill">
+        <mat-label>Email</mat-label>
+        <input matInput type="text" [(ngModel)]="email" required>
+    </mat-form-field><br>
+
+    <!-- mot de passe -->
+    <mat-form-field appearance="fill">
+        <mat-label>Mot de passe</mat-label>
+        <input matInput type="password" [(ngModel)]="password" required>
+    </mat-form-field><br>
+
+    <!-- confirmation mot de passe -->
+    <mat-form-field appearance="fill">
+        <mat-label>Confirmation mot de passe</mat-label>
+        <input matInput type="password" [(ngModel)]="confirmPassword" required>
+    </mat-form-field><br>
+
+    <!-- role -->
+    <mat-radio-group aria-labelledby="label-radio-group" [(ngModel)]="is_admin">
+        <mat-radio-button [value]="false" checked>Utilisateur &nbsp;</mat-radio-button>
+        <mat-radio-button [value]="true">Admin</mat-radio-button>
+    </mat-radio-group><br><br>
+
+    <mat-divider style="margin-bottom: 10px"></mat-divider>
+
+    <!-- message d'erreur -->
+    <div *ngIf="hasError">
+        <mat-error>{{errorMessage}}</mat-error>
+    </div>
+
+    <!-- bouton -->
+    <button mat-button (click)="onValider()">Valider</button>
+
+</div>

frontend/src/app/admin/userList/popup-create-person/popup-create-person.component.scss

@@ -0,0 +1,13 @@
+.myContainer {
+  text-align: center;
+}
+
+::ng-deep .mat-radio-inner-circle {
+  color: black !important;
+  background-color: black !important;
+}
+
+::ng-deep .mat-radio-outer-circle{
+  color: black !important;
+  border: solid 1px gray !important;
+}

frontend/src/app/admin/userList/popup-create-person/popup-create-person.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PopupCreatePersonComponent } from './popup-create-person.component';
+
+describe('PopupCreerUtilisateurComponent', () => {
+  let component: PopupCreatePersonComponent;
+  let fixture: ComponentFixture<PopupCreatePersonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PopupCreatePersonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PopupCreatePersonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/admin/userList/popup-create-person/popup-create-person.component.ts

@@ -0,0 +1,95 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {CheckEmailService} from "../../../common/services/checkEmail/check-email.service";
+import {MessageService} from "../../../common/services/message/message.service";
+
+
+
+@Component({
+  selector: 'app-popup-create-person',
+  templateUrl: './popup-create-person.component.html',
+  styleUrls: ['./popup-create-person.component.scss']
+})
+export class PopupCreatePersonComponent
+{
+    nickname: string =  "";
+    email: string = "";
+    is_admin: boolean = false;
+    password: string = "";
+
+    confirmPassword: string = "" ;
+    hasError: boolean = false;
+    errorMessage: string = "" ;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupCreatePersonComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data: any,
+                 private checkEmailService: CheckEmailService,
+                 private messageService: MessageService ) { }
+
+
+    // Appuie sur le bouton "valider"
+    onValider(): void
+    {
+        this.checkField();
+        if(!this.hasError)
+        {
+            const data = {
+                email: this.email,
+                nickname: this.nickname,
+                password: this.password,
+                is_admin: this.is_admin
+            };
+            this.messageService
+                .post("admin/create/user", data)
+                .subscribe(ret => this.onValiderCallback(ret), err => this.onValiderCallback(err));
+        }
+    }
+
+
+    // Callback de 'onValider'
+    onValiderCallback(retour: any)
+    {
+        if(retour.status !== 'success')
+        {
+            console.log(retour);
+            this.errorMessage = retour.error.message;
+            this.hasError = true;
+        }
+        else
+        {
+            this.dialogRef.close(retour);
+        }
+    }
+
+
+    // Check les champs saisis par l'utilisateur
+    checkField(): void
+    {
+        if(this.nickname.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'pseudo'.";
+            this.hasError = true;
+        }
+        else if(this.email.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'email'.";
+            this.hasError = true;
+        }
+        else if(!this.checkEmailService.isValidEmail(this.email)) {
+            this.errorMessage = "Email invalide.";
+            this.hasError = true;
+        }
+        else if(this.password.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'mot de passe'.";
+            this.hasError = true;
+        }
+        else if(this.password !== this.confirmPassword) {
+            this.errorMessage = "Le mot de passe est différent de sa confirmation.";
+            this.hasError = true;
+        }
+        else {
+            this.errorMessage = "" ;
+            this.hasError = false;
+        }
+    }
+
+}

frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.html

@@ -0,0 +1,57 @@
+<div class="myContainer">
+    <div class="boite">
+
+        <h3>Modifier</h3>
+
+        <!-- divider -->
+        <mat-divider></mat-divider><br>
+
+        <!-- role -->
+        <mat-radio-group [(ngModel)]="is_admin">
+            <mat-radio-button [value]="false"
+                              [checked]="!is_admin">Utilisateur</mat-radio-button> &nbsp;
+            <mat-radio-button [value]="true"
+                              [checked]="is_admin">Admin</mat-radio-button>
+        </mat-radio-group><br><br>
+
+        <!-- divider -->
+        <mat-divider></mat-divider><br>
+
+        <!-- Modifier mot de passe -->
+        <div>
+            Modifier mot de passe:
+            <mat-checkbox [(ngModel)]="changePassword"></mat-checkbox>
+        </div>
+
+        <!-- nouveau mot de passe -->
+        <div *ngIf="changePassword" style="margin-top: 10px">
+            <!-- Nouveau mot de passe -->
+            <mat-form-field appearance="fill">
+                <mat-label>Nouveau mot de passe</mat-label>
+                <input matInput type="password" [(ngModel)]="newPassword">
+            </mat-form-field>
+            <br>
+            <!-- Confirmation npuveau mot de passe -->
+            <mat-form-field appearance="fill">
+                <mat-label>Confirmation nouveau mot de passe</mat-label>
+                <input matInput type="password" [(ngModel)]="confirmNewPassword">
+            </mat-form-field>
+        </div>
+        <div *ngIf="!changePassword"><br></div>
+
+        <!-- divider -->
+        <mat-divider></mat-divider><br>
+
+        <!-- message d'erreur -->
+        <div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
+            <span class="mat-error">{{errorMessage}}</span>
+        </div>
+
+        <!-- boutons -->
+        <div style="width: 100%; text-align: right">
+            <button mat-button (click)="this.dialogRef.close(null)"> Annuler </button>
+            <button mat-button (click)="onValider()"> Enregistrer </button>
+        </div>
+
+    </div>
+</div>

frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.scss

@@ -0,0 +1,37 @@
+.boite {
+  font-size: small;
+}
+
+h3 {
+  text-align: center;
+}
+
+button {
+  font-size: small;
+}
+
+img {
+  margin: 0px 0px 10px 0px;
+  width: 5vw;
+  height: 5vw;
+  border: solid 2px black;
+  border-radius: 50%;
+  font-size: xxx-large;
+}
+
+// -------------------------------------------------------------------------
+
+// aura
+::ng-deep .mat-checkbox-ripple .mat-ripple-element {
+  background-color: grey !important;
+}
+
+// contenu coche
+::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
+  background-color: black !important;
+}
+
+// indeterminate
+::ng-deep .mat-checkbox .mat-checkbox-frame {
+  background-color: white !important;
+}

frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PopupUpdatePersonAdminComponent } from './popup-update-person-admin.component';
+
+describe('PopupUpdatePersonAdminComponent', () => {
+  let component: PopupUpdatePersonAdminComponent;
+  let fixture: ComponentFixture<PopupUpdatePersonAdminComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PopupUpdatePersonAdminComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PopupUpdatePersonAdminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/admin/userList/popup-update-person-admin/popup-update-person-admin.component.ts

@@ -0,0 +1,87 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {CheckEmailService} from "../../../common/services/checkEmail/check-email.service";
+import {MessageService} from "../../../common/services/message/message.service";
+
+
+
+@Component({
+  selector: 'app-popup-update-person-admin',
+  templateUrl: './popup-update-person-admin.component.html',
+  styleUrls: ['./popup-update-person-admin.component.scss']
+})
+export class PopupUpdatePersonAdminComponent implements OnInit
+{
+    id: number = 0;
+    is_admin: boolean = false;
+    newPassword: string = "";
+
+    confirmNewPassword: string = "" ;
+    changePassword: boolean = false ;
+    hasError: boolean = false;
+    errorMessage: string = "" ;
+
+
+    constructor( public dialogRef: MatDialogRef<PopupUpdatePersonAdminComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data: any,
+                 private checkEmailService: CheckEmailService,
+                 private messageService: MessageService ) { }
+
+
+    ngOnInit(): void
+    {
+        this.id = this.data.person.id;
+        this.is_admin = this.data.person.is_admin;
+    }
+
+
+    // Appuie sur le bouton "valider"
+    onValider(): void
+    {
+        this.checkField();
+        if(!this.hasError)
+        {
+            let data = {};
+            if(this.changePassword) data = { id: this.id, is_admin: this.is_admin, password: this.newPassword }
+            else data = { id: this.id, is_admin: this.is_admin };
+            this.messageService
+                .put("admin/update/user", data)
+                .subscribe(ret => this.onValiderCallback(ret), err => this.onValiderCallback(err));
+        }
+    }
+
+
+    // Callback de 'onValider'
+    onValiderCallback(retour: any)
+    {
+        if(retour.status !== 'success')
+        {
+            console.log(retour);
+            this.errorMessage = retour.error.message;
+            this.hasError = true;
+        }
+        else
+        {
+            this.dialogRef.close(this.is_admin);
+        }
+    }
+
+
+    // Check les champs saisis par l'utilisateur
+    checkField(): void
+    {
+        if((this.changePassword) && (this.newPassword.length === 0)) {
+            this.errorMessage = "Veuillez remplir le champ 'mot de passe'";
+            this.hasError = true;
+        }
+        else if((this.changePassword) && (this.newPassword !== this.confirmNewPassword)) {
+            this.errorMessage = "Le mot de passe est différent de sa confirmation";
+            this.hasError = true;
+        }
+        else {
+            this.errorMessage = "" ;
+            this.hasError = false;
+        }
+    }
+
+}

frontend/src/app/app-routing.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import {PageLoginComponent} from "./login/page-login/page-login.component";
+import {PageRegisterComponent} from "./register/page-register/page-register.component";
+import {PageProfilComponent} from "./common/components/page-profil/page-profil.component";
+import {PageUserListComponent} from "./admin/userList/page-user-list/page-user-list.component";
+import {PageRegistryComponent} from "./user/page-registry/page-registry.component";
+import {UserGuard} from "./common/guards/user/user.guard";
+import {AdminGuard} from "./common/guards/admin/admin.guard";
+
+const routes: Routes = [
+
+    { path: "", component: PageLoginComponent },
+    { path: "login", component: PageLoginComponent },
+
+    { path: "register", component: PageRegisterComponent },
+
+    { path: "user", component: PageRegistryComponent, canActivate: [UserGuard] },
+    { path: "user/registry", component: PageRegistryComponent, canActivate: [UserGuard] },
+    { path: "user/myProfil", component: PageProfilComponent, canActivate: [UserGuard] },
+
+    { path: "admin", component: PageUserListComponent, canActivate: [AdminGuard] },
+    { path: "admin/userList", component: PageUserListComponent, canActivate: [AdminGuard] },
+    { path: "admin/myProfil", component: PageProfilComponent, canActivate: [AdminGuard] },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

frontend/src/app/app.component.html

@@ -0,0 +1,2 @@
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<router-outlet></router-outlet>

frontend/src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'frontend'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('frontend');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('frontend app is running!');
+  });
+});

frontend/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'frontend';
+}

frontend/src/app/app.module.ts

@@ -0,0 +1,72 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { PageRegisterComponent } from './register/page-register/page-register.component';
+import {FormsModule} from "@angular/forms";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatInputModule} from "@angular/material/input";
+import {PageLoginComponent} from "./login/page-login/page-login.component";
+import { NavbarComponent } from './common/components/navbar/navbar.component';
+import {MatButtonModule} from "@angular/material/button";
+import { PageProfilComponent } from './common/components/page-profil/page-profil.component';
+import { PopupUpdateProfilComponent } from './common/components/popup-update-profil/popup-update-profil.component';
+import {MatDividerModule} from "@angular/material/divider";
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import {MatDialogModule} from "@angular/material/dialog";
+import {MatSnackBarModule} from "@angular/material/snack-bar";
+import { PageUserListComponent } from './admin/userList/page-user-list/page-user-list.component';
+import { PopupCreatePersonComponent } from './admin/userList/popup-create-person/popup-create-person.component';
+import {MatTableModule} from "@angular/material/table";
+import {MatPaginatorModule} from "@angular/material/paginator";
+import { PopupConfirmRegisterComponent } from './register/popup-confirm-register/popup-confirm-register.component';
+import {MatIconModule} from "@angular/material/icon";
+import {MatRadioModule} from "@angular/material/radio";
+import { PageRegistryComponent } from './user/page-registry/page-registry.component';
+import { PopupDeleteProfilComponent } from './common/components/popup-delete-profil/popup-delete-profil.component';
+import {MatSortModule} from "@angular/material/sort";
+import { PopupUpdatePersonAdminComponent } from './admin/userList/popup-update-person-admin/popup-update-person-admin.component';
+import {HttpClientModule} from "@angular/common/http";
+
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    PageLoginComponent,
+    PageRegisterComponent,
+    NavbarComponent,
+    PageProfilComponent,
+    PopupUpdateProfilComponent,
+    PageUserListComponent,
+    PopupCreatePersonComponent,
+    PopupConfirmRegisterComponent,
+    PageRegistryComponent,
+    PopupDeleteProfilComponent,
+    PopupUpdatePersonAdminComponent
+  ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        FormsModule,
+        BrowserAnimationsModule,
+        HttpClientModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatButtonModule,
+        MatDividerModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatSnackBarModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatIconModule,
+        MatRadioModule
+    ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

frontend/src/app/common/components/navbar/navbar.component.html

@@ -0,0 +1,108 @@
+<!-- Login -->
+<div *ngIf="pour === 'nickname'">
+    <nav class="navbar navbar-expand-lg">
+
+        <!-- FlaskAled -->
+        <a class="navbar-brand" routerLink=""> FlaskAled </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <!-- Rien -->
+        <div class="collapse navbar-collapse"></div>
+
+        <!-- S'inscrire -->
+        <button mat-button class="btnDeconnexion" routerLink="/register">
+            S'inscrire
+        </button>
+
+    </nav>
+</div>
+
+
+<!-- --------------------------------------------------------------------------------------------------------- -->
+
+
+<!-- Register -->
+<div *ngIf="pour === 'register'">
+    <nav class="navbar navbar-expand-lg">
+
+        <!-- FlaskAled -->
+        <a class="navbar-brand" routerLink=""> FlaskAled </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <!-- Rien -->
+        <div class="collapse navbar-collapse"></div>
+
+    </nav>
+</div>
+
+
+<!-- --------------------------------------------------------------------------------------------------------- -->
+
+
+<!-- User -->
+<div *ngIf="pour === 'user'">
+    <nav class="navbar navbar-expand-lg">
+
+        <!-- FlaskAled -->
+        <a class="navbar-brand" routerLink="/user"> FlaskAled </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <!-- [userList] [myProfil] -->
+        <div class="collapse navbar-collapse">
+            <ul class="navbar-nav">
+                <li class="nav-item active monLi">
+                    <a class="nav-link" routerLink="/user/registry">Annuaire</a>
+                </li>
+                <li class="nav-item active monLi">
+                    <a class="nav-link" routerLink="/user/myProfil">Mon profil</a>
+                </li>
+            </ul>
+        </div>
+
+        <!-- Deconnexion -->
+        <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/login">
+            Deconnexion
+        </button>
+
+    </nav>
+</div>
+
+
+<!-- --------------------------------------------------------------------------------------------------------- -->
+
+
+<!-- Admin -->
+<div *ngIf="pour === 'admin'">
+    <nav class="navbar navbar-expand-lg">
+
+        <!-- FlaskAled -->
+        <a class="navbar-brand" routerLink="/admin/userList"> FlaskAled </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <!-- [userList] [myProfil] -->
+        <div class="collapse navbar-collapse">
+            <ul class="navbar-nav">
+                <li class="nav-item active monLi">
+                    <a class="nav-link" routerLink="/admin/userList">Liste des utillisateurs</a>
+                </li>
+                <li class="nav-item active monLi">
+                    <a class="nav-link" routerLink="/admin/myProfil">Mon profil</a>
+                </li>
+            </ul>
+        </div>
+
+        <!-- Deconnexion -->
+        <button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/login">
+            Deconnexion
+        </button>
+
+    </nav>
+</div>

frontend/src/app/common/components/navbar/navbar.component.scss

@@ -0,0 +1,59 @@
+.navbar {
+  background-color: black;
+  height: 60px;
+  font-size: medium;
+  color: white;
+}
+
+
+.navbar-expand-lg {
+  border-bottom: solid;
+  border-color: white;
+  border-bottom-width: 2px;
+}
+
+
+// PolyNotFound
+.navbar-brand {
+  font-family: cursive;
+  font-weight: bold;
+  font-size: x-large;
+  margin-left: 15px;
+  color: white;
+}
+
+
+// Recherche, Mes Playlists, Historique
+.nav-link {
+  color: white;
+}
+.nav-link:hover {
+  color: grey;
+}
+
+
+// Bonton deconnexion
+.btnDeconnexion {
+  font-size: medium;
+  margin: 0px 10px 0px 10px
+}
+.btnDeconnexion:hover {
+  color: grey;
+}
+
+
+.monLi {
+  margin: 0px 10px 0px 10px;
+}
+
+
+img {
+  border: solid 2px white;
+  border-radius: 50px;
+  margin: 0px 10px 0px 15px;
+  width: 40px;
+  height: 40px;
+}
+img:hover {
+  cursor: pointer;
+}

frontend/src/app/common/components/navbar/navbar.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavbarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/common/components/navbar/navbar.component.ts

@@ -0,0 +1,32 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ProfilService} from "../../services/profil/profil.service";
+import {MessageService} from "../../services/message/message.service";
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss']
+})
+export class NavbarComponent implements OnInit
+{
+    @Input() pour = "login";
+
+    constructor(private profilService: ProfilService, private messageService: MessageService) { }
+
+    ngOnInit(): void {}
+
+    onDeconnexion(): void
+    {
+        this.messageService
+            .delete('logout')
+            .subscribe(retour => this.onDeconnexionCallback(retour), err => this.onDeconnexionCallback(err));
+        this.profilService.setId(-1);
+        this.profilService.setIsAdmin(false);
+    }
+
+    onDeconnexionCallback(retour: any): void
+    {
+        if(retour.status !== "success") console.log(retour);
+    }
+
+}

frontend/src/app/common/components/page-profil/page-profil.component.html

@@ -0,0 +1,53 @@
+<div class="myContainer">
+
+    <!-- NavBar -->
+    <app-navbar [pour]="from"></app-navbar>
+
+
+    <!-- Boite -->
+    <div class="boite">
+
+        <!-- nickname -->
+        <div class="row myRow">
+            <div class="col-6 myLabel">Pseudo:</div>
+            <div class="col-6 myValue"> {{person.nickname}} </div>
+        </div>
+
+        <!-- email -->
+        <div class="row myRow">
+            <div class="col-6 myLabel">Mail:</div>
+            <div class="col-6 myValue"> {{person.email}} </div>
+        </div>
+
+        <!-- role -->
+        <div class="row myRow">
+            <div class="col-6 myLabel">Rôle:</div>
+            <div class="col-6 myValue">
+                <span *ngIf="this.from === 'user'">utilisateur</span>
+                <span *ngIf="this.from === 'admin'">admin</span>
+        </div>
+
+        <!-- boutons -->
+        <div class="row">
+            <!-- bouton modifier -->
+            <div class="col-6">
+                <div class="btnContainer">
+                    <button mat-button class="myBtn" (click)="onModifier()">
+                        <mat-icon>edit</mat-icon> Modifier compte
+                    </button>
+                </div>
+            </div>
+            <!-- bouton supprimer -->
+            <div class="col-6">
+                <div class="btnContainer">
+                    <button mat-button class="myBtn" (click)="onSupprimer()">
+                        <mat-icon>delete</mat-icon> Supprimer compte
+                    </button>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+
+</div>

frontend/src/app/common/components/page-profil/page-profil.component.scss

@@ -0,0 +1,45 @@
+.myContainer {
+  max-width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+
+.boite {
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+  margin-top: 10vh;
+  border: solid 3px;
+  border-radius: 10px;
+  padding: 20px 40px 20px 40px;
+  background-color: #ffffff;
+  text-align: center;
+  box-shadow: 10px 5px 5px black;
+}
+
+
+.myRow {
+  margin: 15px 0px 15px 0px;
+}
+.myLabel {
+  text-align: right;
+  padding: 0px 5px 0px 0px;
+  margin: 0px;
+  font-weight: bold;
+}
+.myValue {
+  text-align: left;
+  padding: 0px 0px 0px 5px;
+  margin: 0px;
+}
+
+
+.btnContainer {
+  text-align: center;
+  margin-top: 40px;
+}
+.myBtn {
+  border: solid 1px black;
+  background-color: white;
+}

frontend/src/app/common/components/page-profil/page-profil.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageProfilComponent } from './page-profil.component';
+
+describe('PageUtilisateurComponent', () => {
+  let component: PageProfilComponent;
+  let fixture: ComponentFixture<PageProfilComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageProfilComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageProfilComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/common/components/page-profil/page-profil.component.ts

@@ -0,0 +1,110 @@
+import { Component, OnInit } from '@angular/core';
+import {MatDialog} from "@angular/material/dialog";
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {PopupUpdateProfilComponent} from "../popup-update-profil/popup-update-profil.component";
+import {Router} from "@angular/router";
+import {PopupDeleteProfilComponent} from "../popup-delete-profil/popup-delete-profil.component";
+import {MessageService} from "../../services/message/message.service";
+import {HttpParams} from "@angular/common/http";
+import {ProfilService} from "../../services/profil/profil.service";
+
+
+
+@Component({
+  selector: 'app-page-profil',
+  templateUrl: './page-profil.component.html',
+  styleUrls: ['./page-profil.component.scss']
+})
+export class PageProfilComponent implements OnInit
+{
+    person = {
+        id: "",
+        nickname: "",
+        email: "",
+        is_admin: false,
+    };
+    from: string = "" ;
+    configSnackbar = { duration: 3000, panelClass: "custom-class" };
+
+
+    constructor( private messageService: MessageService,
+                 private profilService: ProfilService,
+                 public dialog: MatDialog,
+                 private snackBar: MatSnackBar,
+                 private router: Router ) { }
+
+
+    ngOnInit(): void
+    {
+        if(this.router.url.startsWith("/user")) this.from = "user" ;
+        else if(this.router.url.startsWith("/admin")) this.from = "admin" ;
+
+        let params = new HttpParams()
+        params = params.set("order_by", "nickname");
+        params = params.set("id", this.profilService.getId());
+        this.messageService
+            .get("users", params)
+            .subscribe(ret => this.ngOnInitCallback(ret), err => this.ngOnInitCallback(err));
+    }
+
+
+    // Callback de ngOnInit
+    ngOnInitCallback(retour: any): void
+    {
+        if(retour.status !== "success") {
+            console.log(retour);
+        }
+        else {
+            this.person = retour.data[0];
+        }
+    }
+
+
+    // Appuie sur le bouton modifier
+    onModifier(): void
+    {
+        const config = {
+            width: '25%',
+            data: { person: this.person }
+        };
+        this.dialog
+            .open(PopupUpdateProfilComponent, config)
+            .afterClosed()
+            .subscribe(retour => this.onModifierCallback(retour));
+    }
+
+
+    // Callback de onModifier
+    onModifierCallback(retour: any): void
+    {
+        if((retour === null) || (retour === undefined)) this.snackBar.open( "Opération annulé", "", this.configSnackbar);
+        else if(retour.status === "success") this.person = retour.data;
+    }
+
+
+    // Appuie sur le bouton supprimer
+    onSupprimer(): void
+    {
+        const config = {
+            data: {
+                id: this.person.id,
+                email: this.person.email,
+                me: true,
+            }
+        };
+        this.dialog
+            .open(PopupDeleteProfilComponent, config)
+            .afterClosed()
+            .subscribe(retour => this.onSupprimerCallback(retour));
+    }
+
+
+    // Callback de onSupprimer
+    onSupprimerCallback(retour: any): void
+    {
+        if((retour === null) || (retour === undefined)) this.snackBar.open( "Opération annulé", "", this.configSnackbar);
+        else if(retour.status === "error") this.snackBar.open(retour.error.message, "", this.configSnackbar);
+        else if(retour.status === "success") this.router.navigateByUrl("/login");
+    }
+
+}

frontend/src/app/common/components/popup-delete-profil/popup-delete-profil.component.html

@@ -0,0 +1,14 @@
+<mat-dialog-content class="mat-typography" *ngIf="me">
+    Êtes-vous sûr de vouloir supprimer votre compte ?
+</mat-dialog-content>
+
+
+<mat-dialog-content class="mat-typography" *ngIf="!me">
+    Êtes-vous sûr de vouloir supprimer <i>{{email}}</i> ?
+</mat-dialog-content>
+
+
+<mat-dialog-actions align="end">
+    <button mat-button (click)="dialogRef.close();">Annuler</button>
+    <button mat-button (click)="onValider()" cdkFocusInitial>Valider</button>
+</mat-dialog-actions>

frontend/src/app/common/components/popup-delete-profil/popup-delete-profil.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PopupDeleteProfilComponent } from './popup-delete-profil.component';
+
+describe('PopupDeleteProfilComponent', () => {
+  let component: PopupDeleteProfilComponent;
+  let fixture: ComponentFixture<PopupDeleteProfilComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PopupDeleteProfilComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PopupDeleteProfilComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/common/components/popup-delete-profil/popup-delete-profil.component.ts

@@ -0,0 +1,68 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {MessageService} from "../../services/message/message.service";
+import {HttpParams} from "@angular/common/http";
+
+
+
+@Component({
+  selector: 'app-popup-delete-profil',
+  templateUrl: './popup-delete-profil.component.html',
+  styleUrls: ['./popup-delete-profil.component.scss']
+})
+export class PopupDeleteProfilComponent implements OnInit
+{
+    id: number;
+    me: boolean = false; // on se supprime soi-même
+    email: string = "";
+
+
+    constructor( private messageService: MessageService,
+                 public dialogRef: MatDialogRef<PopupDeleteProfilComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data: any ) { }
+
+
+    ngOnInit(): void {
+        this.id = this.data.id;
+        this.me = this.data.me;
+        this.email = this.data.email;
+    }
+
+
+    // Appuie sur 'valider'
+    onValider(): void
+    {
+        if(this.me)
+        {
+            this.messageService
+                .delete("user/delete")
+                .subscribe(ret => this.onValiderCallback(ret), err => this.onValiderCallback(err));
+        }
+        else {
+            //let params = (new HttpParams()).set("id", this.id);
+            this.messageService
+                .delete("admin/delete/user/"+this.id)
+                .subscribe(ret => this.onValiderCallback(ret), err => this.onValiderCallback(err));
+        }
+    }
+
+
+    // Callback de onValider
+    onValiderCallback(retour: any): void
+    {
+        if(retour.status === "success")
+        {
+            this.dialogRef.close(retour);
+        }
+        else if(retour.status === "error")
+        {
+            console.log(retour);
+            this.dialogRef.close(retour);
+        }
+        else {
+            console.log(retour);
+            this.dialogRef.close(null);
+        }
+    }
+
+}

frontend/src/app/common/components/popup-update-profil/popup-update-profil.component.html

@@ -0,0 +1,55 @@
+<div class="myContainer">
+    <div class="boite">
+
+        <h3>Modifier</h3>
+
+        <!-- divider -->
+        <br><mat-divider></mat-divider><br>
+
+        <!-- nickname -->
+        <mat-form-field appearance="fill">
+            <mat-label>Pseudo</mat-label>
+            <input matInput type="text" [(ngModel)]="personCopy.nickname" required>
+        </mat-form-field><br>
+
+        <!-- divider -->
+        <mat-divider></mat-divider><br>
+
+        <!-- Modifier mot de passe -->
+        <div>
+            Modifier mot de passe:
+            <mat-checkbox [(ngModel)]="changePassword"></mat-checkbox>
+        </div>
+
+        <!-- nouveau mot de passe -->
+        <div *ngIf="changePassword" style="margin-top: 10px">
+            <!-- Nouveau mot de passe -->
+            <mat-form-field appearance="fill">
+                <mat-label>Nouveau mot de passe</mat-label>
+                <input matInput type="password" [(ngModel)]="newPassword">
+            </mat-form-field>
+            <br>
+            <!-- Confirmation npuveau mot de passe -->
+            <mat-form-field appearance="fill">
+                <mat-label>Confirmation nouveau mot de passe</mat-label>
+                <input matInput type="password" [(ngModel)]="confirmNewPassword">
+            </mat-form-field>
+        </div>
+        <div *ngIf="!changePassword"><br></div>
+
+        <!-- divider -->
+        <mat-divider></mat-divider><br>
+
+        <!-- message d'erreur -->
+        <div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
+            <span class="mat-error">{{errorMessage}}</span>
+        </div>
+
+        <!-- boutons -->
+        <div style="width: 100%; text-align: right">
+            <button mat-button (click)="this.dialogRef.close(null)"> Annuler </button>
+            <button mat-button (click)="onValider()"> Enregistrer </button>
+        </div>
+
+    </div>
+</div>

frontend/src/app/common/components/popup-update-profil/popup-update-profil.component.scss

@@ -0,0 +1,37 @@
+.boite {
+  font-size: small;
+}
+
+h3 {
+  text-align: center;
+}
+
+button {
+  font-size: small;
+}
+
+img {
+  margin: 0px 0px 10px 0px;
+  width: 5vw;
+  height: 5vw;
+  border: solid 2px black;
+  border-radius: 50%;
+  font-size: xxx-large;
+}
+
+// -------------------------------------------------------------------------
+
+// aura
+::ng-deep .mat-checkbox-ripple .mat-ripple-element {
+  background-color: grey !important;
+}
+
+// contenu coche
+::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
+  background-color: black !important;
+}
+
+// indeterminate
+::ng-deep .mat-checkbox .mat-checkbox-frame {
+  background-color: white !important;
+}

frontend/src/app/common/components/popup-update-profil/popup-update-profil.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PopupUpdateProfilComponent } from './popup-update-profil.component';
+
+describe('PopupModifierUtilisateurComponent', () => {
+  let component: PopupUpdateProfilComponent;
+  let fixture: ComponentFixture<PopupUpdateProfilComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PopupUpdateProfilComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PopupUpdateProfilComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/common/components/popup-update-profil/popup-update-profil.component.ts

@@ -0,0 +1,108 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {CheckEmailService} from "../../services/checkEmail/check-email.service";
+import {MessageService} from "../../services/message/message.service";
+
+
+
+@Component({
+  selector: 'app-popup-update-profil',
+  templateUrl: './popup-update-profil.component.html',
+  styleUrls: ['./popup-update-profil.component.scss']
+})
+export class PopupUpdateProfilComponent implements OnInit
+{
+    personCopy: any;
+    newPassword: string = "";
+    confirmNewPassword: string = "" ;
+    changePassword: boolean = false ;
+    hasError: boolean = false;
+    errorMessage: string = "" ;
+
+
+    constructor( private checkEmailService: CheckEmailService,
+                 private messageService: MessageService,
+                 public dialogRef: MatDialogRef<PopupUpdateProfilComponent>,
+                 @Inject(MAT_DIALOG_DATA) public data: any ) { }
+
+
+    ngOnInit(): void
+    {
+        const person = this.data.person;
+        this.personCopy = {
+            id: person.id,
+            nickname: person.nickname,
+            email: person.email,
+            is_admin: person.is_admin
+        };
+    }
+
+
+    // Appuie sur le bouton "valider"
+    onValider(): void
+    {
+        this.checkField();
+        if(!this.hasError)
+        {
+            let data: any = {nickname: this.personCopy.nickname};
+            if(this.changePassword) data = {
+                nickname: this.personCopy.nickname,
+                password: this.newPassword
+            };
+            this.messageService
+                .put("user/update", data)
+                .subscribe(ret => this.onValiderCallback(ret), err => this.onValiderCallback(err));
+        }
+    }
+
+
+    // Callback de 'onValider'
+    onValiderCallback(retour: any)
+    {
+        if(retour.status === "success")
+        {
+            this.dialogRef.close(retour);
+        }
+        else if(retour.status === "error")
+        {
+            console.log(retour);
+            this.errorMessage = retour.message;
+            this.hasError = true;
+        }
+        else {
+            console.log(retour);
+            this.dialogRef.close(null);
+        }
+    }
+
+
+    // Check les champs saisis par l'utilisateur
+    checkField(): void
+    {
+        if(this.personCopy.nickname.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'pseudo'" ;
+            this.hasError = true;
+        }
+        else if(this.personCopy.email.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'email'" ;
+            this.hasError = true;
+        }
+        else if(!this.checkEmailService.isValidEmail(this.personCopy.email)) {
+            this.errorMessage = "Email invalide" ;
+            this.hasError = true;
+        }
+        else if((this.changePassword) && (this.newPassword.length === 0)) {
+            this.errorMessage = "Veuillez remplir le champ 'mot de passe'";
+            this.hasError = true;
+        }
+        else if((this.changePassword) && (this.newPassword !== this.confirmNewPassword)) {
+            this.errorMessage = "Le mot de passe est différent de sa confirmation";
+            this.hasError = true;
+        }
+        else {
+            this.errorMessage = "" ;
+            this.hasError = false;
+        }
+    }
+
+}

frontend/src/app/common/guards/admin/admin.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AdminGuard } from './admin.guard';
+
+describe('AdminGuard', () => {
+  let guard: AdminGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(AdminGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

frontend/src/app/common/guards/admin/admin.guard.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree} from '@angular/router';
+import { Observable } from 'rxjs';
+import {ProfilService} from "../../services/profil/profil.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AdminGuard implements CanActivate
+{
+
+    constructor(private profilService: ProfilService, private router: Router) {}
+
+
+    canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
+    {
+        if(this.profilService.getId() === -1) // si non connecté
+        {
+            this.router.navigateByUrl("/login");
+            return false;
+        }
+        else {
+            if(this.profilService.isAdmin()) return true;
+            else {
+                this.router.navigateByUrl("/login");
+                return false;
+            }
+        }
+    }
+  
+}

frontend/src/app/common/guards/user/user.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UserGuard } from './user.guard';
+
+describe('UserGuard', () => {
+  let guard: UserGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(UserGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

frontend/src/app/common/guards/user/user.guard.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree} from '@angular/router';
+import { Observable } from 'rxjs';
+import {ProfilService} from "../../services/profil/profil.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserGuard implements CanActivate
+{
+
+    constructor(private profilService: ProfilService, private router: Router) {}
+
+
+    canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
+    {
+        if(this.profilService.getId() === -1) // si non connecté
+        {
+            this.router.navigateByUrl("/login");
+            return false;
+        }
+        else {
+            if(!this.profilService.isAdmin()) return true;
+            else {
+                this.router.navigateByUrl("/login");
+                return false;
+            }
+        }
+    }
+
+}

frontend/src/app/common/services/checkEmail/check-email.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CheckEmailService } from './check-email.service';
+
+describe('CheckEmailService', () => {
+  let service: CheckEmailService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CheckEmailService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/common/services/checkEmail/check-email.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CheckEmailService
+{
+
+    isValidEmail(email: string): boolean
+    {
+        let re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return re.test(email);
+    }
+
+}

frontend/src/app/common/services/fictitiousDatas/fictitious-datas.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FictitiousDatasService } from './fictitious-datas.service';
+
+describe('FictitiousDatasService', () => {
+  let service: FictitiousDatasService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FictitiousDatasService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/common/services/fictitiousDatas/fictitious-datas.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FictitiousDatasService
+{
+
+    getUser()
+    {
+        const id = (Math.floor(Math.random()*100000)).toString()
+        return {
+            id: id,
+            nickname: "Riri"+id,
+            email: "riri"+id+"@gmail.com",
+            hash_pass: "blablabla",
+            is_admin: false,
+        }
+    }
+
+    getAdmin()
+    {
+        const id = (Math.floor(Math.random()*100000)).toString()
+        return {
+            id: id,
+            nickname: "Fifi"+id,
+            email: "fifi"+id+"@gmail.com",
+            hash_pass: "blablabla",
+            is_admin: true,
+        }
+    }
+
+    getTabPerson(n: number)
+    {
+        let tab = [];
+
+        for(let i=0 ; i<n ; i++)
+        {
+            if(Math.random() < 0.5) tab.push(this.getUser());
+            else tab.push(this.getAdmin());
+        }
+
+        return tab;
+    }
+
+}

frontend/src/app/common/services/hashage/hashage.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { HashageService } from './hashage.service';
+
+describe('HashageService', () => {
+  let service: HashageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(HashageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/common/services/hashage/hashage.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HashageService
+{
+    // Fonction de hashage (faible)
+    run(input: string): string
+    {
+        let hash = 0;
+        for (let i = 0; i < input.length; i++) {
+            let ch = input.charCodeAt(i);
+            hash = ((hash << 5) - hash) + ch;
+            hash = hash & hash;
+        }
+        return hash.toString();
+    }
+}

frontend/src/app/common/services/message/message.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MessageService } from './message.service';
+
+describe('MessageService', () => {
+  let service: MessageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MessageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/common/services/message/message.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import {HttpClient, HttpParams} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {environment} from "../../../../environments/environment";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MessageService
+{
+
+    constructor( private http: HttpClient ) { }
+
+    post(url: string, data: any): Observable<any>
+    {
+        const urlComplete = environment.debutUrl + url ;
+        return this.http.post<any>(urlComplete, data, {withCredentials: true});
+    }
+
+    get(url: string, params:HttpParams = new HttpParams()): Observable<any>
+    {
+        const urlComplete = environment.debutUrl + url ;
+        return this.http.get<any>(urlComplete,{ withCredentials: true, params: params });
+    }
+
+    put(url: string, data: any): Observable<any>
+    {
+        const urlComplete = environment.debutUrl + url ;
+        return this.http.put<any>(urlComplete, data, {withCredentials: true});
+    }
+
+    delete(url: string, params:HttpParams = new HttpParams()): Observable<any>
+    {
+        const urlComplete = environment.debutUrl + url ;
+        return this.http.delete<any>(urlComplete,{withCredentials: true});
+    }
+
+}

frontend/src/app/common/services/profil/profil.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProfilService } from './profil.service';
+
+describe('ProfilService', () => {
+  let service: ProfilService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ProfilService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/common/services/profil/profil.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProfilService
+{
+
+    constructor()
+    {
+        if(localStorage.getItem('id') === null) this.setId(-1);
+        if(localStorage.getItem('isAdmin') === null) this.setIsAdmin(false);
+    }
+
+    getId(): number
+    {
+        let idString = localStorage.getItem('id');
+        if(idString === null) return -1;
+        else return parseInt(idString);
+    }
+
+    setId(id: number): void
+    {
+        localStorage.setItem('id', id.toString());
+    }
+
+    isAdmin(): boolean
+    {
+        let isAdminString = localStorage.getItem('isAdmin');
+        if(isAdminString === "T") return true;
+        else return false;
+    }
+
+    setIsAdmin(isAdmin: boolean): void
+    {
+        let isAdminString = "" ;
+        if(isAdmin) isAdminString = "T";
+        else isAdminString = "F";
+        localStorage.setItem('isAdmin', isAdminString);
+    }
+
+}

frontend/src/app/login/page-login/page-login.component.html

@@ -0,0 +1,40 @@
+<div>
+    <div class="bg">
+
+
+        <!-- NavBar -->
+        <app-navbar pour="nickname"></app-navbar>
+
+
+        <!--contenu -->
+        <div class="wrapper fadeInDown">
+            <div id="formContent">
+
+                <!-- Icon -->
+                <div class="fadeIn first">
+                    <h1 style="font-family: cursive; font-size: 45px; margin-top: 20px; margin-bottom: 10px">FlaskAled</h1>
+                    <img src="/assets/logo.png" id="icon" alt="User Icon" style="margin-top: 10px"/>
+                </div>
+
+                <!-- Login Form -->
+                <form>
+                    <input [(ngModel)]="email" type="text" id="email" class="fadeIn second" name="email" placeholder="Email">
+                    <input [(ngModel)]="password" type="password" id="password" class="fadeIn third" name="password" placeholder="Mot de passe">
+                    <!-- Message d'erreur -->
+                    <div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
+                        <span class="mat-error"> {{errorMessage}} </span>
+                    </div>
+                    <input type="submit" class="fadeIn fourth" value="Se connecter" (click)="onSeConnecter()">
+                </form>
+
+                <!-- Oubli mot de passe -->
+                <div id="formFooter">
+                    <a class="underlineHover" href="https://disney.fandom.com/fr/wiki/Tristesse">J'ai oublié mon mot de passe</a>
+                </div>
+
+            </div>
+        </div>
+
+
+    </div>
+</div>

frontend/src/app/login/page-login/page-login.component.scss

@@ -0,0 +1,271 @@
+html {
+  background-color: #56baed;
+}
+
+body {
+  font-family: "Poppins", sans-serif;
+  height: 100vh;
+}
+
+a {
+  color: #5E89FF;
+  display:inline-block;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+h2 {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  text-transform: uppercase;
+  display:inline-block;
+  margin: 40px 8px 10px 8px;
+  color: #cccccc;
+}
+
+
+
+/* STRUCTURE */
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  min-height: 80%;
+  padding: 20px;
+}
+
+#formContent {
+  -webkit-border-radius: 10px 10px 10px 10px;
+  border-radius: 10px 10px 10px 10px;
+  background: #fff;
+  padding: 30px;
+  width: 90%;
+  max-width: 450px;
+  position: relative;
+  padding: 0px;
+  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
+  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
+  text-align: center;
+}
+
+#formFooter {
+  background-color: #f6f6f6;
+  border-top: 1px solid #dce8f1;
+  padding: 25px;
+  text-align: center;
+  -webkit-border-radius: 0 0 10px 10px;
+  border-radius: 0 0 10px 10px;
+}
+
+
+
+/* TABS */
+
+h2.inactive {
+  color: #cccccc;
+}
+
+h2.active {
+  color: #0d0d0d;
+  border-bottom: 2px solid #5fbae9;
+}
+
+
+
+/* FORM TYPOGRAPHY*/
+
+input[type=button], input[type=submit], input[type=reset]  {
+  background-color: #5E89FF;
+  border: none;
+  color: white;
+  padding: 15px 80px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  text-transform: uppercase;
+  font-size: 13px;
+  -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
+  box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+  margin: 5px 20px 40px 20px;
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+
+input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
+  background-color: #39ace7;
+}
+
+input[type=button]:active, input[type=submit]:active, input[type=reset]:active   {
+  -moz-transform: scale(0.95);
+  -webkit-transform: scale(0.95);
+  -o-transform: scale(0.95);
+  -ms-transform: scale(0.95);
+  transform: scale(0.95);
+}
+
+input[type=text], input[type=password] {
+  background-color: #f6f6f6;
+  border: none;
+  color: #0d0d0d;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 5px;
+  width: 85%;
+  border: 2px solid #f6f6f6;
+  -webkit-transition: all 0.5s ease-in-out;
+  -moz-transition: all 0.5s ease-in-out;
+  -ms-transition: all 0.5s ease-in-out;
+  -o-transition: all 0.5s ease-in-out;
+  transition: all 0.5s ease-in-out;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+
+
+
+input[type=text]:focus, input[type=password]:focus {
+  background-color: #fff;
+  border-bottom: 2px solid #5fbae9;
+}
+
+input[type=text]::placeholder, input[type=password]::placeholder {
+  color: #cccccc;
+}
+
+.bg{
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  width: 100vw;
+  overflow-y: hidden;
+  overflow-x: hidden;
+}
+
+/* ANIMATIONS */
+
+/* Simple CSS3 Fade-in-down Animation */
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+/* Simple CSS3 Fade-in Animation */
+@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+
+.fadeIn {
+  opacity:0;
+  -webkit-animation:fadeIn ease-in 1;
+  -moz-animation:fadeIn ease-in 1;
+  animation:fadeIn ease-in 1;
+
+  -webkit-animation-fill-mode:forwards;
+  -moz-animation-fill-mode:forwards;
+  animation-fill-mode:forwards;
+
+  -webkit-animation-duration:1s;
+  -moz-animation-duration:1s;
+  animation-duration:1s;
+}
+
+.fadeIn.first {
+  -webkit-animation-delay: 0.4s;
+  -moz-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+
+.fadeIn.second {
+  -webkit-animation-delay: 0.6s;
+  -moz-animation-delay: 0.6s;
+  animation-delay: 0.6s;
+}
+
+.fadeIn.third {
+  -webkit-animation-delay: 0.8s;
+  -moz-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+}
+
+.fadeIn.fourth {
+  -webkit-animation-delay: 1s;
+  -moz-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+/* Simple CSS3 Fade-in Animation */
+.underlineHover:after {
+  display: block;
+  left: 0;
+  bottom: -10px;
+  width: 0;
+  height: 2px;
+  //background-color: #5E89FF;
+  background-color: #5E89FF;
+  content: "";
+  transition: width 0.2s;
+}
+
+.underlineHover:hover {
+  color: #0d0d0d;
+}
+
+.underlineHover:hover:after{
+  width: 100%;
+}
+
+h1{
+  color: black;
+}
+
+/* OTHERS */
+
+*:focus {
+  outline: none;
+}
+
+#icon {
+  width:30%;
+}

frontend/src/app/login/page-login/page-login.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageConnexionComponent } from './page-connexion.component';
+
+describe('PageConnexionComponent', () => {
+  let component: PageConnexionComponent;
+  let fixture: ComponentFixture<PageConnexionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageConnexionComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageConnexionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/login/page-login/page-login.component.ts

@@ -0,0 +1,78 @@
+import {Component} from '@angular/core';
+import {Router} from "@angular/router";
+import {MessageService} from "../../common/services/message/message.service";
+import {ProfilService} from "../../common/services/profil/profil.service";
+
+
+
+@Component({
+  selector: 'app-page-nickname',
+  templateUrl: './page-login.component.html',
+  styleUrls: ['./page-login.component.scss']
+})
+export class PageLoginComponent
+{
+    email: string = "" ;
+    password: string = "" ;
+    hasError: boolean = false;
+    errorMessage: string = "";
+
+
+    constructor( private messageService: MessageService,
+                 private router: Router,
+                 private profilService: ProfilService ) { }
+
+
+    // Appuie sur le bouton "seConnecter"
+    onSeConnecter(): void
+    {
+        this.checkField();
+        if(!this.hasError)
+        {
+            const data = {
+                email: this.email,
+                password: this.password
+            };
+            this.messageService
+                .post('login', data)
+                .subscribe( retour => this.onSeConnecterCallback(retour), err => this.onSeConnecterCallback(err));
+        }
+    }
+
+
+    // Callback de "onSeConnecter"
+    onSeConnecterCallback(retour: any): void
+    {
+        if(retour.status !== "success")
+        {
+            console.log(retour);
+            this.errorMessage = retour.error.message;
+            this.hasError = true;
+        }
+        else {
+            this.profilService.setId(retour.data.id);
+            this.profilService.setIsAdmin(retour.data.is_admin)
+            if(retour.data.is_admin) this.router.navigateByUrl('admin/userList');
+            else this.router.navigateByUrl('user/registry');
+        }
+    }
+
+
+    // Check les champs saisis par l'utilisateur
+    checkField(): void
+    {
+        if(this.email === "") {
+            this.errorMessage = "Veuillez remplir le champ email" ;
+            this.hasError = true;
+        }
+        else if(this.password === "") {
+            this.errorMessage = "Veuillez remplir le champ mot de passe" ;
+            this.hasError = true;
+        }
+        else {
+            this.errorMessage = "" ;
+            this.hasError = false;
+        }
+    }
+
+}

frontend/src/app/register/page-register/page-register.component.html

@@ -0,0 +1,49 @@
+<div class="myContainer">
+
+
+    <!-- navbar -->
+    <app-navbar pour="register"></app-navbar>
+
+
+    <!-- contenu -->
+    <div class="boite">
+
+        <!-- nickname -->
+        <mat-form-field appearance="fill">
+            <mat-label>Pseudo</mat-label>
+            <input matInput type="text" [(ngModel)]="nickname" required>
+        </mat-form-field><br>
+
+        <!-- email -->
+        <mat-form-field appearance="fill">
+            <mat-label>Email</mat-label>
+            <input matInput type="text" [(ngModel)]="email" required>
+        </mat-form-field><br>
+
+        <!-- Mot de passe -->
+        <mat-form-field appearance="fill">
+            <mat-label>Mot de passe</mat-label>
+            <input matInput type="password" [(ngModel)]="password" required>
+        </mat-form-field><br>
+
+        <!-- Confirmation mot de passe -->
+        <mat-form-field appearance="fill">
+            <mat-label>Confirmation mot de passe</mat-label>
+            <input matInput type="password" [(ngModel)]="confirmPassword" required>
+        </mat-form-field><br>
+
+        <!-- Message d'erreur -->
+        <div *ngIf="hasError">
+            <mat-error>{{errorMessage}}</mat-error>
+        </div>
+
+        <!-- bouton -->
+        <button mat-button style="border: solid 1px black" (click)="onValider()">
+            Valider
+        </button>
+
+    </div>
+
+
+
+</div>

frontend/src/app/register/page-register/page-register.component.scss

@@ -0,0 +1,21 @@
+.contenuContainer {
+  padding: 20px 20px 20px 20px;
+  width: 30%;
+  margin: auto auto;
+  margin-top: 50px;
+  border: solid 1px black;
+  text-align: center;
+}
+
+.boite {
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+  margin-top: 10vh;
+  border: solid 3px;
+  border-radius: 10px;
+  padding: 20px 40px 20px 40px;
+  background-color: #ffffff;
+  text-align: center;
+  box-shadow: 10px 5px 5px black;
+}

frontend/src/app/register/page-register/page-register.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageRegisterComponent } from './page-register.component';
+
+describe('PageInscriptionComponent', () => {
+  let component: PageRegisterComponent;
+  let fixture: ComponentFixture<PageRegisterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageRegisterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageRegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/register/page-register/page-register.component.ts

@@ -0,0 +1,98 @@
+import { Component } from '@angular/core';
+import {HashageService} from "../../common/services/hashage/hashage.service";
+import {Router} from "@angular/router";
+import {CheckEmailService} from "../../common/services/checkEmail/check-email.service";
+import {MatDialog} from "@angular/material/dialog";
+import {PopupConfirmRegisterComponent} from "../popup-confirm-register/popup-confirm-register.component";
+import {MessageService} from "../../common/services/message/message.service";
+
+
+
+@Component({
+  selector: 'app-page-register',
+  templateUrl: './page-register.component.html',
+  styleUrls: ['./page-register.component.scss']
+})
+export class PageRegisterComponent
+{
+    email: string = "";
+    nickname: string = "";
+    password: string = "";
+    confirmPassword: string = "";
+    hasError: boolean = false;
+    errorMessage: string = "";
+
+
+    constructor( private checkEmailService: CheckEmailService,
+                 private messageService: MessageService,
+                 private router: Router,
+                 public dialog: MatDialog ) { }
+
+
+    // Envoie de l'utilisateur au backend
+    onValider(): void
+    {
+        this.checkField();
+        if(!this.hasError)
+        {
+            const data = {
+                email: this.email,
+                nickname: this.nickname,
+                password: this.password,
+                is_admin: false
+            };
+            this.messageService
+                .post('register', data)
+                .subscribe( retour => this.onValiderCallback(retour), err => this.onValiderCallback(err));
+        }
+    }
+
+
+    // Callback de "onValider"
+    onValiderCallback(retour: any): void
+    {
+        if(retour.status !== "success")
+        {
+            console.log(retour);
+            this.errorMessage = retour.error.message;
+            this.hasError = true;
+        }
+        else {
+            this.dialog
+                .open(PopupConfirmRegisterComponent, {})
+                .afterClosed()
+                .subscribe(retour => this.router.navigateByUrl("/login"));
+        }
+    }
+
+
+    // Check les champs saisis par l'utilisateur
+    checkField(): void
+    {
+        if(this.nickname.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'pseudo'.";
+            this.hasError = true;
+        }
+        else if(this.email.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'email'.";
+            this.hasError = true;
+        }
+        else if(!this.checkEmailService.isValidEmail(this.email)) {
+            this.errorMessage = "Email invalide.";
+            this.hasError = true;
+        }
+        else if(this.password.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'mot de passe'.";
+            this.hasError = true;
+        }
+        else if(this.password !== this.confirmPassword) {
+            this.errorMessage = "Le mot de passe est différent de sa confirmation.";
+            this.hasError = true;
+        }
+        else {
+            this.errorMessage = "" ;
+            this.hasError = false;
+        }
+    }
+
+}

frontend/src/app/register/popup-confirm-register/popup-confirm-register.component.html

@@ -0,0 +1,2 @@
+<p> Votre inscription a bien été pris en compte </p>
+<button mat-button [mat-dialog-close]="true" cdkFocusInitial>Continuer</button>

frontend/src/app/register/popup-confirm-register/popup-confirm-register.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PopupConfirmRegisterComponent } from './popup-confirm-register.component';
+
+describe('PopupConfirmRegisterComponent', () => {
+  let component: PopupConfirmRegisterComponent;
+  let fixture: ComponentFixture<PopupConfirmRegisterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PopupConfirmRegisterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PopupConfirmRegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/register/popup-confirm-register/popup-confirm-register.component.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+
+
+@Component({
+  selector: 'app-popup-confirm-register',
+  templateUrl: './popup-confirm-register.component.html',
+  styleUrls: ['./popup-confirm-register.component.scss']
+})
+export class PopupConfirmRegisterComponent
+{
+
+}

frontend/src/app/user/myProfil/commentary.txt

@@ -0,0 +1,7 @@
+La page "admin/myProfil" contient:
+    - les informations de l'utilisateur (composant "page-profil")
+    - un bouton "modifier profil" pour modifier les informations de l'utilisateur (composant "popup-update-profil")
+
+Cette page est la même que la page de la partie admin.
+
+Ainsi, on a rangé cette page dans le dossier "common/components/profil".

frontend/src/app/user/page-registry/page-registry.component.html

@@ -0,0 +1,45 @@
+<div>
+
+    <app-navbar pour="user"></app-navbar><br><br>
+
+
+    <div style="text-align: center">
+        <mat-form-field appearance="standard" class="filtre">
+            <mat-label>Filter</mat-label>
+            <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Riri" #input>
+        </mat-form-field>
+    </div>
+
+
+    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+
+        <!-- Pseudo Column -->
+        <ng-container matColumnDef="nickname">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Pseudo</th>
+            <td mat-cell *matCellDef="let person">{{person.nickname}}</td>
+        </ng-container>
+
+        <!-- Email Column -->
+        <ng-container matColumnDef="email">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
+            <td mat-cell *matCellDef="let person">{{person.email}}</td>
+        </ng-container>
+
+        <!-- Role Column -->
+        <ng-container matColumnDef="role">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Rôle</th>
+            <td mat-cell *matCellDef="let person">{{person.role}}</td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+
+
+    <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]"
+                   showFirstLastButtons
+                   aria-label="Select page of periodic elements"
+                   class="mat-elevation-z8"></mat-paginator>
+
+</div>
+<br><br>

frontend/src/app/user/page-registry/page-registry.component.scss

@@ -0,0 +1,9 @@
+mat-paginator, table {
+  width: 80%;
+  margin: auto 10%;
+}
+
+.filtre {
+  text-align: center;
+  width: 33%;
+}

frontend/src/app/user/page-registry/page-registry.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageRegistryComponent } from './page-registry.component';
+
+describe('RegistryComponent', () => {
+  let component: PageRegistryComponent;
+  let fixture: ComponentFixture<PageRegistryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageRegistryComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageRegistryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/user/page-registry/page-registry.component.ts

@@ -0,0 +1,57 @@
+import {AfterViewInit, Component, ViewChild} from '@angular/core';
+import {MatTableDataSource} from "@angular/material/table";
+import {MatSort} from "@angular/material/sort";
+import {MatPaginator} from "@angular/material/paginator";
+import {MessageService} from "../../common/services/message/message.service";
+
+
+
+@Component({
+  selector: 'app-page-registry',
+  templateUrl: './page-registry.component.html',
+  styleUrls: ['./page-registry.component.scss']
+})
+export class PageRegistryComponent implements AfterViewInit
+{
+    displayedColumns: string[] = [ "nickname", "email", "role" ];
+    dataSource: MatTableDataSource<any> = new MatTableDataSource<any>();
+    @ViewChild(MatSort) sort: MatSort;
+    @ViewChild(MatPaginator) paginator: MatPaginator;
+
+
+    constructor( private messageService: MessageService ) { }
+
+
+    ngAfterViewInit(): void
+    {
+        this.messageService
+            .get('users?order_by=nickname')
+            .subscribe(retour => this.ngAfterViewInitCallback(retour), err => this.ngAfterViewInitCallback(err));
+    }
+
+
+    ngAfterViewInitCallback(retour: any): void
+    {
+        if(retour.status !== "success") {
+            console.log(retour);
+        }
+        else {
+            let tabPerson: { id: number, email: string, nickname: string, is_admin: boolean }[] = retour.data;
+            tabPerson = tabPerson.map( person => {
+                if(!person.is_admin) return Object.assign(person, {role: "utilisateur"});
+                else return Object.assign(person, {role: "admin"});
+            });
+            this.dataSource = new MatTableDataSource(tabPerson);
+            this.dataSource.sort = this.sort;
+            this.dataSource.paginator = this.paginator;
+        }
+    }
+
+
+    applyFilter(event: Event): void
+    {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.dataSource.filter = filterValue.trim().toLowerCase();
+    }
+
+}

frontend/src/environments/environment.prod.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  debutUrl: 'http://10.1.1.10/api/'
+};

frontend/src/environments/environment.ts

@@ -0,0 +1,18 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+
+export const environment = {
+    production: false,
+    debutUrl: 'http://127.0.0.1:5000/api/'
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

frontend/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Frontend</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

frontend/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

frontend/src/polyfills.ts

@@ -0,0 +1,53 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

frontend/src/styles.scss

@@ -0,0 +1,3 @@
+/* You can add global styles to this file, and also import other style files */
+html, body { height: 100%; }
+body { margin: 0; }

frontend/src/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+  { teardown: { destroyAfterEach: true }},
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

frontend/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

frontend/tsconfig.json

@@ -0,0 +1,33 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2017",
+    "module": "es2020",
+    "lib": [
+      "es2018",
+      "dom"
+    ],
+
+    "strictPropertyInitialization": false
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictPropertyInitialization": false
+    //"strictInjectionParameters": true,
+    //"strictInputAccessModifiers": true,
+    //"strictTemplates": true
+  }
+}