CT # Add model login

package-lock.json

@@ -283,6 +283,23 @@
         "tslib": "^1.9.0"
       }
     },
+    "@angular/cdk": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-8.0.2.tgz",
+      "integrity": "sha512-Tv9M0vuTp7Ogk7mRiEpzBG9x5289FXe+WH0VKqN4zTzF/taTgGEuJBLDcFrwQMW0mFpGP7acVOiopgH+nClytg==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^1.7.1"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
+          "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-7.1.4.tgz",

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@angular-devkit/build-ng-packagr": "^0.13.8",
     "@angular/animations": "^7.1.4",
+    "@angular/cdk": "^8.0.2",
     "@angular/common": "~7.1.0",
     "@angular/compiler": "~7.1.0",
     "@angular/core": "~7.1.0",

src/app/app.component.css

@@ -1,24 +1,22 @@
-#Mytoolbar:first-child{
-    background: none;
-    background-color:transparent;
-    border-color: none !important;
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    z-index: 9999 !important;
+p-toolbar{
+    height: 33px
 }
-.dropShadow {
-    box-shadow: 0 10px 60px 10px black;
-    z-index: 12;
+p-toolbar img{
+    height: 33px;
+    padding-left: 50px;
+}
+p-toolbar button{
+    background: none;
+    border: none;
+    color: #3366ff;
 }
 
-.ui-toolbar.ui-widget-header{
-    background: none;
-    background-image: none;
-    background-color:transparent !important;
-    border-color: none !important;
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    z-index: 9999 !important;
+
+.splitBtn{
+    background: none !important;
+    
 }
+.ui-inputgroup{
+    padding-top: 10px;
+    padding-bottom: 10px
+}

src/app/app.component.html

@@ -1,20 +1,43 @@
 <p-toolbar id="Mytoolbar">
     
     <div class="ui-toolbar-group-left">
-        <button pButton type="button" label="New" icon="pi pi-plus"></button>
-        <button pButton type="button" label="Upload" icon="pi pi-upload" class="ui-button-success"></button>
-            
-        <i class="pi pi-bars"></i>
-        
-        <p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="ui-button-warning"></p-splitButton>
+            <img src="../assets/images/home-page/logoNew.png" class="img-rounded img-responsive"
+            alt="MyMirror">
     </div>
     
     <div class="ui-toolbar-group-right">
-        <button pButton type="button" icon="fa fa fa-sign-in" label="Log in" iconPos="right" (click)="LogIn()"></button>
-        <button pButton type="button" icon="pi pi-calendar" class="ui-button-success"></button>
-        <button pButton type="button" icon="pi pi-times" class="ui-button-danger"></button>
+        <button pButton type="button" label="ABOUT"></button>
+        <button pButton type="button" label="TEAM" ></button>
+        <button pButton type="button" label="CONTACT" ></button>
+        
+        <button pButton type="button" label="SIGN UP" icon="pi pi-pencil" iconPos="right" (click)="signUp()"></button>
+        <button pButton type="button" label="LOG IN" icon="pi pi-sign-in" iconPos="right" (click)="logIn()"></button>
+        <p-splitButton [style]="{color:'black;'}" class="splitBtn" type="button" label="SIGN UP"></p-splitButton>
+        
     </div>
 
     
 </p-toolbar>
+
+<p-dialog [(visible)]="display" [style]="">
+    <p-header>
+        Log In
+    </p-header>
+
+    <div class="ui-inputgroup">
+        <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
+        <input type="text" pInputText placeholder="Username">         
+    </div>
+    <div class="ui-inputgroup">
+        <span class="ui-inputgroup-addon"><i class="fa fa-lock"></i></span>
+        <input type="password" pInputText placeholder="Password">         
+    </div>
+
+    <p-footer>
+            <button pButton type="button" label="Identify"></button>
+    </p-footer>
+</p-dialog>
+    
+   
+    
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import {MenuItem} from 'primeng/api';
 
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -18,12 +19,17 @@ export class AppComponent implements OnInit{
       {label: 'Delete', icon: 'pi pi-times'}
       
   ];
+  
 
 
   }
 
-  public LogIn() 
+  display: boolean = false;
+
+    
+  public logIn() 
   {
+    this.display = true;
     console.log('helloooo');
     // change route -> /login
   }

src/app/app.module.ts

@@ -14,6 +14,11 @@ import { BorderCardDirective } from './directives/border-card.directive';
 import { ToolbarModule } from 'primeng/toolbar';
 import { ButtonModule } from 'primeng/button';
 import { SplitButtonModule } from 'primeng/splitbutton';
+import {DialogModule} from 'primeng/dialog';
+import {InputTextModule} from 'primeng/inputtext';
+
+
+
 
 
 
@@ -33,7 +38,10 @@ import { SplitButtonModule } from 'primeng/splitbutton';
     CarouselModule.forRoot(),
     ToolbarModule,
     ButtonModule,
-    SplitButtonModule
+    SplitButtonModule,
+    DialogModule,
+    InputTextModule
+  
     
   ],
   providers: [],