Added logic to register by discord #70
This commit is contained in:
@@ -1,85 +1,91 @@
|
||||
<section class="login-wrapper">
|
||||
<div class="login-form-wrapper register-form-wrapper">
|
||||
<div class="login-form">
|
||||
<form [formGroup]="loginForm">
|
||||
<h1>sh-edraft.de</h1>
|
||||
<div class="input-field">
|
||||
<input type="text" pInputText formControlName="firstName" placeholder="{{'auth.register.first_name' | translate}}"
|
||||
autocomplete="given-name">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div
|
||||
*ngIf="loginForm.controls.firstName.errors && loginForm.controls.firstName.errors['required'] || authUserAtrErrors.firstName.required">
|
||||
{{'auth.register.first_name_required' | translate}}</div>
|
||||
<div *ngIf="authUserAtrErrors.firstName.wrongData">{{'auth.register.first_name_invalid' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="text" pInputText formControlName="lastName" placeholder="{{'auth.register.last_name' | translate}}"
|
||||
autocomplete="family-name">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div
|
||||
*ngIf="loginForm.controls.lastName.errors && loginForm.controls.lastName.errors['required'] || authUserAtrErrors.lastName.required">
|
||||
{{'auth.register.last_name_required' | translate}}</div>
|
||||
<div *ngIf="authUserAtrErrors.lastName.wrongData">{{'auth.register.last_name_invalid' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="email" pInputText formControlName="email" placeholder="{{'auth.register.e_mail' | translate}}"
|
||||
[ngClass]="{ 'invalid-feedback-input': submitted && (authUserAtrErrors.email.wrongData || loginForm.controls.email.errors && loginForm.controls.email.errors['required'] || authUserAtrErrors.email.required)}"
|
||||
autocomplete="username email">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div
|
||||
*ngIf="loginForm.controls.email.errors && loginForm.controls.email.errors['required'] || authUserAtrErrors.email.required">
|
||||
{{'auth.register.e_mail_required' | translate}}</div>
|
||||
<div *ngIf="authUserAtrErrors.email.wrongData">{{'auth.register.user_already_exists' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="email" pInputText formControlName="emailRepeat" placeholder="{{'auth.register.repeat_e_mail' | translate}}"
|
||||
[ngClass]="{ 'invalid-feedback-input': submitted && repeatErrors.email}">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div *ngIf="repeatErrors.email">{{'auth.register.e_mails_not_match' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<p-password type="password" formControlName="password" placeholder="{{'auth.register.password' | translate}}"
|
||||
ngClass="{ 'invalid-feedback': submitted && loginForm.controls.password.errors && loginForm.controls.password.errors['required'] || authUserAtrErrors.password.required}"
|
||||
autocomplete="new-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.register.password_required' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<p-password type="password" formControlName="passwordRepeat" placeholder="{{'auth.register.repeat_password' | translate}}"
|
||||
[ngClass]="{ 'invalid-feedback-input': submitted && repeatErrors.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="repeatErrors.password">{{'auth.register.passwords_not_match' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-form-submit">
|
||||
<button pButton label="{{'auth.register.register' | translate}}" class="btn login-form-submit-btn" (click)="register()"
|
||||
[disabled]="loginForm.invalid"></button>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="login-form-wrapper register-form-wrapper">
|
||||
<div class="login-form">
|
||||
<form [formGroup]="loginForm">
|
||||
<h1>sh-edraft.de</h1>
|
||||
<div class="input-field">
|
||||
<input type="text" pInputText formControlName="firstName" placeholder="{{'auth.register.first_name' | translate}}"
|
||||
autocomplete="given-name">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div
|
||||
*ngIf="loginForm.controls.firstName.errors && loginForm.controls.firstName.errors['required'] || authUserAtrErrors.firstName.required">
|
||||
{{'auth.register.first_name_required' | translate}}</div>
|
||||
<div *ngIf="authUserAtrErrors.firstName.wrongData">{{'auth.register.first_name_invalid' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<app-auth-header></app-auth-header>
|
||||
</section>
|
||||
<div class="input-field">
|
||||
<input type="text" pInputText formControlName="lastName" placeholder="{{'auth.register.last_name' | translate}}"
|
||||
autocomplete="family-name">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div
|
||||
*ngIf="loginForm.controls.lastName.errors && loginForm.controls.lastName.errors['required'] || authUserAtrErrors.lastName.required">
|
||||
{{'auth.register.last_name_required' | translate}}</div>
|
||||
<div *ngIf="authUserAtrErrors.lastName.wrongData">{{'auth.register.last_name_invalid' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="email" pInputText formControlName="email" placeholder="{{'auth.register.e_mail' | translate}}"
|
||||
[ngClass]="{ 'invalid-feedback-input': submitted && (authUserAtrErrors.email.wrongData || loginForm.controls.email.errors && loginForm.controls.email.errors['required'] || authUserAtrErrors.email.required)}"
|
||||
autocomplete="username email">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div
|
||||
*ngIf="loginForm.controls.email.errors && loginForm.controls.email.errors['required'] || authUserAtrErrors.email.required">
|
||||
{{'auth.register.e_mail_required' | translate}}</div>
|
||||
<div *ngIf="authUserAtrErrors.email.wrongData">{{'auth.register.user_already_exists' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="email" pInputText formControlName="emailRepeat" placeholder="{{'auth.register.repeat_e_mail' | translate}}"
|
||||
[ngClass]="{ 'invalid-feedback-input': submitted && repeatErrors.email}">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div *ngIf="repeatErrors.email">{{'auth.register.e_mails_not_match' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<p-password type="password" formControlName="password" placeholder="{{'auth.register.password' | translate}}"
|
||||
ngClass="{ 'invalid-feedback': submitted && loginForm.controls.password.errors && loginForm.controls.password.errors['required'] || authUserAtrErrors.password.required}"
|
||||
autocomplete="new-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.register.password_required' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<p-password type="password" formControlName="passwordRepeat" placeholder="{{'auth.register.repeat_password' | translate}}"
|
||||
[ngClass]="{ 'invalid-feedback-input': submitted && repeatErrors.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="repeatErrors.password">{{'auth.register.passwords_not_match' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-form-submit">
|
||||
<button pButton label="{{'auth.register.register' | translate}}" class="btn login-form-submit-btn" (click)="register()"
|
||||
[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>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<app-auth-header></app-auth-header>
|
||||
</section>
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { AuthErrorMessages } from 'src/app/models/auth/auth-error-messages.enum';
|
||||
import { AuthUserDTO } from 'src/app/models/auth/auth-user.dto';
|
||||
import { AuthUserAtrErrors } from 'src/app/models/auth/auth-user-atr-errors';
|
||||
import { ErrorDTO } from 'src/app/models/error/error-dto';
|
||||
import { ServiceErrorCode } from 'src/app/models/error/service-error-code.enum';
|
||||
import { AuthService } from 'src/app/services/auth/auth.service';
|
||||
import { SpinnerService } from 'src/app/services/spinner/spinner.service';
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { catchError, finalize } from "rxjs/operators";
|
||||
import { AuthErrorMessages } from "src/app/models/auth/auth-error-messages.enum";
|
||||
import { AuthUserDTO } from "src/app/models/auth/auth-user.dto";
|
||||
import { AuthUserAtrErrors } from "src/app/models/auth/auth-user-atr-errors";
|
||||
import { ErrorDTO } from "src/app/models/error/error-dto";
|
||||
import { ServiceErrorCode } from "src/app/models/error/service-error-code.enum";
|
||||
import { AuthService } from "src/app/services/auth/auth.service";
|
||||
import { SpinnerService } from "src/app/services/spinner/spinner.service";
|
||||
import { throwError } from "rxjs";
|
||||
import { OAuthDTO } from "../../../../models/auth/oauth.dto";
|
||||
|
||||
@Component({
|
||||
selector: 'app-registration',
|
||||
templateUrl: './registration.component.html',
|
||||
styleUrls: ['./registration.component.scss']
|
||||
selector: "app-registration",
|
||||
templateUrl: "./registration.component.html",
|
||||
styleUrls: ["./registration.component.scss"]
|
||||
})
|
||||
export class RegistrationComponent implements OnInit {
|
||||
|
||||
@@ -35,6 +37,11 @@ export class RegistrationComponent implements OnInit {
|
||||
showEMailConfirmation = false;
|
||||
showEMailConfirmationError = false;
|
||||
|
||||
code!: string;
|
||||
state!: string;
|
||||
user!: AuthUserDTO;
|
||||
oAuthId!: string;
|
||||
|
||||
constructor(
|
||||
private authService: AuthService,
|
||||
private formBuilder: FormBuilder,
|
||||
@@ -45,16 +52,64 @@ export class RegistrationComponent implements OnInit {
|
||||
this.spinnerService.showSpinner();
|
||||
this.authService.isUserLoggedInAsync().then(res => {
|
||||
if (res) {
|
||||
this.router.navigate(['/dashboard']);
|
||||
this.router.navigate(["/dashboard"]);
|
||||
}
|
||||
this.spinnerService.hideSpinner();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
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();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
initData() {
|
||||
this.initLoginForm();
|
||||
this.resetStateFlags();
|
||||
this.confirmEMail();
|
||||
this.spinnerService.hideSpinner();
|
||||
}
|
||||
|
||||
resetStateFlags(): void {
|
||||
@@ -66,18 +121,23 @@ export class RegistrationComponent implements OnInit {
|
||||
}
|
||||
|
||||
login(): void {
|
||||
this.router.navigate(['/auth/login']);
|
||||
this.router.navigate(["/auth/login"]);
|
||||
}
|
||||
|
||||
initLoginForm(): void {
|
||||
this.loginForm = this.formBuilder.group({
|
||||
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)]]
|
||||
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)]]
|
||||
});
|
||||
|
||||
if (this.user) {
|
||||
this.loginForm.controls.email.disable();
|
||||
this.loginForm.controls.emailRepeat.disable();
|
||||
}
|
||||
}
|
||||
|
||||
register(): void {
|
||||
@@ -100,13 +160,49 @@ 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,
|
||||
lastName: this.loginForm.value.lastName ?? null,
|
||||
email: this.loginForm.value.email ?? null,
|
||||
password: this.loginForm.value.password ?? null
|
||||
};
|
||||
|
||||
this.authService.register(user)
|
||||
.pipe(catchError(error => {
|
||||
if (error.error !== null) {
|
||||
@@ -121,24 +217,30 @@ export class RegistrationComponent implements OnInit {
|
||||
}))
|
||||
.subscribe(resp => {
|
||||
this.spinnerService.hideSpinner();
|
||||
this.router.navigate(['/auth/login']);
|
||||
this.router.navigate(["/auth/login"]);
|
||||
});
|
||||
}
|
||||
|
||||
confirmEMail(): void {
|
||||
const id = this.route.snapshot.params['id'];
|
||||
const id = this.route.snapshot.params["id"];
|
||||
if (id) {
|
||||
this.spinnerService.showSpinner();
|
||||
this.authService.confirmEMail(id)
|
||||
.pipe(catchError(error => {
|
||||
this.router.navigate(['/auth/login']);
|
||||
this.router.navigate(["/auth/login"]);
|
||||
this.spinnerService.hideSpinner();
|
||||
throw error;
|
||||
}))
|
||||
.subscribe(resp => {
|
||||
this.spinnerService.hideSpinner();
|
||||
this.router.navigate(['/auth/login']);
|
||||
this.router.navigate(["/auth/login"]);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
discordLogin() {
|
||||
this.authService.getDiscordAuthURL().subscribe(url => {
|
||||
window.location.href = url.loginUrl;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user