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)
This commit is contained in:
Guillaume FAUVET
SeekDaSky
parent
d5078b9bc9
commit
35129d49f0
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue