Adding forms to login, signup and lost password
This commit is contained in:
benoit.kezel@gmail.com
parent
28e97fb523
commit
dc15279deb
8 changed files with 784 additions and 633 deletions
1250
package-lock.json
generated
1250
package-lock.json
generated
File diff suppressed because it is too large
Load diff
1
public/images/login.svg
Normal file
1
public/images/login.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -1,8 +1,51 @@
|
|||
body {
|
||||
padding: 50px;
|
||||
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; }
|
||||
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
|
||||
color: white;
|
||||
background-color: #101010;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
a {
|
||||
color: #00B7FF; }
|
||||
h2 {
|
||||
color: #e0e0e0;
|
||||
margin-top: 0;
|
||||
text-align: center; }
|
||||
|
||||
#signin, #signup, #forgotPsw {
|
||||
padding: 4vw; }
|
||||
|
||||
.signinup {
|
||||
margin-top: 15vh;
|
||||
background-color: #2a2a2a;
|
||||
border-radius: 2vw; }
|
||||
.signinup img {
|
||||
width: 20%;
|
||||
display: block;
|
||||
margin: auto; }
|
||||
.signinup form input {
|
||||
margin-bottom: 4vh;
|
||||
font-size: 25px; }
|
||||
.signinup form input:focus {
|
||||
border: 1px solid #00c0ff; }
|
||||
.signinup form input[type="submit"] {
|
||||
padding: 1vw;
|
||||
border-radius: 2vw;
|
||||
background-color: #0099ff;
|
||||
color: white;
|
||||
border: none;
|
||||
width: 40%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
font-size: 35px;
|
||||
border: 2px solid #2C3531;
|
||||
cursor: pointer;
|
||||
transition-duration: 0.3s; }
|
||||
.signinup form input[type="submit"]:hover {
|
||||
color: #34eba1;
|
||||
background-color: white;
|
||||
border: 2px solid #34eba1; }
|
||||
|
||||
i {
|
||||
color: #00c0ff; }
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
|
|
@ -5,5 +5,5 @@
|
|||
"style.sass"
|
||||
],
|
||||
"names": [],
|
||||
"mappings": "AAAA,AAAA,IAAI,CAAC;EACH,OAAO,EAAE,IAAI;EACb,IAAI,EAAE,kDAAkD,GAAG;;AAE7D,AAAA,CAAC,CAAC;EACA,KAAK,EAAE,OAAO,GAAG"
|
||||
"mappings": "AAQA,AAAA,IAAI,CAAC;EACH,OAAO,EAAE,IAAI;EACb,IAAI,EAAE,kDAAkD;EACxD,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAVV,OAAO;EAWb,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC,GAAG;;AAGf,AAAA,EAAE,CAAC;EACD,KAAK,EAdC,OAAO;EAeb,UAAU,EAAE,CAAC;EACb,UAAU,EAAE,MAAM,GAAG;;AAEvB,AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC;EAC3B,OAAO,EAAE,GAAG,GAAG;;AAEjB,AAAA,SAAS,CAAC;EACR,UAAU,EAAE,IAAI;EAChB,gBAAgB,EAxBV,OAAO;EAyBb,aAAa,EAAE,GAAG,GA4BkB;EA/BtC,AAIE,SAJO,CAIP,GAAG,CAAC;IACF,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,IAAI,GAAG;EAPnB,AAUI,SAVK,CASP,IAAI,CACF,KAAK,CAAC;IACJ,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,IAAI,GAAG;EAZxB,AAaI,SAbK,CASP,IAAI,CAIF,KAAK,AAAA,MAAM,CAAC;IACV,MAAM,EAAE,GAAG,CAAC,KAAK,CAvCb,OAAO,GAuCkB;EAdnC,AAeI,SAfK,CASP,IAAI,CAMF,KAAK,CAAA,AAAA,IAAC,CAAK,QAAQ,AAAb,EAAe;IACnB,OAAO,EAAE,GAAG;IACZ,aAAa,EAAE,GAAG;IAClB,gBAAgB,EA1CV,OAAO;IA2Cb,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,IAAI;IACZ,SAAS,EAAE,IAAI;IACf,MAAM,EAAE,iBAAiB;IACzB,MAAM,EAAE,OAAO;IACf,mBAAmB,EAAE,IAAI,GAAG;EA3BlC,AA4BI,SA5BK,CASP,IAAI,CAmBF,KAAK,CAAA,AAAA,IAAC,CAAK,QAAQ,AAAb,CAAc,MAAM,CAAC;IACzB,KAAK,EAAE,OAAO;IACd,gBAAgB,EAAE,KAAK;IACvB,MAAM,EAAE,iBAAiB,GAAG;;AAElC,AAAA,CAAC,CAAC;EACA,KAAK,EA3DG,OAAO,GA2DG"
|
||||
}
|
||||
|
|
@ -1,6 +1,60 @@
|
|||
$primary: #00c0ff;
|
||||
$secondary: #0099ff;
|
||||
$dark1: #101010;
|
||||
$dark2: #2a2a2a;
|
||||
$light: #e0e0e0;
|
||||
$light2: #C5C6C7;
|
||||
|
||||
|
||||
body
|
||||
padding: 50px
|
||||
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
|
||||
color: white;
|
||||
background-color: $dark1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
a
|
||||
color: #00B7FF
|
||||
|
||||
h2
|
||||
color: $light;
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
|
||||
#signin, #signup, #forgotPsw
|
||||
padding: 4vw;
|
||||
|
||||
.signinup
|
||||
margin-top: 15vh;
|
||||
background-color: $dark2;
|
||||
border-radius: 2vw;
|
||||
img
|
||||
width: 20%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
|
||||
form
|
||||
input
|
||||
margin-bottom: 4vh;
|
||||
font-size: 25px;
|
||||
input:focus
|
||||
border: 1px solid $primary;
|
||||
input[type="submit"]
|
||||
padding: 1vw;
|
||||
border-radius: 2vw;
|
||||
background-color: $secondary;
|
||||
color: white;
|
||||
border: none;
|
||||
width: 40%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
font-size: 35px;
|
||||
border: 2px solid #2C3531;
|
||||
cursor: pointer;
|
||||
transition-duration: 0.3s
|
||||
input[type="submit"]:hover
|
||||
color: #34eba1;
|
||||
background-color: white;
|
||||
border: 2px solid #34eba1;
|
||||
|
||||
i
|
||||
color: $primary;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,52 @@
|
|||
extends layout
|
||||
|
||||
block content
|
||||
h1= title
|
||||
p Welcome to #{title}
|
||||
div(class='row main-form')
|
||||
div(class='col s12 m8 offset-m2 signinup z-depth-5' id="signin")
|
||||
h2 Welcome back
|
||||
form
|
||||
div(class="input-field col s12")
|
||||
i(class="material-icons prefix") mail
|
||||
input(type="text" id="mail-input" class="autocomplete")
|
||||
label(for="mail-input") Email
|
||||
|
||||
div(class="input-field col s12")
|
||||
i(class="material-icons prefix") lock
|
||||
input(type="password" id="password-input" class="autocomplete")
|
||||
label(for="password-input") Password
|
||||
|
||||
input(type='submit' value='Login')
|
||||
|
||||
div(class='col s12 m8 offset-m2 signinup z-depth-5' id="signup")
|
||||
h2 Welcome
|
||||
form
|
||||
div(class="input-field col s6")
|
||||
i(class="material-icons prefix") portrait
|
||||
input(type="text" id="firstname-input" class="autocomplete")
|
||||
label(for="firstname-input") First Name
|
||||
|
||||
div(class="input-field col s6")
|
||||
input(type="text" id="lastname-input" class="autocomplete")
|
||||
label(for="lastname-input") Last Name
|
||||
|
||||
div(class="input-field col s12")
|
||||
i(class="material-icons prefix") mail
|
||||
input(type="text" id="mailreg-input" class="autocomplete")
|
||||
label(for="mailreg-input") Email
|
||||
|
||||
div(class="input-field col s12")
|
||||
i(class="material-icons prefix") lock
|
||||
input(type="password" id="passwordreg-input" class="autocomplete")
|
||||
label(for="passwordreg-input") Password
|
||||
|
||||
input(type='submit' value='Register')
|
||||
|
||||
div(class='col s12 m8 offset-m2 signinup z-depth-5' id="forgotPsw")
|
||||
h2 Forgot password
|
||||
form
|
||||
div(class="input-field col s12")
|
||||
i(class="material-icons prefix") mail
|
||||
input(type="text" id="mailforgot-input" class="autocomplete")
|
||||
label(for="mailforgot-input") Email
|
||||
|
||||
input(type='submit' value='Send email')
|
||||
|
|
@ -2,6 +2,9 @@ doctype html
|
|||
html
|
||||
head
|
||||
title= title
|
||||
link(href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet")
|
||||
link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css")
|
||||
link(rel="stylesheet", href="/stylesheets/style.css")
|
||||
body
|
||||
block content
|
||||
script(src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js")
|
||||
3
views/signinup.pug
Normal file
3
views/signinup.pug
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
extends layout
|
||||
|
||||
block content
|
||||
Reference in a new issue