Added discord login & removed discord register #128

kdb-web/src/app/modules/auth/components/login/login.component.html

@@ -1,60 +1,65 @@
 <section class="login-wrapper">
-    <div class="login-form-wrapper">
-        <div class="login-form">
-            <form [formGroup]="loginForm">
-                <h1>{{'auth.header' | translate}}</h1>
-                <div class="input-field">
-                    <input type="email" pInputText formControlName="email" placeholder="{{'auth.login.e_mail' | translate}}" [ngClass]="{ 'invalid-feedback-input': submitted && (
+  <div class="login-form-wrapper">
+    <div class="login-form">
+      <form [formGroup]="loginForm">
+        <h1>{{'auth.header' | translate}}</h1>
+        <div class="input-field">
+          <input type="email" pInputText formControlName="email" placeholder="{{'auth.login.e_mail' | translate}}" [ngClass]="{ 'invalid-feedback-input': submitted && (
                             (loginForm.controls.email.errors && loginForm.controls.email.errors['required'] || authUserAtrErrors.email.required) ||
                             (authUserAtrErrors.email.wrongData) ||
                             (authUserAtrErrors.email.notConfirmed)
                         )}" autocomplete="username email">
-                    <div *ngIf="submitted" class="invalid-feedback">
-                        <div
-                            *ngIf="loginForm.controls.email.errors && loginForm.controls.email.errors['required'] || authUserAtrErrors.email.required">
-                            {{'auth.login.e_mail_required' | translate}}</div>
-                        <div *ngIf="authUserAtrErrors.email.wrongData">{{'auth.login.user_not_found' | translate}}</div>
-                        <div *ngIf="authUserAtrErrors.email.notConfirmed">{{'auth.login.e_mail_not_confirmed' | translate}}</div>
-                    </div>
-                </div>
-                <div class="input-field">
-                    <!--
-                        !! WARNING !!
-                        Bugfix from https://github.com/primefaces/primeng/issues/10788
-                        styleClass="p-password p-component p-inputwrapper p-input-icon-right"
-                        Remove after update!
-                    -->
-                    <p-password type="password" formControlName="password" placeholder="{{'auth.login.password' | translate}}" [ngClass]="{ 'invalid-feedback-input': submitted && (
+          <div *ngIf="submitted" class="invalid-feedback">
+            <div
+              *ngIf="loginForm.controls.email.errors && loginForm.controls.email.errors['required'] || authUserAtrErrors.email.required">
+              {{'auth.login.e_mail_required' | translate}}</div>
+            <div *ngIf="authUserAtrErrors.email.wrongData">{{'auth.login.user_not_found' | translate}}</div>
+            <div *ngIf="authUserAtrErrors.email.notConfirmed">{{'auth.login.e_mail_not_confirmed' | translate}}</div>
+          </div>
+        </div>
+        <div class="input-field">
+          <!--
+              !! WARNING !!
+              Bugfix from https://github.com/primefaces/primeng/issues/10788
+              styleClass="p-password p-component p-inputwrapper p-input-icon-right"
+              Remove after update!
+          -->
+          <p-password type="password" formControlName="password" placeholder="{{'auth.login.password' | translate}}" [ngClass]="{ 'invalid-feedback-input': submitted && (
                             (loginForm.controls.password.errors && loginForm.controls.password.errors['required'] || authUserAtrErrors.password.required) ||
                             (authUserAtrErrors.password.wrongData)
                         )}" autocomplete="current-password" [toggleMask]="true" [feedback]="false"
-                        styleClass="p-password p-component p-inputwrapper p-input-icon-right"
-                        ></p-password>
-                    <div *ngIf="submitted" class="invalid-feedback">
-                        <div
-                            *ngIf="loginForm.controls.password.errors && loginForm.controls.password.errors['required'] || authUserAtrErrors.password.required">
-                            {{'auth.login.password_required' | translate}}</div>
-                        <div *ngIf="authUserAtrErrors.password.wrongData">{{'auth.login.wrong_password' | translate}}</div>
-                    </div>
-                </div>
-                <div class="login-form-submit">
-                    <button pButton label="{{'auth.login.login' | translate}}" class="btn login-form-submit-btn" (click)="login()"
-                        [disabled]="loginForm.invalid"></button>
-                </div>
-                <div class="login-form-sub-button-wrapper">
-                    <div class="login-form-sub-btn-wrapper">
-                        <button pButton label="{{'auth.login.register' | translate}}" class="btn login-form-sub-btn"
-                            (click)="register()"></button>
-                    </div>
-                    <div class="login-form-sub-btn-wrapper">
-                        <button pButton label="{{'auth.login.forgot_password' | translate}}"
-                            class="btn login-form-sub-btn login-form-sub-login-btn p-button-text"
-                            (click)="forgotPassword()"></button>
-                    </div>
-                </div>
-            </form>
+                      styleClass="p-password p-component p-inputwrapper p-input-icon-right"
+          ></p-password>
+          <div *ngIf="submitted" class="invalid-feedback">
+            <div
+              *ngIf="loginForm.controls.password.errors && loginForm.controls.password.errors['required'] || authUserAtrErrors.password.required">
+              {{'auth.login.password_required' | translate}}</div>
+            <div *ngIf="authUserAtrErrors.password.wrongData">{{'auth.login.wrong_password' | translate}}</div>
+          </div>
         </div>
