ported [vue.noauth.login] into [vue.noauth.register], same for [page.noauth.register]

This commit is contained in:
xdrm-brackets 2018-03-25 14:49:59 +02:00
parent ff62d39bd5
commit bb0bfb5065
3 changed files with 160 additions and 13 deletions

View File

@ -131,9 +131,4 @@ gs.get.login.func.login = function(){
http_token: encodeURI(`${username}:${password}`) http_token: encodeURI(`${username}:${password}`)
}); });
}.bind(gs.get.login); }.bind(gs.get.login);

View File

@ -1 +1,153 @@
/* (1) Initialise
---------------------------------------------------------*/
/* (1) Default data structure */
gs.set('register', {
// fields
mail: {
model: '',
timeout: '',
error: '',
validate: (_mail) => /^[\w\.]+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/i.test(_mail)
},
username: {
model: '',
timeout: '',
error: '',
validate: (_username) => /^[a-z0-9_-]{3,20}$/i.test(_username)
},
password: {
model: '',
timeout: '',
error: '',
validate: (_password) => /^[^<>\/\\]{8,50}$/.test(_password)
},
// functions
func: {
print_err(_field, _message, _duration){},
login(){},
forgot_pass(){}
}
});
/* (2) Manage error messages
*
* @_field<String> Field to print errors to
* @_message<String> Error message to print
* @_duration<int> Durations (sec) for the message to be displayed
*
---------------------------------------------------------*/
gs.get.register.func.print_err = function(_field, _message='error', _duration=null){
/* (1) Fail: invalid _field */
if( typeof _field !== 'string' || this[_field] == null )
return false;
/* (2) Fail: invalid _message */
if( typeof _message !== 'string' )
return false;
/* (3) Fail: invalid _message */
if( isNaN(_duration) )
return false;
/* (4) Clear timeout if exists */
!isNaN(this[_field].err_to) && clearTimeout(this[_field].err_to);
/* (5) Display error */
this[_field].error = _message;
/* (6) No timeout if _duration if null */
if( _duration === null )
return true;
/* (7) Setup Timeout */
this[_field].err_to = setTimeout( function(){
this.error = '';
}.bind(this[_field]), _duration*1000);
return true;
}.bind(gs.get.register);
/* (3) Login attempt
*
---------------------------------------------------------*/
gs.get.register.func.register = function(){
/* (1) Cache fields' values */
let mail = this.mail.model;
let username = this.username.model;
let password = this.password.model;
/* (2) Manage errors */
let errors = false;
// mail error
if( !this.mail.validate(mail) ){
errors = true;
this.func.print_err('mail', 'This field is required');
}else
this.func.print_err('mail', '', 0);
// username error
if( !this.username.validate(username) ){
errors = true;
this.func.print_err('username', 'This field is required');
}else
this.func.print_err('username', '', 0);
// password error
if( !this.password.validate(password) ){
errors = true;
this.func.print_err('password', 'This field is required');
}else
this.func.print_err('password', '', 0);
// if errors -> fail
if( errors )
return false;
/* (3) Create API instance */
let api = new xhrcd('douscord-srv.xdrm.io');
/* (4) API bindings */
api.onreceive = function(_response){
// manage error
if( _response.error !== 0 || _response.token == null )
return gs.get.router.push('register');
// manage login
auth.token = _response.token;
document.location = '';
};
api.onclose = function(){ return gs.get.router.push('register'); };
/* (5) API call */
api.send({
path: 'POST /user',
form: {
username: username,
mail: mail,
password: password
}
});
}.bind(gs.get.register);

View File

@ -6,14 +6,14 @@
<div class='form'> <div class='form'>
<h3>Create an account</h3> <h3>Create an account</h3>
<label for='email'>EMAIL</label> <label for='mail' :class='gs.register.mail.error.length<1?``:`err`'>EMAIL <span>{{ gs.register.mail.error }}</span></label>
<input type='email' name='email' class='flat' autofocus> <input type='email' name='mail' v-model='gs.register.mail.model' class='flat' autofocus>
<label for='username'>USERNAME</label> <label for='username' :class='gs.register.username.error.length<1?``:`err`'>USERNAME <span>{{ gs.register.username.error }}</span></label>
<input type='text' name='username' class='flat'> <input type='text' name='username' v-model='gs.register.username.model' class='flat'>
<label for='password'>PASSWORD</label> <label for='password' :class='gs.register.password.error.length<1?``:`err`'>PASSWORD <span>{{ gs.register.password.error }}</span></label>
<input type='password' name='password' class='flat'> <input type='password' name='password' v-model='gs.register.password.model' class='flat'>
<button class='submit'>Continue</button> <button class='submit' @click='gs.register.func.register()'>Continue</button>
<span>By registering, you agree to Discord's <a href='https://discordapp.com/terms'>Terms of Service</a> and <a href='https://discordapp.com/privacy'>Privacy Policy</a></span> <span>By registering, you agree to Discord's <a href='https://discordapp.com/terms'>Terms of Service</a> and <a href='https://discordapp.com/privacy'>Privacy Policy</a></span>
<hr> <hr>
<span>Already have an account? <router-link to='login'>Login</router-link></span> <span>Already have an account? <router-link to='login'>Login</router-link></span>
@ -24,7 +24,7 @@
</template><script> </template><script>
export default { export default {
name: 'login-', name: 'register-',
data(){ return { gs: gs.get }; } data(){ return { gs: gs.get }; }