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