← Back to branch summary

~landscape/lazr-js/production

« back to all changes in this revision

Viewing changes to examples/passwordmeter/index.html

  • Committer: Sidnei da Silva
  • Date: 2010-09-18 14:54:13 UTC
  • mfrom: (166.11.12 toolchain)
  • Revision ID: sidnei.da.silva@canonical.com-20100918145413-8scojue3rodcm0f4
- Merge from lazr-js trunk

Show diffs side-by-side

added added

removed removed

Lines of Context:
examples/passwordmeter/index.html
 
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
2
<html>
 
3
    <head>
 
4
        <title>Lazr-js examples: passwordmeter</title>
 
5
        <link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"></link>
 
6
        <link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"></link>
 
7
        <link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"></link>
 
8
 
 
9
        <script type="text/javascript" src="../../build/yui/yui-debug.js"></script>
 
10
        <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
 
11
        <script type="text/javascript">
 
12
            var LAZR_YUI_CONFIG = {
 
13
                filter: "debug",
 
14
                base: "../../build/",
 
15
                modules: LAZR_MODULES,
 
16
                insertBefore: "style-overrides",
 
17
            };
 
18
 
 
19
            var LP = YUI(LAZR_YUI_CONFIG);
 
20
            var demo_strengthFunc = function(password){
 
21
                                var strength = password.length * 10;
 
22
                                var text = "";
 
23
                                if (strength > 100)
 
24
                                        strength = 100;
 
25
                                switch (strength) {
 
26
                                        case 10:
 
27
                                        case 20:
 
28
                                                color = '#8b0000';
 
29
                                                text = "Weak";
 
30
                                                break;
 
31
                                        case 30:
 
32
                                        case 40:
 
33
                                        case 50:
 
34
                                                color = '#f99300';
 
35
                                                text = "Average";
 
36
                                                break;
 
37
                                        case 60:
 
38
                                        case 70:
 
39
                                                color = '#f003ff';
 
40
                                                text = "Better";
 
41
                                                break;
 
42
                                        case 80:
 
43
                                        case 90:
 
44
                                        case 100:
 
45
                                                color = '#00FF00';
 
46
                                                text = "Strong";
 
47
                                                break;
 
48
                                        default:
 
49
                                                color = '#FF0000';
 
50
                                                text = "Weak";
 
51
                                }
 
52
                                return {
 
53
                                        "color": color,
 
54
                                        "text": text
 
55
                                };
 
56
                        };
 
57
            LP.use('node', 'event', 'lazr.passwordmeter', function(Y){
 
58
 
 
59
                var passwordMeter = new Y.PasswordMeter({
 
60
                    input: '#demo_password',
 
61
                    contentBox: '#demo_meter',
 
62
                    func: demo_strengthFunc
 
63
                });
 
64
 
 
65
                passwordMeter.render();
 
66
            });
 
67
        </script>
 
68
        <style id="style-overrides" type="text/css">
 
69
                        label {
 
70
                                display: block;
 
71
                        }
 
72
            input {
 
73
                width: 180px;
 
74
                margin-bottom: 10px;
 
75
            }
 
76
            br {
 
77
                clear: left;
 
78
            }
 
79
            #demo_meter {
 
80
                position: relative;
 
81
                                font-weight: bold;
 
82
            }
 
83
        </style>
 
84
    </head>
 
85
    <body>
 
86
        <h1>A Password Strength Meter Widget</h1>
 
87
        <h2>Demonstration</h2>
 
88
        <label for="demo_password">
 
89
            Password
 
90
        </label>
 
91
                <div>
 
92
                <input type="password" id="demo_password" />
 
93
                <div id="demo_meter"> </div>
 
94
                </div>
 
95
                <br/>
 
96
                <br/>
 
97
                        <h2>Page Setup</h2>
 
98
        <div>
 
99
            <h3>CSS and Javascript</h3>
 
100
            Add the following css and javascript tags into your page.
 
101
        <pre>
 
102
                &lt;link rel="stylesheet" href="../../build/cssreset/reset-min.css" /&gt;
 
103
                &lt;link rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /&gt;
 
104
                &lt;link rel="stylesheet" href="../../build/lazrjs/cssbase/base-min.css" /&gt;
 
105
                &lt;script type="text/javascript" src="../../build/yui/yui-min.js"&gt;&lt;/script&gt;
 
106
                &lt;script type="text/javascript" src="../../build/lazr-meta.js"&gt;lt;/script&gt;
 
107
        </pre>
 
108
    <p>
 
109
        In order to facilitate ease of integration into existing web pages with differing needs in both layout and
 
110
        password strength requirements, the widget takes as construction parameters the ids of the password field to
 
111
        be evaluated, the id of the dom element that will hold the meter, and a reference to a javascript function that will
 
112
        be used to evaluate the strength of the password.
 
113
                <pre>
 
114
&lt;label for="password"&gt;Password&lt;label&gt;
 
115
&lt;div&gt;
 
116
  &lt;input type="password" id="password" /&gt;
 
117
  &lt;div id="meter"&gt;&lt;div&gt;
 
118
&lt;/div&gt;
 
119
            </pre>
 
120
    </p>
 
121
        </div>
 
122
        <h2>Widget Setup</h2>
 
123
        <div>
 
124
        The javascript function that will be used by the widget will recive one parameter: the password as a string.
 
125
                The function needs to return an object literal with two attributes: color and text.  The return value should
 
126
                look something like this:
 
127
<pre>
 
128
var strengthFunc = function(password) {
 
129
        //whatever logic you require to determine password strength
 
130
        return {
 
131
                "color": [an html color code like '#FF0000'],
 
132
                "text": [a description like "weak" or "strong"]
 
133
        };
 
134
};
 
135
</pre>
 
136
                <div>
 
137
                        Finally, putting it all together the widget needs to be constructed and rendered as follows:
 
138
                </div>
 
139
        <pre>
 
140
           var LAZR_YUI_CONFIG = {
 
141
                filter: "min",
 
142
                base: "../../build/",
 
143
                modules: LAZR_MODULES,
 
144
                insertBefore: "style-overrides",
 
145
            };
 
146
          LP.use('node', 'event', 'lazr.passwordmeter', function(Y){
 
147
 
 
148
            var passwordMeter = new Y.PasswordMeter({
 
149
                input: '#password',
 
150
                contentBox: '#meter',
 
151
                func: strengthFunc,
 
152
            });
 
153
 
 
154
            passwordMeter.render();
 
155
        });
 
156
        </pre>
 
157
    </body>
 
158
</html>