From 438e6fd8b7fd30b0fb2ac61fc7ec08e0e23053a1 Mon Sep 17 00:00:00 2001 From: Jagan Mohan Bishoyi Date: Sat, 2 Jan 2021 13:14:39 +0530 Subject: [PATCH] Pro theme added --- ngx-password-validator/package-lock.json | 2 +- ngx-password-validator/package.json | 2 +- .../projects/ng-password-validator/README.md | 21 +++++ .../ng-password-validator/package.json | 2 +- .../lib/ng-password-validator.component.html | 2 +- .../lib/ng-password-validator.component.scss | 91 ++++++++++++------- .../lib/ng-password-validator.component.ts | 13 +++ .../lib/ng-password-validator.interface.ts | 2 +- .../ng-password-validator/src/lib/options.ts | 4 +- .../src/lib/variable.scss | 1 + 10 files changed, 102 insertions(+), 38 deletions(-) diff --git a/ngx-password-validator/package-lock.json b/ngx-password-validator/package-lock.json index 38f4cd6..9d536eb 100644 --- a/ngx-password-validator/package-lock.json +++ b/ngx-password-validator/package-lock.json @@ -1,6 +1,6 @@ { "name": "ngx-password-validator", - "version": "0.0.4", + "version": "0.0.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/ngx-password-validator/package.json b/ngx-password-validator/package.json index 18007ff..36ab7de 100644 --- a/ngx-password-validator/package.json +++ b/ngx-password-validator/package.json @@ -1,6 +1,6 @@ { "name": "ngx-password-validator", - "version": "0.0.5", + "version": "0.0.6", "scripts": { "ng": "ng", "start": "ng serve", diff --git a/ngx-password-validator/projects/ng-password-validator/README.md b/ngx-password-validator/projects/ng-password-validator/README.md index 77b5d72..a766e6b 100644 --- a/ngx-password-validator/projects/ng-password-validator/README.md +++ b/ngx-password-validator/projects/ng-password-validator/README.md @@ -64,6 +64,27 @@ myOptions = { } ``` +Theming( Default value is pro ): + +```html + +``` +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 diff --git a/ngx-password-validator/projects/ng-password-validator/package.json b/ngx-password-validator/projects/ng-password-validator/package.json index 3c729e0..8d58527 100644 --- a/ngx-password-validator/projects/ng-password-validator/package.json +++ b/ngx-password-validator/projects/ng-password-validator/package.json @@ -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", diff --git a/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.html b/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.html index a604a2e..12c4f8a 100644 --- a/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.html +++ b/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.html @@ -1,5 +1,5 @@
-
Password Requirement
+
Password Policy
diff --git a/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.scss b/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.scss index 140d4a7..efec1c1 100644 --- a/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.scss +++ b/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.scss @@ -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; + } + } + } } + + } diff --git a/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.ts b/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.ts index 7be2845..7a6ed01 100644 --- a/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.ts +++ b/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.component.ts @@ -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 * diff --git a/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.interface.ts b/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.interface.ts index 39fb45d..10f6305 100644 --- a/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.interface.ts +++ b/ngx-password-validator/projects/ng-password-validator/src/lib/ng-password-validator.interface.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; diff --git a/ngx-password-validator/projects/ng-password-validator/src/lib/options.ts b/ngx-password-validator/projects/ng-password-validator/src/lib/options.ts index b25522d..c36ec59 100644 --- a/ngx-password-validator/projects/ng-password-validator/src/lib/options.ts +++ b/ngx-password-validator/projects/ng-password-validator/src/lib/options.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: { diff --git a/ngx-password-validator/projects/ng-password-validator/src/lib/variable.scss b/ngx-password-validator/projects/ng-password-validator/src/lib/variable.scss index ef3b9c3..eaad058 100644 --- a/ngx-password-validator/projects/ng-password-validator/src/lib/variable.scss +++ b/ngx-password-validator/projects/ng-password-validator/src/lib/variable.scss @@ -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);