In the previous article, we saw how to validate an identification form. We also know how to save the token sent by the server if the connection succeeds. We are also able to manage different types of error messages, either at the level of each field (username and password) or when we receive a return that we don’t like from the server.

This time, we are going to protect some pages. Indeed, these must be visible only by the people who are connected. Hence the usefulness of our identification page.

Protecting involves 2 straightforward actions:

• If you try to access…

A Flutter application is created by default with the blue color as on this capture.

This article describes the steps to follow to customize the colors of the application. For example, we want this application to respect the color codes defined by the company’s marketing department.

Here are the steps to follow:

• Find the right color combination.
• Retrieve the hexadecimal codes of these colors
• Integrate these colors into the theme.
• Test the rendering in the application.

Let’s go to this this link to create this custom color combination. On this page you can choose from the predefined colors or create…

Let’s get to the heart of our Angular/Electronjs application. Let’s create a login page in our web application.

This login page will communicate later with a nodejs backend developed by expressjs. This application is already functional. It uses the ORM sequelize to connect to a Mysql database.

This is an article detailing the implementation of this application.

For the general interface’s design, we could have chosen bootstrap. We will do better and follow the Angular standard;) We will then use Material Angular.

Several reasons lead us to this choice :

• Because Material Angular is developed by Angular, therefore it integrates…

Un CMS (Content Management System) ou Système de gestion de contenu en ligne est un outil de travail. Il permet de gérer facilement le contenu d’un site Internet à partir d’une interface d’administration protégée par un mot de passe et un identifiant.

Il existe 3 types de CMS :

• CMS couplé (ou classique) : le back-office (pour gérer le contenu) se trouve sur le même serveur que le front-office (site internet). Ils utiliser le même langage de programmation (php par exemple) et la base de données (MySQL) pour stocker le contenu.
• CMS découplé (Decoupled CMS) : le back-office (pour gérer…

Il s’agit d’une application web qui agit comme une application mobile. C’est comme si on avait une application dans notre téléphone mais à partir d’une url dédiée. Elle est développée donc à partir des mêmes langages de programmations utilisés pour créer des sites internet : html, css et javascript.

Ionic est un framework qui permet de créer une PWA et une application hybride. Une application hybride est également une application dévelopée avec le(s) même(s) langage(s) de programmation (Javascript, css et html). …

En tant que développeur informatique, Il nous arrive souvent de mettre en place une fonctionnalité liée à un email — exemple: envoi d’un email de confirmation à la soumission d’un formulaire.

Aussi, on aimerait bien tester plusieurs choses sur cette fonctionnalité :

• Les caractères contenus dans l’objet du mail sont-ils bien encodés ?
• Les images dans le corps du mail sont-elles affichées correctement ?
• Les destinataires que nous avons spécifiés dans notre script sont-ils bien affichés dans le champ “To” ou reçoivent-ils tous le mail envoyé ?
• Les pièces jointes ont-elles été bien ajoutées ?
• etc…

Lorsqu’on travaille en local…

Un webhook est une méthode permettant d’ajouter ou de modifier le comportement d’une page grâce à un retour d’appel ( callback). Le format est le JSON et la requête utilisée est la méthode POST.

Dans le cas de gitlab ou de github, un webhook est utilisé par exemple pour déclencher un événement suite à un nouveau push dans un repository ou à la création d’une issue ( report d’une anomalie). Cet événement lance une URL ajoutée dans gitlab en utilisant la méthode POST.

Pré-requis pour la mise en place d’un webhook dans gitlab :

• Créer ou choisir un repository dans…

Suite à un article sur la mise en forme de la page de connexion avec Angular-Electronjs.

Nous allons implémenter cette fois-ci le côté backend de ce formulaire.

On abordera les élements suivants :

• Nettoi du code et factorisation
• Messages d’erreurs
• Formulaire HTML — Ajout du reactive forms.
• Typescript — Validation du formulaire et connexion à une api en nodeexpress-js

Nettoi du code et factorisation

Faisons un peu de ménage dans notre code.

Modules supplémentaires

En premier lieu, nous allons modifier l’utilisation de fontawesome grâce au module fontawesome pour Angular .

Le code classique sera remplacé par celui-ci

<fa-icon icon="['fas', 'spinner']" spin="true"></fa-icon>

Ce remplacement nécessite évidemment l’installation de…