jwt auth scaffolding

logging in now works

UI login component created

src/app/app-routing.module.ts

@@ -4,11 +4,15 @@ import { MainComponent } from './main/main.component';
 import { PlayerComponent } from './player/player.component';
 import { SubscriptionsComponent } from './subscriptions/subscriptions.component';
 import { SubscriptionComponent } from './subscription/subscription/subscription.component';
+import { PostsService } from './posts.services';
+import { LoginComponent } from './components/login/login.component';
+
 const routes: Routes = [
-  { path: 'home', component: MainComponent },
-  { path: 'player', component: PlayerComponent},
-  { path: 'subscriptions', component: SubscriptionsComponent },
-  { path: 'subscription', component: SubscriptionComponent },
+  { path: 'home', component: MainComponent, canActivate: [PostsService] },
+  { path: 'player', component: PlayerComponent, canActivate: [PostsService]},
+  { path: 'subscriptions', component: SubscriptionsComponent, canActivate: [PostsService] },
+  { path: 'subscription', component: SubscriptionComponent, canActivate: [PostsService] },
+  { path: 'login', component: LoginComponent },
   { path: '', redirectTo: '/home', pathMatch: 'full' },
 ];
 

src/app/app.module.ts

@@ -57,6 +57,7 @@ import { ArgModifierDialogComponent, HighlightPipe } from './dialogs/arg-modifie
 import { UpdaterComponent } from './updater/updater.component';
 import { UpdateProgressDialogComponent } from './dialogs/update-progress-dialog/update-progress-dialog.component';
 import { ShareMediaDialogComponent } from './dialogs/share-media-dialog/share-media-dialog.component';
+import { LoginComponent } from './components/login/login.component';
 registerLocaleData(es, 'es');
 
 export function isVisible({ event, element, scrollContainer, offset }: IsVisibleProps<any>) {
@@ -85,7 +86,8 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     HighlightPipe,
     UpdaterComponent,
     UpdateProgressDialogComponent,
-    ShareMediaDialogComponent
+    ShareMediaDialogComponent,
+    LoginComponent
   ],
   imports: [
     CommonModule,

src/app/components/login/login.component.html

@@ -0,0 +1,22 @@
+<mat-card class="login-card">
+    <mat-tab-group>
+        <mat-tab label="Login">
+            <div style="margin-top: 10px;">
+                <mat-form-field>
+                    <input [(ngModel)]="usernameInput" matInput placeholder="User name">
+                </mat-form-field>
+            </div>
+            <div>
+                <mat-form-field>
+                    <input [(ngModel)]="passwordInput" type="password" matInput placeholder="Password">
+                </mat-form-field>
+            </div>
+            <div style="margin-bottom: 10px; margin-top: 10px;">
+                <button [disabled]="loggingIn" color="primary" (click)="login()" mat-raised-button>Login</button>
+            </div>
+        </mat-tab>
+        <mat-tab *ngIf="registrationEnabled" label="Register">
+
+        </mat-tab>
+    </mat-tab-group>
+</mat-card>

src/app/components/login/login.component.scss

@@ -0,0 +1,6 @@
+.login-card {
+    max-width: 600px;
+    width: 80%;
+    margin: 0 auto;
+    margin-top: 20px;
+}

src/app/components/login/login.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/login/login.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+  usernameInput = '';
+  passwordInput = '';
+  registrationEnabled = true;
+  loggingIn = false;
+
+  constructor(private postsService: PostsService) { }
+
+  ngOnInit(): void {
+  }
+
+  login() {
+    this.loggingIn = true;
+    this.postsService.login(this.usernameInput, this.passwordInput).subscribe(res => {
+      this.loggingIn = false;
+      console.log(res);
+    }, err => {
+      this.loggingIn = false;
+    });
+  }
+
+}

src/app/posts.services.ts

@@ -5,12 +5,12 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/observable/throw';
 import { THEMES_CONFIG } from '../themes';
-import { Router } from '@angular/router';
+import { Router, CanActivate } from '@angular/router';
 import { DOCUMENT } from '@angular/common';
 import { BehaviorSubject } from 'rxjs';
 
 @Injectable()
-export class PostsService {
+export class PostsService implements CanActivate {
     path = '';
     audioFolder = '';
     videoFolder = '';
@@ -24,6 +24,10 @@ export class PostsService {
     httpOptions = null;
 
     debugMode = false;
+
+    isLoggedIn = false;
+    token = null;
+    user = null;
     constructor(private http: HttpClient, private router: Router, @Inject(DOCUMENT) private document: Document) {
         console.log('PostsService Initialized...');
         // this.startPath = window.location.href + '/api/';
@@ -41,6 +45,11 @@ export class PostsService {
             }),
         };
     }
+    canActivate(route, state): boolean {
+        console.log(route);
+        return true;
+        throw new Error('Method not implemented.');
+    }
 
     setTheme(theme) {
         this.theme = this.THEMES_CONFIG[theme];
@@ -233,4 +242,27 @@ export class PostsService {
         return this.http.get('https://api.github.com/repos/tzahi12345/youtubedl-material/releases');
     }
 
+    afterLogin(user, token) {
+        this.isLoggedIn = true;
+        this.user = user;
+        this.token = token;
+
+        this.httpOptions = {
+            params: new HttpParams({
+              fromString: `apiKey=${this.auth_token}&jwt=${this.token}`
+            }),
+        };
+    }
+
+    // user methods
+    login(username, password) {
+        const call = this.http.post(this.path + 'auth/login', {userid: username, password: password}, this.httpOptions);
+        call.subscribe(res => {
+            if (res['token']) {
+                this.afterLogin(res['user'], res['token']);
+            }
+        });
+        return call;
+    }
+
 }