Integrate Angular with Spring Boot

brew install node
brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk17

sdk install java

npm install -g @angular/cli@15

ng new notes --routing --style css

cd notes
ng serve

https start.spring.io/starter.zip type==gradle-project-kotlin \
  language==kotlin bootVersion==3.0.4 \
  artifactId==notes-api groupId==com.okta.developer \
  packageName==com.okta.developer.notes \
  dependencies==h2,data-jpa,data-rest,okta,validation,web -d

unzip notes-api.zip -d angular-spring-boot/notes-api

npm i -D angular-crud@3

mkdir -p src/app/note

{
  "title": "Notes",
  "entity": "note",
  "api": {
    "url": "http://localhost:8080/api/notes"
  },
  "filter": [
    "title"
  ],
  "fields": [
    {
      "name": "id",
      "label": "Id",
      "isId": true,
      "readonly": true,
      "type": "number"
    },
    {
      "name": "title",
      "type": "string",
      "label": "Title"
    },
    {
      "name": "text",
      "type": "string",
      "label": "Text"
    }
  ]
}

ng g angular-crud:crud-module note --style bootstrap

CREATE src/app/note/note-filter.ts (42 bytes)
CREATE src/app/note/note.module.ts (659 bytes)
CREATE src/app/note/note.routes.ts (346 bytes)
CREATE src/app/note/note.service.spec.ts (607 bytes)
CREATE src/app/note/note.service.ts (1774 bytes)
CREATE src/app/note/note.ts (72 bytes)
CREATE src/app/note/note-edit/note-edit.component.html (1007 bytes)
CREATE src/app/note/note-edit/note-edit.component.spec.ts (978 bytes)
CREATE src/app/note/note-edit/note-edit.component.ts (1527 bytes)
CREATE src/app/note/note-list/note-list.component.html (1601 bytes)
CREATE src/app/note/note-list/note-list.component.spec.ts (978 bytes)
CREATE src/app/note/note-list/note-list.component.ts (1116 bytes)
UPDATE src/app/app.module.ts (540 bytes)

import { Routes } from '@angular/router';
import { NoteListComponent } from './note-list/note-list.component';
import { NoteEditComponent } from './note-edit/note-edit.component';
import { AuthGuard } from '@auth0/auth0-angular';

export const NOTE_ROUTES: Routes = [
  {
    path: 'notes',
    component: NoteListComponent,
    canActivate: [AuthGuard],
  },
  {
    path: 'notes/:id',
    component: NoteEditComponent,
    canActivate: [AuthGuard]
  }
];

<div>
  <button *ngIf="(auth.isAuthenticated$ | async) === false" (click)="login()">Login</button>
  <p><a routerLink="/notes" *ngIf="auth.isAuthenticated$ | async">View Notes</a></p>
  <button *ngIf="auth.isAuthenticated$ | async" (click)="logout()">Logout</button>
</div>

<h1>{{ title }} app is running!</h1>

<router-outlet></router-outlet>

Creating note: Note(id=null, title=1st note, text=Wahoo!, username=auth0|61bcbc76f64d4a0072af8a1d)

find(filter: NoteFilter): Observable<Note[]> {
  const params = {
    'title': filter.title,
  };
  const userNotes = 'http://localhost:8080/user/notes';
  return this.http.get<Note[]>(userNotes, {params, headers});
}

import { Component, OnInit } from '@angular/core';
import { NoteFilter } from '../note-filter';
import { NoteService } from '../note.service';
import { Note } from '../note';

@Component({
  selector: 'app-note',
  templateUrl: 'note-list.component.html'
})
export class NoteListComponent implements OnInit {

  filter = new NoteFilter();
  selectedNote!: Note;
  feedback: any = {};

  get noteList(): Note[] {
    return this.noteService.noteList;
  }

  constructor(private noteService: NoteService) {
  }

  ngOnInit() {
    this.search();
  }

  search(): void {
    this.noteService.load(this.filter);
  }

  select(selected: Note): void {
    this.selectedNote = selected;
  }

  delete(note: Note): void {
    if (confirm('Are you sure?')) {
      this.noteService.delete(note).subscribe({
        next: () => {
          this.feedback = {type: 'success', message: 'Delete was successful!'};
          setTimeout(() => {
            this.search();
          }, 1000);
        },
        error: err => {
          this.feedback = {type: 'warning', message: 'Error deleting.'};
        }
      });
    }
  }
}

<a [routerLink]="['../notes', item.id ]" class="btn btn-secondary">Edit</a>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { NoteService } from '../note.service';
import { Note } from '../note';
import { map, switchMap } from 'rxjs/operators';
import { of } from 'rxjs';

@Component({
  selector: 'app-note-edit',
  templateUrl: './note-edit.component.html'
})
export class NoteEditComponent implements OnInit {

  id!: string;
  note!: Note;
  feedback: any = {};

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private noteService: NoteService) {
  }

  ngOnInit() {
    this
      .route
      .params
      .pipe(
        map(p => p['id']),
        switchMap(id => {
          if (id === 'new') { return of(new Note()); }
          return this.noteService.findById(id);
        })
      )
      .subscribe({
        next: note => {
          this.note = note;
          this.feedback = {};
        },
        error: err => {
          this.feedback = {type: 'warning', message: 'Error loading'};
        }
      });
  }

  save() {
    this.noteService.save(this.note).subscribe({
      next: note => {
        this.note = note;
        this.feedback = {type: 'success', message: 'Save was successful!'};
        setTimeout(async () => {
          await this.router.navigate(['/notes']);
        }, 1000);
      },
      error: err => {
        this.feedback = {type: 'warning', message: 'Error saving'};
      }
    });
  }

  async cancel() {
    await this.router.navigate(['/notes']);
  }
}

package com.okta.developer.notes

import org.mockito.Mockito.mock
import org.springframework.boot.test.context.TestConfiguration
import org.springframework.context.annotation.Bean
import org.springframework.security.oauth2.client.InMemoryOAuth2AuthorizedClientService
import org.springframework.security.oauth2.client.OAuth2AuthorizedClientService
import org.springframework.security.oauth2.client.registration.ClientRegistration
import org.springframework.security.oauth2.client.registration.ClientRegistrationRepository
import org.springframework.security.oauth2.client.registration.InMemoryClientRegistrationRepository
import org.springframework.security.oauth2.client.web.AuthenticatedPrincipalOAuth2AuthorizedClientRepository
import org.springframework.security.oauth2.client.web.OAuth2AuthorizedClientRepository
import org.springframework.security.oauth2.core.AuthorizationGrantType.AUTHORIZATION_CODE
import org.springframework.security.oauth2.core.ClientAuthenticationMethod.CLIENT_SECRET_BASIC
import org.springframework.security.oauth2.jwt.JwtDecoder

@TestConfiguration
class MockSecurityConfiguration {
    private val clientRegistration: ClientRegistration

    @Bean
    fun clientRegistrationRepository(): ClientRegistrationRepository {
        return InMemoryClientRegistrationRepository(clientRegistration)
    }

    private fun clientRegistration(): ClientRegistration.Builder {
        val metadata: MutableMap<String, Any> = HashMap()
        metadata["end_session_endpoint"] = "https://angular.org/logout"
        return ClientRegistration.withRegistrationId("okta")
            .redirectUri("{baseUrl}/{action}/oauth2/code/{registrationId}")
            .clientAuthenticationMethod(CLIENT_SECRET_BASIC)
            .authorizationGrantType(AUTHORIZATION_CODE)
            .scope("read:user")
            .authorizationUri("https://angular.org/login/oauth/authorize")
            .tokenUri("https://angular.org/login/oauth/access_token")
            .jwkSetUri("https://angular.org/oauth/jwk")
            .userInfoUri("https://api.angular.org/user")
            .providerConfigurationMetadata(metadata)
            .userNameAttributeName("id")
            .clientName("Client Name")
            .clientId("client-id")
            .clientSecret("client-secret")
    }

    @Bean
    fun jwtDecoder(): JwtDecoder {
        return mock(JwtDecoder::class.java)
    }

    @Bean
    fun authorizedService(registration: ClientRegistrationRepository?):
        OAuth2AuthorizedClientService {
        return InMemoryOAuth2AuthorizedClientService(registration)
    }

    @Bean
    fun authorizedRepository(client: OAuth2AuthorizedClientService?):
        OAuth2AuthorizedClientRepository {
        return AuthenticatedPrincipalOAuth2AuthorizedClientRepository(client)
    }

    init {
        clientRegistration = clientRegistration().build()
    }
}

package com.okta.developer.notes

import org.junit.jupiter.api.Test
import org.springframework.boot.test.context.SpringBootTest

@SpringBootTest(classes = [DemoApplication::class, MockSecurityConfiguration::class])
class DemoApplicationTests {

    @Test
    fun contextLoads() {
    }

}