views/login.pug

   1 extends layout
   2
   3 block stylesheets
   4     link(rel="stylesheet", href="/stylesheets/login.css")
   5
   6 block content
   7     .container#login
   8         .row
   9             .col.s12.m8.offset-m2.l6.offset-l3.xl4.offset-xl4
  10                 .card#form
  11                     form(@submit.prevent="submit")
  12                         .input-field
  13                             input#email.validate(type="email", ref="userEmail", v-model="user.email", required)
  14                             label(for="email") Email
  15                         .input-field(v-show="stage=='register'")
  16                             input#forename.validate(type="text", v-model="user.forename", :required="stage=='register'")
  17                             label(for="forename") Forename
  18                         .input-field(v-show="stage=='register'")
  19                             input#name.validate(type="text", v-model="user.name", :required="stage=='register'")
  20                             label(for="name") Name
  21                         #submit.center-align
  22                             button#submit.waves-effect.waves-light.btn(@click.prevent="submit")
  23                                 span {{ messages[stage] }}
  24                                 i.material-icons.right send
  25                         #toggle.center-align
  26                             span(v-show="stage!='login'", @click="toggleStage('login')") Login
  27                             span(v-show="stage!='register'", @click="toggleStage('register')") Register
  28                 .card#dialog.hide
  29
  30 block javascripts
  31     script(src="/javascripts/utils/dialog.js")
  32     script(src="/javascripts/utils/validation.js")
  33     script(src="/javascripts/login.js")