doctype html
html
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="description", content="jQuery.pwdMeasure.jsはパスワードの強度を測定するjQueryプラグインです。")
    meta(name="keywords", content="jQuery, パスワード, 強度, プラグイン, jQuery.pwdMeasure.js")
    meta(property="og:locale", content="ja_JP")
    meta(property="og:type", content="website")
    meta(property="og:title", content="jQuery.pwdMeasure.js")
    meta(property="og:description", content="jQuery.pwdMeasure.jsはパスワードの強度を測定するjQueryプラグインです。")
    meta(property="og:url", content="http://tsuyoshiwada.github.io/jquery-pwd-measure/")
    meta(property="og:site_name", content="jQuery.pwdMeasure.js")
    title jQuery.pwdMeasure.js
    meta(name="viewport", content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no")
    link(rel="stylesheet", href="./js/google-code-prettify/prettify.css")
    link(rel="stylesheet", href="./css/style.css")

  body
    #fb-root
      script.
        (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

    a.gh-ribbons(href="https://github.com/tsuyoshiwada/jquery-pwd-measure")
      img(style="position: absolute; top: 0; right: 0; border: 0;", src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67", alt="Fork me on GitHub", data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png")

    div.hero
      div.container
        h1
          i.fa.fa-code
          |  jQuery.pwdMeasure.js

        p jQuery.pwdMeasure.js is jQuery plug-in that measure the strength of the password.

        ul.list-inline
          li
            a.btn.btn--hero(href="https://raw.githubusercontent.com/tsuyoshiwada/jquery-pwd-measure/master/jquery.pwdMeasure.min.js", download)
              i.fa.fa-download
              |  Download
          li
            a.btn.btn--hero(href="https://github.com/tsuyoshiwada/jquery-pwd-measure")
              i.fa.fa-github
              |  Github
    
        //- Shares
        div.shares
          a.twitter-share-button(href='https://twitter.com/share', data-url='http://tsuyoshiwada.github.io/jquery-pwd-measure/', data-lang='ja') ツイート
            script.
              !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

          div.fb-like(data-layout="button_count")

          a.hatena-bookmark-button(href='http://b.hatena.ne.jp/entry/http://tsuyoshiwada.github.io/jquery-pwd-measure/', data-hatena-bookmark-title='jQuery.pwdMeasure.js', data-hatena-bookmark-layout='simple-balloon', title='このエントリーをはてなブックマークに追加')
            img(src='https://b.st-hatena.com/images/entry-button/button-only@2x.png', alt='このエントリーをはてなブックマークに追加', width='20', height='20', style='border: none;')
            script(type='text/javascript', src='https://b.st-hatena.com/js/bookmark_button.js', charset='utf-8', async='async')

          a.pocket-btn(data-pocket-label='pocket', data-pocket-count='horizontal', data-lang='en')
            script(type='text/javascript').
              !function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");
        //- Shares

    
    div.container.contents
      div.section
        h2.section__title
          i.fa.fa-hand-o-right
          |  Demo
        
        div.form-group
          label.form-group__label(for="demo-pm-input") パスワード
          input#demo-pm-input.form-group__input(type="password", value="", placeholder="Your password")
        div#demo-pm-indicator.pm-indicator

      div.section
        h2.section__title
          i.fa.fa-paragraph
          |  Description

        p <code>jQuery.pwdMeasure.js</code>はパスワードの強度を測定する<code>jQuery</code>プラグインです。
        p 主な特徴は下記の通りです。
        ul
          li パスワードの強度をパーセント表示可能
          li 単一の入力フィールド、確認フィールドへの対応
          li 強度を示すラベルを詳細に設定可能
          li 必要最低限のパスワード強度をパーセント指定可能
          li 判定をクリアした時、値が変わった時などのコールバックをサポート


      div.section
        h2.section__title
          i.fa.fa-rocket
          |  How To Use
        
        h3 Install
        p いつも通り<code>script</code>タグで読み込む方法以外に、<code>Bower</code>と<code>npm</code>でのインストールをサポートしています。
        
        h4 npm
        div.show-code
          button.show-code__copy Copy
          :markdown
            ```
            $ npm install jquery-pwd-measure
            ```

        h4 Bower
          small ※非推奨, 更新の予定はありません
        div.show-code
          button.show-code__copy Copy
          :markdown
            ```
            $ bower install jquery-pwd-measure
            ```
        
        h4 script
        div.show-code
          button.show-code__copy Copy
          :markdown
            ```html
            <script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
            <script type="text/javascript" src="./jquery.pwdMeasure.min.js"></script>
            ```

        h3 Basic
        h4 HTML
        div.show-code
          button.show-code__copy Copy
          :markdown
            ```html
            <input type="password" id="pm-input" value="" placeholder="Your Password">
            <div id="pm-indicator"></div>
            ```

        h4 JavaScript
        div.show-code
          button.show-code__copy Copy
          :markdown
            ```js
            $(document).ready(function(){
              $("#pm-input").pwdMeasure();
            });
            ```

      
      div.section
        h2.section__title
          i.fa.fa-dot-circle-o
          |  Examples

        h3 Basic
        p
          | 最も基本的な使い方です。単一の入力フィールドに対して、強度判定を行ないます。<br />
          | デフォルトで<code>#pm-indicator</code>に強度が表示されます。

        div.form-group
          label.form-group__label(for="pm-input") パスワード
          input#pm-input.form-group__input(type="password", value="", placeholder="Your password")
        div#pm-indicator.pm-indicator
        
        div.show-code
          button.show-code__copy Copy
          :markdown
            ```js
            $("#pm-input").pwdMeasure();
            ```

        h3 Confirm
        p
          | <code>confirm</code>オプションで確認用のフィールドを指定した例です。確認用のフィールドがある場合は、値が一致しているかのチェックも行ないます。

        div.form-group
          label.form-group__label(for="pm-input2") パスワード
          input#pm-input2.form-group__input(type="password", value="", placeholder="Your password")
        div.form-group
          label.form-group__label(for="pm-confirm2") パスワード確認
          input#pm-confirm2.form-group__input(type="password", value="", placeholder="Your password")
        div#pm-indicator2.pm-indicator
        
        div.show-code
          button.show-code__copy Copy
          :markdown
            ```js
            $("#pm-input2").pwdMeasure({
              indicator: "#pm-indicator2",
              confirm: "#pm-input-confirm2"
            });
            ```

        h3 Change Labels
        p 表示ラベルを変更する例です。

        div.form-group
          label.form-group__label(for="pm-input3") パスワード
          input#pm-input3.form-group__input(type="password", value="", placeholder="Your password")
        div#pm-indicator3.pm-indicator
        
        div.show-code
          button.show-code__copy Copy
          :markdown
            ```js
            $("#pm-input3").pwdMeasure({
              indicator: "#pm-indicator3",
              indicatorTemplate: "<%= label %>",
              labels: [
                {score:10, label:"Level 1", className:"very-weak"},
                {score:30, label:"Level 2", className:"weak"},
                {score:50, label:"Level 3", className:"average"},
                {score:70, label:"Level 4", className:"strong"},
                {score:100, label:"Max!!", className:"very-strong"}
              ]
            });
            ```

        h3 Change Events
        p 強度判定を行うタイミングを決める為のイベントを変更することが出来ます。下記では<code>change</code>のみに絞っています。

        div.form-group
          label.form-group__label(for="pm-input4") パスワード
          input#pm-input4.form-group__input(type="password", value="", placeholder="Your password")
        div#pm-indicator4.pm-indicator
        
        div.show-code
          button.show-code__copy Copy
          :markdown
            ```js
            $("#pm-input4").pwdMeasure({
              indicator: "#pm-indicator4",
              events: "change"
            });
            ```

        h3 Use Callback
        p
          | コールバックを使用して、パスワードが一定の強度より低い場合はフォームの送信を止める例です。<br />
          | 下記では強度を示すパーセントが50以下の場合送信をキャンセルします。
        
        form#pm-form5
          div.form-group
            label.form-group__label(for="pm-input5") パスワード
            input#pm-input5.form-group__input(type="password", value="", placeholder="Your password")
          div.form-group
            label.form-group__label(for="pm-confirm5") パスワード
            input#pm-confirm5.form-group__input(type="password", value="", placeholder="Your password")
          div#pm-indicator5.pm-indicator
          div.text-center
            button.btn.btn--primary(type="submit") Submit!
        
        div.show-code
          button.show-code__copy Copy
          :markdown
            ```js
            var $form = $("#pm-form5");

            // submitイベントをキャンセル
            function formCancelSubmit(){
              $form.off("submit").on("submit", function(e){
                alert("パスワードが一致しないか基準値に達していません！");
                e.preventDefault();
              });
            }
            formCancelSubmit();

            // コールバックを使用する
            $("#pm-input5").pwdMeasure({
              minScore: 50,
              confirm: "#pm-confirm5",
              indicator: "#pm-indicator5",
              onValid: function(percentage, label, className){
                $form.off("submit");
              },
              onInvalid: function(percentage, label, className){
                formCancelSubmit();
              }
            });
            ```


      div.section
        h2.section__title
          i.fa.fa-code
          |  Default Options

        p オプションを指定せずに実行した場合、下記のオプションが適用されます。各オプションの詳細は<a href="https://github.com/tsuyoshiwada/jquery-pwd-measure">リポジトリ</a>にてご確認下さい。

        div.show-code
          button.show-code__copy Copy
          :markdown
            ```js
            $(selector).pwdMeasure({
              minScore: 50,
              minLength: 6,
              events: "keyup change",
              labels: [
                {score:10,         label:"とても弱い", className:"very-weak"},   //0~10%
                {score:30,         label:"弱い",       className:"weak"},        //11~30%
                {score:50,         label:"平均",       className:"average"},     //31~50%
                {score:70,         label:"強い",       className:"strong"},      //51~70%
                {score:100,        label:"とても強い", className:"very-strong"}, //71~100%
                {score:"notMatch", label:"不一致",     className:"not-match"},   //not match
                {score:"empty",    label:"未入力",     className:"empty"}        //empty
              ],
              indicator: "#pm-indicator",
              indicatorTemplate: "パスワード強度: <%= label %> (<%= percentage %>%)",
              confirm: false,

              // Callbacks
              onValid: false,
              onInvalid: false,
              onNotMatch: false,
              onEmpty: false,
              onChangeState: false,
              onChangeValue: false
            });
            ```
      

      div.section
        h2.section__title
          i.fa.fa-file-code-o
          |  CSS Example

        p
          | <code>jQuery.pwdMeasure.js</code>では、スタイルを柔軟に設定することが出来ます。<br />
          | このページで強度表示に使用しているスタイルは次のとおりです。是非参考にしてみてください。

        h3 CSS
          div.show-code
            button.show-code__copy Copy
            :markdown
              ```css
              .pm-indicator {
                margin:10px 0;
                padding:1.5em 1em;
                color:#2c3e50;
                font-size:12px;
                text-align:center;
                border:1px solid #ccc;
                border-radius:2px;
                background:#e4e4e4;
                text-shadow:1px 1px 0 rgba(255,255,255,.8);
                -webkit-transition:all .2s ease-in-out;
                        transition:all .2s ease-in-out;
              }

              .pm-indicator.very-weak,
              .pm-indicator.not-match {
                border-color:#be1d30;
                background-color:#ffc3cf;
              }

              .pm-indicator.weak {
                border-color:#ff787d;
                background-color:#ffe6e5;
              }

              .pm-indicator.strong {
                border-color:#78bc42;
                background-color:#bceea6;
              }

              .pm-indicator.very-strong {
                border-color:#4f85a7;
                background-color:#68c6d7;
              }
              ```

        h3 Scss
          div.show-code
            button.show-code__copy Copy
            :markdown
              ```css
              .pm-indicator {
                margin:10px 0;
                padding:1.5em 1em;
                background:#e4e4e4;
                border:1px solid #ccc;
                border-radius:2px;
                color:#2c3e50;
                font-size:12px;
                text-shadow:1px 1px 0 rgba(255, 255, 255, .8);
                text-align:center;
                transition:all .2s ease-in-out;
                &.very-weak,
                &.not-match {
                  background-color:#ffc3cf;
                  border-color:#be1d30;
                }
                &.weak {
                  background-color:#ffe6e5;
                  border-color:#ff787d;
                }
                &.average {
                }
                &.strong {
                  background-color:#bceea6;
                  border-color:#78bc42;
                }
                &.very-strong {
                  background-color:#68c6d7;
                  border-color:#4f85a7;
                }
              }
              ```


      div.section
        h2.section__title 
          i.fa.fa-bell-o
          |  Change Log

        h3
          | v1.0.5
          small 2017.04.2504
        p 非推奨になっていた<code>.size()</code>を<code>.length</code>に変更。(<a href="https://github.com/tsuyoshiwada/jquery-pwd-measure/pull/1">#1</a>)

        h3
          | v1.0.4
          small 2015.06.13
        p IE8以下で起きるエラーの修正。(<code>labels</code>内の<code>class</code>を<code>className</code>に変更しています)

        h3
          | v1.0.2
          small 2015.02.14
        p <code>bower</code>を使ったインストールに対応 &amp; <code>empty</code>オプションの追加

        h3
          | v1.0.0
          small 2015.01.24
        p First Release.


    div.footer
      p.copyright <a href="https://github.com/tsuyoshiwada">tsuyoshiwada</a> Copyright © All Right Reserved.


    script(type="text/javascript", src="./js/google-code-prettify/prettify.js")
    script(type="text/javascript", src="./js/zeroclipboard-2.2.0/ZeroClipboard.min.js")
    script(type="text/javascript", src="./js/jquery-1.11.1.min.js")
    script(type="text/javascript", src="./js/jquery.pwdMeasure.js")
    script.
      $(function(){

        // syntax highlight
        $(".show-code").each(function(){
          $("code", this).addClass("prettyprint");
        });

        prettyPrint();

        // copy button
        $(".show-code__copy").each(function(){
          var $this = $(this);
          $this.attr("data-clipboard-text", $this.parent().find("code").text());

          var client = new ZeroClipboard($this);
          //- client.on("ready", function(){
          //-   console.log("hhghgh");
          //- });
        });
        
        // demo
        $("#demo-pm-input").pwdMeasure({
          indicator: "#demo-pm-indicator"
        });
        
        // basic
        $("#pm-input").pwdMeasure();

        // confirm
        $("#pm-input2").pwdMeasure({
          indicator: "#pm-indicator2",
          confirm: "#pm-confirm2"
        });

        // change labels
        $("#pm-input3").pwdMeasure({
          indicator: "#pm-indicator3",
          indicatorTemplate: "<%= label %>",
          labels: [
            {score:10, label:"Level 1", className:"very-weak"},
            {score:30, label:"Level 2", className:"weak"},
            {score:50, label:"Level 3", className:"average"},
            {score:70, label:"Level 4", className:"strong"},
            {score:100, label:"Max!!", className:"very-strong"}
          ]
        });

        // change events
        $("#pm-input4").pwdMeasure({
          indicator: "#pm-indicator4",
          events: "change"
        });

        // use callback
        (function(){
          var $form = $("#pm-form5");

          // submitイベントをキャンセル
          function formCancelSubmit(){
            $form.off("submit").on("submit", function(e){
              alert("パスワードが一致しないか基準値に達していません！");
              e.preventDefault();
            });
          }
          formCancelSubmit();

          // コールバックを使用する
          $("#pm-input5").pwdMeasure({
            minScore: 50,
            confirm: "#pm-confirm5",
            indicator: "#pm-indicator5",
            onValid: function(percentage, label, className){
              $form.off("submit");
            },
            onInvalid: function(percentage, label, className){
              formCancelSubmit();
            }
          });
        }());

      });