Creating Routes
Go to app.routing.modules.ts file and add the sign-up and sign-in routes. Make sure to import as well.
import { SignUpComponent } from "./auth/sign-up/sign-up.component";
import { SignInComponent } from "./auth/sign-in/sign-in.component";
const appRoutes: Routes = [
....,
{ path: 'sign-up', component: SignUpComponent },
{ path: 'sign-in', component: SignInComponent }
];
Creating Links
Go to header template and create two links for registering and sign in, above Manage.
<li routerLinkActive="active"><a [routerLink]="['/sign-up']">Register</a></li>
<li routerLinkActive="active"><a [routerLink]="['/sign-in']">Sign In</a></li>
Sign-Up
Go to the sign-up template and create following form. We are using template driven approach here.
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form (ngSubmit)="onSignup(f)" #f="ngForm">
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" ngModel class="form-control" #email="ngModel" required email>
<span class="help-block" *ngIf="!email.valid && email.touched">Please enter a valid email!</span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" ngModel class="form-control" #password="ngModel" required minlength="6">
<span class="help-block" *ngIf="!password.valid && password.touched && !password.errors?.minlength">Please enter a valid password!</span>
<span class="help-block" *ngIf="!password.valid && password.touched && password.errors?.minlength">Password must be at least 6 characters long</span>
</div>
<button class="btn btn-primary" type="submit" [disabled]="!f.valid">Sign Up</button>
</form>
</div>
</div>
</div>
Place the following in sign-up css
input.ng-invalid.ng-touched {
border: 1px solid red;
}
Then go to sign-up component and put in the onSignup method. Since we are using template driven approach, make sure to import NgForm
import { NgForm } from '@angular/forms';
onSignup(form: NgForm){
const email = form.value.email;
const password = form.value.password;
}
Sign-In
Go to the sign-in template and create following form. We are using template driven approach here.
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form (ngSubmit)="onSignin(f)" #f="ngForm">
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" ngModel class="form-control" #email="ngModel" required email>
<span class="help-block" *ngIf="!email.valid && email.touched">Please enter a valid email!</span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" ngModel class="form-control" #password="ngModel" required minlength="6">
<span class="help-block" *ngIf="!password.valid && password.touched && !password.errors?.minlength">Please enter a valid password!</span>
<span class="help-block" *ngIf="!password.valid && password.touched && password.errors?.minlength">Password must be at least 6 characters long</span>
</div>
<button class="btn btn-primary" type="submit" [disabled]="!f.valid">Sign In</button>
</form>
</div>
</div>
Place the following in sign-in css
input.ng-invalid.ng-touched {
border: 1px solid red;
}
Then go to sign-up component and put in the onSignup method. Since we are using template driven approach, make sure to import NgForm
import { NgForm } from '@angular/forms';
onSignin(form: NgForm){
const email = form.value.email;
const password = form.value.password;
}
Final
Once these steps are done, run app and click on Register and Sign In links. to make sure all is setup properly.
Then go back to perform other steps.
> Back to Setting up Authentication with Firebase in Angular
