Add project files.

2023-04-29 09:17:17 +03:00
commit 62178f1f32
493 changed files with 45863 additions and 0 deletions
@@ -0,0 +1,47 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { SigninComponent } from './signin/signin.component';
+import { SignupComponent } from './signup/signup.component';
+import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
+import { LockedComponent } from './locked/locked.component';
+import { Page404Component } from './page404/page404.component';
+import { Page500Component } from './page500/page500.component';
+
+const routes: Routes = [
+	{
+		path: '',
+		redirectTo: 'signin',
+		pathMatch: 'full',
+	},
+	{
+		path: 'signin',
+		component: SigninComponent,
+	},
+	{
+		path: 'signup',
+		component: SignupComponent,
+	},
+	{
+		path: 'forgot-password',
+		component: ForgotPasswordComponent,
+	},
+	{
+		path: 'locked',
+		component: LockedComponent,
+	},
+	{
+		path: 'page404',
+		component: Page404Component,
+	},
+	{
+		path: 'page500',
+		component: Page500Component,
+	},
+];
+
+@NgModule({
+	imports: [RouterModule.forChild(routes)],
+	exports: [RouterModule],
+})
+export class AuthenticationRoutingModule {
+}
@@ -0,0 +1,50 @@
+// angular
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+// libs
+import { GoogleSigninButtonModule } from '@abacritt/angularx-social-login';
+
+// app
+import { AuthenticationRoutingModule } from './authentication-routing.module';
+import { Page500Component } from './page500/page500.component';
+import { Page404Component } from './page404/page404.component';
+import { SigninComponent } from './signin/signin.component';
+import { SignupComponent } from './signup/signup.component';
+import { LockedComponent } from './locked/locked.component';
+import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
+
+@NgModule({
+	imports: [
+		CommonModule,
+		FormsModule,
+		ReactiveFormsModule,
+		AuthenticationRoutingModule,
+		MatFormFieldModule,
+		MatInputModule,
+		MatIconModule,
+		MatButtonModule,
+		GoogleSigninButtonModule,
+	],
+	declarations: [
+		Page500Component,
+		Page404Component,
+		SigninComponent,
+		SignupComponent,
+		LockedComponent,
+		ForgotPasswordComponent,
+	],
+	providers: [
+	],
+	schemas: [
+		CUSTOM_ELEMENTS_SCHEMA
+	]
+})
+export class AuthenticationModule {
+}
@@ -0,0 +1,45 @@
+<div class="auth-container">
+	<div class="row auth-main">
+		<div class="col-sm-6 px-0 d-none d-sm-block">
+			<div class="left-img" style="background-image: url(assets/images/pages/bg-03.png);">
+			</div>
+		</div>
+		<div class="col-sm-6 auth-form-section">
+			<div class="form-section">
+				<div class="auth-wrapper">
+					<h2 class="welcome-msg"> Reset Password </h2>
+					<p class="auth-signup-text text-muted">Let Us Help You</p>
+					<form class="validate-form" [formGroup]="authForm" (ngSubmit)="onSubmit()">
+						<div class="row">
+							<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 mb-2">
+								<span class="error-subheader2 p-t-20 p-b-15">
+									Enter your registered email address.
+								</span>
+								<mat-form-field class="example-full-width" appearance="outline">
+									<mat-label>Email</mat-label>
+									<input matInput formControlName="email" required>
+									<mat-icon class="material-icons-two-tone color-icon p-3" matSuffix>mail</mat-icon>
+									<mat-error *ngIf="authForm.get('email')?.hasError('required') || authForm.get('email')?.touched">
+										Please enter a valid email address
+									</mat-error>
+								</mat-form-field>
+							</div>
+						</div>
+						<div class="container-auth-form-btn mt-5">
+							<button mat-flat-button color="primary" class="auth-form-btn" [disabled]="!authForm.valid " type="submit">
+								Reset My Password
+							</button>
+						</div>
+						<div class="w-full p-t-25 text-center">
+							<div>
+								<a routerLink="/authentication/signin" class="txt1">
+									Login?
+								</a>
+							</div>
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ForgotPasswordComponent } from './forgot-password.component';
+describe('ForgotPasswordComponent',
+	() => {
+		let component: ForgotPasswordComponent;
+		let fixture: ComponentFixture<ForgotPasswordComponent>;
+		beforeEach(
+			waitForAsync(() => {
+				TestBed.configureTestingModule({
+					declarations: [ForgotPasswordComponent],
+				}).compileComponents();
+			})
+		);
+		beforeEach(() => {
+			fixture = TestBed.createComponent(ForgotPasswordComponent);
+			component = fixture.componentInstance;
+			fixture.detectChanges();
+		});
+		it('should create',
+			() => {
+				expect(component).toBeTruthy();
+			});
+	});
@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import {
+	UntypedFormBuilder,
+	UntypedFormGroup,
+	Validators,
+} from '@angular/forms';
+
+@Component({
+	selector: 'app-forgot-password',
+	templateUrl: './forgot-password.component.html',
+	styleUrls: ['./forgot-password.component.scss'],
+})
+export class ForgotPasswordComponent implements OnInit {
+	authForm!: UntypedFormGroup;
+	submitted = false;
+	returnUrl!: string;
+
+	constructor(
+		private formBuilder: UntypedFormBuilder,
+		private route: ActivatedRoute,
+		private router: Router
+	) {
+	}
+
+	ngOnInit() {
+		this.authForm = this.formBuilder.group({
+			email: [
+				'',
+				[Validators.required, Validators.email, Validators.minLength(5)],
+			],
+		});
+		// get return url from route parameters or default to '/'
+		this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+	}
+
+	get f() {
+		return this.authForm.controls;
+	}
+
+	onSubmit() {
+		this.submitted = true;
+		// stop here if form is invalid
+		if (this.authForm.invalid) {
+			return;
+		} else {
+			this.router.navigate(['/dashboard/main']);
+		}
+	}
+}
@@ -0,0 +1,58 @@
+<div class="auth-container">
+	<div class="row auth-main">
+		<div class="col-sm-6 px-0 d-none d-sm-block">
+			<div class="left-img" style="background-image: url(assets/images/pages/bg-01.png);">
+			</div>
+		</div>
+		<div class="col-sm-6 auth-form-section">
+			<div class="form-section">
+				<div class="auth-wrapper">
+					<form class="validate-form" [formGroup]="authForm" (ngSubmit)="onSubmit()">
+						<div class="auth-locked">
+							<div class="image">
+								<img src={{userImg}} alt="User">
+							</div>
+						</div>
+						<span class="auth-locked-title p-b-34 p-t-27">
+							{{userFullName}}
+						</span>
+						<div class="text-center">
+							<p class="txt1 p-b-20">
+								Locked
+							</p>
+						</div>
+						<div class="row">
+							<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 mb-2">
+								<span class="error-subheader2 p-t-20 p-b-15">
+									Enter your password here.
+								</span>
+								<mat-form-field class="example-full-width" appearance="outline">
+									<mat-label>Password</mat-label>
+									<input matInput formControlName="password" [type]="hide ? 'password' : 'text'" required>
+									<mat-icon matSuffix (click)="hide = !hide">
+										{{hide ? 'visibility_off' : 'visibility'}}
+									</mat-icon>
+									<mat-error *ngIf="authForm.get('password')?.hasError('required')">
+										Password is required
+									</mat-error>
+								</mat-form-field>
+							</div>
+						</div>
+						<div class="container-auth-form-btn mt-5">
+							<button mat-flat-button color="primary" class="auth-form-btn" [disabled]="!authForm.valid " type="submit">
+								Reset My Password
+							</button>
+						</div>
+						<div class="w-full p-t-15 p-b-15 text-center">
+							<div>
+								<a routerLink="/authentication/signin" class="txt1">
+									Need Help?
+								</a>
+							</div>
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { LockedComponent } from './locked.component';
+describe('LockedComponent',
+	() => {
+		let component: LockedComponent;
+		let fixture: ComponentFixture<LockedComponent>;
+		beforeEach(
+			waitForAsync(() => {
+				TestBed.configureTestingModule({
+					declarations: [LockedComponent],
+				}).compileComponents();
+			})
+		);
+		beforeEach(() => {
+			fixture = TestBed.createComponent(LockedComponent);
+			component = fixture.componentInstance;
+			fixture.detectChanges();
+		});
+		it('should create',
+			() => {
+				expect(component).toBeTruthy();
+			});
+	});
@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { AuthService } from 'src/app/core/service/auth.service';
+
+@Component({
+	selector: 'app-locked',
+	templateUrl: './locked.component.html',
+	styleUrls: ['./locked.component.scss'],
+})
+export class LockedComponent implements OnInit {
+	authForm!: UntypedFormGroup;
+	submitted = false;
+	userImg!: string;
+	userFullName!: string;
+	hide = true;
+
+	constructor(
+		private formBuilder: UntypedFormBuilder,
+		private router: Router,
+		private authService: AuthService
+	) {
+	}
+
+	ngOnInit() {
+		this.authForm = this.formBuilder.group({
+			password: ['', Validators.required],
+		});
+
+		this.userImg = this.authService.currentUserValue.img || 'assets/images/user/admin.jpg';
+
+		this.userFullName =
+			this.authService.currentUserValue.firstName +
+			' ' +
+			this.authService.currentUserValue.lastName;
+	}
+
+	get f() {
+		return this.authForm.controls;
+	}
+
+	onSubmit() {
+		this.submitted = true;
+		// stop here if form is invalid
+		if (this.authForm.invalid) {
+			return;
+		} else {
+			this.router.navigate(['/dashboard/dashboard1']);
+		}
+	}
+}
@@ -0,0 +1,37 @@
+<div class="auth-container">
+	<div class="row auth-main">
+		<div class="col-sm-6 px-0 d-none d-sm-block">
+			<div class="left-img" style="background-image: url(assets/images/pages/bg-04.png);">
+			</div>
+		</div>
+		<div class="col-sm-6 auth-form-section">
+			<div class="form-section">
+				<div class="auth-wrapper">
+					<form>
+						<span class="error-header p-b-45">
+							404
+						</span>
+						<span class="error-subheader p-b-5">
+							Looks Like You're Lost
+						</span>
+						<span class="error-subheader2 p-b-5">
+							The Page You Are Looking For Not Available!
+						</span>
+						<div class="container-auth-form-btn mt-5">
+							<button mat-flat-button color="primary" class="auth-form-btn" type="submit" routerLink="/dashboard">
+								Go To Home Page
+							</button>
+						</div>
+						<div class="w-full p-t-15 p-b-15 text-center">
+							<div>
+								<a routerLink="/authentication/signin" class="txt1">
+									Need Help?
+								</a>
+							</div>
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { Page404Component } from './page404.component';
+
+describe('Page404Component',
+	() => {
+		let component: Page404Component;
+		let fixture: ComponentFixture<Page404Component>;
+		beforeEach(
+			waitForAsync(() => {
+				TestBed.configureTestingModule({
+					declarations: [Page404Component],
+				}).compileComponents();
+			})
+		);
+		beforeEach(() => {
+			fixture = TestBed.createComponent(Page404Component);
+			component = fixture.componentInstance;
+			fixture.detectChanges();
+		});
+		it('should create',
+			() => {
+				expect(component).toBeTruthy();
+			});
+	});
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+	selector: 'app-page404',
+	templateUrl: './page404.component.html',
+	styleUrls: ['./page404.component.scss'],
+})
+export class Page404Component {
+	constructor() {
+		// constructor
+	}
+}
@@ -0,0 +1,34 @@
+<div class="auth-container">
+	<div class="row auth-main">
+		<div class="col-sm-6 px-0 d-none d-sm-block">
+			<div class="left-img" style="background-image: url(assets/images/pages/bg-05.png);">
+			</div>
+		</div>
+		<div class="col-sm-6 auth-form-section">
+			<div class="form-section">
+				<div class="auth-wrapper">
+					<form>
+						<span class="error-header p-b-45">
+							500
+						</span>
+						<span class="error-subheader2 p-b-5">
+							Oops, Something went wrong. Please try after some times.
+						</span>
+						<div class="container-auth-form-btn mt-5">
+							<button mat-flat-button color="primary" class="auth-form-btn" type="submit">
+								Go To Home Page
+							</button>
+						</div>
+						<div class="w-full p-t-15 p-b-15 text-center">
+							<div>
+								<a routerLink="/authentication/signin" class="txt1">
+									Need Help?
+								</a>
+							</div>
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { Page500Component } from './page500.component';
+
+describe('Page500Component',
+	() => {
+		let component: Page500Component;
+		let fixture: ComponentFixture<Page500Component>;
+		beforeEach(
+			waitForAsync(() => {
+				TestBed.configureTestingModule({
+					declarations: [Page500Component],
+				}).compileComponents();
+			})
+		);
+		beforeEach(() => {
+			fixture = TestBed.createComponent(Page500Component);
+			component = fixture.componentInstance;
+			fixture.detectChanges();
+		});
+		it('should create',
+			() => {
+				expect(component).toBeTruthy();
+			});
+	});
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+	selector: 'app-page500',
+	templateUrl: './page500.component.html',
+	styleUrls: ['./page500.component.scss'],
+})
+export class Page500Component {
+	constructor() {
+		// constructor
+	}
+}
@@ -0,0 +1,114 @@
+<div class="auth-container">
+	<div class="row auth-main">
+		<div class="col-sm-6 px-0 d-none d-sm-block">
+			<div class="left-img" style="background-image: url(assets/images/pages/bg-01.png);">
+			</div>
+		</div>
+		<div class="col-sm-6 auth-form-section">
+			<div class="form-section">
+				<div class="auth-wrapper">
+					<h2 class="welcome-msg">
+						<div>Welcome to ase.com.ua</div>
+						<div>angular/asp.net core template</div>
+					</h2>
+					<p class="auth-signup-text text-muted">
+						Need an account?
+						<a routerLink="/authentication/signup" class="sign-up-link">
+							Sign Up
+						</a>
+					</p>
+					<h2 class="login-title">Sign in</h2>
+					<form class="validate-form" [formGroup]="authForm" (ngSubmit)="onSubmit()">
+						<div class="row">
+							<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 mb-2">
+								<mat-form-field class="example-full-width" appearance="outline">
+									<mat-label>Username</mat-label>
+									<input matInput formControlName="username"/>
+									<mat-icon class="material-icons-two-tone color-icon p-3" matSuffix>face</mat-icon>
+									<mat-error *ngIf="authForm.get('username')?.hasError('required')">
+										Username is required
+									</mat-error>
+								</mat-form-field>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-xl-12col-lg-12 col-md-12 col-sm-12 mb-2">
+								<mat-form-field class="example-full-width" appearance="outline">
+									<mat-label>Password</mat-label>
+									<input matInput [type]="hide ? 'password' : 'text'" formControlName="password">
+									<a href="#" onClick="return false;" matSuffix (click)="hide = !hide"
+									   [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
+										<mat-icon class="material-icons-two-tone color-icon m-3" matSuffix>
+											{{hide ? 'visibility_off' : 'visibility'}}
+										</mat-icon>
+									</a>
+									<mat-error *ngIf="authForm.get('password')?.hasError('required')">
+										Password is required
+									</mat-error>
+								</mat-form-field>
+							</div>
+						</div>
+						<div class="d-flex justify-content-between align-items-center mb-5">
+							<div class="form-check">
+								<label class="form-check-label">
+									<input class="form-check-input" type="checkbox" value=""> Remember me
+									<span class="form-check-sign">
+										<span class="check"></span>
+									</span>
+								</label>
+							</div>
+							<a class="txt1" routerLink="/authentication/forgot-password">Forgot Password?</a>
+						</div>
+
+						<div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
+
+						<div class="container-auth-form-btn">
+							<div style="text-align: center">
+								<button mat-raised-button color="primary" [class.auth-spinner]="loading" [disabled]="loading"
+								        class="auth-form-btn" [disabled]="!authForm.valid " type="submit">
+									Login
+								</button>
+							</div>
+						</div>
+					</form>
+					<h6 class="social-login-title">OR</h6>
+					<ul class="list-unstyled social-icon mb-0 mt-3">
+						<li class="list-inline-item">
+							<a href="javascript:void(0)" class="rounded" (click)="loginAuth0()">
+								<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 135 150">
+									<title>auth0-glyph</title>
+									<path d="M131.225 46.364L116.136 0H67.4l15.06 46.364h48.764zM67.4 0H18.664L3.602 46.364H52.34L67.399 0zM3.602 46.364c-8.982 27.639.856 57.918 24.368 75L43.032 75 3.602 46.364zm127.623 0L91.795 75l15.062 46.364c23.512-17.082 33.35-47.361 24.368-75zm-103.255 75L67.4 150l39.43-28.636L67.4 92.727l-39.43 28.637z" fill="#3c4858"/>
+								</svg>
+							</a>
+						</li>
+						<li class="list-inline-item">
+							<!--
+							<a href="javascript:void(0)" class="rounded" (click)="loginGoogle()">
+								<i class="fab fa-google"></i>
+							</a>
+							-->
+							<asl-google-signin-button type="icon" size="medium" width="200" shape="rectangular" theme="filled_black" logo_alignment="center" locale=""></asl-google-signin-button>
+						</li>
+						<!--
+						<li class="list-inline-item">
+							<a href="javascript:void(0)" class="rounded flex-c-m">
+								<i class="fab fa-facebook-f"></i>
+							</a>
+						</li>
+						<li class="list-inline-item">
+							<a href="javascript:void(0)" class="rounded">
+								<i class="fab fa-twitter"></i>
+							</a>
+						</li>
+						<li class="list-inline-item">
+							<a href="javascript:void(0)" class="rounded">
+								<i class="fab fa-linkedin-in"></i>
+							</a>
+						</li>
+						-->
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { SigninComponent } from './signin.component';
+
+describe('SigninComponent',
+	() => {
+		let component: SigninComponent;
+		let fixture: ComponentFixture<SigninComponent>;
+		beforeEach(
+			waitForAsync(() => {
+				TestBed.configureTestingModule({
+					declarations: [SigninComponent],
+				}).compileComponents();
+			})
+		);
+		beforeEach(() => {
+			fixture = TestBed.createComponent(SigninComponent);
+			component = fixture.componentInstance;
+			fixture.detectChanges();
+		});
+		it('should create',
+			() => {
+				expect(component).toBeTruthy();
+			});
+	});
@@ -0,0 +1,98 @@
+// angular
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+
+// libs
+import { SocialAuthService } from '@abacritt/angularx-social-login';
+
+// app
+import { AuthService } from 'src/app/core/service/auth.service';
+import { UnsubscribeOnDestroyAdapter } from 'src/app/shared/UnsubscribeOnDestroyAdapter';
+
+@Component({
+	selector: 'app-signin',
+	templateUrl: './signin.component.html',
+	styleUrls: ['./signin.component.scss'],
+})
+export class SigninComponent extends UnsubscribeOnDestroyAdapter
+implements OnInit {
+	authForm!: UntypedFormGroup;
+	submitted = false;
+	loading = false;
+	error?= '';
+	hide = true;
+
+	constructor(
+		private formBuilder: UntypedFormBuilder,
+		private router: Router,
+		private route: ActivatedRoute,
+		private authService: AuthService,
+		//private externalAuthService: SocialAuthService,
+	) {
+		super();
+	}
+
+	ngOnInit() {
+		this.authForm = this.formBuilder.group({
+			username: ['', Validators.required],
+			password: ['', Validators.required],
+		});
+
+		this.authService.isAuthenticated$.subscribe(isAuthenticated => {
+			if (isAuthenticated) {
+				this.router.navigate([this.getRedirect() || '/dashboard/dashboard1']);
+			}
+		});
+	}
+
+	onSubmit() {
+		if (this.authForm.invalid) {
+			this.error = 'Username and Password not valid!';
+			return;
+		}
+
+		this.submitted = true;
+		this.loading = true;
+		this.error = '';
+
+		var user = {
+			username: this.authForm.controls['username'].value,
+			password: this.authForm.controls['password'].value
+		};
+
+		this.subs.sink = this.authService
+			.login(user)
+			.subscribe({
+				next: (resp) => {
+					if (!resp.success) {
+						this.error = 'Invalid Login';
+						if (!resp.success && resp.error?.code === 'invalid_grant') {
+							this.error = 'Invalid username or password';
+						}
+						this.submitted = false;
+						this.loading = false;
+					}
+				},
+				error: (error) => {
+					this.error = 'Invalid username or password';
+					this.submitted = false;
+					this.loading = false;
+				},
+			});
+	}
+
+	loginAuth0() {
+		this.authService.loginAuth0().subscribe(resp => {
+			if (!resp.success) {
+				this.error = 'Invalid login';
+			}
+		});
+	}
+
+	private getRedirect(): string | undefined {
+		var redirectUrl = this.route.snapshot.queryParams['r'];
+		redirectUrl = redirectUrl ? decodeURIComponent(redirectUrl) : undefined;
+		return redirectUrl;
+	}
+}
@@ -0,0 +1,117 @@
+<div class="auth-container">
+	<div class="row auth-main">
+		<div class="col-sm-6 px-0 d-none d-sm-block">
+			<div class="left-img" style="background-image: url(assets/images/pages/bg-02.png);">
+			</div>
+		</div>
+		<div class="col-sm-6 auth-form-section">
+			<div class="form-section">
+				<div class="auth-wrapper">
+					<h2 class="welcome-msg"> Sign Up </h2>
+					<p class="auth-signup-text text-muted">Enter details to create your account</p>
+					<form class="validate-form" [formGroup]="authForm" (ngSubmit)="onSubmit()">
+						<div class="row">
+							<div class="col-xl-12col-lg-12 col-md-12 col-sm-12 mb-2">
+								<mat-form-field class="example-full-width" appearance="outline">
+									<mat-label>Email</mat-label>
+									<input matInput formControlName="email" required autocomplete="off">
+									<mat-icon class="material-icons-two-tone color-icon p-3" matSuffix>mail</mat-icon>
+									<mat-error *ngIf="authForm.get('email')?.hasError('required') || authForm.get('email')?.touched">
+										Please enter a valid email address
+									</mat-error>
+								</mat-form-field>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-xl-12col-lg-12 col-md-12 col-sm-12 mb-2">
+								<mat-form-field class="example-full-width" appearance="outline">
+									<mat-label>Password</mat-label>
+									<input matInput formControlName="password" [type]="hide ? 'password' : 'text'" required autocomplete="off">
+									<a href="#" onClick="return false;" matSuffix (click)="hide = !hide"
+									   [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
+										<mat-icon class="material-icons-two-tone color-icon m-3" matSuffix>
+											{{hide ? 'visibility_off' : 'visibility'}}
+										</mat-icon>
+									</a>
+									<mat-error *ngIf="authForm.get('password')?.hasError('required')">
+										Password is required
+									</mat-error>
+								</mat-form-field>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-xl-12col-lg-12 col-md-12 col-sm-12 mb-2">
+								<mat-form-field class="example-full-width" appearance="outline">
+									<mat-label>Confirm Password</mat-label>
+									<input matInput formControlName="cpassword" [type]="chide ? 'password' : 'text'" required autocomplete="off">
+									<a href="#" onClick="return false;" matSuffix (click)="chide = !chide"
+									   [attr.aria-label]="'Hide password'" [attr.aria-pressed]="chide">
+										<mat-icon class="material-icons-two-tone color-icon m-3" matSuffix>
+											{{hide ? 'visibility_off' : 'visibility'}}
+										</mat-icon>
+									</a>
+									<mat-error *ngIf="authForm.get('cpassword')?.hasError('required')">
+										Confirm Password is required
+									</mat-error>
+								</mat-form-field>
+							</div>
+						</div>
+						<div class="flex-sb-m w-full  p-b-20" *ngIf="generalError">
+							<div *ngFor="let error of generalError.errors" class="alert alert-danger">
+								{{error.description}}
+							</div>
+						</div>
+						<div class="flex-sb-m w-full  p-b-20">
+							<div>
+								<span>
+									Already Registered?
+									<a routerLink="/authentication/signin">
+										Login
+									</a>
+								</span>
+							</div>
+						</div>
+						<div class="container-auth-form-btn">
+							<button mat-flat-button color="primary" class="auth-form-btn" [disabled]="!authForm.valid " type="submit">
+								Register
+							</button>
+						</div>
+					</form>
+					<h6 class="social-login-title">OR</h6>
+					<ul class="list-unstyled social-icon mb-0 mt-3">
+						<li class="list-inline-item">
+							<a href="javascript:void(0)" class="rounded" (click)="loginAuth0()">
+								<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 135 150">
+									<title>auth0-glyph</title>
+									<path d="M131.225 46.364L116.136 0H67.4l15.06 46.364h48.764zM67.4 0H18.664L3.602 46.364H52.34L67.399 0zM3.602 46.364c-8.982 27.639.856 57.918 24.368 75L43.032 75 3.602 46.364zm127.623 0L91.795 75l15.062 46.364c23.512-17.082 33.35-47.361 24.368-75zm-103.255 75L67.4 150l39.43-28.636L67.4 92.727l-39.43 28.637z" fill="#3c4858"/>
+								</svg>
+							</a>
+						</li>
+						<!--
+						<li class="list-inline-item">
+							<a href="javascript:void(0)" class="rounded">
+								<i class="fab fa-google"></i>
+							</a>
+						</li>
+						<li class="list-inline-item">
+							<a href="javascript:void(0)" class="rounded flex-c-m">
+								<i class="fab fa-facebook-f"></i>
+							</a>
+						</li>
+						<li class="list-inline-item">
+							<a href="javascript:void(0)" class="rounded">
+								<i class="fab fa-twitter"></i>
+							</a>
+						</li>
+						<li class="list-inline-item">
+							<a href="javascript:void(0)" class="rounded">
+								<i class="fab fa-linkedin-in"></i>
+							</a>
+						</li>
+						-->
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { SignupComponent } from './signup.component';
+
+describe('SignupComponent',
+	() => {
+		let component: SignupComponent;
+		let fixture: ComponentFixture<SignupComponent>;
+		beforeEach(
+			waitForAsync(() => {
+				TestBed.configureTestingModule({
+					declarations: [SignupComponent],
+				}).compileComponents();
+			})
+		);
+		beforeEach(() => {
+			fixture = TestBed.createComponent(SignupComponent);
+			component = fixture.componentInstance;
+			fixture.detectChanges();
+		});
+		it('should create',
+			() => {
+				expect(component).toBeTruthy();
+			});
+	});
@@ -0,0 +1,72 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { GeneralErrorModel } from '../../core/models/general-error.model';
+import { AuthService } from '../../core/service/auth.service';
+
+@Component({
+	selector: 'app-signup',
+	templateUrl: './signup.component.html',
+	styleUrls: ['./signup.component.scss'],
+})
+export class SignupComponent implements OnInit {
+	authForm!: UntypedFormGroup;
+	submitted = false;
+	returnUrl!: string;
+	hide = true;
+	chide = true;
+	generalError?: GeneralErrorModel;
+
+	constructor(
+		private formBuilder: UntypedFormBuilder,
+		private route: ActivatedRoute,
+		private router: Router,
+		private authService: AuthService
+	) {
+
+	}
+
+	ngOnInit() {
+		this.authForm = this.formBuilder.group({
+			email: ['', [Validators.required, Validators.email, Validators.minLength(5)]],
+			password: ['', Validators.required],
+			cpassword: ['', Validators.required],
+		});
+		// get return url from route parameters or default to '/'
+		this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+	}
+
+	get f() {
+		return this.authForm.controls;
+	}
+
+	onSubmit() {
+		this.submitted = true;
+		// stop here if form is invalid
+		if (this.authForm.invalid) {
+			return;
+		}
+		//this.router.navigate(['/admin/dashboard/main']);
+		this.authService.register({
+			username: this.authForm.get('email')!.value!,
+			password: this.authForm.get('password')!.value!,
+			confirmPassword: this.authForm.get('cpassword')!.value!,
+		}).subscribe(
+			resp => {
+				if (!resp.succeeded) {
+					this.generalError = resp as GeneralErrorModel;
+				} else {
+					this.router.navigate(['authentication/signin']);
+				}
+			},
+			err => {
+				this.generalError = err.error as GeneralErrorModel;
+			}
+		);
+	}
+
+	loginAuth0() {
+		this.authService.loginAuth0().subscribe(x => {
+		});
+	}
+}