add: public_html.css.signup-form (css for sign up form authentication)
add: view.vue.signup-form (vue for sign up form authentication)
This commit is contained in:
Guillaume FAUVET
parent
11895fb875
commit
514f56db18
|
|
@ -0,0 +1,109 @@
|
|||
/* Header */
|
||||
#SIGNUP-FORM > .head{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
padding: .7em 0;
|
||||
|
||||
border-radius: 3px 3px 0 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
text-align: center;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
#SIGNUP-FORM > .body{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
height: auto;
|
||||
|
||||
border-radius: 0 0 3px 3px;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
|
||||
/* Items */
|
||||
#SIGNUP-FORM > .body > form{
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
padding: .8em 1em;
|
||||
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
color: #555;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition: background-color .2s ease-in-out,
|
||||
color .2s ease-in-out;
|
||||
}
|
||||
|
||||
#SIGNUP-FORM > .body > form * {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#SIGNUP-FORM > .body > form > *{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#SIGNUP-FORM > .body > form > input{
|
||||
padding: 5px;
|
||||
margin: 5px auto 10px auto;
|
||||
border-color: #777777;
|
||||
}
|
||||
|
||||
#SIGNUP-FORM > .body > form > input.err{
|
||||
border-color: #ff0000;
|
||||
}
|
||||
|
||||
#SIGNUP-FORM > .body > form > #btn-create-account{
|
||||
color: #21bb89;
|
||||
background-color: #fff;
|
||||
border-color: #21bb89;
|
||||
border-width: 2px;
|
||||
|
||||
padding: 6px;
|
||||
margin: 15px auto 0 auto;
|
||||
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
|
||||
transition: background-color .2s ease-in-out,
|
||||
color .2s ease-in-out;
|
||||
}
|
||||
|
||||
#SIGNUP-FORM > .body > form > #btn-create-account:hover{
|
||||
color: #fff;
|
||||
background-color: #21bb89;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#SIGNUP-FORM > .body > form > #msg-err{
|
||||
color: #ff0000;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
#SIGNUP-FORM > .body > form,
|
||||
#SIGNUP-FORM > .body > form > input,
|
||||
#SIGNUP-FORM > .body > form > button {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
#SIGNUP-FORM > .body > form > input,
|
||||
#SIGNUP-FORM > .body > form > button {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<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>
|
||||
Loading…
Reference in New Issue