CT # ToolBar + Sign Modal

Chipo toolbar
Réalisation Modal Sign in

src/app/app.component.css

@@ -22,9 +22,6 @@ p-toolbar {
     border:none;
 }
 
-
-
-
 p-toolbar .ui-button {
     background-color: transparent ;
     opacity: 1;
@@ -32,3 +29,8 @@ p-toolbar .ui-button {
     border: none;
 }
 
+p-dialog div > * {
+    margin: auto !important;
+}
+
+

src/app/app.component.html

@@ -12,15 +12,14 @@
         
         <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 *ngIf="connected" class="btnDeMerde"  type="button" label="Nom du gars"></p-splitButton>
-        <p-splitButton *ngIf="Connected" class="btnDeMerde"  type="button" label="Nom du gars"></p-splitButton>
         
     </div>
 
     
 </p-toolbar>
 
-<p-dialog [(visible)]="display" [style]="">
+<p-dialog id="modalLogIn" [(visible)]="displayLogInModal">
     <p-header>
         Log In
     </p-header>
@@ -38,6 +37,91 @@
             <button pButton type="button" label="Identify"></button>
     </p-footer>
 </p-dialog>
+
+<p-dialog [style]="{'width': '450px'}" [modal]=true id="modalSignIn"[(visible)]="displaySignInModal">
+    <p-header>
+        Sign In
+    </p-header>
+
+    <div class="ui-inputgroup">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
+            <input type="text" pInputText placeholder="Last name">   
+        </div>
+    </div>
+    <div class="ui-inputgroup">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
+            <input type="text" pInputText placeholder="First name">    
+        </div>     
+    </div>
+    <div class="ui-inputgroup" *ngIf="connected">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fas fa-gift"></i></span>
+            <input type="date" pInputText placeholder="Birthday"> 
+        </div>
+             
+    </div>
+    <div class="ui-inputgroup">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fas fa-at"></i></span>
+            <input type="email" pInputText placeholder="E-mail">         
+        </div>
+    </div>
+   
+    <div class="ui-inputgroup" *ngIf="connected">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
+            <input type="text" pInputText placeholder="Address">    
+        </div>
+    </div>
+    <div class="ui-inputgroup" *ngIf="connected">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
+            <input type="text" pInputText placeholder="City">    
+        </div>
+    </div>
+    <div class="ui-inputgroup" *ngIf="connected">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
+            <input type="text" pInputText placeholder="State">    
+        </div>
+    </div>
+    <div class="ui-inputgroup" *ngIf="connected">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
+            <input type="text" pInputText placeholder="Postcode">    
+        </div>
+    </div>
+    <div class="ui-inputgroup" *ngIf="connected">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fas fa-globe-europe"></i></span>
+            <input type="text" pInputText placeholder="Country">    
+        </div>
+    </div>
+    <div class="ui-inputgroup" *ngIf="connected">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fas fa-globe-europe"></i></span>
+            <input type="text" pInputText placeholder="Timezone">    
+        </div>
+    </div>
+    <div class="ui-inputgroup">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fas fa-key"></i></span>
+            <input type="password" pInputText placeholder="Password">    
+        </div>
+    </div>
+    <div class="ui-inputgroup">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fas fa-key"></i></span>
+            <input type="password" pInputText placeholder="Confirm password">    
+        </div>
+    </div>
+
+    <p-footer>
+            <button pButton type="button" label="Identify"></button>
+    </p-footer>
+</p-dialog>
     
    
     

src/app/app.component.ts

@@ -12,8 +12,11 @@ export class AppComponent implements OnInit{
 
   items : MenuItem[];
 
-  public Connected : false;
+  connected : boolean = false;
-  display: boolean = false;
+  displayLogInModal: boolean = false;
+  displaySignInModal: boolean = false;
+  displayPersonalField: boolean = false;
+  birthday: Date;
 
   constructor(){}
   ngOnInit(){
@@ -26,8 +29,14 @@ export class AppComponent implements OnInit{
 
   public logIn() 
   {
-    this.display = true;
+    this.displayLogInModal = true;
+    this.connected = true;
     console.log('helloooo');
     // change route -> /login
   }
+  public signUp()
+  {
+    this.displaySignInModal = true;
+
+  }
 }

src/app/app.module.ts

@@ -16,6 +16,10 @@ import { ButtonModule } from 'primeng/button';
 import { SplitButtonModule } from 'primeng/splitbutton';
 import {DialogModule} from 'primeng/dialog';
 import {InputTextModule} from 'primeng/inputtext';
+import {CalendarModule} from 'primeng/calendar';
+import { FormsModule } from '@angular/forms';
+
+
 
 
 
@@ -40,7 +44,11 @@ import {InputTextModule} from 'primeng/inputtext';
     ButtonModule,
     SplitButtonModule,
     DialogModule,
-    InputTextModule
+    InputTextModule,
+    CalendarModule,
+    FormsModule,
+    
+
   
     
   ],