vincent.chabredier
/
web-ruby
11
22
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

first draft

Browse Source
add-tp6
Vincent Chabredier 2 years ago
parent 5527d93345
commit 392a2ef5a8
1 changed files with 132 additions and 13 deletions
Show Stats Download Patch File Download Diff File

145
tps/sem6/README.md
Unescape View File

@ -20,31 +20,150 @@ On va maintenant construire un leaderboard des combats qui ont été réalisés
* Pour cela vous allez devoir coller le template suivant en tant que layout (`app/views/layouts/application.html.erb`) : * Pour cela vous allez devoir coller le template suivant en tant que layout (`app/views/layouts/application.html.erb`) :
```erb ```erb
<!doctype html>
<html lang="en">
<head>
<title>Les joyeux de la couronne WEB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<%= yield %>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.min.js" integrity="sha384-heAjqF+bCxXpCWLa6Zhcp4fu20XoNIA98ecBC1YkdXhszjoejr5y9Q77hIrv8R9i" crossorigin="anonymous"></script>
</body>
</html>
``` ```
Voici la vue de la page, prenez le temps de lire le code et comprendre quels attributs devra posséder le contrôleur : Voici la vue de la page, prenez le temps de lire le code et comprendre quels attributs devra posséder le contrôleur :
```erb ```erb
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Leaderboard</a>
<div class="justify-content-end">
<%= form_with url: {action: :index}, method: :get, class: 'd-flex' do |form| %>
<%= form.text_field :query, value: params[:query], class: "form-control me-2", placeholder: "Rechercher ..." %>
<%= form.submit "OK", class: "btn btn-outline-success" %>
<% end %>
</div>
</div>
</nav>
<div class='container-fluid' >
<table class="table table-hover table-striped table-sm">
<thead>
<tr>
<th>Date</th>
<th>Nom</th>
<th>Combatant 1</th>
<th>Combatant 2</th>
<th>Résultat</th>
<th>Gagnant</th>
</tr>
</thead>
<tbody>
<% @combats.order(created_at: :desc).each do |combat| %>
<tr>
<td><%= l(combat.created_at, format: :short) %></td>
<td><%= combat.name %></td>
<td><%= combat.left_fighter.name %></td>
<td><%= combat.right_fighter.name %></td>
<td><%= combat.result.capitalize %></td>
<td><%= combat.winner&.name %></td>
</tr>
<% end %>
</tbody>
</table>
</div>
``` ```
* Créez ou générez un contrôleur `Leaderboard` avec une action index et la route correspondante.
* Copiez le template du layout comme indiqué ci-dessus
* Copiez le code fourni ci-dessus dans la vue correspondant à l'action index (`app/views/leaderboard/index.html.erb`)
* Modifiez le code de l'action index du contrôleur pour fournir à la vue ce dont elle a besoin pour afficher les combats.
* Faites fonctionner la recherche présente dans la top bar pour filter les combats en fonction de leur nom (comme on l'a déjà fait dans l'API)
* Améliorez cette recherche pour chercher également dans le nom des créatures combatantes.
## Gestion des utilisateurs
Nous allons ajouter à notre application des utilisateurs possédant un nom d'utilisateur et un mot de passe.
Nous devons stocker ce mot de passe de manière sécurisée dans la base de donnée.
Pour cela on va utiliser la méthode `has_secure_password` du module `ActiveModel::SecurePassword`.
* Créez ou générez un modèle `User`possédant un `username` de type `string`
* Faites en sorte qu'il ne puisse pas y avoir deux utilisateur créatures avec le même `username`. (Rappelez vous commment on a fait pour les créatures)
* Lisez attentivement la documentation https://api.rubyonrails.org/v7.0.4/classes/ActiveModel/SecurePassword/ClassMethods.html, et adaptez votre code :
* Vous devez ajouter une gem spécifique à votre bundle (`bundle add xxx`)
* Vous devez ajouter un attribut à User (`bin/rails g migration addSecurePasswordToUsers xxx`)
* Vous pouvez maintenant appeler `has_secure_password` dans `user.rb`
* Modifiez les seeds pour créer un utilisateur `root` ayant comme mot de passe `admin123`
## Connexion
On va permettre aux utilisateurs de s'authentifier dans notre application.
Pour ça, on vous fourni la vue de l'écran de connexion :
```erb
<main class="container mt-5 m-auto">
<% if @error_message.present? %>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<i class="bi bi-radioactive"></i>
<strong>Oups!</strong> <%= @error_message %>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<% end %>
<%= form_with url: {action: :create}, class: "text-center" do |form| %>
<h1 class="h3 mb-3 fw-normal">Merci de vous connecter</h1>
<div class="form-floating mt-2">
<%= form.text_field :username, class:"form-control", placeholder:"Identifiant", value: params[:username] %>
<label for="username">Identifiant</label>
</div>
<div class="form-floating mt-2">
<%= form.text_field :password, class:"form-control", placeholder:"Mot de passe", value: params[:password] %>
<label for="password">Mot de passe</label>
</div>
<%= form.submit "Connexion", class: "w-100 btn btn-lg btn-primary mt-2", data: { turbo: "false" }%>
<% end %>
</main>
```
* Créez ou générez un controlleur `UserSessions` avec deux actions : `new` et `create`, et les routes correspondantes.
leaderboard * L'action `new` affichera le formulaire, c'est pour cette action que vous utiliserez la vue fournie ci-dessus.
fonction recherche avec joins
ajout d'un modèle user avec has_secure_password * Configurez la route pour brancher cet écran de connexion à l'url `http://localhost:3000/login`
1 seul utilisateur par name
password present
creer un utilisateur admin dans les seeds * Coder l'action `create` qui :
root
password: admin123
ajouter un controleur de login * Cherche l'utilisateur (`User`) correspondant à l'username reçu en param.
supporter les sessions * Vérifie que le mot de passe est correcte.
* Si oui :
* Met l'utilisateur en sesion
* Redirige vers le leaderboard : `redirect_to controller: :leaderboard, action: :index`
* Si non, rend la vue `new` pour afficher de nouveau le formulaire : `render :new`
* La vue peut mème afficher un message d'erreur si vous définnissez le bon attribut dans l'action
brider la leaderboard aux utilisateurs connectés ### Protégez l'application
brider les controleurs d'API à basic auth * Modifier le leaderboard pour brider son accès aux utilisateurs connectés
* Modifier les controleurs d'API pour brider leurs accès aux utilisateur présents en base de donnée, en forçant l'envoi de l'username et mot de passe en basic auth

Write Preview
Loading…
Cancel
Save