diff --git a/src/app/admin-dashboard/admin-dashboard.component.html b/src/app/admin-dashboard/admin-dashboard.component.html
index afa9155cbeb4cde0d718505b588fe35870f258d8..ba3bcbcc83206126de51f465621415703f281190 100644
--- a/src/app/admin-dashboard/admin-dashboard.component.html
+++ b/src/app/admin-dashboard/admin-dashboard.component.html
@@ -8,6 +8,9 @@
(click)="clickAddUser()">
Add User
</button>
+ <button type="button" class="btn btn-danger" (click)="logout()">
+ Logout
+ </button>
</div>
</div>
</nav>
diff --git a/src/app/admin-dashboard/admin-dashboard.component.ts b/src/app/admin-dashboard/admin-dashboard.component.ts
index 400634a4ec75505124e442d6a247ba4c176e33b7..14ca77d7d5b1d86b3070d51abc6f6092c24f5713 100644
--- a/src/app/admin-dashboard/admin-dashboard.component.ts
+++ b/src/app/admin-dashboard/admin-dashboard.component.ts
@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup} from "@angular/forms";
import {UserModel} from "./user.model";
import {ApiService} from "../shared/api.service";
+import {Router} from "@angular/router";
@Component({
selector: 'app-admin-dashboard',
@@ -17,7 +18,7 @@ export class AdminDashboardComponent implements OnInit {
showAddButton!: boolean;
showUpdateButton!: boolean;
- constructor(private fb: FormBuilder, private api: ApiService) {
+ constructor(private fb: FormBuilder, private api: ApiService, private router: Router) {
this.form = this.fb.group({
username: [''],
email: [''],
@@ -106,4 +107,10 @@ export class AdminDashboardComponent implements OnInit {
alert('An error has occurred.');
});
}
+
+ logout() {
+ localStorage.removeItem('token');
+ localStorage.removeItem('role');
+ this.router.navigate(['/login']);
+ }
}
diff --git a/src/app/admin-dashboard/user.model.ts b/src/app/admin-dashboard/user.model.ts
index 5f20eabfeab3a7926a3a7419f48ecb6ff7d96a18..d4688281908ddba4218bcb5d7eb9df75c834f2a6 100644
--- a/src/app/admin-dashboard/user.model.ts
+++ b/src/app/admin-dashboard/user.model.ts
@@ -1,6 +1,7 @@
export class UserModel {
id: string = '';
+ token: string = '';
username: string = '';
email: string = '';
password: string = '';
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 02972627f8df364102ce4ede71c8bd5f3660e1d8..90f3b91f95049e34e379c5ffb493d7b59f43082b 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,10 +1,21 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {LoginComponent} from "./login/login.component";
+import {SignupComponent} from "./signup/signup.component";
+import {AdminDashboardComponent} from "./admin-dashboard/admin-dashboard.component";
+import {AuthGuard} from "./shared/auth/auth.guard";
+import {RoleGuard} from "./shared/auth/role.guard";
-const routes: Routes = [];
+const routes: Routes = [
+ {path: '', redirectTo: 'login', pathMatch: 'full'},
+ {path: 'login', component: LoginComponent},
+ {path: 'signup', component: SignupComponent},
+ {path: 'admin', component: AdminDashboardComponent, canActivate: [RoleGuard], data: {roles: ['ROLE_ADMIN']}},
+];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index a1e346b4f9900c17f2565f398c12a5014dea6015..0680b43f9c6ae05df91c576141f20ed411d07c7d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1 @@
-<app-admin-dashboard></app-admin-dashboard>
+<router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 791980c077beeda13b5bd16ac953a7f2343b52d9..42bc1f682583804c5b97cf1ca5fbafb16276f0cf 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,11 +6,15 @@ import {AppComponent} from './app.component';
import {AdminDashboardComponent} from './admin-dashboard/admin-dashboard.component';
import {ReactiveFormsModule} from "@angular/forms";
import {HttpClientModule} from "@angular/common/http";
+import { LoginComponent } from './login/login.component';
+import { SignupComponent } from './signup/signup.component';
@NgModule({
declarations: [
AppComponent,
- AdminDashboardComponent
+ AdminDashboardComponent,
+ LoginComponent,
+ SignupComponent
],
imports: [
BrowserModule,
diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..2954033bef26e309c8b01b346dc4317e854de181
--- /dev/null
+++ b/src/app/login/login.component.css
@@ -0,0 +1,24 @@
+.card {
+ margin-top: 10px;
+ border: none;
+ width: 500px;
+ padding: 40px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: hsla(205, 46%, 30%, 0.8);
+ background: linear-gradient(45deg, hsla(205, 46%, 30%, 0.8), hsla(24, 46%, 30%, 0.8));
+}
+
+.card h1 {
+ color: #fff;
+}
+
+.form-text, h6 {
+ color: darkgray;
+}
+
+label {
+ color: #fff;
+}
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..9b68571f63e8eb7408e13abcbc59a13c337a7f46
--- /dev/null
+++ b/src/app/login/login.component.html
@@ -0,0 +1,27 @@
+<div class="container">
+ <div class="row">
+ <div class="col-md-6">
+ <div class="card">
+ <div class="text-center">
+ <!-- <img src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="John" style="width:20%">-->
+ <h1>Login</h1>
+ <h6>Enter your username and password</h6>
+ <form [formGroup]="formLogin" (ngSubmit)="login()">
+ <div class="mb-3">
+ <label for="username" class="form-label">Username</label>
+ <input type="text" class="form-control" id="username" aria-describedby="emailHelp"
+ formControlName="username">
+ <div id="emailHelp" class="form-text">We'll never share your username with anyone else.</div>
+ </div>
+ <div class="mb-3">
+ <label for="password" class="form-label">Password</label>
+ <input type="password" class="form-control" id="password" formControlName="password">
+ </div>
+ <button type="submit" class="btn btn-primary">Login</button>
+ </form>
+ <a class="form-text" routerLink="/signup">New user? Click to sign up!</a>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/src/app/login/login.component.spec.ts b/src/app/login/login.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..10eca249d528f4bcf8ef434696978a242a03e487
--- /dev/null
+++ b/src/app/login/login.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+ let component: LoginComponent;
+ let fixture: ComponentFixture<LoginComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ LoginComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(LoginComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..531aaca1d0d47ad044361179948883370cc0ae86
--- /dev/null
+++ b/src/app/login/login.component.ts
@@ -0,0 +1,40 @@
+import {Component} from '@angular/core';
+import {Router} from "@angular/router";
+import {FormBuilder, FormGroup} from "@angular/forms";
+import {ApiService} from "../shared/api.service";
+
+@Component({
+ selector: 'app-login',
+ templateUrl: './login.component.html',
+ styleUrls: ['./login.component.css']
+})
+export class LoginComponent {
+
+ formLogin!: FormGroup;
+
+ constructor(private fb: FormBuilder, private router: Router, private api: ApiService) {
+ this.formLogin = fb.group({
+ username: [''],
+ password: ['']
+ });
+ }
+
+ login() {
+ this.api.post("http://localhost:8080/api/v1/auth/login", this.formLogin.value).subscribe((res: any) => {
+ if (res && res.token) {
+ const role = res.roles[0];
+ localStorage.setItem('token', res.token);
+ localStorage.setItem('role', role);
+ if (role === 'ROLE_ADMIN') {
+ this.router.navigate(['/admin']);
+ } else {
+ this.router.navigate(['/']);
+ }
+ this.formLogin.reset();
+ }
+ }, err => {
+ alert("Wrong username or password. Try again!")
+ this.formLogin.controls['password'].setValue('');
+ });
+ }
+}
diff --git a/src/app/shared/auth/auth.guard.spec.ts b/src/app/shared/auth/auth.guard.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..68889d22d920e3b78febae9e5d323c717887961e
--- /dev/null
+++ b/src/app/shared/auth/auth.guard.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+ let guard: AuthGuard;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ guard = TestBed.inject(AuthGuard);
+ });
+
+ it('should be created', () => {
+ expect(guard).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/auth/auth.guard.ts b/src/app/shared/auth/auth.guard.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5ca3570b698bb92e58bb3b5a01b6d777a0aabeb2
--- /dev/null
+++ b/src/app/shared/auth/auth.guard.ts
@@ -0,0 +1,21 @@
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree} from '@angular/router';
+import {Observable} from 'rxjs';
+import {ApiService} from "../api.service";
+import {AuthService} from "./auth.service";
+
+@Injectable({
+ providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+ constructor(private auth: AuthService, private router: Router) {
+ }
+
+ canActivate(): boolean {
+ if (this.auth.isLoggedIn()) {
+ return true;
+ }
+ this.router.navigate(['/login']);
+ return false;
+ }
+}
diff --git a/src/app/shared/auth/auth.service.spec.ts b/src/app/shared/auth/auth.service.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f1251cacf9dda3b3bd9dc5222583fafa110ffe8f
--- /dev/null
+++ b/src/app/shared/auth/auth.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+ let service: AuthService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(AuthService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/auth/auth.service.ts b/src/app/shared/auth/auth.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c12feb28a3ba10800fac642aff1a2552849a74b1
--- /dev/null
+++ b/src/app/shared/auth/auth.service.ts
@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class AuthService {
+
+ constructor() { }
+ isLoggedIn() {
+ return !!localStorage.getItem('token') && !!localStorage.getItem('role');
+ }
+}
diff --git a/src/app/shared/auth/role.guard.spec.ts b/src/app/shared/auth/role.guard.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b6db9fd568a85482d99640792a1acde7497962b
--- /dev/null
+++ b/src/app/shared/auth/role.guard.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RoleGuard } from './role.guard';
+
+describe('RoleGuard', () => {
+ let guard: RoleGuard;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ guard = TestBed.inject(RoleGuard);
+ });
+
+ it('should be created', () => {
+ expect(guard).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/auth/role.guard.ts b/src/app/shared/auth/role.guard.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a7d1c1e989b4f91af9976a20087ddbe40b0dab71
--- /dev/null
+++ b/src/app/shared/auth/role.guard.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class RoleGuard implements CanActivate {
+ canActivate(): boolean {
+ if (localStorage.getItem('role') === 'ROLE_ADMIN') {
+ return true;
+ }
+ alert('You are not authorized to view this page!');
+ return false;
+ }
+}
diff --git a/src/app/signup/signup.component.css b/src/app/signup/signup.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..2954033bef26e309c8b01b346dc4317e854de181
--- /dev/null
+++ b/src/app/signup/signup.component.css
@@ -0,0 +1,24 @@
+.card {
+ margin-top: 10px;
+ border: none;
+ width: 500px;
+ padding: 40px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: hsla(205, 46%, 30%, 0.8);
+ background: linear-gradient(45deg, hsla(205, 46%, 30%, 0.8), hsla(24, 46%, 30%, 0.8));
+}
+
+.card h1 {
+ color: #fff;
+}
+
+.form-text, h6 {
+ color: darkgray;
+}
+
+label {
+ color: #fff;
+}
diff --git a/src/app/signup/signup.component.html b/src/app/signup/signup.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..3ae7c3e47db0c9fab22914164d2e5eff1acca7f1
--- /dev/null
+++ b/src/app/signup/signup.component.html
@@ -0,0 +1,31 @@
+<div class="container">
+ <div class="row">
+ <div class="col-md-6">
+ <div class="card">
+ <div class="text-center">
+ <!-- <img src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="John" style="width:20%">-->
+ <h1>Sign up</h1>
+ <h6>Register yourself!</h6>
+ <form [formGroup]="formSignup" (ngSubmit)="singUp()">
+ <div class="mb-3">
+ <label for="username" class="form-label">Username</label>
+ <input type="text" class="form-control" id="username" aria-describedby="emailHelp"
+ formControlName="username">
+ </div>
+ <div class="mb-3">
+ <label for="email" class="form-label">Email</label>
+ <input type="email" class="form-control" id="email" aria-describedby="emailHelp" formControlName="email">
+ <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
+ </div>
+ <div class="mb-3">
+ <label for="password" class="form-label">Password</label>
+ <input type="password" class="form-control" id="password" formControlName="password">
+ </div>
+ <button type="submit" class="btn btn-primary">Sign up</button>
+ </form>
+ <a class="form-text" routerLink="/login">Already a user? Click to login!</a>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/src/app/signup/signup.component.spec.ts b/src/app/signup/signup.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2643b204064d3c0d0c4ccf7495229ee39ce8d8b2
--- /dev/null
+++ b/src/app/signup/signup.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignupComponent } from './signup.component';
+
+describe('SignupComponent', () => {
+ let component: SignupComponent;
+ let fixture: ComponentFixture<SignupComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ SignupComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(SignupComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/signup/signup.component.ts b/src/app/signup/signup.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b19b19ab17f05056a7a8a6cd49ea204e8b8657d5
--- /dev/null
+++ b/src/app/signup/signup.component.ts
@@ -0,0 +1,40 @@
+import {Component} from '@angular/core';
+import {FormBuilder, FormGroup} from "@angular/forms";
+import {ApiService} from "../shared/api.service";
+import {Router} from "@angular/router";
+
+@Component({
+ selector: 'app-signup',
+ templateUrl: './signup.component.html',
+ styleUrls: ['./signup.component.css']
+})
+export class SignupComponent {
+
+ formSignup!: FormGroup;
+
+ constructor(private fb: FormBuilder, private api: ApiService, private router: Router) {
+ this.formSignup = this.fb.group({
+ username: [''],
+ email: [''],
+ password: ['']
+ });
+ }
+
+ singUp() {
+ const payload = {
+ username: this.formSignup.value.username,
+ email: this.formSignup.value.email,
+ password: this.formSignup.value.password,
+ roles: ['user']
+ }
+ return this.api.post('http://localhost:8080/api/v1/auth/signup', payload)
+ .subscribe(res => {
+ console.log(res);
+ this.formSignup.reset();
+ alert('Sign up successful.');
+ this.router.navigate(['login']);
+ }, err => {
+ alert('An error has occurred. Try again.');
+ });
+ }
+}