16-2 Vue Connexion et ViewModel associé

Créer une Vue Connexion.cshtml

Vous avez probablement une erreur dans la fonction Connexion puisqu'il lui manque une vue associée.

1. Créer le dossier Auth. Clic droit sur le dossier Views -> Add -> Directory et nommez le dossier Auth.
2. Créer la vue. Clic droit sur le dossier Views/Auth -> Add -> Razor MVC View with Layout.
3. **Nommez la vue Connexion et assignez un titre pertinent.
   Snowfall.Web.Mvc/Views/Auth/Connexion.cshtml

   @model TModel
   
   @{
       ViewBag.Title = "Connexion";
   }
   
   <h1>Connexion</h1>

Créer un ViewModel ConnexionViewModel

Un peu comme pour le panier où le form responsable de communiquer le produit à ajouter au panier est représenté par un ViewModel, on associera un ViewModel au formulaire de connexion.

On aura donc besoin d'un ViewModel possédant les propriétés nécessaires à la vue, soit:

• Email
• Password

1. **Créer le dossier Auth sous Web.Mvc/Models. Clic droit sur le dossier Models -> Add -> Directory et nommez le dossier Auth.

2. Créer le ViewModel. Clic droit sur le dossier Models/Auth -> Add -> Class/Interface.

3. Nommez la classe ConnexionViewModel et ajoutez les propriétés

   Snowfall.Web.Mvc/Models/Auth/ConnexionViewModel.cs

   public class ConnexionViewModel
   {
       public string? Email { get; set; }
       public string? Password { get; set; }
   }
   attention

   Remarquez que les deux propriétés sont optionnelles. En effet, il n'est pas garanti que le formulaire contiendra ces deux propriétés. Imaginez que le formulaire soit soumis sans Email: nous devrons retourner une erreur de validation, mais cela veut aussi dire que la propriété est vide ou absente.

Créer le formulaire de connexion

Référence au ViewModel

Dans la vue, Connexion.cshtml, on fera premièrement référence au ViewModel comme étant le modèle associé à la vue.

Snowfall.Web.Mvc/Views/Auth/Connexion.cshtml

@model Snowfall.Web.Mvc.Models.Auth.ConnexionViewModel

Si vous voulez simplifier l'importation, vous pouvez ajouter à _ViewImports.cshtml le using suivant: @using Snowfall.Web.Mvc.Models.Auth.

Snowfall.Web.Mvc/Views/_ViewImports.cshtml

@using Snowfall.Web.Mvc
@using Snowfall.Web.Mvc.Models
@using Snowfall.Web.Mvc.Models.Evenements
@using Snowfall.Web.Mvc.Models.Auth
@using Snowfall.Domain.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Ensuite, dans la vue:

Snowfall.Web.Mvc/Views/Auth/Connexion.cshtml

@model ConnexionViewModel

@{
    ViewBag.Title = "Connexion";
}

<h1>Connexion</h1>

info

À noter que cette dernière modification est purement esthétique et permet de raccourcir l'importation, mais ne change rien à la fonctionnalité.

Il ne s'agit pas non plus d'un aspect évalué. L'un ou l'autre est parfaitement acceptable.

Formulaire

Formulaire de base et action

On peut commencer par la balise <form>, ainsi que son action associée, soit Authentifier.

<!-- ... -->

<div class="row">
    <div class="col-md-8 col-lg-4 offset-md-2 offset-lg-4">
        <h1 class="mb-3">Connexion</h1>

        <form asp-controller="Auth">

        </form>
    </div>
</div>

info

<form asp-controller="Auth"> vient lier le formulaire au contrôleur Auth, mais il nous faut une action de contrôleur pour recevoir les données!

Action Authentifier du contrôleur

1. Créez une action Authentifier au niveau du contrôleur qui acceptera un ViewModel en argument.

   Snowfall.Web.Mvc/Controllers/AuthController.cs

   [Route("[controller]")]
   public class AuthController : Controller
   {
       // GET /auth/connexion
       [HttpGet("[action]")]
       public IActionResult Connexion()
       {
           return View();
       }
       
       // POST /auth
       [HttpPost]
       [ValidateAntiForgeryToken]
       public async Task<IActionResult> Authentifier(ConnexionViewModel connexionViewModel)
       {
           return Ok()
       }
   }
   info

   Si vous avez un œil de lynx, vous aurez remarqué l'utilisattion de [ValidateAntiForgeryToken]. Une fois que vous aurez fini cette étape, rendez-vous à la page suivante pour des explications plus complètes sur cet aspect.

   De plus, pour le moment, la fonction ne retourne que Ok(), en attendant d'avoir un peu plus d'information sur son comportement.

2. Liez le formulaire à l'action du contrôleur via la propriété asp-action

   <!-- ... -->
   <form asp-controller="Auth" asp-action="Authentifier">
   
   </form>
   <!-- ... -->

Ajout des champs

On ajoute ensuite les deux champs Email et Password, en plus d'un bouton pour soumettre le formulaire.

<!-- ... -->
<div class="row">
    <div class="col-md-8 col-lg-4 offset-md-2 offset-lg-4">
        <h1 class="mb-3">Connexion</h1>

        <form asp-controller="Auth" asp-action="Authentifier">
            <div class="form-floating mb-3">
                <input id="email" name="Email" value="@Model.Email" class="form-control"/>
                <label for="email">Courriel</label>
            </div>

            <div class="form-floating mb-3">
                <input type="password" id="password" name="Password" value="@Model.Password" class="form-control"/>
                <label for="password">Mot de passe</label>
            </div>

            <div class="form-group">
                <button class="btn btn-primary">Connexion</button>
            </div>
        </form>
    </div>
</div>

Exécuter le projet

Vous pouvez vous rendre à l'adresse /auth/connexion, mais vous aurez une erreur ressemblant à celle-ci:

http://localhost:4200