+        <div class="login-form-submit">
+          <button pButton label="{{'auth.login.login' | translate}}" class="btn login-form-submit-btn" (click)="login()"
+                  [disabled]="loginForm.invalid"></button>
+        </div>
+        <div class="login-form-sub-button-wrapper" *ngIf="!code && !state">
+          <div class="login-form-sub-btn-wrapper">
+            <button pButton label="{{'auth.login.login_with_discord' | translate}}" class="btn login-form-sub-btn" (click)="discordLogin()"></button>
+          </div>
+        </div>
+        <div class="login-form-sub-button-wrapper">
+          <div class="login-form-sub-btn-wrapper">
+            <button pButton label="{{'auth.login.register' | translate}}" class="btn login-form-sub-btn"
+                    (click)="register()"></button>
+          </div>
+          <div class="login-form-sub-btn-wrapper">
+            <button pButton label="{{'auth.login.forgot_password' | translate}}"
+                    class="btn login-form-sub-btn login-form-sub-login-btn p-button-text"
+                    (click)="forgotPassword()"></button>
+          </div>
+        </div>
+      </form>
     </div>
+  </div>
 
-    <app-auth-header></app-auth-header>
-</section>
+  <app-auth-header></app-auth-header>
+</section>

kdb-web/src/app/modules/auth/components/login/login.component.ts

@@ -1,20 +1,21 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { AuthService } from 'src/app/services/auth/auth.service';
-import { AuthUserDTO } from 'src/app/models/auth/auth-user.dto';
-import { Router } from '@angular/router';
-import { catchError } from 'rxjs/operators';
-import { ErrorDTO } from 'src/app/models/error/error-dto';
-import { AuthErrorMessages } from 'src/app/models/auth/auth-error-messages.enum';
-import { ServiceErrorCode } from 'src/app/models/error/service-error-code.enum';
-import { AuthUserAtrErrors } from 'src/app/models/auth/auth-user-atr-errors';
-import { SpinnerService } from 'src/app/services/spinner/spinner.service';
-import { ThemeService } from 'src/app/services/theme/theme.service';
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
+import { AuthService } from "src/app/services/auth/auth.service";
+import { AuthUserDTO } from "src/app/models/auth/auth-user.dto";
+import { ActivatedRoute, Router } from "@angular/router";
+import { catchError } from "rxjs/operators";
+import { ErrorDTO } from "src/app/models/error/error-dto";
+import { AuthErrorMessages } from "src/app/models/auth/auth-error-messages.enum";
+import { ServiceErrorCode } from "src/app/models/error/service-error-code.enum";
+import { AuthUserAtrErrors } from "src/app/models/auth/auth-user-atr-errors";
+import { SpinnerService } from "src/app/services/spinner/spinner.service";
+import { ThemeService } from "src/app/services/theme/theme.service";
+import { throwError } from "rxjs";
 
 @Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  selector: "app-login",
