Skip to content

Commit 99f38aa

Browse files
rxzxrxzx
committed
Added Social Media Login, Mask input and file upload feature
1 parent afddfa2 commit 99f38aa

File tree

11 files changed

+144
-32
lines changed

11 files changed

+144
-32
lines changed

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,11 @@
2828
"firebase": "^5.3.1",
2929
"highcharts": "^6.1.1",
3030
"moment": "^2.22.2",
31+
"ng2-file-upload": "^1.3.0",
3132
"ngx-bootstrap": "^2.0.5",
3233
"ngx-embed-video": "^0.3.0",
34+
"ngx-mask": "^6.1.2",
35+
"ngx-social-login": "^6.0.1",
3336
"ngx-toastr": "^8.10.0",
3437
"primeicons": "1.0.0-beta.9",
3538
"primeng": "^6.0.2",

‎src/app/app-routing.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { PublicHomeComponent } from './public/home/home.component';
1111
import { AboutComponent } from './private/about/about.component';
1212
import { GalleryComponent } from './private/gallery/gallery.component';
1313
import { DemoChartsComponent } from './private/demo-charts/demo-charts.component';
14+
import { FeatureComponent } from './private/feature/feature.component';
1415
const routes: Routes = [
1516
{ path: '', redirectTo: 'sign-in', pathMatch: 'full' },
1617
{
@@ -32,7 +33,7 @@ const routes: Routes = [
3233
{ path: 'about', component: AboutComponent },
3334
{ path: 'gallery', component: GalleryComponent },
3435
{ path: 'demo-charts', component: DemoChartsComponent },
35-
36+
{ path: 'features', component: FeatureComponent }
3637
]
3738
}
3839
];

‎src/app/app.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { LocationStrategy, HashLocationStrategy } from '@angular/common';
1313
import { StorageService } from './Providers/storageservice';
1414
@NgModule({
1515
declarations: [
16-
AppComponent,
16+
AppComponent
1717
],
1818
imports: [
1919
BrowserModule,

‎src/app/private/feature/feature.component.css‎

Whitespace-only changes.

‎src/app/private/feature/feature.component.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<div class="container">
2+
<div class="row">
3+
<div class="col-md-12">
4+
<h1>Upload File(s)</h1>
5+
</div>
6+
<hr>
7+
<div class="col-md-12">
8+
<input type="file" ng2FileSelect [uploader]="uploader" (onFileSelected)="onFileSelected($event)" />
9+
</div>
10+
<div class="col-md-12" *ngFor="let item of uploader.queue;let i = index;">
11+
<a href="javascript:;">{{i+1}} - {{item?.file?.name}}</a>
12+
<button type="button" class="btn btn-danger btn-xs" (click)="item.remove()">
13+
<span class="glyphicon glyphicon-trash"></span>
14+
</button>
15+
</div>
16+
<div class="col-md-12" *ngIf="uploader.getNotUploadedItems().length">
17+
<button type="button" class="btn btn-success btn-md" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
18+
<span class="glyphicon glyphicon-upload"></span> Upload all
19+
</button>
20+
</div>
21+
<div class="col-md-12">
22+
<h1>Mask Input</h1>
23+
</div>
24+
<hr>
25+
<div class="col-md-12">
26+
<div class="form-group">
27+
<label for="pwd">Phone Mask *</label>
28+
<input type="text" mask="92-399-9999999" placeholder="92-399-9999999">
29+
</div>
30+
</div>
31+
<div class="col-md-12">
32+
<h1>Social Login</h1>
33+
</div>
34+
<div class="col-md-12">
35+
<button type="button" class="btn btn-primary" (click)="loginWithFacebook()">
36+
Login with Facebook</button>
37+
</div>
38+
<hr>
39+
</div>
40+
</div>

‎src/app/private/feature/feature.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { FeatureComponent } from './feature.component';
4+
5+
describe('FeatureComponent', () => {
6+
let component: FeatureComponent;
7+
let fixture: ComponentFixture<FeatureComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ FeatureComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(FeatureComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/private/feature/feature.component.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { FileUploader } from 'ng2-file-upload';
3+
import { SocialLoginService, Provider } from 'ngx-social-login';
4+
5+
@Component({
6+
selector: 'app-feature',
7+
templateUrl: './feature.component.html',
8+
styleUrls: ['./feature.component.css']
9+
})
10+
export class FeatureComponent implements OnInit {
11+
public uploader: FileUploader = new FileUploader({ url: '/api' });
12+
constructor(
13+
private socialLoginService: SocialLoginService
14+
) { }
15+
16+
ngOnInit() {
17+
}
18+
19+
onFileSelected(e) {
20+
console.log(e);
21+
}
22+
23+
loginWithFacebook(): void {
24+
this.socialLoginService.login(Provider.FACEBOOK).subscribe(user => console.log(user));
25+
}
26+
27+
}

‎src/app/private/gallery/gallery.component.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11

22

33
.thumbImage{
4-
width: 200px;
4+
width: 100%;
55
height: 200px;
66
margin-bottom: 15%;
77
}
88

99
.videoItem{
10-
width: 200px;
10+
width: 100%;
1111
height: 200px;
1212
margin-bottom: 5%;
1313
}

‎src/app/private/gallery/gallery.component.html‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
11
<div id="mediaGallery" class="container">
22
<div class="row">
3-
<h2> Image Gallery</h2>
4-
<hr>
53
<div class="col-md-12">
6-
<div class="col-md-3" *ngFor="let i of urls">
7-
<img [src]="i" class="thumbImage">
8-
</div>
4+
<h2> Image Gallery</h2>
95
</div>
10-
</div>
11-
<div class="row">
12-
<h2> Video Gallery</h2>
136
<hr>
7+
<div class="col-md-3" *ngFor="let i of urls">
8+
<img [src]="i" class="thumbImage">
9+
</div>
1410
<div class="col-md-12">
15-
<div class="col-md-4" *ngFor="let f of iframes">
16-
<div [innerHtml]="f" class="videoItem"></div>
17-
</div>
18-
<!-- <div [innerHtml]="iframe_html"></div> -->
11+
<h2> Video Gallery</h2>
1912
</div>
20-
</div>
21-
13+
<hr>
14+
<div class="col-md-4" *ngFor="let f of iframes">
15+
<div [innerHtml]="f" class="videoItem"></div>
16+
</div>
17+
</div>
2218

23-
</div>
19+
</div>

‎src/app/private/header/header.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@
1616
<li [routerLinkActive]="['active']" [routerLink]="['/user/home']">
1717
<a href="javascript:;">Grid</a>
1818
</li>
19+
<li [routerLinkActive]="['active']" [routerLink]="['/user/features']">
20+
<a href="javascript:;">Features</a>
21+
</li>
1922
<li [routerLinkActive]="['active']" [routerLink]="['/user/demo-charts']">
2023
<a href="javascript:;">Charts</a>
2124
</li>
@@ -25,9 +28,6 @@
2528
<li [routerLinkActive]="['active']" [routerLink]="['/user/about']">
2629
<a href="javascript:;">Comming soon</a>
2730
</li>
28-
<li>
29-
<a href="javascript:;">Contact</a>
30-
</li>
3131
</ul>
3232
<ul class="nav navbar-nav navbar-right">
3333
<li>

0 commit comments

Comments
 (0)