Formulaire de connexion

Pour accéder à une API, il faut s'authentifier. C'est pourquoi nous allons commencer par créer une page de connexion, avec un formulaire de connexion.

Page de connexion

1. Création d'un composant ConnexionPage.vue

2. Création d'une route /connexion

3. Ajout d'un bouton "Se connecter" dans la toolbar supérieure.

Page

Créer le fichier src/pages/ConnexionPage.vue et y copier le code suivant.

ConnexionPage.vue

<template>
  <q-page padding>
    <h1>Connexion</h1>
  </q-page>
</template>

<script setup>
</script>

Route

Modifier le fichier des routes en y ajouter la route /connexion qui chargera le composant src/pages/PageConnexion.vue.

• 8 : Ajout de la route /connexion.

src/router/routes.js

import MainLayout from 'layouts/MainLayout.vue'

const routes = [
  {
    path: '/',
    component: MainLayout,
    children: [
      { path: '', component: () => import('pages/IndexPage.vue') },
      { path: 'connexion', component: () => import('pages/ConnexionPage.vue') },
      // ...
    ]
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue')
  }
]

export default routes

Bouton de connexion

Modifier le fichier src/layouts/MainLayout.vue et y ajouter le bouton dans la <q-toolbar>, après le titre <q-toolbar-title>.

• 9-15 : Ajout du bouton de connexion

src/layouts/Layout.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-toolbar-title>
          ToDo
        </q-toolbar-title>

        <q-btn
          flat
          icon-right="account_circle"
          label="Se connecter"
          to="/connexion"
        />

        <div>Quasar v{{ $q.version }}</div>

        <q-btn
          aria-label="Menu"
          dense
          flat
          icon="menu"
          round
          @click="toggleLeftDrawer"
        />
      </q-toolbar>
    </q-header>
    <!-- ... -->
  </q-layout>
</template>

Se connecter ou créer un compte

L'utilisateur aura le choix entre se connecter ou créer un nouveau compte.

Nous allons utiliser des onglets, Tabs, pour séparer ces deux actions.

Pour démarrer, nous allons récupérer le code de démonstration de la doc Quasar pour créer des Onglets (Tabs) avec panneaux (Panels).

Tabs | Quasar FrameworkQuasar Framework

Exemple Quasar "Tabs with tab panels"

Coller le code de démo Quasar ci-dessous dans le composant ConnexionPage.vue.

<template>
  <q-card>
    <q-tabs
      v-model="tab"
      dense
      class="text-grey"
      active-color="primary"
      indicator-color="primary"
      align="justify"
      narrow-indicator
    >
      <q-tab name="mails" label="Mails" />
      <q-tab name="alarms" label="Alarms" />
      <q-tab name="movies" label="Movies" />
    </q-tabs>
  
    <q-separator />
  
    <q-tab-panels v-model="tab" animated>
      <q-tab-panel name="mails">
        <div class="text-h6">Mails</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </q-tab-panel>
  
      <q-tab-panel name="alarms">
        <div class="text-h6">Alarms</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </q-tab-panel>
  
      <q-tab-panel name="movies">
        <div class="text-h6">Movies</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<script setup>
import { ref } from 'vue'

const tab = ref('mails')
</script>

• Supprimer le 3e onglet "movies" <q-tab> et son panneau <q-tab-pannel>

• Renommer mail en connexion

• Renommer alarms en enregistrement

• Supprimer l'attribut dense de <q-tabs>

• Ajouter une classe CSS à <q-card> et lui octroyer une largeur max de 500px et un largeur automatique dans la section <style>

ConnexionPage.vue

<template>
  <q-card class="tabs-card">
    <q-tabs
      v-model="tab"
      active-color="primary"
      align="justify"
      class="text-grey"
      indicator-color="primary"
      narrow-indicator
    >
      <q-tab label="Connexion" name="login"/>
      <q-tab label="Enregistrement" name="signup"/>
    </q-tabs>

    <q-separator/>

    <q-tab-panels v-model="tab" animated>
      <q-tab-panel name="login">
        <div class="text-h6">Connexion</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </q-tab-panel>

      <q-tab-panel name="signup">
        <div class="text-h6">Enregistrement</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<script setup>
import { ref } from 'vue'

const tab = ref('login')
</script>

<style lang="scss" scoped>
.tabs-card {
  max-width: 500px;
  width: auto;
  margin: 0 auto;
}
</style>

Formulaire de connexion

Nous allons créer un composant contenant le formulaire de connexion.

Input | Quasar FrameworkQuasar Framework

Créer le fichier src/components/Connexion/FormLogin.vue et y coller le code suivant.

