174 lines
4.7 KiB
Plaintext
174 lines
4.7 KiB
Plaintext
<auth-panel>
|
|
|
|
<!-- Bouton connexion dans le header (utilisateur non connecté) -->
|
|
<div class="auth-header-btn" if={ !props.user }>
|
|
<button class="btn btn-auth" onclick={ openModal }>
|
|
<span class="auth-icon">👤</span> Connexion
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Email + bouton déconnexion dans le header (utilisateur connecté) -->
|
|
<div class="auth-user-info" if={ props.user }>
|
|
<span class="auth-email">{ props.user.email }</span>
|
|
<button class="btn btn-auth-logout" onclick={ handleLogout }>Déconnexion</button>
|
|
</div>
|
|
|
|
<!-- Modale d'authentification -->
|
|
<div class="auth-modal-overlay" if={ state.open } onclick={ closeOnOverlay }>
|
|
<div class="auth-modal">
|
|
|
|
<button class="auth-modal-close" onclick={ closeModal }>✕</button>
|
|
|
|
<h2 class="auth-modal-title">{ state.titre }</h2>
|
|
|
|
<!-- Onglets Connexion / Inscription -->
|
|
<div class="auth-tabs">
|
|
<button class={ state.classBtnLogin } onclick={ switchToLogin }>
|
|
Connexion
|
|
</button>
|
|
<button class={ state.classBtnRegister } onclick={ switchToRegister }>
|
|
Inscription
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Formulaire -->
|
|
<form onsubmit={ handleSubmit } class="auth-form">
|
|
|
|
<div class="auth-field">
|
|
<label>Adresse e-mail</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="exemple@email.com"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="auth-field">
|
|
<label>Mot de passe</label>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
placeholder="••••••••"
|
|
required
|
|
minlength="6"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Message d'erreur -->
|
|
<div class="auth-error" if={ state.error }>
|
|
{ state.error }
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary auth-submit" disabled={ state.loading }>
|
|
{ state.labelBouton }
|
|
</button>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
state: {
|
|
open: false,
|
|
mode: 'login',
|
|
loading: false,
|
|
error: null,
|
|
titre: 'Connexion',
|
|
labelBouton: 'Se connecter',
|
|
classBtnLogin: 'auth-tab active',
|
|
classBtnRegister: 'auth-tab'
|
|
},
|
|
|
|
openModal() {
|
|
this.update({ open: true, error: null })
|
|
},
|
|
|
|
closeModal() {
|
|
this.update({ open: false, error: null })
|
|
},
|
|
|
|
closeOnOverlay(e) {
|
|
if (e.target === e.currentTarget) {
|
|
this.closeModal()
|
|
}
|
|
},
|
|
|
|
switchToLogin() {
|
|
this.update({
|
|
mode: 'login',
|
|
error: null,
|
|
titre: 'Connexion',
|
|
labelBouton: 'Se connecter',
|
|
classBtnLogin: 'auth-tab active',
|
|
classBtnRegister: 'auth-tab'
|
|
})
|
|
},
|
|
|
|
switchToRegister() {
|
|
this.update({
|
|
mode: 'register',
|
|
error: null,
|
|
titre: 'Créer un compte',
|
|
labelBouton: 'Créer le compte',
|
|
classBtnLogin: 'auth-tab',
|
|
classBtnRegister: 'auth-tab active'
|
|
})
|
|
},
|
|
|
|
async handleSubmit(e) {
|
|
e.preventDefault()
|
|
|
|
var email = e.target.email.value.trim()
|
|
var password = e.target.password.value
|
|
var services = window.firebaseServices
|
|
|
|
this.update({ loading: true, error: null })
|
|
|
|
try {
|
|
|
|
if (this.state.mode === 'register') {
|
|
await services.createAccount(email, password)
|
|
} else {
|
|
await services.login(email, password)
|
|
}
|
|
|
|
this.update({ open: false, loading: false })
|
|
this.props.onauth && this.props.onauth()
|
|
|
|
} catch (err) {
|
|
|
|
var message = 'Une erreur est survenue.'
|
|
|
|
if (err.code === 'auth/email-already-in-use') {
|
|
message = 'Cet e-mail est déjà utilisé.'
|
|
} else if (err.code === 'auth/invalid-email') {
|
|
message = 'Adresse e-mail invalide.'
|
|
} else if (err.code === 'auth/wrong-password' || err.code === 'auth/invalid-credential') {
|
|
message = 'E-mail ou mot de passe incorrect.'
|
|
} else if (err.code === 'auth/weak-password') {
|
|
message = 'Le mot de passe doit faire au moins 6 caractères.'
|
|
} else if (err.code === 'auth/user-not-found') {
|
|
message = 'Aucun compte trouvé avec cet e-mail.'
|
|
}
|
|
|
|
this.update({ loading: false, error: message })
|
|
}
|
|
},
|
|
|
|
async handleLogout() {
|
|
try {
|
|
await window.firebaseServices.logout()
|
|
this.props.onlogout && this.props.onlogout()
|
|
} catch (err) {
|
|
console.error('Erreur déconnexion :', err)
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
</auth-panel>
|