Added discord login & removed discord register #128
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user