• 2 : à l'envoi du formulaire, appelle la méthode submitForm

  • Ne pas oublier d'ajouter .prevent, pour stopper l'envoi naturel du formulaire.

• 4 et 13 : liaison avec l'objet Vue

• 5 et 14 : règle de validation des champs du formulaire

• 7 et 16 : nomme, référence, les éléments HTML afin de le récupérer dans l'objet Vue

• 19 : champ de type password

• 17 : valide l'erreur à la sortie du champ et non à chaque modification

• 22 : bouton type="submit" déclenche l'envoi du formulaire

• 33-36 : données du formulaire liées avec v-model dans les <q-input>

• 38 : méthode appelée lors de l'envoi du formulaire

• 42-46 : méthode qui valide le format de l'email

Connexion/FormLogin.vue

<template>
  <q-form @submit.prevent="submitForm">
    <q-input
      v-model="form.email"
      :rules="[val => validateEmail(val) || 'Email invalide']"
      class="q-my-md"
      label="E-mail"
      lazy-rules
      outlined
    />

    <q-input
      v-model="form.password"
      :rules="[ val => val.length >= 4 || 'Minimum 4 caractère']"
      class="q-my-md"
      label="Mot de passe"
      lazy-rules
      outlined
      type="password"
    />

    <q-btn
      color="primary"
      label="Se connecter"
      type="submit"
    />
  </q-form>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({
  email: '',
  password: ''
})

const submitForm = () => {
  alert('Formulaire envoyé!')
}

const validateEmail = (val) => {
  // Source : https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
  const regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return regex.test(String(val).toLowerCase())
}
</script>

<style lang="scss" scoped>

</style>

Importer et ajouter le composant FormLogin.vue dans la page de connexion.

• 19 : Ajout du formulaire <LoginForm/>

• 32 : Importation du composant FormLogin.vue

src/pages/PageConnexion.vue

<template>
  <q-card class="tabs-card">
    <q-tabs
      v-model="tab"
      active-color="primary"
      align="justify"
      class="text-grey"
      indicator-color="primary"
      narrow-indicator
    >
      <q-tab label="Connexion" name="login"/>
      <q-tab label="Enregistrement" name="signup"/>
    </q-tabs>

    <q-separator/>

    <q-tab-panels v-model="tab" animated>
      <q-tab-panel name="login">
        <div class="text-h6">Connexion</div>
        <LoginForm/>
      </q-tab-panel>

      <q-tab-panel name="signup">
        <div class="text-h6">Enregistrement</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<script setup>
import { ref } from 'vue'
import LoginForm from 'components/Connexion/FormLogin.vue'

const tab = ref('login')
</script>

<style lang="scss" scoped>
.tabs-card {
  max-width: 500px;
  width: auto;
  margin: 0 auto;
}
</style>

Formulaire d'enregistrement

Pour créer le formulaire d'enregistrement, nous allons copier le composant FormLogin.vue et le renommer en FormSignup.vue.

Ensuite, il faudra ajouter un champ, et des données, pour le nom d'utilisateur name et pour la confirmation du mot de passe password_confirmation.

Finalement importer le composant FormSignup.vue dans la page de connexion ConnexionPage.vue.

Résultat

Connexion/FormSignup.vue

<template>
  <q-form @submit.prevent="submitForm">
    <q-input
      v-model="form.name"
      :rules="[ val => val.length >= 4 || 'Minimum 4 caractère']"
      class="q-my-md"
      label="Nom d'utilisateur"
      outlined
    />

    <q-input
      v-model="form.email"
      :rules="[val => validateEmail(val) || 'Email invalide']"
      class="q-my-md"
      label="E-mail"
      outlined
    />

    <q-input
      v-model="form.password"
      :rules="[ val => val.length >= 4 || 'Minimum 4 caractère']"
      class="q-my-md"
      label="Mot de passe"
      lazy-rules
      outlined
      type="password"
    />

    <q-input
      v-model="form.password_confirmation"
      :rules="[ val => val === form.password || 'Les mots de passe sont différents']"
      class="q-my-md"
      label="Confirmer le mot de passe"
      lazy-rules
      outlined
      type="password"
    />

    <q-btn
      color="primary"
      label="Créer un compte"
      type="submit"
    />
  </q-form>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({
  email: '',
  password: '',
  password_confirmation: '',
  name: ''
})

const submitForm = () => {
  alert('Formulaire envoyé!')
}

const validateEmail = (val) => {
  // Source : https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
  const regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return regex.test(String(val).toLowerCase())
}
</script>

<style lang="scss" scoped>

</style>

Connexion/FormLogin.vue

pages/ConnexionPage.vue