From 0406689523e2e640b3cbc7ecb596232ae8943379 Mon Sep 17 00:00:00 2001
From: Guillaume FAUVET <g.fauvet.perso@gmail.com>
Date: Thu, 7 Dec 2017 22:22:04 +0100
Subject: [PATCH] add: public_html.css.login-form (css for user authentication)
 add: public_html.image.header.notif.login (icon for user authentication for
 header) add: view.vue.login-form (vue for user authentication)

---
 public_html/css/login-form.css           | 108 +++++++++++++++++++++++
 public_html/image/header/notif/login.svg |  49 ++++++++++
 view/vue/login-form.vue                  |  60 +++++++++++++
 3 files changed, 217 insertions(+)
 create mode 100644 public_html/css/login-form.css
 create mode 100644 public_html/image/header/notif/login.svg
 create mode 100644 view/vue/login-form.vue

diff --git a/public_html/css/login-form.css b/public_html/css/login-form.css
new file mode 100644
index 0000000..3a1c16f
--- /dev/null
+++ b/public_html/css/login-form.css
@@ -0,0 +1,108 @@
+/* Header */
+#LOGIN-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 */
+#LOGIN-FORM > .body{
+	display: block;
+	position: relative;
+		width: 100%;
+		min-height: 2em;
+		height: auto;
+
+	border-radius: 0 0 3px 3px;
+
+	overflow: auto;
+
+}
+
+/* Items */
+#LOGIN-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;
+}
+
+#LOGIN-FORM > .body > form * {
+    text-align: center;
+}
+
+#LOGIN-FORM > .body > form > *{
+	display: block;
+}
+
+#LOGIN-FORM > .body > form > input{
+	padding: 5px;
+    margin: 5px auto 10px auto;
+    border-color: #777777;
+}
+
+#LOGIN-FORM > .body > form > input.err{
+	border-color: #ff0000;
+}
+
+#LOGIN-FORM > .body > form > #btn-connection{
+	color: #21bb89;
+    background-color: #fff;
+    border-color: #21bb89;
+    border-width: 2px;
+
+    padding: 6px;
+    margin: 8px auto 0 auto;
+
+    font-weight: bold;
+	cursor: pointer;
+
+    transition: background-color .2s ease-in-out,
+                color            .2s ease-in-out;
+}
+
+#LOGIN-FORM > .body > form > #btn-connection:hover{
+    color: #fff;
+    background-color: #21bb89;
+}
+
+
+
+#LOGIN-FORM > .body > form > #msg-err{
+    color: #ff0000;
+}
+
+#LOGIN-FORM > .body > form,
+#LOGIN-FORM > .body > form > input,
+#LOGIN-FORM > .body > form > button {
+	font-family: inherit;
+}
+
+#LOGIN-FORM > .body > form > input,
+#LOGIN-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/public_html/image/header/notif/login.svg b/public_html/image/header/notif/login.svg
new file mode 100644
index 0000000..88b7dc6
--- /dev/null
+++ b/public_html/image/header/notif/login.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   enable-background="new 0 0 32 32"
+   height="27.500999"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 25.530701 27.500999"
+   width="25.530701"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="login.svg"><metadata
+     id="metadata3435"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs3433" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1855"
+     inkscape:window-height="1056"
+     id="namedview3431"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="14.359375"
+     inkscape:cx="0.48565475"
+     inkscape:cy="12.727735"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><path
+     inkscape:connector-curvature="0"
+     id="fill-edit"
+     d="M 12.724609,0 C 9.2036094,0 6.3476562,3.3760156 6.3476562,7.5410156 c 0,4.1650004 2.9096407,9.2031254 6.4316408,9.2031254 3.521,0 6.320312,-5.039125 6.320312,-9.2031254 0,-4.165 -2.854,-7.5410156 -6.375,-7.5410156 z m 6.458985,13.169922 c -1.209,2.763 -3.847297,5.072266 -6.404297,5.072266 -3.1220001,0 -5.3886564,-2.282922 -6.5976564,-5.044922 -7.03099997,3.642 -6.14648435,12.859375 -6.14648435,12.859375 0,1.262 0.99410935,1.445312 2.16210935,1.445312 l 10.5820314,0 10.564453,0 c 1.17,0 2.167969,-0.184312 2.167969,-1.445312 0.001,0 0.701875,-9.243719 -6.328125,-12.886719 z"
+     style="fill:#515151" /></svg>
\ No newline at end of file
diff --git a/view/vue/login-form.vue b/view/vue/login-form.vue
new file mode 100644
index 0000000..a7f94bd
--- /dev/null
+++ b/view/vue/login-form.vue
@@ -0,0 +1,60 @@
+<template>
+
+    <div id='LOGIN-FORM' :class='gstore.loginform ? "active" : ""'>
+
+        <!-- Header -->
+        <div class='head'>
+            <span>Connexion au compte</span>
+            <i></i>
+        </div>
+
+        <!-- Body -->
+        <div class='body'>
+            <form @submit.prevent='authentification'>
+                <label for='username'>Nom d'utilisateur</label>
+                <input :class='err_connection ? "err" : ""' v-model='username_val' type='text' id='username'>
+                <label for='password'>Mot de passe</label>
+                <input :class='err_connection ? "err" : ""' v-model='password_val' type='password' id='password'>
+                <p v-if='err_connection' id='msg-err'>Identifiant ou mot de passe incorrect</p>
+                <button id='btn-connexion'>Se connecter</button>
+            </form>
+        </div>
+
+    </div>
+
+</template>
+
+<script>
+    export default {
+        name: 'LOGIN_FORM',
+        data(){
+            return {
+                gstore: gstore.data,
+                username_val: '',
+                password_val: '',
+                err_connection: false
+            };
+        },
+        methods: {
+            authentification() {
+                let request = {
+                    username: this.username_val,
+                    password: this.password_val
+                };
+
+                api.call("POST user/login", request, function (response) {
+                    /* (1) Check if is there an error and display theme that goes with */
+                    console.log(response);
+
+                    if (response.error != 0 || !response.connected) {
+                        this.err_connection = true;
+                    }
+                    /* (2) Close the login form authentication */
+                    else {
+                        document.location = '';
+                    }
+                }.bind(this));
+            }
+        }
+    }
+</script>
\ No newline at end of file