Init
This commit is contained in:
@@ -0,0 +1,148 @@
|
||||
<script lang="ts" setup>
|
||||
import {ref, watch} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
import {apiFetch} from '@/plugins/api'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const confirmPassword = ref('')
|
||||
const hasInitToken = ref(false)
|
||||
const initToken = ref('')
|
||||
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
// Réinitialiser le champ si on décoche la case
|
||||
watch(hasInitToken, (val) => {
|
||||
if (!val) initToken.value = ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
required: (value: string) => !!value || 'Ce champ est requis.',
|
||||
min: (value: string) => (value && value.length >= 8) || 'Minimum 8 caractères requis.',
|
||||
match: (value: string) => value === password.value || 'Les mots de passe ne correspondent pas.',
|
||||
}
|
||||
|
||||
async function handleRegister() {
|
||||
if (password.value !== confirmPassword.value) {
|
||||
error.value = 'Les mots de passe ne correspondent pas.'
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
|
||||
// Alignement strict avec le DTO Rust JoinRequest
|
||||
const body: any = {
|
||||
username: username.value,
|
||||
password: password.value,
|
||||
password_valid: confirmPassword.value, // Requis pour le validateur 'must_match'
|
||||
}
|
||||
|
||||
// Alignement avec le champ 'superuser_token' du DTO
|
||||
if (hasInitToken.value && initToken.value.trim() !== '') {
|
||||
body.superuser_token = initToken.value.trim()
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await apiFetch('/join', {
|
||||
method: 'POST',
|
||||
body
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errData = await response.json().catch(() => ({message: 'Erreur lors de l\'inscription'}))
|
||||
throw new Error(errData.message || 'Échec de l\'inscription')
|
||||
}
|
||||
|
||||
router.push('/login')
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : 'Une erreur est survenue'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container class="fill-height" fluid>
|
||||
<v-row align="center" justify="center">
|
||||
<v-col cols="12" md="4" sm="8">
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar color="secondary" dark flat>
|
||||
<v-toolbar-title>Inscription</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-form @submit.prevent="handleRegister">
|
||||
<v-text-field
|
||||
v-model="username"
|
||||
:rules="[rules.required]"
|
||||
label="Nom d'utilisateur"
|
||||
prepend-icon="mdi-account"
|
||||
required
|
||||
type="text"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
:rules="[rules.required, rules.min]"
|
||||
label="Mot de passe"
|
||||
prepend-icon="mdi-lock"
|
||||
required
|
||||
type="password"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="confirmPassword"
|
||||
:rules="[rules.required, rules.match]"
|
||||
label="Confirmer le mot de passe"
|
||||
prepend-icon="mdi-lock-check"
|
||||
required
|
||||
type="password"
|
||||
/>
|
||||
|
||||
<v-checkbox
|
||||
v-model="hasInitToken"
|
||||
class="mb-2"
|
||||
color="secondary"
|
||||
density="compact"
|
||||
hide-details
|
||||
label="J'ai un token d'initialisation"
|
||||
/>
|
||||
|
||||
<v-expand-transition>
|
||||
<v-text-field
|
||||
v-if="hasInitToken"
|
||||
v-model="initToken"
|
||||
label="Token"
|
||||
placeholder="Entrez votre token ici"
|
||||
prepend-icon="mdi-key"
|
||||
type="text"
|
||||
/>
|
||||
</v-expand-transition>
|
||||
|
||||
<v-alert v-if="error" class="mt-3" density="compact" type="error">
|
||||
{{ error }}
|
||||
</v-alert>
|
||||
|
||||
<v-card-actions class="mt-4">
|
||||
<v-btn
|
||||
:loading="loading"
|
||||
block
|
||||
color="secondary"
|
||||
size="large"
|
||||
type="submit"
|
||||
>
|
||||
S'inscrire
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
<div class="text-center mt-2">
|
||||
<router-link to="/login">Déjà un compte ? Connectez-vous</router-link>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
@@ -1,11 +1,100 @@
|
||||
<script lang="ts" setup>
|
||||
import {ref} from 'vue'
|
||||
import {useAuthStore} from '@/stores/auth'
|
||||
import {useRouter} from 'vue-router'
|
||||
import {apiFetch} from "@/plugins/api.ts";
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const router = useRouter()
|
||||
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const rules = {
|
||||
required: (value: string) => !!value || 'Ce champ est requis.',
|
||||
}
|
||||
|
||||
async function handleLogin() {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
|
||||
try {
|
||||
// Appel direct via votre helper
|
||||
const response = await apiFetch('/auth/login', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
username: username.value,
|
||||
password: password.value
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Identifiants invalides')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
await authStore.setToken(data.token)
|
||||
await router.push('/')
|
||||
} catch (err) {
|
||||
error.value = 'Erreur de connexion'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<v-container class="fill-height" fluid>
|
||||
<v-row align="center" justify="center">
|
||||
<v-col cols="12" md="4" sm="8">
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar color="primary" dark flat>
|
||||
<v-toolbar-title>Connexion</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-form @submit.prevent="handleLogin">
|
||||
<v-text-field
|
||||
v-model="username"
|
||||
:rules="[rules.required]"
|
||||
label="Nom d'utilisateur"
|
||||
name="username"
|
||||
prepend-icon="mdi-account"
|
||||
required
|
||||
type="text"
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
:rules="[rules.required]"
|
||||
label="Mot de passe"
|
||||
name="password"
|
||||
prepend-icon="mdi-lock"
|
||||
required
|
||||
type="password"
|
||||
/>
|
||||
<v-alert v-if="error" class="mt-3" density="compact" type="error">
|
||||
{{ error }}
|
||||
</v-alert>
|
||||
<v-card-actions class="mt-4">
|
||||
<v-spacer/>
|
||||
<v-btn
|
||||
:loading="loading"
|
||||
block
|
||||
color="primary"
|
||||
size="large"
|
||||
type="submit"
|
||||
>
|
||||
Se connecter
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
<div class="text-center mt-4">
|
||||
<router-link to="/join">Pas encore de compte ? Rejoindre</router-link>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
Reference in New Issue
Block a user