jwt and login works

matsen-tool/src/app/_helpers/jwt.interceptor.ts

@@ -10,6 +10,7 @@ export class JwtInterceptor implements HttpInterceptor {
     constructor(private accountService: AccountService) { }
 
     intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        console.log('intercept');
         // add auth header with jwt if user is logged in and request is to the api url
         const user = this.accountService.userValue;
         const isLoggedIn = user && user.token;

matsen-tool/src/app/_services/account.service.ts

@@ -24,8 +24,8 @@ export class AccountService {
         return this.userSubject.value;
     }
 
-    login(username: string, password: string) {
-        return this.http.post<User>(`${environment.apiUrl}/login`, { username, password })
+    login(email: string, password: string) {
+        return this.http.post<User>(`${environment.basePath}/auth`, { email, password })
             .pipe(map(user => {
                 // store user details and jwt token in local storage to keep user logged in between page refreshes
                 localStorage.setItem('user', JSON.stringify(user));

matsen-tool/src/app/app.component.html

@@ -7,14 +7,6 @@
     </div>
 </nav>
 
-<!--<ul>-->
-<!--  <li>Posts</li>-->
-<!--  <li *ngFor="let post of posts">-->
-<!--    <h2>{{post.id}} - {{post.owner}}</h2>-->
-<!--    <p>{{post.message}}</p>-->
-<!--  </li>-->
-<!--</ul>-->
-
 <!-- main app container -->
 <div class="app-container" [ngClass]="{ 'bg-light': user }">
     <alert></alert>

matsen-tool/src/app/app.component.ts

@@ -1,36 +1,27 @@
 import {Component, OnInit} from '@angular/core';
 
-import { AccountService } from './_services';
-import { User } from './_models';
+import {AccountService} from './_services';
+import {User} from './_models';
 import {Subscription} from "rxjs";
 import {PostJsonld, PostService} from "@app/core/api/v1";
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrl: 'app.component.scss'
+    selector: 'app-root',
+    templateUrl: 'app.component.html',
+    styleUrl: 'app.component.scss'
 })
 export class AppComponent implements OnInit {
     user?: User | null;
-  protected postSub: Subscription;
-  protected posts: Array<PostJsonld>;
 
 
     constructor(private postService: PostService, private accountService: AccountService) {
         this.accountService.user.subscribe(x => this.user = x);
-      this.postSub = new Subscription();
-      this.posts = [];
     }
-  ngOnInit(): void {
-    this.postSub = this.postService.postsGetCollection().subscribe(
-      data => {
 
-        this.posts = data["hydra:member"];
-        console.log(data);
-      }
-    );
+    ngOnInit(): void {
+
+    }
 
-  }
     logout() {
         this.accountService.logout();
     }

matsen-tool/src/app/app.module.ts

@@ -1,26 +1,27 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ReactiveFormsModule} from '@angular/forms';
+import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';
 
 // used to create fake backend
-import { fakeBackendProvider } from './_helpers';
+import {fakeBackendProvider} from './_helpers';
 
-import { AppRoutingModule } from './app-routing.module';
-import { JwtInterceptor, ErrorInterceptor } from './_helpers';
-import { AppComponent } from './app.component';
-import { AlertComponent } from './_components';
-import { HomeComponent } from './home';
+import {AppRoutingModule} from './app-routing.module';
+import {JwtInterceptor, ErrorInterceptor} from './_helpers';
+import {AppComponent} from './app.component';
+import {AlertComponent} from './_components';
+import {HomeComponent} from './home';
 import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
 import {ApiModule, Configuration, ConfigurationParameters} from "@app/core/api/v1";
 import {environment} from "@environments/environment";
 import {MatCardModule} from "@angular/material/card";
 
 export function apiConfigFactory(): Configuration {
-  const params: ConfigurationParameters = {
-    basePath: environment.basePath,
-  };
-  return new Configuration(params);
+    const params: ConfigurationParameters = {
+        basePath: environment.basePath,
+        withCredentials: false
+    };
+    return new Configuration(params);
 }
 
 @NgModule({
@@ -31,7 +32,7 @@ export function apiConfigFactory(): Configuration {
         HttpClientModule,
         NgbModule,
         AppRoutingModule,
-      MatCardModule
+        MatCardModule
     ],
     declarations: [
         AppComponent,
@@ -39,12 +40,13 @@ export function apiConfigFactory(): Configuration {
         HomeComponent
     ],
     providers: [
-        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
-        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
+        {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},
+        {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true},
 
         // provider used to create fake backend
         fakeBackendProvider
     ],
     bootstrap: [AppComponent]
 })
-export class AppModule { };
+export class AppModule {
+};

matsen-tool/src/app/home/home.component.html

@@ -58,3 +58,10 @@
         </div>
     </div>
 </div>
+<ul>
+    <li>Posts</li>
+    <li *ngFor="let post of posts">
+        <h2>{{post.id}} - {{post.owner}}</h2>
+        <p>{{post.message}}</p>
+    </li>
+</ul>

matsen-tool/src/app/home/home.component.ts

@@ -1,17 +1,33 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 import { User } from '@app/_models';
 import { AccountService } from '@app/_services';
 import {MatCardModule} from "@angular/material/card";
+import {Subscription} from "rxjs";
+import {PostJsonld, PostService} from "@app/core/api/v1";
 
 @Component({
   templateUrl: 'home.component.html',
   styleUrl: 'home.component.scss'
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit{
     user: User | null;
+    protected postSub: Subscription;
+    protected posts: Array<PostJsonld>;
 
-    constructor(private accountService: AccountService) {
+    constructor(private accountService: AccountService, private postService: PostService) {
         this.user = this.accountService.userValue;
+        // this.accountService.user.subscribe(x => this.user = x);
+        this.postSub = new Subscription();
+        this.posts = [];
+    }
+
+    ngOnInit(): void {
+        this.postSub = this.postService.postsGetCollection().subscribe(
+            data => {
+                this.posts = data["hydra:member"];
+            }
+        );
+
     }
 }

matsen-tool/src/app/users/list.component.ts

@@ -12,16 +12,17 @@ export class ListComponent implements OnInit {
     protected users: Array<UserJsonld>;
 
     constructor(private userService: UserService) {
-      this.usersSub = new Subscription();
-      this.users = [];
+        this.usersSub = new Subscription();
+        this.users = [];
+        console.log('sdaaadsds');
     }
 
     ngOnInit() {
         this.usersSub = this.userService.usersGetCollection().subscribe(
           data => {
-
-            this.users = data["hydra:member"];
-            console.log(data);
+              console.log('sdaaadsds2332232332');
+              this.users = data["hydra:member"];
+              console.log(data);
           }
         );
         // this.accountService.getAll()

matsen-tool/src/environments/environment.ts

@@ -4,8 +4,8 @@
 
 export const environment = {
     production: false,
-    apiUrl: 'https://matsen-tool-be.ddev.site:8443',
-    basePath: 'https://matsen-tool-be.ddev.site:8443'
+    basePath: 'https://matsen-tool-be.ddev.site:8443',
+    apiUrl: 'https://matsen-tool-be.ddev.site:8443/api'
 };
 
 /*