+  templateUrl: "./login.component.html",
+  styleUrls: ["./login.component.scss"]
 })
 export class LoginComponent implements OnInit {
 
@@ -25,45 +26,83 @@ export class LoginComponent implements OnInit {
   submitted = false;
 
   authUserAtrErrors!: AuthUserAtrErrors;
+  code!: string;
+  state!: string;
+  user!: AuthUserDTO;
+  oAuthId!: string;
 
   constructor(
     private authService: AuthService,
     private formBuilder: FormBuilder,
     private router: Router,
     private spinnerService: SpinnerService,
-    private themeService: ThemeService
-  ) { }
+    private themeService: ThemeService,
+    private route: ActivatedRoute
+  ) {
+  }
 
   ngOnInit(): void {
     this.spinnerService.showSpinner();
     this.authService.isUserLoggedInAsync().then(result => {
       if (result) {
-        this.router.navigate(['/dashboard']);
+        this.router.navigate(["/dashboard"]);
+        return;
       }
 
+      this.checkDiscordLogin();
       this.initLoginForm();
       this.resetStateFlags();
       this.spinnerService.hideSpinner();
     });
   }
 
+  checkDiscordLogin() {
+    this.route.queryParams.pipe(catchError(err => {
+      this.spinnerService.hideSpinner();
+      this.router.navigate(["auth", "login"]).then(() => {
+      });
+      return throwError(() => err);
+    })).subscribe(params => {
+        if (!params["code"] || !params["state"]) {
+          this.spinnerService.hideSpinner();
+          return;
+        }
+
+        this.code = params["code"];
+        this.state = params["state"];
+        this.authService.discordLogin(this.code, this.state).pipe(catchError(err => {
+          this.spinnerService.hideSpinner();
+          this.router.navigate(["auth", "login"]).then(() => {
+          });
+          return throwError(() => err);
+        })).subscribe(token => {
+          this.authService.saveToken(token);
+          this.themeService.loadTheme();
+          this.themeService.loadMenu();
+          this.spinnerService.hideSpinner();
+          this.router.navigate(["/dashboard"]);
+        });
+      }
+    );
+  }
+
   resetStateFlags(): void {
     this.authUserAtrErrors = new AuthUserAtrErrors();
   }
 
   initLoginForm(): void {
     this.loginForm = this.formBuilder.group({
-      email: ['', [Validators.required, Validators.email]],
-      password: ['', [Validators.required, Validators.minLength(8)]]
+      email: ["", [Validators.required, Validators.email]],
+      password: ["", [Validators.required, Validators.minLength(8)]]
     });
   }
 
   register(): void {
-    this.router.navigate(['/auth/register']);
+    this.router.navigate(["/auth/register"]);
   }
 
   forgotPassword(): void {
-    this.router.navigate(['/auth/forgot-password']);
+    this.router.navigate(["/auth/forgot-password"]);
   }
 
   login(): void {
@@ -76,8 +115,8 @@ export class LoginComponent implements OnInit {
 
     this.spinnerService.showSpinner();
     const user: AuthUserDTO = {
-      firstName: '',
-      lastName: '',
+      firstName: "",
+      lastName: "",
       email: this.loginForm.value.email ?? null,
       password: this.loginForm.value.password ?? null
     };
@@ -107,8 +146,14 @@ export class LoginComponent implements OnInit {
         this.themeService.loadTheme();
         this.themeService.loadMenu();
         this.spinnerService.hideSpinner();
-        this.router.navigate(['/dashboard']);
+        this.router.navigate(["/dashboard"]);
       });
   }
 
+  discordLogin() {
+    this.authService.getDiscordAuthURL().subscribe(url => {
+      window.location.href = url.loginUrl;
+    });
+  }
+
 }

kdb-web/src/app/modules/auth/components/registration/registration.component.html

@@ -72,12 +72,6 @@
                   [disabled]="loginForm.invalid"></button>
         </div>
 
-        <div class="login-form-sub-button-wrapper" *ngIf="!code && !state">
-          <div class="login-form-sub-btn-wrapper">
-            <button pButton label="{{'auth.register.register_with_discord' | translate}}" class="btn login-form-sub-btn" (click)="discordLogin()"></button>
-          </div>
-        </div>
-
         <div class="login-form-sub-button-wrapper">
           <div class="login-form-sub-btn-wrapper">
             <button pButton label="{{'auth.register.login' | translate}}" class="btn login-form-sub-btn" (click)="login()"></button>

kdb-web/src/app/modules/auth/components/registration/registration.component.ts

@@ -34,14 +34,6 @@ export class RegistrationComponent implements OnInit {
     password: false
   };
 
