Skip to content

Commit 2442b59

Browse files
AnthonyNahasAnthonyNahas
committed
demo(app): integration of NgxMaterialPasswordStrengthModule in the home component
1 parent 25663de commit 2442b59

File tree

7 files changed

+106
-63
lines changed

7 files changed

+106
-63
lines changed

‎demo/src/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {HomeModule} from './home/home.module';
99
import {AppComponent} from './app.component';
1010
import {environment} from '../environments/environment';
1111
import {ServiceWorkerModule} from '@angular/service-worker';
12+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
1213

1314
@NgModule({
1415
declarations: [
@@ -20,6 +21,7 @@ import {ServiceWorkerModule} from '@angular/service-worker';
2021
// the page.
2122
BrowserModule.withServerTransition({appId: 'ngx-material-password-strength-demo-id'}),
2223
ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
24+
BrowserAnimationsModule,
2325
FormsModule,
2426
HttpModule,
2527
AppRoutingModule,

‎demo/src/app/home/home.component.html‎

Lines changed: 44 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,52 @@
11
<div class="jumbotron jumbotron-fluid">
2-
<div class="container">
3-
<div class="row">
4-
<div class="col-sm-4 d-flex justify-content-center justify-content-md-end">
5-
<img src="assets/logo.svg" alt="ngx-material-password-strength logo" class="logo">
6-
</div>
7-
<div class="col-sm-8 text-center text-md-left">
8-
<h1>ngx-material-password-strength</h1>
9-
<p>Material password strength meter to indicate how secure is the provided password</p>
10-
<p>Scroll down to see it in action!</p>
11-
<p class="buttons">
12-
<a class="btn btn-outline-primary btn-lg" href="https://github.com/anthonynahas/ngx-material-password-strength" target="_blank"><i class="fa fa-github fa-lg"></i> Code on Github</a>
13-
<a class="btn btn-outline-primary btn-lg" href="doc/index.html" target="_blank"><i class="fa fa-book fa-lg"></i> Documentation</a>
14-
</p>
15-
</div>
16-
</div>
2+
<div class="container">
3+
<div class="row">
4+
<div class="col-sm-4 d-flex justify-content-center justify-content-md-end">
5+
<img src="assets/logo.svg" alt="ngx-material-password-strength logo" class="logo">
6+
</div>
7+
<div class="col-sm-8 text-center text-md-left">
8+
<h1>ngx-material-password-strength</h1>
9+
<p>Material password strength meter to indicate how secure is the provided password</p>
10+
<p>Scroll down to see it in action!</p>
11+
<p class="buttons">
12+
<a class="btn btn-outline-primary btn-lg"
13+
href="https://github.com/anthonynahas/ngx-material-password-strength" target="_blank"><i
14+
class="fa fa-github fa-lg"></i> Code on Github</a>
15+
<a class="btn btn-outline-primary btn-lg" href="doc/index.html" target="_blank"><i
16+
class="fa fa-book fa-lg"></i> Documentation</a>
17+
</p>
18+
</div>
19+
</div>
1720

18-
</div>
21+
</div>
1922
</div>
2023

2124
<section class="home">
2225
<div class="container">
23-
<!-- put your content here-->
24-
<p>Put your content here. Typically, examples of your library in action (directives, components...)</p>
25-
<ngx-material-password-test-component></ngx-material-password-test-component>
26-
<p>Happy ng-hacking!</p>
26+
<!-- put your content here-->
27+
<mat-card fxFlex>
28+
<mat-card-title>ngx-material-strength-password
29+
</mat-card-title>
30+
<mat-card-subtitle>
31+
<mat-slide-toggle (change)="onSlideToggleChange($event)">Show Password</mat-slide-toggle>
32+
</mat-card-subtitle>
33+
34+
<mat-card-content>
35+
<div fxFlex>
36+
<mat-input-container floatPlaceholder="auto" style="width: 100%">
37+
<input matInput #password
38+
[type]="inputType"
39+
required
40+
placeholder="Password">
41+
<mat-hint align="end" aria-live="polite">
42+
{{password.value.length}} / 25
43+
</mat-hint>
44+
</mat-input-container>
45+
<ngx-material-password-strength
46+
[password]="password.value">
47+
</ngx-material-password-strength>
48+
</div>
49+
</mat-card-content>
50+
</mat-card>
2751
</div>
2852
</section>

‎demo/src/app/home/home.component.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Component, OnInit } from '@angular/core';
2-
import { Title } from '@angular/platform-browser';
1+
import {Component, OnInit} from '@angular/core';
2+
import {Title} from '@angular/platform-browser';
3+
import {MatSlideToggleChange} from '@angular/material';
34

45
@Component({
56
selector: 'app-home',
@@ -8,10 +9,18 @@ import { Title } from '@angular/platform-browser';
89
})
910
export class HomeComponent implements OnInit {
1011

11-
constructor(private titleService:Title) { }
12+
password: string;
13+
inputType = 'password';
14+
15+
constructor(private titleService: Title) {
16+
}
1217

1318
ngOnInit() {
1419
this.titleService.setTitle('Home | ngx-material-password-strength');
1520
}
1621

22+
onSlideToggleChange(event: MatSlideToggleChange) {
23+
event.checked ? this.inputType = 'text' : this.inputType = 'password';
24+
}
25+
1726
}

‎demo/src/app/home/home.module.ts‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
import { NgModule } from '@angular/core';
2-
import { CommonModule } from '@angular/common';
3-
import { LibModule } from 'ngx-material-password-strength';
1+
import {NgModule} from '@angular/core';
2+
import {CommonModule} from '@angular/common';
43

5-
import { HomeRoutingModule } from './home-routing.module';
6-
import { HomeComponent } from './home.component';
4+
import {HomeRoutingModule} from './home-routing.module';
5+
import {HomeComponent} from './home.component';
6+
import {AppSharedModule} from '../shared';
77

88
@NgModule({
9-
imports: [
10-
CommonModule,
11-
LibModule.forRoot(),
12-
HomeRoutingModule,
13-
],
14-
declarations: [HomeComponent],
9+
imports: [
10+
CommonModule,
11+
HomeRoutingModule,
12+
AppSharedModule
13+
],
14+
declarations: [HomeComponent],
1515
})
16-
export class HomeModule { }
16+
export class HomeModule {
17+
}

‎demo/src/app/shared/shared.module.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,31 @@ import {NgbCollapseModule} from '@ng-bootstrap/ng-bootstrap';
55
import {HeaderComponent} from './header/header.component';
66
import {FooterComponent} from './footer/footer.component';
77
import {ContentWrapperComponent} from './content-wrapper/content-wrapper.component';
8-
import {MatCardModule, MatInputModule, MatProgressBarModule} from '@angular/material';
8+
import {MatCardModule, MatInputModule, MatProgressBarModule, MatSlideToggleModule} from '@angular/material';
99
import {FlexLayoutModule} from '@angular/flex-layout';
10+
import {NgxMaterialPasswordStrengthModule} from 'ngx-material-password-strength';
1011

1112
@NgModule({
1213
imports: [
1314
RouterModule,
1415
NgbCollapseModule.forRoot(),
16+
NgxMaterialPasswordStrengthModule.forRoot(),
1517
FlexLayoutModule,
1618
MatCardModule,
1719
MatInputModule,
18-
MatProgressBarModule
20+
MatProgressBarModule,
21+
MatSlideToggleModule
1922
],
2023
exports: [
2124
HeaderComponent,
2225
FooterComponent,
2326
ContentWrapperComponent,
27+
NgxMaterialPasswordStrengthModule,
2428
FlexLayoutModule,
2529
MatCardModule,
2630
MatInputModule,
27-
MatProgressBarModule
31+
MatProgressBarModule,
32+
MatSlideToggleModule
2833
],
2934
declarations: [HeaderComponent, FooterComponent, ContentWrapperComponent],
3035
providers: [],

‎demo/src/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@
3131
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
3232
<meta http-equiv="x-ua-compatible" content="ie=edge">
3333
<link rel="icon" type="image/x-icon" href="favicon.ico">
34+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
35+
3436
</head>
3537

3638
<body>

‎demo/src/styles.scss‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* You can add global styles to this file, and also import other style files */
2-
2+
@import 'ngx-material-password-strength_theme';
33
@import 'variables';
44
@import '~bootstrap/scss/bootstrap';
55
@import '~font-awesome/scss/font-awesome';
@@ -8,34 +8,34 @@
88

99
$breakpoints: $grid-breakpoints;
1010
@include media("<md") {
11-
.jumbotron {
12-
//margin-top: 3.4rem;
13-
margin-bottom: 0rem;
14-
h1 {
15-
font-size: 2.5rem;
16-
margin-bottom: 1.4rem;
17-
}
18-
p {
19-
font-size: 1.2rem;
20-
}
21-
22-
.btn{
23-
margin: .5rem;
24-
}
11+
.jumbotron {
12+
//margin-top: 3.4rem;
13+
margin-bottom: 0rem;
14+
h1 {
15+
font-size: 2.5rem;
16+
margin-bottom: 1.4rem;
17+
}
18+
p {
19+
font-size: 1.2rem;
20+
}
2521

22+
.btn {
23+
margin: .5rem;
2624
}
25+
26+
}
2727
}
2828

2929
@include media(">=md") {
30-
.jumbotron {
31-
// margin-top: 3.4rem;
32-
margin-bottom: 0rem;
33-
h1 {
34-
font-size: 3.6rem;
35-
margin-bottom: 1.8rem;
36-
}
37-
p {
38-
font-size: 1.4rem;
39-
}
30+
.jumbotron {
31+
// margin-top: 3.4rem;
32+
margin-bottom: 0rem;
33+
h1 {
34+
font-size: 3.6rem;
35+
margin-bottom: 1.8rem;
36+
}
37+
p {
38+
font-size: 1.4rem;
4039
}
40+
}
4141
}

0 commit comments

Comments
 (0)