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