Skip to content

Commit 125d9df

Browse files
author
vakrilov
committed
Login example
1 parent 3fa532b commit 125d9df

File tree

5 files changed

+146
-8
lines changed

5 files changed

+146
-8
lines changed

‎nativescript-angular/router/ns-location-strategy.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,6 @@ export class NSLocationStrategy extends LocationStrategy {
184184
throw new Error("Calling navigateToNewPage while already navigating to new page.");
185185
}
186186

187-
188187
this._isPageNavigatingForward = true;
189188
return this._currentNavigationOptions || defaultNavOptions;
190189
}

‎nativescript-angular/router/ns-router-link.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@ export class NSRouterLink {
6565
@HostListener("tap")
6666
onTap() {
6767
routerLog("nsRouterLink.tapped: " + this.commands + " usePageRoute: " + this.usePageRoute + " clearHistory: " + this.clearHistory + " transition: " + JSON.stringify(this.pageTransition));
68-
68+
6969
const currentRoute = this.usePageRoute ? this.pageRoute.activatedRoute.getValue() : this.route;
70-
const transition = this.getTrasnition();
70+
const transition = this.getTransition();
7171
let extras: NavigationExtras & NavigationOptions = {
7272
relativeTo: currentRoute,
7373
queryParams: this.queryParams,
@@ -80,7 +80,7 @@ export class NSRouterLink {
8080
this.navigator.navigate(this.commands, extras);
8181
}
8282

83-
private getTrasnition(): { animated: boolean, transition?: NavigationTransition } {
83+
private getTransition(): { animated: boolean, transition?: NavigationTransition } {
8484
if (typeof this.pageTransition === "boolean") {
8585
return { animated: <boolean>this.pageTransition };
8686
} else if (isString(this.pageTransition)) {

‎nativescript-angular/router/router-extensions.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,17 @@ export class RouterExtensions {
1111

1212
constructor(public router: Router, public locationStrategy: NSLocationStrategy, public frame: Frame) { }
1313

14-
public navigate(commands: any[], extras?: NavigationExtras, options?: ExtendedNavigationExtras): Promise<boolean> {
15-
this.locationStrategy._setNavigationOptions(extras);
14+
public navigate(commands: any[], extras?: ExtendedNavigationExtras): Promise<boolean> {
15+
if (extras) {
16+
this.locationStrategy._setNavigationOptions(extras);
17+
}
1618
return this.router.navigate(commands, extras);
1719
}
1820

1921
public navigateByUrl(url: string | UrlTree, options?: NavigationOptions): Promise<boolean> {
20-
this.locationStrategy._setNavigationOptions(options);
22+
if (options) {
23+
this.locationStrategy._setNavigationOptions(options);
24+
}
2125
return this.router.navigateByUrl(url);
2226
}
2327

‎ng-sample/app/app.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import { RouterOutletAppComponent, RouterOutletRouterProviders} from "./examples
4141
import { PageRouterOutletAppComponent, PageRouterOutletRouterProviders } from "./examples/router/page-router-outlet-test";
4242
import { PageRouterOutletNestedAppComponent, PageRouterOutletNestedRouterProviders } from "./examples/router/page-router-outlet-nested-test";
4343
import { ClearHistoryAppComponent, ClearHistoryRouterProviders } from "./examples/router/clear-history-test";
44+
import { LoginAppComponent, LoginExampleProviders } from "./examples/router/login-test";
4445

4546
// animations
4647
import { AnimationEnterLeaveTest } from "./examples/animation/animation-enter-leave-test";
@@ -64,7 +65,8 @@ import { AnimationStatesTest } from "./examples/animation/animation-states-test"
6465
// nativeScriptBootstrap(RouterOutletAppComponent, [RouterOutletRouterProviders]);
6566
// nativeScriptBootstrap(PageRouterOutletAppComponent, [PageRouterOutletRouterProviders]);
6667
// nativeScriptBootstrap(PageRouterOutletNestedAppComponent, [PageRouterOutletNestedRouterProviders]);
67-
nativeScriptBootstrap(ClearHistoryAppComponent, [ClearHistoryRouterProviders]);
68+
// nativeScriptBootstrap(ClearHistoryAppComponent, [ClearHistoryRouterProviders]);
69+
nativeScriptBootstrap(LoginAppComponent, [LoginExampleProviders]);
6870

6971
// router-deprecated
7072
// nativeScriptBootstrap(NavigationTest, [NS_ROUTER_PROVIDERS_DEPRECATED]);

‎ng-sample/app/examples/router/login-test.ts‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import { Component, OnInit, OnDestroy, Injectable } from "@angular/core";
2+
import { RouterConfig, Router, CanActivate} from '@angular/router';
3+
import { Observable } from "rxjs";
4+
import { NS_ROUTER_DIRECTIVES, nsProvideRouter, RouterExtensions, PageRoute} from "nativescript-angular/router";
5+
import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
6+
import { BehaviorSubject} from "rxjs";
7+
import * as appSettings from "application-settings"
8+
9+
const USER_KEY = "user";
10+
11+
@Injectable()
12+
class LoginService {
13+
username: string;
14+
get isLogged(): boolean { return !!this.username; }
15+
16+
constructor() {
17+
this.username = appSettings.getString(USER_KEY);
18+
console.log("LoginService.constructor() username: " + this.username);
19+
}
20+
21+
login(user: string, password: string): Promise<boolean> {
22+
console.log("LoginService.login() username: " + this.username);
23+
if (user) {
24+
this.username = user;
25+
appSettings.setString(USER_KEY, this.username);
26+
return Promise.resolve(true);
27+
} else {
28+
return Promise.resolve(false);
29+
}
30+
}
31+
32+
logout(): Promise<boolean> {
33+
console.log("LoginService.logout()");
34+
35+
this.username = undefined;
36+
appSettings.remove(USER_KEY);
37+
return Promise.resolve(true);
38+
}
39+
}
40+
41+
42+
@Component({
43+
selector: 'login',
44+
directives: [NS_ROUTER_DIRECTIVES],
45+
styleUrls: ["examples/router/styles.css"],
46+
template: `
47+
<StackLayout>
48+
<Label text="Login Page" class="title"></Label>
49+
50+
<TextField [(ngModel)]="user" hint="user"></TextField>
51+
<TextField [(ngModel)]="pass" hint="password" secure="true"></TextField>
52+
<Button text='Login' (tap)="login()" class="stretch"></Button>
53+
</StackLayout>
54+
`
55+
})
56+
class LoginComponent {
57+
public user: string;
58+
public pass: string;
59+
constructor(private nav: RouterExtensions, private loginService: LoginService) {
60+
}
61+
62+
login() {
63+
this.loginService.login(this.user, this.pass).then((result) => {
64+
if (result) {
65+
this.nav.navigate(["/"], { clearHistory: true });
66+
}
67+
});
68+
}
69+
}
70+
71+
@Component({
72+
selector: 'main',
73+
directives: [NS_ROUTER_DIRECTIVES],
74+
styleUrls: ["examples/router/styles.css"],
75+
template: `
76+
<StackLayout>
77+
<Label text="Main Page" class="title"></Label>
78+
<Label [text]="'Hello, ' + loginService.username" class="subtitle"></Label>
79+
<Button text='logout' (tap)="logout()" class="stretch"></Button>
80+
</StackLayout>
81+
`
82+
})
83+
class MainComponent {
84+
constructor(private nav: RouterExtensions, private loginService: LoginService) {
85+
}
86+
87+
logout() {
88+
this.loginService.logout().then((result) => {
89+
if (result) {
90+
this.nav.navigate(["/login"], { clearHistory: true });
91+
}
92+
});
93+
}
94+
}
95+
96+
@Injectable()
97+
class AuthGuard implements CanActivate {
98+
constructor(
99+
private loginService: LoginService,
100+
private nav: RouterExtensions) {
101+
}
102+
103+
canActivate() {
104+
if (this.loginService.isLogged) {
105+
console.log("GUARD: authenticated");
106+
return true;
107+
}
108+
else {
109+
console.log("GUARD: redirecting to login");
110+
this.nav.navigate(["/login"]);
111+
return false;
112+
}
113+
}
114+
}
115+
116+
@Component({
117+
selector: 'navigation-test',
118+
directives: [NS_ROUTER_DIRECTIVES],
119+
template: `<page-router-outlet></page-router-outlet>`
120+
})
121+
export class LoginAppComponent { }
122+
123+
const routes: RouterConfig = [
124+
{ path: "", redirectTo: "/main", terminal: true },
125+
{ path: "main", component: MainComponent, canActivate: [AuthGuard] },
126+
{ path: "login", component: LoginComponent },
127+
];
128+
129+
export const LoginExampleProviders = [
130+
LoginService,
131+
AuthGuard,
132+
nsProvideRouter(routes, { enableTracing: false })
133+
];

0 commit comments

Comments
 (0)