AnisB
/
XJC
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

design login/register

Browse Source
thierry
Viiciouss 7 years ago
parent fa1a300b36
commit b4f20bb7cc
10 changed files with 157 additions and 126 deletions
Show Stats Download Patch File Download Diff File

48
src/app/app.component.html
Unescape Escape View File

@ -1,49 +1 @@
<!--Navbar-->
<navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">
<!-- Navbar brand -->
<logo><a class="navbar-brand" href="#">Navbar</a></logo>
<!-- Collapsible content -->
<links>
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link waves-light" ripple-radius>Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" ripple-radius>Features</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" ripple-radius>Pricing</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown" dropdown>
<a dropdownToggle ripple-radius type="button" class="nav-link dropdown-toggle waves-light" ripple-radius>
Basic dropdown<span class="caret"></span></a>
<div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
<a class="dropdown-item waves-light" ripple-radius href="#">Action</a>
<a class="dropdown-item waves-light" ripple-radius href="#">Another action</a>
<a class="dropdown-item waves-light" ripple-radius href="#">Something else here</a>
<div class="divider dropdown-divider"></div>
<a class="dropdown-item waves-light" ripple-radius href="#">Separated link</a>
</div>
</li>
</ul>
<!-- Links -->
<!-- Search form -->
<form class="form-inline waves-light" ripple-radius>
<input class="form-control mr-sm-2" type="text" placeholder="Search">
</form>
</links>
<!-- Collapsible content -->
</navbar>
<!--/.Navbar-->
<router-outlet></router-outlet>

36
src/app/components/home/home.component.html
Unescape Escape View File

@ -1,6 +1,42 @@
<p>
Home
</p>
<button (click)="loadRegisterComponent()">Register</button>
<button (click)="loadLoginComponent()">Login</button>
<!--Main Navigation-->
<header>
<!-- Intro Section -->
<div class="view hm-white-light jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg); background-attachment: fixed;">
<div class="full-bg-img">
<div class="container flex-center">
<div class="row pt-5 mt-3">
<div class="col-md-12 mb-3">
<div class="intro-info-content text-center">
<h1 class="display-3 mb-5 wow fadeInDown" data-wow-delay="0.3s">Parrain <a class="indigo-text font-bold">App</a></h1>
<h5 class="font-up mb-5 mt-1 font-bold wow fadeInDown" data-wow-delay="0.3s">Partage</h5>
<button class="btn btn-light-blue btn-lg wow fadeInDown waves-light" data-wow-delay="0.3s" mdbRippleRadius (click)="loadRegisterComponent();">Sign In</button>
<div *ngIf='loadComponentRegister'>
<app-register></app-register>
</div>
<button class="btn btn-indigo btn-lg wow fadeInDown waves-light" data-wow-delay="0.3s" mdbRippleRadius (click)="loadLoginComponent();">Login</button>
<div *ngIf='loadComponentLogin'>
<login></login>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!--Main Navigation-->

40
src/app/components/home/home.component.scss
Unescape Escape View File

@ -0,0 +1,40 @@
.top-nav-collapse {
background-color: #82b1ff !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #82b1ff !important;
}
}
h5 {
letter-spacing: 3px;
}
@media (max-width: 740px) {
.full-height,
.full-height body,
.full-height header,
.full-height header .view {
height: 700px;
}
}
body {
margin: 0;
height: 100%;
}
.container {
height: 100%;
width:100%;
display: flex;
justify-content: center;
align-items: center;
}

13
src/app/components/home/home.component.ts
Unescape Escape View File

@ -14,15 +14,20 @@ import { HomeService } from '../../services/home/home.service';
providers: [HomeService]
})
export class HomeComponent implements OnInit {
private loadComponentRegister = false;
private loadComponentLogin = false;
constructor(public afAuth: AngularFireAuth, private router: Router) { }
loadRegisterComponent() {
this.router.navigate(['/register']);
loadRegisterComponent(){
this.loadComponentRegister = !this.loadComponentRegister;
this.loadComponentLogin = false;
}
loadLoginComponent() {
this.router.navigate(['/login']);
loadLoginComponent(){
this.loadComponentLogin = !this.loadComponentLogin;
this.loadComponentRegister = false;
}
ngOnInit() {
}

33
src/app/components/login/login.component.html
Unescape Escape View File

@ -1,16 +1,23 @@
<p>
Login
</p>
<div class="card">
<form class="well">
<p class="h5 text-center mb-4">Login</p>
<div> ID: {{ (user | async)?.uid }} </div>
<div> Email: {{ (user | async)?.email }} </div>
<div> ID: {{ (user | async)?.uid }} </div>
<div> Email: {{ (user | async)?.email }} </div>
<div class="md-form">
<i class="fa fa-envelope prefix grey-text"></i>
<input type="email" [(ngModel)]="email" placeholder="Your email">
</div>
<div class="from-group">
<input type="email" [(ngModel)]="email" placeholder="Email..">
</div>
<div class="from-group">
<input type="password" [(ngModel)]="password" placeholder="Password..">
<div class="md-form">
<i class="fa fa-lock prefix grey-text"></i>
<input type="password" [(ngModel)]="password" placeholder="Password">
</div>
<div class="text-center" style="margin-top:5%">
<button class="btn btn-dark-green" (click)="login()">Login <i class="fa fa-paper-plane-o ml-1"></i></button>
<button class="btn btn-cyan" (click)="loadHomeComponent()">Back</button>
</div>
</form>
</div>
<button (click)="login()">Login</button>
<button (click)="loadRegisterComponent()">Go to register</button>
<button (click)="loadHomeComponent()">Go to home</button>

3
src/app/components/login/login.component.scss
Unescape Escape View File

@ -0,0 +1,3 @@
.card {
padding: 5%;
}

50
src/app/components/navigationBar/navigationBar.component.html
Unescape Escape View File

@ -1,46 +1,22 @@
<!--Navbar-->
<navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">
<!-- Navbar brand -->
<logo><a class="navbar-brand" href="#">Navbar</a></logo>
<!-- Collapsible content -->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<logo>
<a class="logo navbar-brand waves-light" mdbRippleRadius href="#"><strong>MDB</strong></a>
</logo>
<links>
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link waves-light" ripple-radius>Home<span class="sr-only">(current)</span></a>
<li class="nav-item active waves-light" mdbRippleRadius>
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" ripple-radius>Features</a>
<li class="nav-item waves-light" mdbRippleRadius>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" ripple-radius>Pricing</a>
<li class="nav-item waves-light" mdbRippleRadius>
<a class="nav-link" href="#">Profile</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown" dropdown>
<a dropdownToggle ripple-radius type="button" class="nav-link dropdown-toggle waves-light" ripple-radius>
Basic dropdown<span class="caret"></span></a>
<div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
<a class="dropdown-item waves-light" ripple-radius href="#">Action</a>
<a class="dropdown-item waves-light" ripple-radius href="#">Another action</a>
<a class="dropdown-item waves-light" ripple-radius href="#">Something else here</a>
<div class="divider dropdown-divider"></div>
<a class="dropdown-item waves-light" ripple-radius href="#">Separated link</a>
</div>
</li>
</ul>
<!-- Links -->
<!-- Search form -->
<form class="form-inline waves-light" ripple-radius>
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<form class="form-inline waves-light" mdbRippleRadius>
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</form>
</links>
<!-- Collapsible content -->
</navbar>
<!--/.Navbar-->
</mdb-navbar>

55
src/app/components/register/register.component.html
Unescape Escape View File

@ -1,25 +1,34 @@
<p>
Register
</p>
<div class="card">
<form class="well">
<p class="h5 text-center mb-4">Sign up</p>
<div class="from-group">
<input [(ngModel)]="currentUser.familyname" placeholder="Family name..">
<div class="md-form">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-Familyname" [(ngModel)]="currentUser.familyname" placeholder="Your family name">
</div>
<div class="md-form">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-Firstname" [(ngModel)]="currentUser.firstname" placeholder="Your firstname">
</div>
<div class="md-form">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-Username" [(ngModel)]="currentUser.username" placeholder="User name">
</div>
<div class="md-form">
<input type="text" type="date" id="orangeForm-Birthday" [(ngModel)]="currentUser.birthday" placeholder="Birthday..">
</div>
<div class="md-form">
<i class="fa fa-envelope prefix grey-text"></i>
<input type="email" id="orangeForm-email" [(ngModel)]="currentUser.email" placeholder="Your email">
</div>
<div class="md-form">
<i class="fa fa-lock prefix grey-text"></i>
<input id="orangeForm-pass" type="password" [(ngModel)]="currentUser.password" placeholder="Your password">
</div>
<div class="text-center" style="margin-top:5%">
<button class="btn btn-deep-orange" (click)="register()">Sign up</button>
<button class="btn btn-cyan" (click)="loadHomeComponent()">Back</button>
</div>
</form>
</div>
<div class="from-group">
<input [(ngModel)]="currentUser.firstname" placeholder="Firstname..">
</div>
<div class="from-group">
<input [(ngModel)]="currentUser.username" placeholder="User name..">
</div>
<div class="from-group">
<input type="date" [(ngModel)]="currentUser.birthday" placeholder="Birthday..">
</div>
<div class="from-group">
<input type="email" [(ngModel)]="currentUser.email" placeholder="Email..">
</div>
<div class="from-group">
<input type="password" [(ngModel)]="currentUser.password" placeholder="Password..">
</div>
<button (click)="register()">Register</button>
<button (click)="loadLoginComponent()">Go to login</button>
<button (click)="loadHomeComponent()">Go to home</button>

3
src/app/components/register/register.component.scss
Unescape Escape View File

@ -0,0 +1,3 @@
.card {
padding: 5%;
}

2
src/index.html
Unescape Escape View File

@ -1,5 +1,5 @@
<!doctype html>
<html>
<html lang="en" class="full-height">
<head>
<meta charset="utf-8">
<title>Angular Bootstrap MD - Free</title>

Write Preview
Loading…
Cancel
Save