Merge pull request #14 from sentemon/add-form-for-registration-and-login

Add form for registration and login, service logic for registration and login

Author: sentemon

frontend/package-lock.json

@@ -27,8 +27,6 @@
     "apollo-angular": "^8.0.0",
     "express": "^4.21.2",
     "graphql": "^16.9.0",
-    "keycloak-angular": "^16.1.0",
-    "keycloak-js": "^26.0.7",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.10"

frontend/package.json

@@ -1,5 +1,5 @@
 <router-outlet />
-<div class="layout">
-  <app-sidebar></app-sidebar>
-  <app-main></app-main>
-</div>
+<!--<div class="layout">-->
+<!--  <app-sidebar></app-sidebar>-->
+<!--  <app-main></app-main>-->
+<!--</div>-->

frontend/src/app/app.component.html

@@ -7,9 +7,8 @@ import {HTTP_INTERCEPTORS, provideHttpClient} from '@angular/common/http';
 import { provideApollo } from 'apollo-angular';
 import { HttpLink } from 'apollo-angular/http';
 import { InMemoryCache } from '@apollo/client/core';
-import { KeycloakService } from 'keycloak-angular';
-import {initKeycloak} from "./init-keycloak";
 import {AuthInterceptor} from "./core/services/auth-interceptor.service";
+import {environment} from "../environments/environment";
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -22,18 +21,11 @@ export const appConfig: ApplicationConfig = {
 
       return {
         link: httpLink.create({
-          uri: '<%= endpoint %>',
+          uri: environment.auth_service,
         }),
         cache: new InMemoryCache(),
       };
     }),
-    KeycloakService,
-    {
-      provide: APP_INITIALIZER,
-      useFactory: initKeycloak,
-      deps: [KeycloakService],
-      multi: true
-    },
     {
       provide: HTTP_INTERCEPTORS,
       useClass: AuthInterceptor,

frontend/src/app/app.config.ts

@@ -1,8 +1,13 @@
 import { Routes } from '@angular/router';
-import {AuthGuard} from "./core/services/auth-guard.service";
 import {AppComponent} from "./app.component";
+import {LoginComponent} from "./features/auth/componets/login/login.component";
+import {RegisterComponent} from "./features/auth/componets/register/register.component";
+import {ProfileComponent} from "./features/auth/componets/profile/profile.component";
 
 export const routes: Routes = [
   // { path: '', component: AppComponent, canActivate: [AuthGuard] },
+  { path: 'sentemon', component: ProfileComponent },
+  { path: 'login', component: LoginComponent },
+  { path: 'register', component: RegisterComponent },
   { path: '**', redirectTo: '', pathMatch: 'full' }
 ];

frontend/src/app/app.routes.ts

@@ -1,31 +1,9 @@
-import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
-import { KeycloakAuthGuard, KeycloakService } from "keycloak-angular";
-import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from "@angular/router";
+import { Injectable } from '@angular/core';
 
 @Injectable({
   providedIn: 'root'
 })
-export class AuthGuard extends KeycloakAuthGuard {
+export class AuthGuard {
 
-  constructor(
-    protected override router: Router,
-    protected override keycloakAngular: KeycloakService,
-    @Inject(PLATFORM_ID) private platformId: Object
-  ) {
-    super(router, keycloakAngular);
-  }
-
-  public override async isAccessAllowed(
-    route: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot): Promise<boolean> {
-    if (!this.keycloakAngular.isLoggedIn()) {
-      await this.keycloakAngular.login({
-        redirectUri: window.location.origin + state.url
-      });
-
-      return false;
-    }
-
-    return true;
-  }
+  constructor() {}
 }

frontend/src/app/core/services/auth-guard.service.ts

@@ -1,38 +1,16 @@
 import { Injectable } from '@angular/core';
 import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from "@angular/common/http";
 import {Observable} from 'rxjs';
-import {KeycloakService} from "keycloak-angular";
 
 @Injectable({
   providedIn: 'root'
 })
 export class AuthInterceptor implements HttpInterceptor {
 
-  constructor(private keycloakService: KeycloakService) { }
+  constructor() { }
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    return new Observable(observer => {
-      this.keycloakService.updateToken(5).then(() => {
-        const token = this.keycloakService.getKeycloakInstance().token;
-
-        if (token) {
-          req = req.clone({
-            setHeaders: {
-              Authorization: `Bearer ${token}`,
-            },
-          });
-        }
-
-        next.handle(req).subscribe(
-          event => observer.next(event),
-          err => observer.error(err),
-          () => observer.complete()
-        );
-      }).catch(err => {
-        console.error('Failed to refresh token', err);
-        observer.error(err);
-      });
-    });
+    return new Observable()
   }
 
 }

frontend/src/app/core/services/auth-interceptor.service.ts

@@ -0,0 +1,59 @@
+.form {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+
+  form {
+    display: flex;
+    flex-direction: column;
+
+    h1 {
+      margin-bottom: 1.5rem;
+      text-align: center;
+    }
+
+    .fields {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+
+      input {
+        padding: 0.8rem;
+        font-size: 1rem;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        outline: none;
+        transition: border-color 0.3s;
+
+        &:focus {
+          border-color: #007bff;
+        }
+      }
+    }
+
+    button {
+      margin-top: 1rem;
+      padding: 0.8rem;
+      font-size: 1rem;
+      color: white;
+      background-color: black;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: #333;
+      }
+    }
+
+    p {
+      margin-top: 10px;
+
+      a {
+        text-decoration: none;
+      }
+    }
+  }
+}

