Readme usage & build

Trustroots · Jul 14, 2015 · 9d77f43 · 9d77f43
1 parent 6f56311
commit 9d77f43
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -3,9 +3,21 @@ The trusty password security checklist.
 
 This is a simple password strength meter & validator inspired by MailChimp's [signup form](https://login.mailchimp.com/signup/).
 
+[See demo](https://trustroots.github.io/trustpass)
+
 ![Screenshot](./example/screenshot.png)
 
 ## Usage
+Include the script and style:
+```html
+<link rel="stylesheet" href="dist/tr-trustpass.min.css">
+<script src="dist/tr-trustpass.min.js"></script>
+```
+
+Include the `trTrustpass` dependency on your Angular module:
+```html
+angular.module('demoApp', ['trTrustpass']);
+```
 
 #### Basic
 ```html
@@ -67,5 +79,18 @@ Pass a json object to `tr-trustpass` like this: `tr-trustpass="{maximum: true, s
 | messageGuide |                                                 | A message on top of checklist. Leave empty to hide.                          |
 
 
+## Development
+
+#### Build
+```bash
+gulp
+```
+
+#### Run the example
+```bash
+gulp demo
+```
+...and open [http://localhost:3000/](http://localhost:3000/) to your browser.
+
 ## License
 [MIT](LICENSE.md)
diff --git a/dist/tr-trustpass.css b/dist/tr-trustpass.css
@@ -32,7 +32,7 @@
   padding: 10px;
   color: #3c763d;
   background: #dff0d8;
-  border-radius: 3px;
+  border-radius: 6px;
   font-size: 1em;
 }
 .trustpass-guide {

diff --git a/dist/tr-trustpass.min.css b/dist/tr-trustpass.min.css
diff --git a/dist/tr-trustpass.min.css.map b/dist/tr-trustpass.min.css.map
diff --git a/example/index.html b/example/index.html
@@ -2,8 +2,8 @@
 <html ng-app="demoApp">
 <head>
   <title>Angular Trustpass demo</title>
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
-  <link rel="stylesheet" href="../dist/tr-trustpass.css">
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+  <link rel="stylesheet" href="tr-trustpass.css">
   <style>
     html, body {
       margin: 0;
@@ -25,7 +25,9 @@
     .demo {
       margin-top: 30px;
     }
-    /*.ng-pristine { border-color: gold; }*/
+    .table {
+      width:100%;
+    }
     .ng-dirty.ng-valid { border-color: green; }
     .ng-dirty.ng-invalid { border-color: red; }
   </style>
@@ -46,83 +48,83 @@ <h1>Angular Trustpass <small>By <a href="https://www.trustroots.org/">Trustroots
     </div>
 
     <div class="demo">
-    <div class="row">
+      <div class="row">
 
-      <div class="col-sm-6">
+        <div class="col-sm-6">
 
-        <h4>Simple example</h4>
+          <h4>Simple example</h4>
 
-        <form name="demoSimpleForm">
-          <input type="password"
-                 class="form-control input-lg"
-                 placeholder="Password"
-                 tr-trustpass="{special: false}"
-                 ng-model="passwordSimple">
-        </form>
+          <form name="demoSimpleForm">
+            <input type="password"
+                   class="form-control input-lg"
+                   placeholder="Password"
+                   tr-trustpass="{special: false}"
+                   ng-model="passwordSimple">
+          </form>
 
-      </div>
-      <div class="col-sm-6">
-        <br><br>
-        <div class="well">
-          <strong>Model:</strong> {{ passwordSimple }}
+        </div>
+        <div class="col-sm-6">
+          <br><br>
+          <div class="well">
+            <strong>Model:</strong> {{ passwordSimple }}
+          </div>
         </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col-sm-6">
+      <div class="row">
+        <div class="col-sm-6">
 
-        <h4>More complex example</h4>
+          <h4>More complex example</h4>
 
-        <form name="demoForm">
-          <div class="form-group" ng-class="{'has-error': demoForm.password.$invalid && demoForm.password.$dirty, 'has-success': !demoForm.password.$invalid && demoForm.password.$dirty}">
-            <input id="password"
-              class="form-control input-lg"
-              type="password"
-              name="password"
-              placeholder="Password"
-              tr-trustpass="{maximum: true, messageGuide: 'Make sure your password meets these requirements:', keepHeight: true}"
-              ng-minlength="9"
-              ng-maxlength="90"
-              ng-model="password">
-          </div>
-          <button type="submit" ng-disabled="demoForm.password.$invalid" class="btn btn-primary">Sign in</button>
-        </form>
+          <form name="demoForm">
+            <div class="form-group" ng-class="{'has-error': demoForm.password.$invalid && demoForm.password.$dirty, 'has-success': !demoForm.password.$invalid && demoForm.password.$dirty}">
+              <input id="password"
+                     class="form-control input-lg"
+                     type="password"
+                     name="password"
+                     placeholder="Password"
+                     tr-trustpass="{maximum: true, messageGuide: 'Make sure your password meets these requirements:', keepHeight: true}"
+                     ng-minlength="9"
+                     ng-maxlength="90"
+                     ng-model="password">
+            </div>
+            <button type="submit" ng-disabled="demoForm.password.$invalid" class="btn btn-primary">Sign in</button>
+          </form>
 
-      </div>
-      <div class="col-sm-6">
-        <br><br>
-        <div class="well">
+        </div>
+        <div class="col-sm-6">
+          <br><br>
+          <div class="well">
 
-          <table class="table" style="width:100%;">
-            <tbody>
-              <tr>
-                <th>Model</th>
-                <td>{{ password }}</td>
-              </tr>
-              <tr>
-                <th>Invalid</th>
-                <td><code ng-class="{ 'text-danger': demoForm.password.$invalid, 'text-success': !demoForm.password.$invalid }">{{ demoForm.password.$invalid }}</code></td>
-              </tr>
-              <tr>
-                <th>Input errors</th>
-                <td><code ng-class="{ 'text-danger': demoForm.password.$error, 'text-success': !demoForm.password.$error }">{{ demoForm.password.$error | json }}</code></td>
-              </tr>
-              <tr>
-                <th>Change to</th>
-                <td>
-                  <div class="btn-group" role="group" aria-label="Password setters">
-                    <button class="btn btn-xs btn-danger" ng-click="password = 'foo'">Invalid</button>
-                    <button class="btn btn-xs btn-success" ng-click="password = 'Hello World!1'">Valid</button>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+            <table class="table">
+              <tbody>
+                <tr>
+                  <th>Model</th>
+                  <td>{{ password }}</td>
+                </tr>
+                <tr>
+                  <th>Invalid</th>
+                  <td><code ng-class="{ 'text-danger': demoForm.password.$invalid, 'text-success': !demoForm.password.$invalid }">{{ demoForm.password.$invalid }}</code></td>
+                </tr>
+                <tr>
+                  <th>Input errors</th>
+                  <td><code ng-class="{ 'text-danger': demoForm.password.$error, 'text-success': !demoForm.password.$error }">{{ demoForm.password.$error | json }}</code></td>
+                </tr>
+                <tr>
+                  <th>Change to</th>
+                  <td>
+                    <div class="btn-group" role="group" aria-label="Password setters">
+                      <button class="btn btn-xs btn-danger" ng-click="password = 'foo'">Invalid</button>
+                      <button class="btn btn-xs btn-success" ng-click="password = 'Hello World!1'">Valid</button>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
 
+          </div>
         </div>
       </div>
-    </div>
-    </div>
+    </div><!--.demo-->
 
     <div class="row footer">
       <div class="col-xs-6">
@@ -140,8 +142,8 @@ <h4>More complex example</h4>
 
   </article>
 
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
-  <script src="../dist/tr-trustpass.js"></script>
+  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
+  <script src="tr-trustpass.js"></script>
   <script>
     angular.module('demoApp', ['trTrustpass']);
   </script>

diff --git a/gulpfile.js b/gulpfile.js
@@ -8,14 +8,16 @@ var gulp = require('gulp'),
     uglify = require('gulp-uglify'),
     minify = require('gulp-minify-css'),
     watch = require('gulp-watch'),
-    sourcemaps = require('gulp-sourcemaps');
+    sourcemaps = require('gulp-sourcemaps'),
+    connect = require('gulp-connect');
 
 var DEST = 'dist/';
 
 // Watch Files For Changes
 gulp.task('watch', function() {
-	gulp.watch('src/tr-trustpass.js', ['jshint', 'js']);
-	gulp.watch('src/tr-trustpass.less', ['less']);
+  gulp.watch('src/tr-trustpass.js', ['jshint', 'js']);
+  gulp.watch('src/tr-trustpass.less', ['less']);
+  gulp.watch('example/index.html', ['html']);
 });
 
 // JS linting task
@@ -26,6 +28,7 @@ gulp.task('jshint', function () {
     .pipe(jshint.reporter('fail'));
 });
 
+// Process JS
 gulp.task('js', function() {
   return gulp.src('src/tr-trustpass.js')
     .pipe(sourcemaps.init())
@@ -38,7 +41,7 @@ gulp.task('js', function() {
     .pipe(gulp.dest(DEST));
 });
 
-// Less task
+// Process less
 gulp.task('less', function () {
   return gulp.src('src/tr-trustpass.less')
     .pipe(sourcemaps.init())
@@ -53,6 +56,32 @@ gulp.task('less', function () {
     .pipe(gulp.dest(DEST));
 });
 
+// Connect-server
+gulp.task('connect', function() {
+  connect.server({
+    root: ['example', 'dist'],
+    port: 3000,
+    livereload: true
+  });
+});
+
+gulp.task('html', function () {
+  gulp.src('example/index.html')
+    .pipe(connect.reload());
+});
+
+
+/**
+ * Run sequence tasks
+ */
+gulp.task('build', function(done) {
+  runSequence('jshint', 'less', 'js', done);
+});
+
 gulp.task('default', function(done) {
-  runSequence('jshint', 'less', 'js', 'watch', done);
+  runSequence('build', 'watch', done);
+});
+
+gulp.task('demo', function(done) {
+  runSequence('build', 'connect', 'watch', done);
 });
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "UI"
   ],
   "devDependencies": {
+    "gulp-connect": "~2.2.0",
     "gulp-jshint": "~1.11.2",
     "gulp-less": "~3.0.3",
     "gulp-minify-css": "~1.2.0",

diff --git a/src/tr-trustpass.less b/src/tr-trustpass.less
@@ -1,7 +1,7 @@
 
 @trustpass-done-color: #3c763d;
 @trustpass-done-background: #dff0d8;
-@trustpass-done-radius: 3px;
+@trustpass-done-radius: 6px;
 @trustpass-done-text-size: 1em;
 @trustpass-text-size: 1em;
 @trustpass-line-height: 1.5em;

diff --git a/src/tr-trustpass.scss b/src/tr-trustpass.scss
@@ -1,7 +1,7 @@
 
 $trustpass-done-color: #3c763d;
 $trustpass-done-background: #dff0d8;
-$trustpass-done-radius: 3px;
+$trustpass-done-radius: 6px;
 $trustpass-done-text-size: 1em;
 $trustpass-text-size: 1em;
 $trustpass-line-height: 1.5em;