main/view/vue/signup-form.vue

81 lines
3.0 KiB
Vue
Raw Normal View History

<template>
<div id='SIGNUP-FORM' :class='gstore.signupform ? "active" : ""'>
<!-- Header -->
<div class='head'>
<span>Création d'un compte</span>
<i></i>
</div>
<!-- Body -->
<div class='body'>
<form @submit.prevent='create_account'>
<label for='username'>Nom d'utilisateur</label>
<input :class='err_username ? "err" : ""' v-model='username_val' type='text' id='username'>
<label for='mail'>Adresse mail</label>
<input :class='err_mail ? "err" : ""' v-model='mail_val' type='email' id='mail'>
<label for='password'>Mot de passe</label>
<input v-model='password_val' type='password' id='password'>
<p v-if='err_username || err_mail || err_unknow' id='msg-err'>{{ err_message }}</p>
<button id='btn-create-account'>Créer mon compte</button>
</form>
</div>
</div>
</template>
<script>
export default {
name: 'SIGNUP_FORM',
data(){
return {
gstore: gstore.data,
username_val: '',
mail_val: '',
password_val: '',
err_username: false,
err_mail: false,
err_unknow: false,
err_message: ''
};
},
methods: {
create_account() {
let request = {
username: this.username_val,
mail: this.mail_val,
password: this.password_val
};
api.call("POST user/signup", request, function (response) {
/* (1) Check if is there an error and display theme that goes with */
console.log(response);
if (response.error == 17) {
this.err_username = false;
this.err_mail = true;
this.err_unknow = false;
this.err_message = 'Le mail est invalide';
}
else if (response.error == 29) {
this.err_username = true;
this.err_mail = true;
this.err_unknow = false;
this.err_message = 'Le nom d\'utilisateur ou le mail est déjà pris';
}
else if (!response.registered) {
this.err_username = false;
this.err_mail = false;
this.err_unknow = true;
this.err_message = 'Impossible de créer le compte pour le moment, veuillez réessayer plus tard';
}
/* (2) Close the sign up form authentication */
else {
document.location = '';
}
}.bind(this));
}
}
}
</script>