Formulaire d’authentification 1 avec Angular

• Node.js et npm installés sur votre machine de développement,si non visitez la page :Installation d’Angular
• Angular CLI 9 installé, sinon utilisez la commande npm install -g @angular/cli pour l’installer.

Utiliser la commande ng generate ou ng g pour générer des blocs de construction angulaires (composants, services, tuyaux, etc.).

• Nous allons utiliser le projet crée la dernière séance dont le lien est ici
• Revenez à votre interface de ligne de commande et accédez au dossier racine de votre projet:

PS C:\Users\bigtec> cd angular9
PS C:\Users\bigtec\angular9> cd exempleprojet
PS C:\Users\bigtec\angular9\exempleprojet> 

• Exécutez la commande ng g c pour générer les composants

ng g c Authentification 
ng g c Admin

• Deux composants ont été crée Authentification et Admin.
• Le composant Authentification sera utilisé pour ajouter un formulaire réactif pour obtenir l’e-mail et le mot de passe de l’utilisateur.
• Le composant Admin sera utilisé comme une page d’exemple qui sera sécurisée contre l’accès des utilisateurs non authentifiés. Les utilisateurs devront se connecter avant de pouvoir accéder à la page d’administration.

• incluez ces deux composants dans le module de routage.
• Dirigez-vous vers le src/app/app-routing.module.ts fichier et mettez-le à jour comme suit:



• Nous avons créé trois routes:
• Pour le composant authentification,
• Pour le composant admin.
• Un pour rediriger le chemin vide vers le chemin d’authentification.

• Supprimez le contenue, crée par défaut, du fichier HTML app.component.html.
• Ouvrez le fichier src/app/app.component.html et supprimez tout mais laissez <router-outlet></router-outlet> qui se trouve à la fin du fichier

export  interface  utilisateur {
    pseudo: string;
    adressMail: string;
    motPasse: string;
}

<h1 style="text-align:center">
  Angular 10 Auth Example
</h1>
<div class="login">
  <h2 class="login-header">Log in</h2>
  <form [formGroup]="loginForm" class="login-container" (ngSubmit)="login()">
    <p [ngClass]="{ 'has-error': isSubmitted && formControls.email.errors }">
      <input type="email" placeholder="Email" formControlName="email">
    </p>
    <div *ngIf="isSubmitted && formControls.email.errors" class="help-block">
      <div *ngIf="formControls.email.errors.required">Email is required</div>
    </div>
    <p [ngClass]="{ 'has-error': isSubmitted && formControls.password.errors }">
      <input type="password" placeholder="Password" formControlName="password">
    </p>
    <div *ngIf="isSubmitted && formControls.password.errors" class="help-block">
      <div *ngIf="formControls.password.errors.required">Password is required</div>
    </div>
    <p>
      <input type="submit" value="Log in">
    </p>
  </form>
</div>

• Ouvrez le src/styles.css et ajoutez:

/* You can add global styles to this file, and also import other style files */
@import  url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
    background: #456;
    font-family: 'Open Sans', sans-serif;
}

• Ouvrez le src/app/login.component.css.css et ajoutez:

/* 'Open Sans' font from Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
.login {
  width: 400px;
  margin: 16px auto;
  font-size: 16px;
}
.login-header,
.login p {
  margin-top: 0;
  margin-bottom: 0;
}
.login-triangle {
  width: 0;
  margin-right: auto;
  margin-left: auto;
  border: 12px solid transparent;
  border-bottom-color: rgb(15, 66, 107);
}
.login-header {
  background: rgb(12, 77, 129);
  padding: 20px;
  font-size: 1.4em;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}
.login-container {
  background: #ebebeb;
  padding: 12px;
}
.login p {
  padding: 12px;
}
.login input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  padding: 16px;
  outline: 0;
  font-family: inherit;
  font-size: 0.95em;
}
.login input[type="email"],
.login input[type="password"] {
  background: #fff;
  border-color: #bbb;
  color: #555;
}
.login input[type="email"]:focus,
.login input[type="password"]:focus {
  border-color: #888;
}

.login input[type="submit"] {
  background: rgb(1, 29, 51);
  border-color: transparent;
  color: #fff;
  cursor: pointer;
}
.login input[type="submit"]:hover {
  background: #17c;
}
.login input[type="submit"]:focus {
  border-color: #05a;
}