Devoir - Semaine 11 - On a Vue (js) ca?!

Le but du petit devoir de cette semaine est de se familiariser avec Vue avant de se lancer dans le projet final. Il s'agit également d'une bonne révision pour le mini-test #2.

Il s'agit d'une application simple en Vue nous permettant de nous connecter et de voir les informations de notre profil.

Éléments à implémenter

• Page de connexion avec un formulaire de connexion (courriel et mot de passe)
  • Validation du formulaire de connexion (courriel doit être au format email, mot de passe doit être d'au moins 6 caractères) avec vee-validate
  • Affichage d'un message d'erreur si les informations de connexion sont invalides. Le message d'erreur doit être en francais et vous devez lui appliquer un style spécifique.
• Page de profil qui affiche les informations de l'utilisateur (nom, courriel, couleur préférée et plus selon votre imagination!)
• Router pour naviguer entre la page de connexion et la page de profil. Le router doit également gérer une page d'erreur 404 pour les routes non définies.
• Utilisation d'un service UtilisateurService pour aller chercher les informations de l'utilisateur. Vous pouvez 'hardcoder' les informations d'utilisateurs dans le service.
• Utilisation d'une classe Utilisateur pour représenter les utilisateurs de l'application. La classe doit avoir les propriétés suivantes : nom, email, motDePasse, couleurPreferee, etc.
• un composant Footer qui affiche votre nom. Ce composant doit être réutilisé dans les deux pages (connexion et profil).

Instructions

Rappel : Vous devez utiliser le Template Vue - 2W1 que je vous fournis pour ce devoir. Utiliser également Bootstrap (déja inclus dans le template).

Respecter la structure de projet suivante :

- src/
  - components/
    - Footer.vue
  - views/
    - Connexion.vue
    - Profil.vue
  - services/
    - UtilisateurService.ts
  - typings/
    - Utilisateur.ts
  - router/
    - index.ts
  - App.vue
  - main.ts

Rappel : Le dossier views contient les composants qui sont associés à une route spécifique.

Remise

Il n'y a pas de remise pour ce devoir, il s'agit d'une préparation au mini-test du prochain cours. Je vais vour fournir le corrigé au plus tard jeudi matin pour que vous puissiez le réviser avant le mini-test. Je vous encourage à faire le devoir par vous même avant de regarder le corrigé pour maximiser votre apprentissage!