Guams/my_book_list_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajout d'une interface de connexion

Browse Source
This commit is contained in:
Guamss 2025-12-05 16:04:01 +01:00
parent 8bc36fe3bc
commit 122e77b67c
5 changed files with 100 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.vue
View File

@ -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>
/* Un peu de style... */
<style>
@import "styles.css";
</style>

141
src/components/Authenticate.vue
View File

@ -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 password = ref<string>('')
const username = 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>
<input @keyup.enter="submit" v-model="username" placeholder="Nom d'utilisateur" type="text" required>
<input @keyup.enter="submit" v-model="password" placeholder="Mot de passe" type="password" required>
<button @click="submit">Submit</button>
</form>
<h1>Connexion</h1>
<label>Nom d'utilisateur</label>
<input @keyup.enter="submit" v-model="username" placeholder="Alexis" type="text" required>
<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;
justify-content: center;
align-items: center;
background-color: #f1f4f5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
h1 {
text-align: center;
}
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;
h1 {
box-sizing: border-box;
padding: 20px;
}
border-radius: 10px;
}
input, button {
padding: 12px;
}
input {
margin: 40px 25px;
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;
}
}
border-radius: 0.5rem;
}
button {
font-size: 16px;
background-color: #1e90ff;
border: none;
background: #3b82ef;
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);
}
border-radius: 0.5em;
}
button:hover {
cursor: pointer;
}
</style>

1
src/main.ts
View File

@ -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')

4
src/services/authentication.service.ts
View File

@ -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,
})

13
src/styles.css Normal file
View File

@ -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;
}