ajout d'une interface de connexion

src/App.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
+
 </script>
 
 <template>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
   <RouterView/>
 </template>
 
-<style scoped>
+<style>
-/* Un peu de style... */
+  @import "styles.css";
 </style>

src/components/Authenticate.vue

@@ -1,94 +1,109 @@
 <script setup lang="ts">
+import { AuthenticationService } from '@/services/authentication.service';
 import { ref } from 'vue';
 import { useToast } from 'vue-toast-notification';
 
-  const username = ref<string>('')
+const username = ref<string>('')
-  const password = ref<string>('')
+const password = ref<string>('')
 
-  const toastService = useToast();
+const usernameErrorDetail = ref<string>('')
+const passwordErrorDetail = ref<string>('')
+const generalErrorDetail = ref<string>('')
 
-  function submit() {
+const toastService = useToast();
+const authenticationService = new AuthenticationService()
 
+async function submit() {
+  try {
+    await authenticationService.authenticate(username.value, password.value)
+    toastService.success(`Heureux de vous revoir ${username}!`, {
+      position: 'top-right',
+      pauseOnHover: true,
+      dismissible: true,
+    })
+  } catch (error: any) {
+    usernameErrorDetail.value = ''
+    passwordErrorDetail.value = ''
+    generalErrorDetail.value = ''
+    const errorCode = error.status
+    const errorDetails = error.response.data
+
+    if (errorCode === 400) {
+      if (errorDetails.username) {
+        usernameErrorDetail.value = errorDetails.username[0] // le champ username est vide
       }
+      if (errorDetails.password) {
+        passwordErrorDetail.value = errorDetails.password[0] // le champ password est vide
+      }
+    } else {
+      generalErrorDetail.value = errorDetails.detail
+      toastService.error(`${generalErrorDetail.value}`, {
+        position: 'top-right',
+        pauseOnHover: true,
+        dismissible: true,
+      })
+    }
+  }
+}
 </script>
 
 <template>
   <main>
     <form>
-      <h1>Se connecter</h1>
+      <h1>Connexion</h1>
-      <input @keyup.enter="submit" v-model="username" placeholder="Nom d'utilisateur" type="text" required>
+      <label>Nom d'utilisateur</label>
-      <input @keyup.enter="submit" v-model="password" placeholder="Mot de passe" type="password" required>
+      <input @keyup.enter="submit" v-model="username" placeholder="Alexis" type="text" required>
-      <button @click="submit">Submit</button>
+      <ul>
+        <li v-if="usernameErrorDetail" style="color:red">{{ usernameErrorDetail }}</li>
+      </ul>
+      <label>Mot de passe</label>
+      <input @keyup.enter="submit" v-model="password" placeholder="*******" type="password" required>
+      <ul>
+        <li v-if="passwordErrorDetail" style="color:red">{{ passwordErrorDetail }}</li>
+      </ul>
+      <button @click="submit" type="button">Se connecter</button>
     </form>
   </main>
 </template>
 
 <style scoped>
-main {
+
-  display: flex;
+h1 {
-  justify-content: center;
+  text-align: center;
-  align-items: center;
-  background-color: #f1f4f5;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
 }
 
 form {
-  box-sizing: border-box;
+  max-width: 600px;
+  min-height: 500px;
+  background-color: light-dark(#efedea, #282828);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 5px 50px 5px 50px;
   margin: 100px auto 0;
-  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
+  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
   padding-bottom: 40px;
-  border-radius: 3px;
+  border-radius: 10px;
-  h1 {
+}
-    box-sizing: border-box;
+
-    padding: 20px;
+input, button {
-  }
+  padding: 12px;
 }
 
 input {
-  margin: 40px 25px;
+  border-radius: 0.5rem;
-  width: 200px;
-  display: block;
-  border: none;
-  padding: 10px 0;
-  border-bottom: solid 1px #3b82ef;
-  transition: all 0.3s cubic-bezier(.64,.09,.08,1);
-  background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, #3b82ef 4%);
-  background-position: -200px 0;
-  background-size: 200px 100%;
-  background-repeat: no-repeat;
-  color: darken(#3b82ef, 20%);
-  &:focus, &:valid {
-    box-shadow: none;
-    outline: none;
-    background-position: 0 0;
-    &::-webkit-input-placeholder {
-      color: #3b82ef;
-      font-size: 11px;
-      transform: translateY(-20px);
-      visibility: visible !important;
-    }
-  }
 }
 
 button {
+  font-size: 16px;
+  background-color: #1e90ff;
   border: none;
-  background: #3b82ef;
+  border-radius: 0.5em;
-  cursor: pointer;
-  border-radius: 3px;
-  padding: 6px;
-  width: 200px;
-  color: white;
-  margin-left: 25px;
-  box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
-  &:hover { 
-    transition: 1s;
-    box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
-  }
 }
 
+button:hover {
+  cursor: pointer;
+}
+
+
 </style>

src/main.ts

@@ -2,5 +2,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import ToastPlugin from 'vue-toast-notification'
 import { router } from './routes'
+import 'vue-toast-notification/dist/theme-sugar.css'
 
 createApp(App).use(router).use(ToastPlugin).mount('#app')

src/services/authentication.service.ts

@@ -5,7 +5,7 @@ export const MBL_API_URL = "http://localhost:8000/api/";
 
 export class AuthenticationService {
   constructor() {
-    axios.defaults.baseURL = `${MBL_API_URL}/auth`
+    axios.defaults.baseURL = `${MBL_API_URL}`
   }
 
   async findUsers() {
@@ -16,7 +16,7 @@ export class AuthenticationService {
 
   async authenticate(username: string, password: string) {
     return await axios
-      .post('token', {
+      .post('token/', {
         username: username,
         password: password,
       })

src/styles.css

@@ -0,0 +1,13 @@
+:root {
+  color-scheme: light dark;
+}
+
+* {
+    font-family: "Roboto", sans-serif;
+}
+
+body {
+  color: light-dark(#121212, #efefec);
+  background-color: light-dark(#efedea, #121212);
+  min-height: 100vh;
+}