AWS Elastic Beanstalk+Node.js+Express+Passport+MySQLでアカウント管理（その３）

前回からの続き。

login_menu.jadeを書き忘れていたので追加：２０１３年５月５日

そろそろ、ビューのほうも作っていきます。
言い忘れていましたが、Twitter Bootstrapを使用しますので
http://twitter.github.io/bootstrap/からダウンロードして、
bootstrap.min.jsをpublic/javascriptsフォルダに
bootstrap.min.cssをpublic/stylesheetsフォルダに
それぞれいれておいてください。
jQueryも使用しますが、そちらはCDNにリンクを貼っておきますので、
ダウンロードは必要ありません。

まず、基本になるレイアウトを作成します。

views/layout.jade

doctype 5
html
  head
    meta(charset='utf-8')
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
    script(src="http://code.jquery.com/jquery-1.9.1.min.js", type="text/javascript")
    script(src="/javascripts/bootstrap.min.js", type="text/javascript")
  body
    include header

    div(class="container")
      block content

views/header.jade

div.navbar.navbar-fixed-top
    div.navbar-inner
        div.container
            a.btn.btn-navbar(data-toggle="collapse", data-target=".nav-collapse")
                span.icon-bar
                span.icon-bar
                span.icon-bar
            a.brand(href="#")
                | Home
            div.nav-collapse.collapse
                ul.nav.pull-right
                  if user != null
                    ul.nav
                      li
                        a(href="logout") Log out
                  else
                    ul.nav
                      a.btn(href="signup") Sign up
                    include login_menu

views/login_menu.jade

ul.nav
  li
    if user != null
      a(href="logout")
        | Logout
    else
      a(href="login")
        | Login

ここまでが、基本です。
ブラウザで見た場合、上部にナビバーが表示されて、
サインアップとログインボタンが表示されます。

必要となるのは、ホーム画面・サインアップ画面・ログイン画面ですので、
順に作成していきます。

最初は、ホーム画面です。

views/index.jade

extends layout

block content
  div.container
    if user != null
      h2 Hello, #{user.username}.
    else
      h2 Welcome to #{title}!
      h3 Please 
        a(href="/login") log in,
        div or
          a(href="/signup")  sign up.

次に、ログイン画面。

views/login.jade

extends layout

block content
  div.container
    if message != null
      div
        h3
          font(color='#ff0000') #{message}

    form.form-horizontal(action="/login", method="post")
      div.control-group
        label.control-label Username:
        div.controls
          input(type="text", name="username", id="username")
      div.control-group
        label.control-label Password:
        div.controls
          input(type="password", name="password", id="password")
      div
        div.controls
          input.btn(type="submit", value="Log in")

最後に、サインアップ画面。
入力値のチェックもしてますので、ちょっと長くなっています。

views/signup.jade

extends layout

block content
  script(src="/javascripts/des.js", type="text/javascript")

  div.container
    div(id="ErrorMessage")

    form.form-horizontal(action="/signup", method="post", name="form1", onSubmit="return checkForm()")
      div.control-group(id="username-group")
        label.control-label Username:
        div.controls
          input(type="text", name="username", id="username")
      div.control-group(id="password-group")
        label.control-label Password:
        div.controls
          input(type="password", name="password", id="password")
      div.control-group(id="email-group")
        label.control-label E-Mail:
        div.controls
          input(type="text", name="email", id="email")
      div.control-group
        label.control-label Sex:
        div.controls
          label.radio
            input(type="radio", name="sex", value="male", id="radio_male")
            label Male
          label.radio
            input(type="radio", name="sex", value="female", id="radio_female")
            label Female
          label.radio
            input(type="radio", name="sex", value="other", id="radio_other", checked)
            label Other
      div.control-group
        label.control-label Comment:
        div.controls
          textarea(name="description", id="description", class="span5", rows="5")
      div
        div.controls
          input.btn(type="submit", value="Sign up", id="submit") Submit

  script
    function chkRegEmail(str){
        var Seiki=/[!#-9A-~]+@+[a-z0-9]+.+[^.]$/i;
        if(str!=""){
            if(str.match(Seiki)){
                return true;
            }else{
                alert("Illegal E-Mail address.");
                return false;
            }
        }else{
            alert("Please input E-Mail address.");
            return false;
        }
    }

    function isRegAlphaNum(str){
        var tmp=str.match(/[0-9a-zA-Z\-\.]+/g);
        console.log('isRegAlphaNum' + tmp);
        if (tmp!=str){
            return false;
        }else{
            return true;
        }
    }

    function isRegHan(str){
        //var tmp=str.match(/[0-9a-zA-Z\+\-\/\*\,\. ]+/g);
        var tmp=str.match(/[0-9a-zA-Z\+\-\/\*\,\.]+/g);
        console.log('isRegHan' + tmp);
        if (tmp!=str){
            return false;
        }else{
            console.log('true password');
            return true;
        }
    }

    function chkUsername(str){
      if(str!=""){
        if(isRegAlphaNum(str)){
          console.log('success');
          return true;
        }else{
          alert('Illegal character in username.');
          return false;
        }

      }else{
        alert("Please input username.")
        return false;
      }
    }

    function chkPassword(str){
      if(str!=""){
        if(isRegHan(str)){
          return true;
        }else{
          alert('Illegal character in password.');
          return false;
        }

      }else{
        alert("Please input password.")
        return false;
      }
    }

    function checkForm(){
      console.log('checkForm');
      $('form1').removeClass('warning');
      var str = $('#username').val();
      if( ! chkUsername(str) ){
        $('#username-group').addClass('warning');
        $('#username').focus();
        return false;
      }
      var password = $('#pass').val();
      if( ! chkPassword(password) ){
        $('#password-group').addClass('warning');
        $('#pass').focus();
        return false;
      }
      str = $('#email').val();
      if(! chkRegEmail(str)){
        $('#email-group').addClass('warning');
        $('#email').focus();
        return false;
      }

      return true;
    }

以上で、ビューは準備完了です。

続く