logging & feedback

idp_client/angular.json

@@ -72,6 +72,9 @@
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "proxyConfig": "proxy.conf.json"
+          },
           "configurations": {
             "production": {
               "buildTarget": "idp_client:build:production"

idp_client/proxy.conf.json

@@ -0,0 +1,11 @@
+{
+    "/api": {
+      "target": "http://localhost:5000",
+      "secure": false,
+      "logLevel": "debug",
+      "changeOrigin": true,
+      "pathRewrite": {
+        "^/api": "/api"
+      }
+    }
+}

idp_client/src/app/auth/login/login.component.html

@@ -11,7 +11,7 @@
 					<i class="login__icon fas fa-lock safe"></i>
 					<input type="password" formControlName="password" class="login__input" placeholder="Password">
 				</div>
-				<button class="button login__submit" (click)="login()" [disabled]="!client_id || loginForm.invalid">
+				<button class="button login__submit" (click)="login()" [disabled]="!client_id || loginForm.invalid || isLoading">
 					<span class="button__text">Log In Now</span>
 					<i class="button__icon fas fa-chevron-right"></i>
 				</button>

idp_client/src/app/auth/login/login.component.ts

@@ -3,7 +3,6 @@ import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { environment } from '../../../environments/environment';
 import { HotToastService } from '@ngxpert/hot-toast';
 
 @Component({
@@ -23,6 +22,8 @@ export class LoginComponent {
   client: string = "";
   client_id = null;
 
+  isLoading = false;
+
   loginForm = new FormGroup({
     username: new FormControl(''),
     password: new FormControl(''),
@@ -37,7 +38,7 @@ export class LoginComponent {
     const id = window.localStorage.getItem("auth_sesion_key");
     if (!id ||id.length < 2) { return; }
 
-    this.http.post(environment.api_url + 'auth/login-with-session-id', {
+    this.http.post('api/auth/login-with-session-id', {
       code: id,
       client_id: this.client_id
     }).pipe(
@@ -64,7 +65,7 @@ export class LoginComponent {
     this.redirectUri = params.redirect_uri;
     this.client_id = params.client_id;
 
-    this.http.get<any>(environment.api_url + 'auth/', {
+    this.http.get<any>('api/auth/', {
       params
     }).subscribe({
       next: (client) => {
@@ -78,8 +79,16 @@ export class LoginComponent {
   }
 
   login() {
-    this.toast.loading('Logging in...');
-    this.http.post(environment.api_url + 'auth/login?'+ 'client_id=' + this.client_id, this.loginForm.value).subscribe({
+    this.isLoading = true;
+    this.http.post('api/auth/login?'+ 'client_id=' + this.client_id, this.loginForm.value).
+    pipe(
+      this.toast.observe({
+        loading: 'Logging in...',
+        success: 'Login successfull',
+        error: 'Invalid login'
+      })
+    )
+    .subscribe({
       next: (data) => {
         if (data["code"] != null) {
           window.localStorage.setItem("auth_sesion_key", data["session_key"]);
@@ -88,7 +97,7 @@ export class LoginComponent {
       },
       error: (error) => {
         console.error(error);
-        this.toast.error('Invalid login');
+        this.isLoading = false;
       }
     })
   }

idp_client/src/app/auth/register/register.component.ts

@@ -3,7 +3,6 @@ import { Component, inject } from '@angular/core';
 import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { HotToastService } from '@ngxpert/hot-toast';
-import { environment } from '../../../environments/environment';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -40,7 +39,7 @@ export class RegisterComponent {
     const params = (this.route.snapshot.queryParamMap as any)["params"];
     this.redirectUri = params.redirect_uri;
     this.client_id = params.client_id;
-    this.http.get<any>(environment.api_url + 'auth/', {
+    this.http.get<any>('api/auth/', {
       params
     }).subscribe({
       next: (client) => {
@@ -58,10 +57,10 @@ export class RegisterComponent {
       this.toast.error('Passwords do not match');
       return;
     }
-    this.http.post(environment.api_url + 'auth/register?'+ 'client_id=' + this.client_id, this.registerForm.value).pipe(
+    this.http.post('api/auth/register?'+ 'client_id=' + this.client_id, this.registerForm.value).pipe(
       this.toast.observe({
         loading: 'Registering...',
-        success: 'Registration successfull'
+        success: 'Registration successfull, please log in',
       })
     ).subscribe({
       next: () => {