Merge pull request #6 from jaganbishoyi/feature

Pro theme added

Author: jaganbishoyi

ngx-password-validator/package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "ngx-password-validator",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "scripts": {
         "ng": "ng",
         "start": "ng serve",

ngx-password-validator/package.json

@@ -64,6 +64,27 @@ myOptions = {
 }
 ```
 
+Theming( Default value is pro ):
+
+```html
+<input type="text" id="password" name="password" placeholder="Password.."
+    NgPasswordValidator [options]="myOptions">
+```
+Theme as 'basic':
+```ts
+myOptions = {
+    'placement': 'top',
+    'theme': 'basic'
+}
+```
+Theme as 'pro':
+```ts
+myOptions = {
+    'placement': 'top',
+    'theme': 'pro'
+}
+```
+
 After closing the popup window, you will get one output for password validity (true/false):
 
 ```html

ngx-password-validator/projects/ng-password-validator/README.md

@@ -1,6 +1,6 @@
 {
     "name": "ng-password-validator",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "description": "The password validator is a pop-up window that appears when you start typing in input box. Here you can configure the password acceptance criteria, once your enter characters fullfil the requirement you will get a success message.",
     "author": "Jagan Mohan Bishoyi",
     "license": "MIT",

ngx-password-validator/projects/ng-password-validator/package.json

@@ -1,5 +1,5 @@
 <div class="popup-window">
-    <div class="heading">Password Requirement</div>
+    <div class="heading">Password Policy</div>
     <div *ngIf="rules['password']">
         <div class="rule" [hidden]="rules['password'].type !== 'number'"
             [ngClass]="{'rule-pass':passwordStatus['password']}">

ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.html

@@ -28,45 +28,74 @@
         box-shadow: 0 1px 5px 0px $light-black;
     }
 
-    .popup-window {
-        .heading {
-            font-size: $heading-font-size;
-            color: $black;
-            margin-bottom: 0.5rem;
-            font-weight: 700;
-        }
-
-        .rule {
-            font-size: $body-font-size;
-            color: $grey;
-
-            &::before {
-                content: "\a";
-                width: 5px;
-                height: 5px;
-                border-radius: 50%;
-                background: $grey;
-                display: inline-block;
-                vertical-align: sub;
-                margin: 0 5px 6px 0;
+    &.popup {
+        .popup-window {
+            .heading {
+                font-size: $heading-font-size;
+                color: $black;
+                margin-bottom: 0.5rem;
+                font-weight: 700;
             }
 
-            &.rule-pass {
-                text-decoration: line-through;
-                color: $light-grey;
+            .rule {
+                font-size: $body-font-size;
+                color: $grey;
+                line-height: 17px;
 
                 &::before {
-                    background: $light-grey;
+                    content: "\a";
+                    width: 5px;
+                    height: 5px;
+                    border-radius: 50%;
+                    background: $grey;
+                    display: inline-block;
+                    vertical-align: sub;
+                    margin: 0 10px 6px 0;
+                }
+
+                &.rule-pass {
+                    text-decoration: line-through;
+                    color: $light-grey;
+
+                    &::before {
+                        background: $light-grey;
+                    }
                 }
             }
-        }
 
-        .success-message {
-            color: $color-success;
-            text-align: left;
-            font-size: $heading-font-size;
-            margin-top: 5px;
+            .success-message {
+                color: $color-success;
+                text-align: center;
+                font-size: $heading-font-size;
+                margin-top: 5px;
+            }
+
         }
 
+        &.popup-pro {
+            .popup-window {
+                .rule {
+                    &.rule-pass {
+                        color: $color-success;
+                        text-decoration: none;
+
+                        &::before {
+                            content: "\2713" !important;
+                            width: 0;
+                            height: 0;
+                            padding-right: 5px;
+                            vertical-align: inherit;
+                            background: $color-success;
+                        }
+                    }
+                }
+
+                .success-message {
+                    color: $dark-red;
+                }
+            }
+        }
     }
+
+
 }

ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.scss

@@ -106,6 +106,7 @@ export class NgPasswordValidatorComponent implements OnInit {
     ngOnInit(): void {
         this.setCustomClass();
         this.setStyles();
+        this.theme();
         this.dataService.updatedValue.subscribe((data: IStatus) => {
             this.passwordStatus = { ... this.passwordStatus, ...data };
             for (const propName in this.passwordOptions.rules) {
@@ -240,6 +241,18 @@ export class NgPasswordValidatorComponent implements OnInit {
         }
     }
 
+    /**
+     * Set theme
+     *
+     * @memberof NgPasswordValidatorComponent
+     */
+    theme(): void {
+        if (this.options["theme"]) {
+            this.renderer.addClass(this.elementRef.nativeElement, "popup-" + this.options["theme"]);
+        }
+    }
+
+
     /**
      * Sets the animation duration
      *

ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.ts

@@ -4,7 +4,7 @@ export interface NgPasswordValidatorOptions {
     "animation-duration"?: number;
     "custom-class"?: string;
     "shadow"?: boolean;
-    "theme"?: string;
+    "theme"?: "basic" | "pro";
     "offset"?: number;
     "width"?: number;
     "max-width"?: number;

ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.interface.ts

@@ -3,9 +3,9 @@ import { IStatus, NgPasswordValidatorOptions } from "./ng-password-validator.int
 export const defaultOptions: NgPasswordValidatorOptions = {
     placement: "bottom",
     "z-index": 0,
-    "custom-class": "",
+    "custom-class": "custom-class",
     shadow: true,
-    theme: "basic",
+    theme: "pro",
     offset: 8,
     rules: {
         password: {

ngx-password-validator/projects/ng-password-validator/src/lib/options.ts

@@ -3,6 +3,7 @@ $white: #fff;
 $black: #000;
 $green: #28a745;
 $grey: #6a6a6a;
+$dark-red: #9c0404;
 
 $light-grey: #d3d3d3;
 $light-black: rgba(0, 0, 0, 0.4);