-  showEMailConfirmation = false;
-  showEMailConfirmationError = false;
-
-  code!: string;
-  state!: string;
-  user!: AuthUserDTO;
-  oAuthId!: string;
-
   constructor(
     private authService: AuthService,
     private formBuilder: FormBuilder,
@@ -62,48 +54,7 @@ export class RegistrationComponent implements OnInit {
     this.confirmEMail();
     this.initData();
     this.spinnerService.showSpinner();
-    this.route.queryParams.pipe(catchError(err => {
-      this.spinnerService.hideSpinner();
-      this.router.navigate(["auth", "login"]).then(() => {
-      });
-      return throwError(() => err);
-    })).subscribe(params => {
-        if (!params["code"] || !params["state"]) {
-          this.spinnerService.hideSpinner();
-          return;
-        }
-
-        if (this.user) {
-          this.spinnerService.hideSpinner();
-          return;
-        }
-
-        this.code = params["code"];
-        this.state = params["state"];
-        this.authService.discordCreateUser(this.code, this.state).pipe(catchError(err => {
-          this.spinnerService.hideSpinner();
-          this.router.navigate(["auth", "login"]).then(() => {
-          });
-          return throwError(() => err);
-        })).subscribe(oAuthDTO => {
-            if (oAuthDTO) {
-              this.user = oAuthDTO.user;
-              this.oAuthId = oAuthDTO.oAuthId;
-            }
-            if (this.user && !this.oAuthId) {
-              this.router.navigate(["auth", "login"]).then(() => {
-              });
-              return;
-            }
-
-            this.router.navigate(["auth", "register"]).then(() => {
-            });
-            this.initData();
-          }
-        );
-        this.initData();
-      }
-    );
+    this.initData();
   }
 
   initData() {
@@ -126,18 +77,13 @@ export class RegistrationComponent implements OnInit {
 
   initLoginForm(): void {
     this.loginForm = this.formBuilder.group({
-      firstName: [this.user ? this.user.firstName : "", Validators.required],
-      lastName: [this.user ? this.user.lastName : "", Validators.required],
-      email: [this.user ? this.user.email : "", [Validators.required, Validators.email]],
-      emailRepeat: [this.user ? this.user.email : "", [Validators.required, Validators.email]],
-      password: [this.user ? this.user.password : "", [Validators.required, Validators.minLength(8)]],
-      passwordRepeat: [this.user ? this.user.password : "", [Validators.required, Validators.minLength(8)]]
+      firstName: ["", Validators.required],
+      lastName: ["", Validators.required],
+      email: ["", [Validators.required, Validators.email]],
+      emailRepeat: ["", [Validators.required, Validators.email]],
+      password: ["", [Validators.required, Validators.minLength(8)]],
+      passwordRepeat: ["", [Validators.required, Validators.minLength(8)]]
     });
-
-    if (this.user) {
-      this.loginForm.controls.email.disable();
-      this.loginForm.controls.emailRepeat.disable();
-    }
   }
 
   register(): void {
@@ -160,42 +106,10 @@ export class RegistrationComponent implements OnInit {
     }
 
     this.spinnerService.showSpinner();
-    if (this.user && this.oAuthId) {
-      this.registerWithOAuth();
-      return;
-    }
 
     this.registerLocal();
   }
 
-  private registerWithOAuth() {
-    const oAuthDTO: OAuthDTO = {
-      user: {
-        firstName: this.loginForm.value.firstName ?? this.user.firstName,
-        lastName: this.loginForm.value.lastName ?? this.user.lastName,
-        email: this.loginForm.value.email ?? this.user.email,
-        password: this.loginForm.value.password ?? null
-      },
-      oAuthId: this.oAuthId
-    };
-    this.authService.discordRegister(oAuthDTO)
-      .pipe(catchError(error => {
-        if (error.error !== null) {
-          const err: ErrorDTO = error.error;
-
-          if (err.errorCode === ServiceErrorCode.InvalidUser && err.message === AuthErrorMessages.UserAlreadyExists) {
-            this.authUserAtrErrors.email.wrongData = true;
-          }
-        }
-        this.spinnerService.hideSpinner();
-        throw error;
-      }))
-      .subscribe(resp => {
-        this.spinnerService.hideSpinner();
-        this.router.navigate(["/auth/login"]);
-      });
-  }
-
   private registerLocal() {
     const user: AuthUserDTO = {
       firstName: this.loginForm.value.firstName ?? null,
@@ -237,10 +151,4 @@ export class RegistrationComponent implements OnInit {
         });
     }
   }
-
-  discordLogin() {
-    this.authService.getDiscordAuthURL().subscribe(url => {
-      window.location.href = url.loginUrl;
-    });
-  }
 }

kdb-web/src/app/services/auth/auth.service.ts

@@ -167,6 +167,7 @@ export class AuthService {
       })
     });
   }
+
   discordCreateUser(code: string, state: string) {
     return this.http.get<OAuthDTO>(`${this.appsettings.getApiURL()}/api/auth/discord/create-user?code=${code}&state=${state}`, {
       headers: new HttpHeaders({
@@ -175,6 +176,14 @@ export class AuthService {
     });
   }
 
+  discordLogin(code: string, state: string): Observable<TokenDTO> {
+    return this.http.get<TokenDTO>(`${this.appsettings.getApiURL()}/api/auth/discord/login?code=${code}&state=${state}`, {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json'
+      })
+    });
+  }
+
   // /api/auth/discord/register?code=
   discordRegister(oAuthDTO: OAuthDTO) {
     return this.http.post(`${this.appsettings.getApiURL()}/api/auth/discord/register`, oAuthDTO, {