UNOV/mycontrolpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CT # ToolBar + Sign Modal

Browse Source 
Chipo toolbar
Réalisation Modal Sign in
This commit is contained in:
youbertt 2019-07-11 23:03:57 +02:00
parent a03ba63cc2
commit ffc3e3a4cd
4 changed files with 113 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/app.component.css
View File

@ -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;
}

90
src/app/app.component.html
View File

@ -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>

15
src/app/app.component.ts
View File

@ -12,8 +12,11 @@ export class AppComponent implements OnInit{
items : MenuItem[];
public Connected : false;
display: boolean = false;
connected : 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;
}
}

10
src/app/app.module.ts
View File

@ -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,
],