checkbox register rules

This commit is contained in:
Viicious 2018-06-24 18:58:23 +02:00
parent 5d94f865ce
commit ce32f6c28a
4 changed files with 97 additions and 6 deletions

View File

@ -3,10 +3,6 @@
<logo>
<a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>SupFile</strong></a>
</logo>
<links>
<ul class="navbar-nav mr-auto">
</ul>
</links>
</mdb-navbar>
<section class="view intro-2 mask rgba-gradient">

View File

@ -114,9 +114,88 @@
<label for="form4">Your password</label>
</div>
<div class="form-check white-text">
<input class="form-check-input" type="checkbox" id="checkbox11" (click)='toggleCheckbox()' mdbInputDirective>
<label class="form-check-label" for="checkbox11">I agree to the terms of this website</label>
<button class="btn btn-sm btn-outline-white waves-light" id="rules" data-toggle="modal" data-target="#basicExample" (click)="rules.show()" mdbWavesEffect>Rules</button>
</div>
<!--Modal-->
<div mdbModal #rules="mdb-modal" class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow: auto;">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title w-100" id="myModalLabel">Rules</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="rules.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary waves-light" data-dismiss="modal" (click)="rules.hide()" mdbWavesEffect>Close</button>
</div>
</div>
</div>
</div>
<!--Modal-->
<div class="text-center">
<button class="btn btn-primary waves-light" (click)="signup()" mdbWavesEffect>Sign up</button>
<button class="btn btn-secondary waves-light" mdbWavesEffect (click)="showregister()">Log In</button>
<button class="btn btn-primary waves-light" [disabled]='!toggleButton' (click)="signup()" mdbWavesEffect>Register</button>
<button class="btn btn-secondary waves-light" mdbWavesEffect (click)="showregister()">Back to log in</button>
<hr class="hr-light mb-3 mt-4">
<div class="inline-ul text-center d-flex justify-content-center">

View File

@ -43,9 +43,19 @@ h6 {
}
}
.form-check {
padding-left: 0;
padding-top: 1.2rem;
padding-bottom: 1rem;
}
.priceList {
padding: 10%;
padding-top: 0%;
padding-bottom: 5%;
}
#rules {
margin-left: 1rem;
}

View File

@ -11,6 +11,7 @@ import { of } from 'rxjs/observable/of';
})
export class HomeComponent implements OnInit {
registerbool: boolean;
toggleButton: boolean
signupData = { username:'', password:'' };
loginData = { username: '', password: '' };
message = '';
@ -19,12 +20,17 @@ export class HomeComponent implements OnInit {
constructor(private http: HttpClient, private router: Router) {
this.registerbool = false;
this.toggleButton = false;
}
showregister() {
this.registerbool = !this.registerbool
}
toggleCheckbox() {
this.toggleButton = !this.toggleButton;
}
login() {
this.http.post('/api/signin', this.loginData).subscribe(resp => {
this.data = resp;