File
|
errorMessage
|
Type : string
|
Default value : ''
|
|
|
|
form
|
Type : any
|
Default value : {
email: null,
password: null,
username: null,
}
|
|
|
|
isSignUpFailed
|
Default value : false
|
|
|
|
isSuccessful
|
Default value : false
|
|
|
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../../Services/auth.service';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss'],
})
export class RegisterComponent {
form: any = {
email: null,
password: null,
username: null,
};
isSuccessful = false;
isSignUpFailed = false;
errorMessage = '';
/**
* @param {AuthService} privateauthService
* @param {Router} privaterouter
*/
constructor(private authService: AuthService, private router: Router) {}
onSubmit(): void {
const { email, username, password } = this.form;
this.authService.register(email, username, password).subscribe(
(data) => {
this.isSuccessful = true;
this.isSignUpFailed = false;
this.router.navigate(['/login']);
},
(err) => {
this.errorMessage = err.error.message;
this.isSignUpFailed = true;
}
);
}
}
<div class="col-md-4 login-container">
<div class="card card-container no-border">
<img
id="profile-img"
src="https://i.kym-cdn.com/entries/icons/mobile/000/029/959/Screen_Shot_2019-06-05_at_1.26.32_PM.jpg"
class="profile-img-card"
/>
<form
*ngIf="!isSuccessful"
name="form"
(ngSubmit)="f.form.valid && onSubmit()"
#f="ngForm"
novalidate
class="backgorund"
>
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
class="form-control"
name="username"
[(ngModel)]="form.username"
required
minlength="3"
maxlength="20"
#username="ngModel"
/>
<div class="alert-danger" *ngIf="username.errors && f.submitted">
<div *ngIf="username.errors?.['required']">Username is required</div>
<div *ngIf="username.errors?.['minlength']">
Username must be at least 3 characters
</div>
<div *ngIf="username.errors?.['maxlength']">
Username must be at most 20 characters
</div>
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
class="form-control"
name="email"
[(ngModel)]="form.email"
required
email
#email="ngModel"
/>
<div class="alert-danger" *ngIf="email.errors && f.submitted">
<div *ngIf="email.errors?.['required']">Email is required</div>
<div *ngIf="email.errors?.['email']">
Email must be a valid email address
</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
class="form-control"
name="password"
[(ngModel)]="form.password"
required
minlength="6"
#password="ngModel"
/>
<div class="alert-danger" *ngIf="password.errors && f.submitted">
<div *ngIf="password.errors?.['required']">Password is required</div>
<div *ngIf="password.errors?.['minlength']">
Password must be at least 6 characters
</div>
</div>
</div>
<div class="form-group">
<label for="password">Confirm Password</label>
<input
type="password"
class="form-control"
name="passwordRepeat"
[(ngModel)]="form.password"
required
minlength="6"
#passwordRepeat="ngModel"
/>
<div class="alert-danger" *ngIf="password.errors && f.submitted">
<div *ngIf="passwordRepeat.errors?.['required']">
Confirmation is required
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Sign Up</button>
</div>
<div class="alert alert-warning" *ngIf="f.submitted && isSignUpFailed">
Signup failed!<br />{{ errorMessage }}
</div>
</form>
<div class="alert alert-success" *ngIf="isSuccessful">
Your registration is successful!
</div>
<button class="btn btn-secondary btn-block" routerLink="/login">
Go Back
</button>
</div>
</div>
.login-container {
margin: auto;
width: 60vh;
padding-top: 10vh;
}
.no-border {
border: none;
}
.backgorund {
background-color: #181a1b;
color: white;
}
Legend
Html element with directive