Skip to content

Commit ba83b4d

Browse files
JakeLo123JakeLo123
authored
Merge pull request #22 from FusionAuth/upgrade-to-SDK-v1.0
Upgrade to SDK v1.0.1
2 parents 9d8f044 + d9d6d20 commit ba83b4d

7 files changed

Lines changed: 112 additions & 54 deletions

File tree

‎complete-application/package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎complete-application/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@angular/platform-browser": "^17.3.1",
1919
"@angular/platform-browser-dynamic": "^17.3.1",
2020
"@angular/router": "^17.3.1",
21-
"@fusionauth/angular-sdk": "0.1.7",
21+
"@fusionauth/angular-sdk": "^1.0.1",
2222
"rxjs": "~7.8.1",
2323
"tslib": "^2.6.2",
2424
"zone.js": "~0.14.4"

‎complete-application/src/app/app.component.html‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,39 @@
11
<div id="page-container">
22
<div id="page-header">
33
<div id="logo-header">
4-
<img src="/assets/changebank.svg" alt="Change Bank" width="257" height="55"/>
5-
<div class="h-row" *ngIf="isLoggedIn">
6-
<p class="header-email" *ngIf="userInfo$ | async as userInfo">
7-
{{userInfo.email}}
4+
<img
5+
src="/assets/changebank.svg"
6+
alt="Change Bank"
7+
width="257"
8+
height="55"
9+
/>
10+
11+
@if (isLoggedIn) {
12+
<div class="h-row">
13+
<p class="header-email">
14+
@if (isGettingUserInfo) {
15+
{{ "Loading..." }}
16+
} @else {
17+
{{ userInfo?.email }}
18+
}
819
</p>
920
<a class="button-lg" (click)="logout()" style="cursor: pointer">
1021
Logout
1122
</a>
1223
</div>
13-
<a class="button-lg" *ngIf="!isLoggedIn" (click)="login()" style="cursor: pointer">
14-
Login
15-
</a>
24+
} @else {
25+
<a class="button-lg" (click)="login()" style="cursor: pointer"> Login </a>
26+
}
1627
</div>
1728

1829
<div id="menu-bar" class="menu-bar">
1930
<ng-container *ngIf="isLoggedIn">
20-
<a class="menu-link" routerLink="make-change" routerLinkActive="active">Make Change</a>
21-
<a class="menu-link" routerLink="account" routerLinkActive="active">Account</a>
31+
<a class="menu-link" routerLink="make-change" routerLinkActive="active"
32+
>Make Change</a
33+
>
34+
<a class="menu-link" routerLink="account" routerLinkActive="active"
35+
>Account</a
36+
>
2237
</ng-container>
2338
<ng-container *ngIf="!isLoggedIn">
2439
<a class="menu-link">About</a>

‎complete-application/src/app/app.component.ts‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,36 @@
1-
import {Component, inject} from '@angular/core';
2-
import {FusionAuthService, UserInfo} from "@fusionauth/angular-sdk";
3-
import {Observable} from "rxjs";
4-
import {fromPromise} from "rxjs/internal/observable/innerFrom";
1+
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
2+
import { FusionAuthService, UserInfo } from '@fusionauth/angular-sdk';
3+
import { Subscription } from 'rxjs';
54

