Feature: Added Login / Register Feature #3
|
@ -1,7 +1,7 @@
|
||||||
<div id="background">
|
<!-- <div id="background">
|
||||||
<div class="img-zone">
|
<div class="img-zone">
|
||||||
<div class="img-wrapper">
|
<div class="img-wrapper">
|
||||||
<h1 (click)="DEBUG_restSignal()">Hi, Welcome to Ticket App.</h1>
|
<h1>Hi, Welcome to Ticket App.</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-zone">
|
<div class="content-zone">
|
||||||
|
@ -57,6 +57,11 @@
|
||||||
<div class="signup">
|
<div class="signup">
|
||||||
<button pButton type="submit" label="Anmelden"></button>
|
<button pButton type="submit" label="Anmelden"></button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="change-mask">
|
||||||
|
<a (click)="switchMask()" (keyup.enter)="switchMask()" tabindex="0">
|
||||||
|
Kein Account? Erstellen Sie jetzt KOSTENFREI einen!
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
@ -98,8 +103,100 @@
|
||||||
type="submit"
|
type="submit"
|
||||||
label="✨ Jetzt KOSTENFREI loslegen ✨"></button>
|
label="✨ Jetzt KOSTENFREI loslegen ✨"></button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="change-mask">
|
||||||
|
<a (click)="switchMask()" (keyup.enter)="switchMask()" tabindex="0">
|
||||||
|
Schon einen Account? Hier einloggen
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<div id="background">
|
||||||
|
<div class="img-zone">
|
||||||
|
<div class="img-wrapper">
|
||||||
|
<h1>Hi, Welcome to Ticket App.</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-zone">
|
||||||
|
<h1>
|
||||||
|
@if (this.isSignupSignal()) {
|
||||||
|
Anmelden
|
||||||
|
} @else if (this.isRegisterSignal()) {
|
||||||
|
Registrieren
|
||||||
|
} @else {
|
||||||
|
Erste Schritte
|
||||||
|
}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
@if (this.isDisplayButtons()) {
|
||||||
|
<div class="action">
|
||||||
|
<button
|
||||||
|
pButton
|
||||||
|
type="button"
|
||||||
|
label="Anmelden"
|
||||||
|
(click)="toggleAction('signup')"></button>
|
||||||
|
<button
|
||||||
|
pButton
|
||||||
|
type="button"
|
||||||
|
label="Registrieren"
|
||||||
|
(click)="toggleAction('register')"></button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="register-wrapper"
|
||||||
|
*ngIf="isSignupSignal() || isRegisterSignal()">
|
||||||
|
<form [formGroup]="form" *ngIf="form" (ngSubmit)="onSubmit()">
|
||||||
|
<div class="e-mail">
|
||||||
|
<div class="label">
|
||||||
|
<label for="email">E-Mail</label>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
pInputText
|
||||||
|
id="email"
|
||||||
|
formControlName="email"
|
||||||
|
aria-describedby="e-mail" />
|
||||||
|
</div>
|
||||||
|
<div class="password">
|
||||||
|
<div class="label">
|
||||||
|
<label for="password">Password</label>
|
||||||
|
</div>
|
||||||
|
<p-password
|
||||||
|
class="custom-p-password"
|
||||||
|
id="password"
|
||||||
|
formControlName="password"
|
||||||
|
aria-describedby="password"
|
||||||
|
[toggleMask]="true"></p-password>
|
||||||
|
</div>
|
||||||
|
@if (this.isRegisterSignal()) {
|
||||||
|
<div class="terms">
|
||||||
|
<p-checkbox
|
||||||
|
formControlName="terms"
|
||||||
|
label="Ich habe die AGB gelesen und stimme zu."
|
||||||
|
name="terms"
|
||||||
|
[binary]="true" />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<div class="signup">
|
||||||
|
<button
|
||||||
|
pButton
|
||||||
|
type="submit"
|
||||||
|
[label]="
|
||||||
|
isSignupSignal() ? 'Anmelden' : '✨ Jetzt KOSTENFREI loslegen ✨'
|
||||||
|
"></button>
|
||||||
|
</div>
|
||||||
|
<div class="change-mask">
|
||||||
|
<a (click)="switchMask()" (keyup.enter)="switchMask()" tabindex="0">
|
||||||
|
@if (this.isSignupSignal()) {
|
||||||
|
Kein Account? Erstellen Sie jetzt KOSTENFREI einen!
|
||||||
|
} @else {
|
||||||
|
Schon einen Account? Hier einloggen
|
||||||
|
}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -82,5 +82,13 @@
|
||||||
min-width: 500px;
|
min-width: 500px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.change-mask {
|
||||||
|
padding-top: 1.33em;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
a {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,7 +8,6 @@ import {
|
||||||
effect,
|
effect,
|
||||||
} from '@angular/core';
|
} from '@angular/core';
|
||||||
import {
|
import {
|
||||||
AbstractControl,
|
|
||||||
FormBuilder,
|
FormBuilder,
|
||||||
FormControl,
|
FormControl,
|
||||||
FormGroup,
|
FormGroup,
|
||||||
|
@ -97,14 +96,16 @@ export class RegisterRootComponent implements OnInit {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public DEBUG_restSignal(): void {
|
public switchMask(): void {
|
||||||
this.isRegisterSignal.set(false);
|
this.resetFormValidation();
|
||||||
this.isSignupSignal.set(false);
|
|
||||||
this.isDisplayButtons.set(true);
|
|
||||||
|
|
||||||
this.emailInvalid.set(null);
|
if (this.isSignupSignal()) {
|
||||||
this.passwordInvalid.set(null);
|
this.isSignupSignal.set(false);
|
||||||
this.termsInvalid.set(null);
|
this.isRegisterSignal.set(true);
|
||||||
|
} else if (this.isRegisterSignal()) {
|
||||||
|
this.isSignupSignal.set(true);
|
||||||
|
this.isRegisterSignal.set(false);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private initializeForm(): void {
|
private initializeForm(): void {
|
||||||
|
@ -130,10 +131,10 @@ export class RegisterRootComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
private setupEmailValueChanges(): void {
|
private setupEmailValueChanges(): void {
|
||||||
const emailControl = this.form?.get('email') as AbstractControl;
|
const emailControl = this.form?.get('email');
|
||||||
|
|
||||||
emailControl.valueChanges.subscribe((value: string) => {
|
emailControl?.valueChanges.subscribe((value: string) => {
|
||||||
if (value.length >= 4) {
|
if (value?.length >= 4) {
|
||||||
emailControl.setValidators([
|
emailControl.setValidators([
|
||||||
Validators.required,
|
Validators.required,
|
||||||
customEmailValidator(),
|
customEmailValidator(),
|
||||||
|
@ -149,10 +150,10 @@ export class RegisterRootComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
private setupPasswordValueChanges(): void {
|
private setupPasswordValueChanges(): void {
|
||||||
const passwordControl = this.form?.get('password') as AbstractControl;
|
const passwordControl = this.form?.get('password');
|
||||||
|
|
||||||
passwordControl.valueChanges.subscribe((value: string) => {
|
passwordControl?.valueChanges.subscribe((value: string) => {
|
||||||
if (value.length >= 8) {
|
if (value?.length >= 8) {
|
||||||
passwordControl.setValidators([
|
passwordControl.setValidators([
|
||||||
Validators.required,
|
Validators.required,
|
||||||
customPasswordValidator(),
|
customPasswordValidator(),
|
||||||
|
@ -179,6 +180,23 @@ export class RegisterRootComponent implements OnInit {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private resetFormValidation(): void {
|
||||||
|
['email', 'password', 'terms'].forEach((controlName: string) => {
|
||||||
|
this.resetControlValidation(controlName);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private resetControlValidation(controlName: string): void {
|
||||||
|
const control = this.form?.get(controlName);
|
||||||
|
|
||||||
|
if (control) {
|
||||||
|
control.reset();
|
||||||
|
control.markAsPristine();
|
||||||
|
control.markAsUntouched();
|
||||||
|
control.updateValueAndValidity();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private signin(data: unknown): void {
|
private signin(data: unknown): void {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,6 +4,10 @@ export function customEmailValidator(): ValidatorFn {
|
||||||
return (control: AbstractControl): ValidationErrors | null => {
|
return (control: AbstractControl): ValidationErrors | null => {
|
||||||
const value = control.value;
|
const value = control.value;
|
||||||
|
|
||||||
|
if (!value) {
|
||||||
|
return { emailInvalid: true };
|
||||||
|
}
|
||||||
|
|
||||||
if (value.length < 4) {
|
if (value.length < 4) {
|
||||||
return { emailTooShort: true };
|
return { emailTooShort: true };
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,6 +4,10 @@ export function customPasswordValidator(): ValidatorFn {
|
||||||
return (control: AbstractControl): ValidationErrors | null => {
|
return (control: AbstractControl): ValidationErrors | null => {
|
||||||
const value = control.value;
|
const value = control.value;
|
||||||
|
|
||||||
|
if (!value) {
|
||||||
|
return { passwordTooShort: true };
|
||||||
|
}
|
||||||
|
|
||||||
return value.length >= 8 ? null : { passwordTooShort: true };
|
return value.length >= 8 ? null : { passwordTooShort: true };
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue