This article is the follow up of Angular 2+ and Ruby on Rails user authentication App Architecture Components Home component (Welcome Page) Toolbar component Auth dialog component Login from component Register form component Profile component Separating Login and Register forms into different components is useful, because we can reuse them in other pages if needed (for example dedicated login and register pages without a dialog) Routes Home route Profile route Route Guards : will check if user is logged in, if not, will redirect to home Profile route guard Services : will manage login, register, logout, user profile data, verify token authenticity, and check wether the user is logged in or not TokenAuthService Home Component and Home Route Let’s start by generating our first component, Home, with Angular CLI: $ ng g c home g = generate and c = component This will create ./src/app/ folder with home component class, its template and stylesheet, Angular CLI will also add it to Main App Module’s declarations array automatically. home Now we need to create a route for it, open ./src/app/app-routing.module.ts Import the HomeComponent: import {HomeComponent} from "./home/home.component"; and add home route to routes array: const routes: Routes = [{path: '',children: []}, ]; {path: 'home',component: HomeComponent} We’ll also make it the default route: const routes: Routes = [{path: '',component: HomeComponent,pathMatch: 'full'},{path: 'home',component: HomeComponent}]; Now if we go to HomeComponent will be displayed by default http://localhost:4200 Toolbar Component Same procedure for Toolbar Component: $ ng g c toolbar Setup toolbar’s html template: For now we’ll display all actions, we’ll implement the conditional state later. Change to something more appealing: ./src/app/home/home.component.html Edit as follows to display our toolbar and wrap the router outlet in class: ./src/app/app.component.html container And here’s what we get so far: Auth Dialog Now we need to create the which will display Login/Register forms: AuthDialogComponent $ ng g c auth-dialog Let’s edit the AuthDialogComponent file in ./src/app/auth-dialog/auth-dialog.component.ts Auth Dialog Component will have an decorator (line 11) , it takes 2 possible values, ‘login’ or ‘register’, this will allow us to pick the initial form to display when the dialog shows up (login or register form). The default value of this input is ‘login’. Input authMode (line 12) is an event emitter, required by Materialize Dialog Directive, we’ll emit events on it to open or close our dialog. modalActions (line 18) method takes a as its parameter, will set the current auth mode and display the dialog, if no parameter is passed, login will be the default. openDialog mode and methods will help us to display the login or register forms conditionally. isLoginMode isRegisterMode Edit this dialog’s template, : ./src/app/auth-dialog/auth-dialog.component.html On line 2, we are using , and passing event emitter for its input to be able to control the dialog by emitting events on it. materialize modal directive modalActions materializeActions For now all this dialog is displaying is its current mode on line 17, and the ability to switch modes on lines 23 and 26. The structural directive takes a boolean expression, if the expression is , it will display the node, or hide it otherwise (remove it from the DOM). *ngIf true Let’s display this dialog when we click on register or login actions in the toolbar. In include the auth-dialog component, and create click events on Login and Register actions to open the Auth Dialog: ./src/app/toolbar/toolbar.component.html (line 24) is a reference to the AuthDialogComponent of our ToolbarComponent view, it will allow us to access the AuthDialogComponent class from the ToolbarComponent class. #authDialog ./src/app/toolbar/toolbar.component.ts: import {Component, OnInit, } from '@angular/core'; ViewChild import {AuthDialogComponent} from "../auth-dialog/auth-dialog.component"; @Component({selector: 'app-toolbar',templateUrl: './toolbar.component.html',styleUrls: ['./toolbar.component.sass']})export class ToolbarComponent implements OnInit { @ViewChild('authDialog') authDialog: AuthDialogComponent; constructor() { } ngOnInit() {} presentAuthDialog(mode?: 'login'| 'register'){this.authDialog.openDialog(mode);} } decorator will reference the from our template so we can access its methods and attributes directly from our class. ViewChild AuthDialogComponent ToolbarComponent method takes an parameter , AuthDialogComponenet’s method defaults the mode to ‘login’, so if we want to open the login dialog, we can just call without any params. presentAuthDialog optional mode (notice the question mark) openDialog presentAuthDialog() So this is what we get for the Auth Dialog so far: We’ll use the to display the correct actions in the toolbar depending on wether or not the user is authenticated, for that, we can use which returns true of the user is logged in. Token Service the userSignedIn() method Import and inject into our : Angular2TokenService ToolbarComponent Now we can use it on our toolbar template to hide/show actions conditionally, we’ll also attach the method to its action: signOut Login & Register forms We’re almost finished. Let’s generate login and register form components. $ ng g c login-form $ ng g c register-form Login form template We have two text inputs (email & password) both of which are required for form to have a valid state. We are using Angular’s two way data binding on line 12 and 24 to bind the input values to signInUser object in our component class, which means the values will be updated when they are modified in the HTML form by the user, and also updated in the view if they are modified programatically in the component class. Submit button (line 31) will be in disabled state unless the form becomes valid (line 32). Login form component Login form will have an output (line 16), which is an event fired when login request completes, so the parent components can listen and act on it. onFormResult We’ll inject the into our component (line 17) and use its method when the form is submitted. When the login action completes, we’ll emit an event on output, with a payload containing the result (lines 31 and 37), this will notify the parent components. Token Service signIn onFormResult Register form template Pretty similar to login from, but have have an additional password confirmation text field and its validation. Register form component Similar to login form, register form has an Output event emitter, , that fires when register request completes. onFormResult Hooking up the outputs in auth dialog In the auth dialog component class, create the event handlers for events emitted by and form components, if the the login/register was successful, close the dialog, otherwise display the error returned by our RoR server in an alert window: onFormResult login register Final Auth Dialog Notice the toolbar actions updating their state automatically when user logs in and out. Final source code for this part is available on Github: https://github.com/avatsaev/angular-token-auth-seed/tree/final Part 4: User Profile, Auth Service and Auth Router Guard.

Different

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Angular 2+ and Ruby on Rails user authentication Part 3

Too Long; Didn't Read

Company Mentioned

A. Vatsaev

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Angular 2+ and Ruby on Rails user authentication Part 3

Too Long; Didn't Read

Company Mentioned

A. Vatsaev

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES