main/view/vue/signup-form.vue

<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>
                <p @click='redirect_login' id='membre'>Déjà membre ? Connectez-vous !</p>
            </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 {
                        this.infobox._display('Inscription terminée ! Connexion en cours ...', 'info', 3000);

                        let request = {
                            username: this.username_val,
                            password: this.password_val
                        };

                        api.call("POST user/login", request, function (response) {
                            document.location = '';
                        });
                    }
                }.bind(this));
            },
            redirect_login() {
                this.gstore.signupform = false;
                this.gstore.loginform = true;
            }
        }
    }
</script>