# Authentication EBoP with Angular (Front-End) and Django (Back-End)

## 11 / 02 / 2022
- Plusieurs utilisateurs sur un même navigateur dans différents onglets pour la phase développement, par contre on peut garder la façon déjà mise en oeuvre pour le mode production de 'userInterface'
- S'il existe un formulaire, que sa charte graphique soit la même que celle de lilyan (inclus la police, les icones, les couleurs)
- Authentification à la kahoot (et garder l'ancienne, on ne sait jamais si cela pourrait servir plus tard dans un mode plus sécurisé)
- Bien détailler ce qui a été fait en terme de sécurité que je puisse en discuter avec d'autres plus compétents que moi.
- Il faut prendre modèle sur kahoot.
- il y a un mode où l'on peut jouer à un exercice dont on nous a communiqué l'identifiant, qui permet d'accéder à une page de connexion où on demande seulement un identifiant et rien d'autre. Cela donne l'accès au jeu. Puis une fois le jeu fini, il y a un classement des participants.
- il y un mode où l'on s'authentifie avec un mot de passe etc. J'ai l'impression c'est que de cette façon que l'on crée des exercices (que l'on soit prof ou élève). Puis on peut se créer une base d'exercices et peut-être aller piocher dans une base d'exercice. En tout cas, une fois que l'on a fait un exercice. Je suppose que cela donne un code pin à distribuer aux participants.
- bref... c'est à explorer pour connaitre leur usage de l'authentification.
- la page de connexion de kahoot
contient le logo de kahoot (il faudrait le EBoP idem en haut à gauche comme fait dans les autres pages) avec éventuellement le même bandeau du haut. Puis le formulaire de connexion semble complètement indépendant de la charte graphique du reste du site. On peut donc faire pareil avec un formulaire très standard.
- Il serait bien d'avoir l'option de pouvoir voir le mot de passe.
- Eventuellement un générateur automatique de mot de passe (ou pas, puisque kahoot ne le fait pas - il doit y avoir une bonne raison)
- une façon de changer le mot de passe lorsqu'il est perdu.

## Discover the tools 19/12/21
### Checkpoint and food for thought / Basic function for EPob
* Manage the teacher, student registration module
* The connection for a teacher
=> A teacher must enter his name, his first name, an email address, a password, his field of education as well as his skills, a note frame (optional) to add particular remarks, the classes for which it teaches and possibly a predefined availability window to facilitate direct exchanges.
* The connextion for a student
=> A student will have to fill in his name, his first name, his email address, a password, his class, as well as a comment box (optional)
* It will be necessary to manage the registration in the database, the connection, for registration, there are common functions, the change of email address and password, as well as the forgotten password option.
* The addition of an administrator page which will have full power on the site
* Be able to delete users, exercises, manually modify member information in the event of a problem

This represents the starting point and the first things to work on, which can be completed later!

For the moment the developer option is set aside

### Database

After discovering the database, it will be necessary to restructure it, add the corresponding tables and add relations between the tables without breaking the previous connections.

## Checkpoint #2 20/01/22
* :warning: :warning: ***We encountered a big problem in the architecture of the project. We resume the work of former students. Mistakes were made, useless developments, useless codes, and the biggest problem is in the architecture, indeed, the student did not put any "route" in place to change the page, he bypassed the problem using angular methods that are not made for that! This is dirty code. The application this code therefore on a single page! If you refresh the page, you return to point 0 and lose all acquired data. If you want to return to the previous "page" from the browser, you exit the application. Without a route, there is no guard to protect access to certain pages! We will correct this at the end of the project if time allows us because it is a big job and reconstruction of the project. So we continued with the same model.*** :-1:
### Front-end (CHAHAT & PERROS)
* The design has been put aside for the moment to focus on the technical and functional aspect. All the programming part will not be developed here, the Front-end part includes the HTML/SCSS part and the associated TypeScript code, as well as the request requests to user.service.ts :ballot_box_with_check:
* #### *Main view*
* Addition of two buttons "Connection" and "Registration"
* #### *Connexion view*
* Addition of a login form, a button "Connexion" and soon two buttons "Forgot username" and "Forgot password"
* #### *Registration view*
* Added a registration form and a "Register" button

* #### *Main operation*

* The registration and connection view is linked to the user service which manages requests to the server. A user is represented by a User interface.

* #### *Other*

* The JSON text file containing the texts of the application has also been converted to TS (error of former students who had created a JSON file), which posed problems for import but also for future internationalization. In TS this file represents a module, which just has to be exported.

### Back-end (CHAHAT)

* Most of the work is at the server level
* #### *Connexion*
* When validating the connection form, a request is sent to the server, if this is your first connection then you activate your account. A verification is done at the level of the login and password. You will be redirected.
* #### *Registration*
* During the validation of the registration form each field is checked to correspond to the expected requirement and if the email is not already used, a second password entry is also requested. Once everything is validated, your login is generated and sent by email. Your account will remain disabled until a connection is made. You will be redirected to the login page.
* #### *Technical and functional aspect*
* A user in the database is represented by his identifier, first name, last name, email, gender, role (0: student, 1: teacher, 2: developer, 3: Administrator), password, date of registration and its date of last connection, which allows you to view inactive accounts
* For security reasons the password is hashed (53-bit hash) and converted into hexadecimal from the client to be sent to the server to avoid attacks from the middleman. The password is then hashed again by the server (hashPBKDF2, sha256) and saved, to prevent it from leaking if the database is compromised
* An interface linked to the server (AuthManageUsersInterface) makes it possible to manage all the requests dedicated to the database.
* The login is generated from the concatenation of the first letter of the first name and the last name. If it already exists, the reverse operation is performed. If it is still not available then an integer is added to it (possible example: achahat, canthony, achahat1 ...)
* The login is impossible to modify by the user, it and the email address are unique!
* An email containing the login is sent. For this using django we use the services of Google. A gmail account has been created (account identifiers will be provided). In addition, if the user responds to this email, an automatic email will be sent to the user : "***NOREPLY Vous avez répondu à un service automatisé, s'il vous plaît contacter un administrateur du site EBOP pour toutes questions. Merci de ne pas répondre à ce message.***" It is possible to reserve a domain name specifically for EBOP, instead of using "gmail.com" we could for example use "ebop.info" (if available, or other. For this you have to pay a subscription of 12€ approximately per year on Google Workspace (to be discussed with the project tutor)). An account created by default is disabled. The last database connection field contains "ANY". This makes it possible to check which accounts have never been activated and potentially delete them by the administrator. An account becomes active during the first connection (A message indicates this to the user)
* It is not possible to create an account with an email address already in use. The login will always be unique thanks to a generation and a verification afterwards before saving it and sending it to the user.
* The first name is recorded with the first letter in uppercase and the others in lowercase. The name is saved in uppercase. The login is in lowercase. We respect international conventions
* The first and last name must not exceed 30 characters and be composed of only letters
* The password must not be longer than 20 characters
* Email must be valid
* The login will never exceed 10 characters when it is created, only if it is impossible to generate an unused password without adding an integer, then only in this case, the login can be longer than 10 characters after the adding the integer (example: achahatant12)

### ToDo :white_check_mark:

***(Estimated remaining development time: 7 days to 15 days)***
* Add back buttons to the login and registration view
* Fix some bugs in forms (front-end)
* Add "Forgot Login" and "Forgot Password" buttons to the front-end (The features are already operational at the back-end level)
* Add a view "My account" which allows to modify its information (front-end)(only those which are modifiable, for example the login is not modifiable)(Function already available at the back-end level)
* Add an administrator view to have access to all users and modify their information, see them deleted or manually add a user (with an account deactivated until it has been activated). Subsequently, (or from the basic authentication project), delete exercises or other (Function already available at back-end level except deletion)
* Add a logout button
* Complete the full design
* A password must consist of uppercase, lowercase, numbers and special characters.
* Add websockets?

### After Authentication Project :arrow_heading_up:

***Idea and projection***
* Send message between user ?
* Class management ?
* Real-time quiz game between a teacher and his students ?
* Management of private or public exercice ?
* Scoring system and average student score ?
* Re-architect pages using angular dedicated routes ?
* Add profile picture?
* Exercise collection: A teacher gives an exercise to do in a given time available from the site, then can retrieve the results of these students (correction by the teacher or automatic) ?
* File repository (cf. Moodle) ?
* Add courses ?
* Absence management ?
* Develop the developer function ?
* etc...
You will have to talk about it with the project tutor