Creating a basic login page

src/app/app-routing.module.ts

@@ -12,6 +12,7 @@ import { SearchResolverService } from "./services/search-resolver.service";
 import { ShowResolverService } from './services/show-resolver.service';
 import { StreamResolverService } from "./services/stream-resolver.service";
 import { ShowDetailsComponent } from './show-details/show-details.component';
+import {LoginComponent} from "./login/login.component";
 
 const routes: Routes = [
 	{ path: "browse", component: BrowseComponent, pathMatch: "full", resolve: { shows: LibraryResolverService } },
@@ -21,6 +22,7 @@ const routes: Routes = [
 	{ path: "people/:people-slug", component: CollectionComponent, resolve: { collection: PeopleResolverService } },
 	{ path: "watch/:item", component: PlayerComponent, resolve: { item: StreamResolverService } },
 	{ path: "search/:query", component: SearchComponent, resolve: { items: SearchResolverService } },
+	{ path: "login", component: LoginComponent },
 	{ path: "**", component: NotFoundComponent }
 ];
 

src/app/app.module.ts

@@ -23,7 +23,11 @@ import { PlayerComponent } from './player/player.component';
 import { SearchComponent } from './search/search.component';
 import { ShowDetailsComponent } from './show-details/show-details.component';
 import { ShowsListComponent } from './shows-list/shows-list.component';
-
+import { LoginComponent } from './login/login.component';
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import { MatInputModule } from "@angular/material/input";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import {MatTabsModule} from "@angular/material/tabs";
 
 @NgModule({
 	declarations: [
@@ -36,7 +40,8 @@ import { ShowsListComponent } from './shows-list/shows-list.component';
 		CollectionComponent,
 		SearchComponent,
 		PeopleListComponent,
-		ShowsListComponent
+		ShowsListComponent,
+		LoginComponent
 	],
 	imports: [
 		BrowserModule,
@@ -52,7 +57,12 @@ import { ShowsListComponent } from './shows-list/shows-list.component';
 		MatSliderModule,
 		MatTooltipModule,
 		MatRippleModule,
-		MatCardModule
+		MatCardModule,
+		ReactiveFormsModule,
+		MatInputModule,
+		MatFormFieldModule,
+		FormsModule,
+		MatTabsModule
 	],
 	providers: [],
 	bootstrap: [AppComponent]

src/app/login/login.component.html

@@ -0,0 +1,76 @@
+<div class="container d-flex justify-content-center pt-5">
+	<mat-card class="col-xl-5 col-md-7">
+		<mat-tab-group mat-stretch-tabs>
+			<mat-tab label="Login">
+				<br/>
+				<mat-card-content>
+					<form>
+						<mat-form-field appearance="fill" class="w-75">
+							<mat-label>Username</mat-label>
+							<input matInput [formControl]="username">
+							<mat-error *ngIf="username.hasError('required')">
+								An username is <strong>required</strong>
+							</mat-error>
+						</mat-form-field>
+						<br/>
+						<br/>
+						<mat-form-field appearance="fill" class="w-75">
+							<mat-label>Password</mat-label>
+							<input matInput [formControl]="password" [type]="hidePassword ? 'password' : 'text'">
+							<button mat-icon-button matSuffix (click)="hidePassword = !hidePassword" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword">
+								<mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+							</button>
+							<mat-error *ngIf="password.hasError('required')">
+								A password is <strong>required</strong>
+							</mat-error>
+						</mat-form-field>
+					</form>
+				</mat-card-content>
+				<div fxFlexAlign="end" align="end">
+					<button mat-button>Login</button>
+				</div>
+			</mat-tab>
+			<mat-tab label="Signin">
+				<br/>
+				<mat-card-content>
+					<form class="form-group">
+						<mat-form-field appearance="fill" class="w-75">
+							<mat-label>Username</mat-label>
+							<input matInput [formControl]="username">
+							<mat-error *ngIf="username.hasError('required')">
+								An username is <strong>required</strong>
+							</mat-error>
+						</mat-form-field>
+						<br/>
+						<br/>
+						<mat-form-field appearance="fill" class="w-75">
+							<mat-label>Email</mat-label>
+							<input matInput [formControl]="email">
+							<mat-error *ngIf="email.hasError('required')">
+								An email is <strong>required</strong>
+							</mat-error>
+							<mat-error *ngIf="email.hasError('email')">
+								Please enter a valid email
+							</mat-error>
+						</mat-form-field>
+						<br/>
+						<br/>
+						<mat-form-field appearance="fill" class="w-75">
+							<mat-label>Password</mat-label>
+							<input matInput [formControl]="password" [type]="hidePassword ? 'password' : 'text'">
+							<button mat-icon-button matSuffix (click)="hidePassword = !hidePassword" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword">
+								<mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+							</button>
+							<mat-error *ngIf="password.hasError('required')">
+								A password is <strong>required</strong>
+							</mat-error>
+						</mat-form-field>
+					</form>
+				</mat-card-content>
+				<div fxFlexAlign="end" align="end">
+					<button mat-button>Sigin</button>
+				</div>
+			</mat-tab>
+		</mat-tab-group>
+	</mat-card>
+</div>

src/app/login/login.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import {FormControl, Validators} from "@angular/forms";
+
+@Component({
+	selector: 'app-login',
+	templateUrl: './login.component.html',
+	styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit 
+{
+	username = new FormControl("", [Validators.required]);
+	password = new FormControl("", [Validators.required]);
+	email = new FormControl("", [Validators.required, Validators.email]);
+	
+	hidePassword: boolean = true;
+	
+	constructor() { }
+
+	ngOnInit() 
+	{
+	}
+	
+	async login()
+	{
+		
+	}
+}