FEAT(angular6): UX improvements added to marketplace without chat app…

…lication
talkjs · Oct 30, 2018 · cb9f67d · cb9f67d
1 parent 704815b
commit cb9f67d
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 10 deletions.
diff --git a/angular6/marketplace/src/app/core/authentication/authentication.module.ts b/angular6/marketplace/src/app/core/authentication/authentication.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { routing } from 'src/app/core/authentication/authentication.routing';
 import { LoginComponent } from 'src/app/core/authentication/components/login/login.component';
@@ -9,7 +10,8 @@ import { LoginComponent } from 'src/app/core/authentication/components/login/log
   imports: [
     CommonModule,
     routing,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    NgbAlertModule
   ],
   declarations: [LoginComponent]
 })

diff --git a/angular6/marketplace/src/app/core/authentication/components/login/login.component.html b/angular6/marketplace/src/app/core/authentication/components/login/login.component.html
@@ -1,4 +1,10 @@
 <div class="login-page">
+    <ngb-alert [dismissible]="false">
+        <p>
+            Try logging into 'Jason'.
+        </p>         
+    </ngb-alert>
+
     <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" class="form">
       <div class="login-form">
         <input type="text" class="form-control" formControlName="username" placeholder="username"/>

diff --git a/angular6/marketplace/src/app/core/core.module.ts b/angular6/marketplace/src/app/core/core.module.ts
@@ -2,7 +2,7 @@ import { NgModule, Optional, SkipSelf } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { ToastrModule } from 'ngx-toastr';
+import { ToastrModule, ToastrService } from 'ngx-toastr';
 import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { routing } from 'src/app/core/core.routing';
@@ -27,9 +27,12 @@ export class CoreModule {
   /* We're injecting the ProductService so it initializes the mock objects. */
   constructor (
     @Optional() @SkipSelf() parentModule: CoreModule, 
+    private toastrService: ToastrService,
     private productService: ProductService) {
     if (parentModule) {
       throw new Error('CoreModule is already loaded. Import only in AppModule');
     }
+
+    this.toastrService.toastrConfig.positionClass = 'toast-bottom-right';
   }
 }
diff --git a/angular6/marketplace/src/app/core/home/home.component.css b/angular6/marketplace/src/app/core/home/home.component.css
@@ -11,7 +11,7 @@
     width: 95%;
 }
 
-.bold-warning-href {
+.bold-warning {
     color: #D09404;
     font-weight: bold;
 }

diff --git a/angular6/marketplace/src/app/core/home/home.component.html b/angular6/marketplace/src/app/core/home/home.component.html
@@ -3,12 +3,14 @@
       <div class="col-sm-4"></div>
       <div class="col-sm-4">
         <ngb-alert *ngIf="!closed" (close)="closed=true">
-            <p>Welcome to this demo marketplace! Feel free to play around with the available features!</p>
-            <p>
-                This demo application has been made for a 
-                <a class="bold-warning-href" href="http://www.talkjs.com/tutorials/angular/add-buyer-seller-chat-to-marketplace">tutorial</a> on how to implement 
-                <a class="bold-warning-href" href="http://www.talkjs.com">TalkJS</a> into any Angular 6 application.
-            </p>
+          <p>
+              This demo application has been made for a 
+              <a class="bold-warning" href="http://www.talkjs.com/tutorials/angular/add-buyer-seller-chat-to-marketplace">tutorial</a> on how to implement 
+              <a class="bold-warning" href="http://www.talkjs.com">TalkJS</a> into any Angular 6 application.
+          </p>  
+          <p>
+            Try chatting with Mary!
+          </p>        
         </ngb-alert>
       </div>
       <div class="col-sm-4"></div>

diff --git a/angular6/marketplace/src/app/core/services/user.service.ts b/angular6/marketplace/src/app/core/services/user.service.ts
@@ -16,7 +16,7 @@ export class UserService {
 
     getUserForUsername(username: string) : Promise<User> {
         return new Promise((resolve) => {
-            resolve(MOCK_USERS.find(u => u.username === username));
+            resolve(MOCK_USERS.find(u => u.username.toLocaleLowerCase() === username.toLocaleLowerCase()));
         });
     }