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

webpack/page/noauth/login.js

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

webpack/page/noauth/register.js

@@ -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);

webpack/vue/noauth/register.vue

@@ -6,14 +6,14 @@
 
 		<div class='form'>
 			<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>
 			<hr>
 			<span>Already have an account? <router-link to='login'>Login</router-link></span>
@@ -24,7 +24,7 @@
 </template><script>
 export default {
 
-	name: 'login-',
+	name: 'register-',
 
 	data(){ return { gs: gs.get }; }