frontend/src/app/features/auth/componets/auth.scss

@@ -0,0 +1,11 @@
+<div class="form">
+  <form [formGroup]="loginForm" (ngSubmit)="onLogin()">
+    <h1>Login to Fitness App</h1>
+    <div class="fields">
+      <input id="email" type="email" formControlName="email" placeholder="Email / Username" name="email" autocomplete="username" autocapitalize="off">
+      <input id="password" type="password" formControlName="password" placeholder="Password">
+    </div>
+    <button type="submit">Login</button>
+    <p>Don't have an account? <a routerLink="/register">Register</a></p>
+  </form>
+</div>

frontend/src/app/features/auth/componets/login/login.component.html

@@ -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({
+      imports: [LoginComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/features/auth/componets/login/login.component.spec.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NgIf} from "@angular/common";
+import {RouterLink} from "@angular/router";
+import {AuthGuardService} from "../../services/auth-guard.service";
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    NgIf,
+    RouterLink
+  ],
+  templateUrl: './login.component.html',
+  styleUrl: './../auth.scss'
+})
+export class LoginComponent {
+  loginForm: FormGroup;
+
+  constructor(private authGuardService: AuthGuardService, private formBuilder: FormBuilder) {
+    this.loginForm = this.formBuilder.group({
+      email: ['', [Validators.required]],
+      password: ['', [Validators.required, Validators.minLength(6)]]
+    })
+  }
+  onLogin() {
+    if (this.loginForm.valid) {
+      // ToDo: save to cookie
+      this.authGuardService.login(this.loginForm.value.email, this.loginForm.value.password).subscribe(result => {
+        console.log(result);
+      });
+    } else {
+      // ToDo
+      console.log('Form is invalid', this.loginForm.errors);
+    }
+  }
+}

frontend/src/app/features/auth/componets/login/login.component.ts

@@ -0,0 +1 @@
+<p>logout works!</p>

frontend/src/app/features/auth/componets/logout/logout.component.html

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogoutComponent } from './logout.component';
+
+describe('LogoutComponent', () => {
+  let component: LogoutComponent;
+  let fixture: ComponentFixture<LogoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LogoutComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LogoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/features/auth/componets/logout/logout.component.scss

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-logout',
+  standalone: true,
+  imports: [],
+  templateUrl: './logout.component.html',
+  styleUrl: './logout.component.scss'
+})
+export class LogoutComponent {
+
+}

frontend/src/app/features/auth/componets/logout/logout.component.spec.ts

@@ -0,0 +1,5 @@
+<p>profile works!</p>
+<p>{{ user?.firstName }}</p>
+<p>{{ user?.lastName }}</p>
+<p>{{ user?.username }}</p>
+<button (click)="getSentemon()" >Get Sentemon</button>

frontend/src/app/features/auth/componets/logout/logout.component.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileComponent } from './profile.component';
+
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProfileComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});