From 514f56db188a72f3bf7ec942f8739d172f42edcc Mon Sep 17 00:00:00 2001
From: Guillaume FAUVET <g.fauvet.perso@gmail.com>
Date: Thu, 7 Dec 2017 23:32:23 +0100
Subject: [PATCH] add: public_html.css.signup-form (css for sign up form
 authentication) add: view.vue.signup-form (vue for sign up form
 authentication)

---
 public_html/css/signup-form.css | 109 ++++++++++++++++++++++++++++++++
 view/vue/signup-form.vue        |  81 ++++++++++++++++++++++++
 2 files changed, 190 insertions(+)
 create mode 100644 public_html/css/signup-form.css
 create mode 100644 view/vue/signup-form.vue

diff --git a/public_html/css/signup-form.css b/public_html/css/signup-form.css
new file mode 100644
index 0000000..f6e01ac
--- /dev/null
+++ b/public_html/css/signup-form.css
@@ -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;
+}
\ No newline at end of file
diff --git a/view/vue/signup-form.vue b/view/vue/signup-form.vue
new file mode 100644
index 0000000..5ff120e
--- /dev/null
+++ b/view/vue/signup-form.vue
@@ -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>
\ No newline at end of file