Feature: Added Login / Register Feature #3
|
@ -1,7 +1,7 @@
|
|||
<div id="background">
|
||||
<!-- <div id="background">
|
||||
<div class="img-zone">
|
||||
<div class="img-wrapper">
|
||||
<h1 (click)="DEBUG_restSignal()">Hi, Welcome to Ticket App.</h1>
|
||||
<h1>Hi, Welcome to Ticket App.</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-zone">
|
||||
|
@ -57,6 +57,11 @@
|
|||
<div class="signup">
|
||||
<button pButton type="submit" label="Anmelden"></button>
|
||||
</div>
|
||||
<div class="change-mask">
|
||||
<a (click)="switchMask()" (keyup.enter)="switchMask()" tabindex="0">
|
||||
Kein Account? Erstellen Sie jetzt KOSTENFREI einen!
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
|
@ -98,8 +103,100 @@
|
|||
type="submit"
|
||||
label="✨ Jetzt KOSTENFREI loslegen ✨"></button>
|
||||
</div>
|
||||
<div class="change-mask">
|
||||
<a (click)="switchMask()" (keyup.enter)="switchMask()" tabindex="0">
|
||||
Schon einen Account? Hier einloggen
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
|
|
|
@ -82,5 +82,13 @@
|
|||
min-width: 500px;
|
||||
}
|
||||
}
|
||||
.change-mask {
|
||||
padding-top: 1.33em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,7 +8,6 @@ import {
|
|||
effect,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
AbstractControl,
|
||||
FormBuilder,
|
||||
FormControl,
|
||||
FormGroup,
|
||||
|
@ -97,14 +96,16 @@ export class RegisterRootComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
public DEBUG_restSignal(): void {
|
||||
this.isRegisterSignal.set(false);
|
||||
this.isSignupSignal.set(false);
|
||||
this.isDisplayButtons.set(true);
|
||||
public switchMask(): void {
|
||||
this.resetFormValidation();
|
||||
|
||||
this.emailInvalid.set(null);
|
||||
this.passwordInvalid.set(null);
|
||||
this.termsInvalid.set(null);
|
||||
if (this.isSignupSignal()) {
|
||||
this.isSignupSignal.set(false);
|
||||
this.isRegisterSignal.set(true);
|
||||
} else if (this.isRegisterSignal()) {
|
||||
this.isSignupSignal.set(true);
|
||||
this.isRegisterSignal.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
private initializeForm(): void {
|
||||
|
@ -130,10 +131,10 @@ export class RegisterRootComponent implements OnInit {
|
|||
}
|
||||
|
||||
private setupEmailValueChanges(): void {
|
||||
const emailControl = this.form?.get('email') as AbstractControl;
|
||||
const emailControl = this.form?.get('email');
|
||||
|
||||
emailControl.valueChanges.subscribe((value: string) => {
|
||||
if (value.length >= 4) {
|
||||
emailControl?.valueChanges.subscribe((value: string) => {
|
||||
if (value?.length >= 4) {
|
||||
emailControl.setValidators([
|
||||
Validators.required,
|
||||
customEmailValidator(),
|
||||
|
@ -149,10 +150,10 @@ export class RegisterRootComponent implements OnInit {
|
|||
}
|
||||
|
||||
private setupPasswordValueChanges(): void {
|
||||
const passwordControl = this.form?.get('password') as AbstractControl;
|
||||
const passwordControl = this.form?.get('password');
|
||||
|
||||
passwordControl.valueChanges.subscribe((value: string) => {
|
||||
if (value.length >= 8) {
|
||||
passwordControl?.valueChanges.subscribe((value: string) => {
|
||||
if (value?.length >= 8) {
|
||||
passwordControl.setValidators([
|
||||
Validators.required,
|
||||
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 {
|
||||
console.log(data);
|
||||
}
|
||||
|
|
|
@ -4,6 +4,10 @@ export function customEmailValidator(): ValidatorFn {
|
|||
return (control: AbstractControl): ValidationErrors | null => {
|
||||
const value = control.value;
|
||||
|
||||
if (!value) {
|
||||
return { emailInvalid: true };
|
||||
}
|
||||
|
||||
if (value.length < 4) {
|
||||
return { emailTooShort: true };
|
||||
}
|
||||
|
|
|
@ -4,6 +4,10 @@ export function customPasswordValidator(): ValidatorFn {
|
|||
return (control: AbstractControl): ValidationErrors | null => {
|
||||
const value = control.value;
|
||||
|
||||
if (!value) {
|
||||
return { passwordTooShort: true };
|
||||
}
|
||||
|
||||
return value.length >= 8 ? null : { passwordTooShort: true };
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue