Initial Commit

README.md

@@ -1,5 +1,33 @@
-# angular-8-role-based-authorization-example
+# Angular Role Based Authorization
 
-Angular 8 - Role Based Authorization Example with the Angular CLI
+<img src="/screenshots/Angular-Role-Based-Authorization-Home-Page.JPG" />
 
-For tutorial and live demo see https://jasonwatmore.com/post/2019/08/06/angular-8-role-based-authorization-tutorial-with-example
+-----------------------------------------------------------------------------
+
+<img src="/screenshots/Angular-Role-Based-Authorization-User-Page.JPG" />
+
+------------------------------------------------------------------------------
+
+<img src="/screenshots/Angular-Role-Based-Authorization-Admin-Page.JPG" />
+
+------------------------------------------------------------------------------
+
+### Developpement
+
+git clone https://github.com/PranamBhat/Angular-Role-Based-Authorization.git
+
+cd Angular-Role-Based-Authorization
+
+npm install
+
+npm start (or) ng serve
+
+Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
+
+### Production 
+* `npm run build`
+
+### Tests
+* `npm run lint`
+* `npm run test`
+* `npm run e2e`

src/app/_helpers/auth.guard.ts

@@ -20,7 +20,7 @@ export class AuthGuard implements CanActivate {
                 return false;
             }
 
-            // authorised so return true
+            // authorized so return true
             return true;
         }
 

src/app/admin/admin.component.html

@@ -1,10 +1,10 @@
-<div class="card mt-4">
+<div class="card mt-4" style="text-align: center;">
     <h4 class="card-header">Admin</h4>
     <div class="card-body">
         <p>This page can be accessed <u>only by administrators</u>.</p>
-        <p class="mb-1">All users from secure (admin only) api end point:</p>
+        <p class="mb-1">All Users From Secure (Admin Only) API End Point:</p>
         <div *ngIf="loading" class="spinner-border spinner-border-sm"></div>
-        <ul *ngIf="users">
+        <ul style="list-style:none" *ngIf="users">
             <li *ngFor="let user of users">{{user.firstName}} {{user.lastName}}</li>
         </ul>
     </div>

src/app/app.component.html

@@ -15,9 +15,9 @@
 <!-- credits -->
 <div class="text-center mt-4">
     <p>
-        <a href="https://jasonwatmore.com/post/2019/08/06/angular-8-role-based-authorization-tutorial-with-example" target="_top">Angular 8 - Role Based Authorization Tutorial with Example</a>
+        <a href="https://github.com/PranamBhat" target="_top">GitHub</a>
     </p>
     <p>
-        <a href="https://jasonwatmore.com" target="_top">JasonWatmore.com</a>
+        <a href="https://www.linkedin.com/in/pranam-bhat-11670689/" target="_top">LinkedIn</a>
     </p>
 </div>

src/app/home/home.component.html

@@ -1,10 +1,10 @@
 <div class="card mt-4">
-    <h4 class="card-header">Home</h4>
-    <div class="card-body">
-        <p>You're logged in with Angular 8 & JWT!!</p>
-        <p>Your role is: <strong>{{currentUser.role}}</strong>.</p>
+    <h4 class="card-header" style="text-align: center;">Home</h4>
+    <div class="card-body" style="text-align: center;">
+        <p>Log-in Successful ! Angular 8 - Role Based Authorization !!</p>
+        <p>Role : <strong>{{currentUser.role}}</strong></p>
         <p>This page can be accessed by <u>all authenticated users</u>.</p>
-        <p class="mb-1">Current user from secure api end point:</p>
+        <p class="mb-1">Current User From Secure API End Point:</p>
         <div *ngIf="loading" class="spinner-border spinner-border-sm"></div>
         <ul *ngIf="userFromApi">
             <li>{{userFromApi.firstName}} {{userFromApi.lastName}}</li>

src/app/login/login.component.html

@@ -1,22 +1,43 @@
-<div class="col-md-6 offset-md-3 mt-5">
-    <div class="alert alert-info">
-        <strong>Normal User</strong> - U: user P: user<br />
-        <strong>Administrator</strong> - U: admin P: admin
+<style>
+    .verticalLine {
+        border-left: solid blue;
+        height: 30px;
+    }
+</style>
+
+<div class="col-md-6 offset-md-3 mt-5">
+    <div class="alert alert-info" style="padding-left: 90px;">
+        <tr>
+            <td class="verticalLine" style="text-align: center;padding-left: 20px;padding-right: 20px;">
+                <strong>Normal User</strong><br />Username: user <br />Password: user <br />
+
+            </td>
+            <td class="verticalLine"></td>
+
+            <td style="text-align: center;padding-left: 20px;padding-right: 20px;">
+                <strong>Administrator</strong><br />Username: admin <br />Password : admin<br />
+
+            </td>
+            <td class="verticalLine"></td>
+        </tr>
     </div>
+
     <div class="card">
-        <h4 class="card-header">Angular 8 Role Based Auth Example</h4>
+        <h4 class="card-header">Angular 8 - Role Based Authorization</h4>
         <div class="card-body">
             <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
                 <div class="form-group">
                     <label for="username">Username</label>
-                    <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
+                    <input type="text" formControlName="username" class="form-control"
+                        [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
                     <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
                         <div *ngIf="f.username.errors.required">Username is required</div>
                     </div>
                 </div>
                 <div class="form-group">
                     <label for="password">Password</label>
-                    <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
+                    <input type="password" formControlName="password" class="form-control"
+                        [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
                     <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                         <div *ngIf="f.password.errors.required">Password is required</div>
                     </div>
@@ -29,4 +50,4 @@ <h4 class="card-header">Angular 8 Role Based Auth Example</h4>
             </form>
         </div>
     </div>
-</div>            
+</div>

src/app/login/login.component.ts

@@ -18,9 +18,9 @@ export class LoginComponent implements OnInit {
         private route: ActivatedRoute,
         private router: Router,
         private authenticationService: AuthenticationService
-    ) { 
+    ) {
         // redirect to home if already logged in
-        if (this.authenticationService.currentUserValue) { 
+        if (this.authenticationService.currentUserValue) {
             this.router.navigate(['/']);
         }
     }

src/index.html

@@ -1,14 +1,17 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <base href="/" />
-    <title>Angular 8 - Role Based Authorization Tutorial & Example</title>
+    <title>Angular 8 - Role Based Authorization</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- bootstrap css -->
     <link href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
 </head>
+
 <body>
     <app>Loading...</app>
 </body>
-</html>
+
+</html>