65
@Component({
76
selector: 'app-root',
87
templateUrl: './app.component.html',
9-
styleUrls: ['./app.component.css']
8+
styleUrls: ['./app.component.css'],
109
})
11-
export class AppComponent {
12-
10+
export class AppComponent implements OnInit, OnDestroy {
1311
private fusionAuthService: FusionAuthService = inject(FusionAuthService);
1412

15-
isLoggedIn = false;
16-
userInfo$: Observable<UserInfo>;
13+
isLoggedIn: boolean = this.fusionAuthService.isLoggedIn();
14+
userInfo: UserInfo | null = null;
15+
isGettingUserInfo: boolean = false;
16+
subscription?: Subscription;
17+
18+
ngOnInit(): void {
19+
if (this.isLoggedIn) {
20+
this.subscription = this.fusionAuthService
21+
.getUserInfoObservable({
22+
onBegin: () => (this.isGettingUserInfo = true),
23+
onDone: () => (this.isGettingUserInfo = false),
24+
})
25+
.subscribe({
26+
next: (userInfo) => (this.userInfo = userInfo),
27+
error: (error) => console.error(error),
28+
});
29+
}
30+
}
1731

18-
constructor() {
19-
this.isLoggedIn = this.fusionAuthService.isLoggedIn();
20-
this.userInfo$ = this.isLoggedIn
21-
? fromPromise(this.fusionAuthService.getUserInfo())
22-
: new Observable<UserInfo>();
32+
ngOnDestroy(): void {
33+
this.subscription?.unsubscribe();
2334
}
2435

2536
logout() {

‎complete-application/src/app/app.module.ts‎

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,57 @@
1-
import {NgModule} from '@angular/core';
2-
import {BrowserModule} from '@angular/platform-browser';
3-
import {AppComponent} from './app.component';
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { AppComponent } from './app.component';
44
//tag::importAngularSDK[]
5-
import {FusionAuthModule} from "@fusionauth/angular-sdk";
5+
import { FusionAuthModule } from '@fusionauth/angular-sdk';
66
//end::importAngularSDK[]
77
//tag::importAuthGuard[]
8-
import {RouterModule} from "@angular/router";
9-
import {authGuard} from "./auth-guard";
8+
import { RouterModule } from '@angular/router';
9+
import { authGuard } from './auth-guard';
1010
//end::importAuthGuard[]
1111

1212
@NgModule({
13-
declarations: [
14-
AppComponent
15-
],
13+
declarations: [AppComponent],
1614
imports: [
1715
BrowserModule,
1816
//tag::routerConfiguration[]
1917
RouterModule.forRoot([
20-
{path: '', loadComponent: () => import('./home-page/home-page.component').then(m => m.HomePageComponent), canActivate: [authGuard(false, '/account')]},
21-
{path: 'account', loadComponent: () => import('./account-page/account-page.component').then(m => m.AccountPageComponent), canActivate: [authGuard(true, '/')]},
22-
{path: 'make-change', loadComponent: () => import('./make-change-page/make-change-page.component').then(m => m.MakeChangePageComponent), canActivate: [authGuard(true, '/')]},
18+
{
19+
path: '',
20+
loadComponent: () =>
21+
import('./home-page/home-page.component').then(
22+
(m) => m.HomePageComponent
23+
),
24+
canActivate: [authGuard(false, '/account')],
25+
},
26+
{
27+
path: 'account',
28+
loadComponent: () =>
29+
import('./account-page/account-page.component').then(
30+
(m) => m.AccountPageComponent
31+
),
32+
canActivate: [authGuard(true, '/')],
33+
},
34+
{
35+
path: 'make-change',
36+
loadComponent: () =>
37+
import('./make-change-page/make-change-page.component').then(
38+
(m) => m.MakeChangePageComponent
39+
),
40+
canActivate: [authGuard(true, '/')],
41+
},
2342
]),
2443
//end::routerConfiguration[]
2544
//tag::fusionAuthModuleConfiguration[]
2645
FusionAuthModule.forRoot({
2746
clientId: 'e9fdb985-9173-4e01-9d73-ac2d60d1dc8e',
2847
serverUrl: 'http://localhost:9011',
2948
redirectUri: 'http://localhost:4200',
49+
scope: 'openid email profile offline_access',
50+
shouldAutoRefresh: true,
3051
}),
3152
//end::fusionAuthModuleConfiguration[]
3253
],
3354
providers: [],
34-
bootstrap: [AppComponent]
55+
bootstrap: [AppComponent],
3556
})
36-
export class AppModule {
37-
}
57+
export class AppModule {}

‎complete-application/src/app/home-page/home-page.component.html‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,28 @@
11
<div class="column-container">
22
<div class="content-container">
3-
<div style="margin-bottom: 100px;">
3+
<div style="margin-bottom: 100px">
44
<h1>Welcome to Changebank</h1>
5-
<p>To get started,
6-
<button class="button-redirect" (click)="login()" style="cursor: pointer">log in</button>
5+
<p>
6+
To get started,
7+
<button
8+
class="button-redirect"
9+
(click)="login()"
10+
style="cursor: pointer"
11+
>
12+
log in
13+
</button>
714
or
8-
<button class="button-redirect" (click)="register()" style="cursor: pointer">create a new account.</button>
15+
<button
16+
class="button-redirect"
17+
(click)="register()"
18+
style="cursor: pointer"
19+
>
20+
create a new account.
21+
</button>
922
</p>
1023
</div>
1124
</div>
12-
<div style="flex: 0;">
13-
<img src="/assets/money.jpg" style="max-width: 800px;"/>
25+
<div style="flex: 0">
26+
<img src="/assets/money.jpg" style="max-width: 800px" />
1427
</div>
1528
</div>

‎complete-application/src/app/home-page/home-page.component.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import {Component, inject} from '@angular/core';
2-
import {FusionAuthService} from "@fusionauth/angular-sdk";
3-
import {CommonModule} from "@angular/common";
1+
import { Component, inject } from '@angular/core';
2+
import { FusionAuthService } from '@fusionauth/angular-sdk';
3+
import { CommonModule } from '@angular/common';
44

55
@Component({
66
selector: 'app-home-page',
77
standalone: true,
88
imports: [CommonModule],
99
templateUrl: './home-page.component.html',
10-
styleUrls: ['./home-page.component.css']
10+
styleUrls: ['./home-page.component.css'],
1111
})
1212
export class HomePageComponent {
13-
1413
private fusionAuthService = inject(FusionAuthService);
1514

1615
login() {

0 commit comments

Comments
 (0)